試行錯誤ページ570 ブロリバ(ワク入り)修飾矢印を時間差で出現、消す2


























 

最初はfunction setHref、id=shushokuLinkが同じだったので同時に作動していたのでsetHref2、shushokuLink2を使っている
→試行571で動くものをまとめている

 
 
modorushushokuyajirushiappear00
リンクでcss/modorushushokuyajirushiappear00.css(赤い点3つ)を呼び出している

 










予想通りの結果にならないボタンが多数あった
 
 
 
 
 
 




【その犬】の文字色は変わるが、dotの色は変わらない
 
文型の説明時の 修飾の矢印を考える

☆transition参考サイト https://web-designer.cman.jp/css_ref/abc_list/transition/
 
 
左側border-bottom: 6px solid yellowgreen 右側class=modorushushokuyajirushilong0longword

the dog which ~ ~ ~
 
 
左側はなし 右側class=modoruyajirushi1 border-bottom: 6px solid yellowgreen
 
 
 
 

試行566を進化させる

問題1は、552を進化させて、矢印のタイプを変更した。しかしこのシステムはスマホでは画面オーバーの可能性がある

問題2は、試行567を利用して、もどる矢印を無しにして、矢印回転だけで誘導する

この方法なら、試行565に比べて、上下移動の矢印が見えない

試行567で、left-futomojilined-240no3から4にfadeinを使っているので、futomojilined-240no6を使っている。

function showimg■no1 iconmonstr-arrow-down-futomojilined-240no5.png(太字矢印、上向き・右向き・下向き)

function showimg■no2 futomojilined-240no6

function showimg■no3 iconmonstr-arrow-19-240transparent.png(透明の画像)

 
 
 
 
 
 
 
(1) I met Tom at school last week.  
 

英文を訳してみよう

 

 
まず 英文を 主語・動詞・かたまり の部分 に分けます。
 
英文を日本語にするときは、さいしょに 主語 を訳します。
 
そのあとは、一番うしろから 前へ戻りながら、かたまりを 訳していきます。
 

 

 
上のように説明するとなんとなく難しそうですよね。
 
でも、図の説明を見れば とてもカンタンです。
 

 
『全訳:』の下にあるボタンを どんどんクリックしてください。

訳し方(訳す順番)をしっかり理解できますよ。

fa-arrow-left example2no1赤 arrowleftrotate90degyajirushileft0px、shikou523で使用。最初と最後のセルに注目させる矢印、padding:10px;top:115px;

fa-arrow-right example2no2緑

fa-arrow-up example2no3黒

fa-arrow-down example2no4青






 

↓classにfa-arrow-circle-up,arrowcircleupyajirushi1だと上下移動する(cssでtopの指定なし、指定すると動かない)

classにyajirushiido2があると上下移動しない(cssでtopの指定あり←削除すれば動く)
classにfa fa-mouse-pointerがあると上下移動しない(cssでtopの指定あり←削除すれば動く)

classにyajirushiido3,leftの指定0pxあっても右移動はする
回転はspanで挟んでいるとできない、div,pで挟んであると回転するが、大きい円を描いて回転する(fontsizeは関係なし)
→width,heightを指定するとその場で回転にできる(文字サイズである30ptにするとほぼその場で回転するが、上側を軸にして回転する。0pxとか100pxとかにすると大きい回転になってしまう。)

結論:cssでの、leftの指定は右移動に影響しないが、topの指定は上下移動を不可にする。
普通の矢印(↑→↓←)は文字の中心ではなく、上部を軸にして回転するので使えない











右移動は動くが、上下移動が動かない


第1問(もともとyajirushimigiido1~10だったが、yajirushiido1~10に変更済み、各種jsで矢印を適切な位置にするか検討する)
5連続矢印もフォントオーサムを使う(セルの上と下の矢印位置を合わせるため30pt→32ptに統一)
もどる矢印はそのまま大きくするとセルが上に上がってしまうのでscaleで大きく表示している

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第2問

試行567を利用して、もどる矢印を無しにして、矢印回転だけで誘導する

この方法なら、試行565に比べて、上下移動の矢印が見えない

I met Tom at school last week. を訳してみます。 

 
 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第3問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第4問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第5問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第6問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第7問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第8問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第9問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

第10問
I met Tom at school last week. を訳してみます。 

&I&

met

Tom

at school

last week

 . 

全訳: 『  私は 先週 学校で トムに 会いました  。』

 

 

 

 
produced by eigoblock

IMG_blokkun-minix2