試行552を右上下移動化する

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

問題２はfa-arrow-left,right,up,downを使い、矢印を連動させて　もどる矢印の代わりにする

 
 
 
 
 
 
 
（１） 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の指定は上下移動を不可にする。
普通の矢印（↑→↓←）は文字の中心ではなく、上部を軸にして回転するので使えない

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

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

第２問(fa-arrow-left,right,up,downを使って完成→コピペして10問を作るか検討する)

矢印を連動させてもどる矢印の代わりにする

『一番うしろのかたまりを訳します』のとき、4番目の矢印を下げると、初動が見えてしまう

※試行566では、フォントオーサムを画像化して、画像入れ替えを作った
→『一番うしろのかたまりを訳します』のとき、4番目の矢印を下げても、初動が見えない

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

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

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

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

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

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

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

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

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

 
produced by eigoblock