試行錯誤ページ567 ブロリバ(ワク入り)試行552を右上下移動化3PNG画像時間差出現

























 
 
 
 
 
 

試行566を進化させる

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

問題2は、試行566を利用して時間差でPNG画像を出現させる
cssでanimation: fadeIn 1.0sから5.0sで調整 forwards;opacity:100%;

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

function showimg■no2 iconmonstr-arrow-55-240rotate48degrees.png(もどる矢印)

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

function showimg■no4 iconmonstr-arrow-left-futomojilined-240no4.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問

試行566を利用して時間差でPNG画像を出現させる
animation: fadeIn 1.0sから5.0sで調整 forwards;opacity:100%;

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