試行錯誤ページ569 ブロリバ(ワク入り)修飾矢印を時間差で出現、消す1
試行576 下線と縦棒が別々のノーマル矢印
ここから下は下線と縦棒がセットのもの【こっちを使う】
試行577 ノーマル矢印(必要なコードだけ残している[不採用])
試行578 ノーマル矢印(各セル下にすべてのコードが入っている)
試行579 above矢印(各セル下にすべてのコードが入っている)
試行580 below矢印(各セル下にすべてのコードが入っている)
試行581 ノーマル矢印を複数表示(試行577の応用、各セル下にすべてのコードが入っている)
試行582 ノーマル、above、belowを複数表示(試行578,579,580のミックス、各セル下にすべてのコードが入っている)
最初はfunction setHref、id=shushokuLinkが同じだったので同時に作動していた
→試行571で動くものをまとめている
modorushushokuyajirushiappear00
リンクでcss/modorushushokuyajirushiappear00.css(赤い点3つ)を呼び出している
↑結果:ゆっくり消えるが、これを押すと『その犬』もどる矢印(modorushushokuyajirushiappear)も消えてしまう
↑『その犬』もどる矢印(modorushushokuyajirushiappear)があると、点の色が変わらない
『その犬』を削除したものは試行570で検証
【その犬】の文字色は変わるが、dotの色は変わらない
cssでもどる修飾矢印の出現、消す(それぞれのCSSファイル内にanimation: fadeIn 12.5s forwards;opacity:100%が入っているが、disappearのほうはゆっくりは消えないし、fadeOutにしてもダメ)
ページを開いたときだけゆっくり出る
最初の一回だけ適用されるのは修飾下線と同じ
(1人の)少年といっしょに走っている その犬
文型の説明時の 下線を考える
☆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で大きく表示している
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第2問
試行567を利用して、もどる矢印を無しにして、矢印回転だけで誘導する
この方法なら、試行565に比べて、上下移動の矢印が見えない
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第3問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第4問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第5問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第6問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第7問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第8問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第9問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
第10問
I met Tom at school last week. を訳してみます。
全訳: 『 私は 先週 学校で トムに 会いました 。』 |
produced by eigoblock