試行錯誤ページ566 ブロリバ（ワク入り）【セル５つ完成版】試行552を右上下移動化2PNG画像入れ替え
ポップアップ風ワンポイント解説を作る(→試行598で検証)
|
|
↑試行167から
↑iconmonstr-arrowright-12-240.png
↑iconmonstr-arrow-55-240rotate48degrees.png
試行565を進化させる
問題１は、552を進化させて、矢印のタイプを変更した。しかしこのシステムはスマホでは画面オーバーの可能性がある
問題２の矢印をフォントオーサムPNG画像入れ替え（右矢印をもどる矢印に）を使ってつくる
iconmonstrでPNG画像つくる。
https://iconmonstr.com/
そのまま作れば背景色は透明。
ペイント3Dで画像を回転させて透明のまま作る。
普通のペイントで編集すると背景色が白くなってしまう。
（１） 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で大きく表示している
全訳： 『 私は 先週 学校で トムに 会いました 。』 |
第２問
矢印をフォントオーサムPNG画像入れ替え（右矢印をもどる矢印に）を使ってつくった
試行565(ふつうのフォントオーサム)では『一番うしろのかたまりを訳します』のとき、4番目の矢印を下げると、初動が見えてしまうが
ここ（PNG画像のフォントオーサム）では初動が見えない（画像だから？）
その分、ボタンクリックでのもどる矢印の出現が早いのでCSSにanimation: fadeIn 0.3s forwards;opacity:100%;を入れた。
PNGのサイズを各40にすると、ピリオドセルだけ下にずれる（35だとずれないが）
もどる矢印だけscaleで大きくする方法が思いつかない
☆ボタンクリックでのjs（changeYajirushiFontColor2no1~）は削除済み
ただしid（yajirushimojicolor2no1~）は矢印の右移動、上移動、下移動、回転のjsで使っているので削除するとボタンが反応しなくなる（作動しない）
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