試行578を利用して、cssで戻る矢印を作ってみる（参考サイト：note.com/tamago_tofu/n/n70a74417c1c5）

試行563では、4つ目のセルにundoyajirushi2no4を入れて、戻る矢印、上向き矢印の切り替えられるようにした。
曲線部分は四角ボーダーを使っている

ここでは、１～５個目のセルに矢印を出るようにし、実際に使えるか検証する

結果：一通りは完成
→戻る矢印の出発点は角丸にできないので、すべての矢印の出発点を角を角ばらせた。
戻る矢印の曲線の部分は、実際には四角の枠を利用しているので、背景色は透明にしておく

※マイクロソフトのEdgeでは、画面の(125,175などの)%によっては矢印の隣の上側の線がうっすら見えてしまう。

※アイフォンだと出発点が角ばらず、いびつな形になっている

一律のサイズでの対応は難しいので、各ページごとにcssを作る必要あり。
（セル幅によって、leftの位置調整が必要）

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

　試行576　下線と縦棒が別々のノーマル矢印
ここから下は下線と縦棒がセットのもの【こっちを使う】
　試行577　ノーマル矢印（必要なコードだけ残している［不採用］）
　試行578　ノーマル矢印（各セル下にすべてのコードが入っている）　
　試行579　above矢印（各セル下にすべてのコードが入っている）
　試行580　below矢印（各セル下にすべてのコードが入っている）
　試行581　ノーマル矢印を複数表示（試行577の応用、各セル下にすべてのコードが入っている）
　試行582　ノーマル、above、belowを複数表示（試行578，579，580のミックス、各セル下にすべてのコードが入っている）

経緯（※第１問、第３問でもサイズ検証しているが、第２問とは仕組みが違うので参考程度にする。）

①　ShushokuKasen70px100px130px160pxFadeIn.css　使用
セル幅が60pxの場合、70pxではつながってしまう。
おおよその種類のサイズだけでは対応できない。
→yokobarだけに『くわしく説明』の文字を入れると矢印位置がずれるので、
起点縦棒と上向き矢印には『くわしく説明』の文字を透明で入れている

②　ShushokuKasenleftiroiroFadeIn.css　使用
セル下の修飾下線のwidthを10px、leftの位置を5px単位で対応しても
丁度いい位置に合わせるのは難しい

③　shikousakugo577dai2monShushoku～を使ってすべてのソースを表示

④　shikousakugo578dai2monShushoku～で実際の使用例
3つ目のセルと4つ目のセルがyokobarの『くわしい説明』文字が
重なるので、3つ目の文字を消して、4つ目の文字をleftマイナス方向にしている

 
 
第2問に連続の組み合わせ矢印（文字あり）を入れている
 
 

各セル下に入っているすべてのコードから必要なコードだけ残している（cssにはすべてのソースが入っている）
class=”shushokutatebartoleft2no5″ class=”kuwashikusetsumeimojitatebartoleft2no5″
class=”shushokukasen2no5″(セル下の修飾下線にはabove, belowでの違いがないのでabove,belowの表記なし)
class=”shushokuyokobar2no5″　class=”kuwashikusetsumeimojiyokobar2no5″
class=”shushokutatebartoright2no5″　class=”kuwashikusetsumeimojitatebartoright2no5″
class=”shushokutatebartoleft2no5″　class=”kuwashikusetsumeimojitatebartoleft2no5″ class=”shushokuuemukiyajirushifromright2no5″　class=”kuwashikusetsumeimojiuemukiyajirushifromright2no5″ class=”shushokuuemukiyajirushifromleft2no5″　class=”kuwashikusetsumeimojiuemukiyajirushifromleft2no5″

 
 
 
 
 
（１） I met Tom at school last week. 　
 

英文を訳してみよう

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

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

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

第２問

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

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

★連続の組み合わせ矢印（文字あり）を入れている

→yokobarだけに『くわしく説明』の文字を入れると矢印位置がずれるので、
起点縦棒と上向き矢印には『くわしく説明』の文字を透明で入れている

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

 
produced by eigoblock