試行錯誤ページ162




table-layout:fixed;

 問 題min-width: 200px;  答 えmin-width:200px; height:40px; ボタン
1 りんご→

 
 
 
table-layout:fixed;

 問 題min-width: 200px;  答 えmin-width:200px; height:50px; ボタン
2 みかん →

 
 
 
table-layout:fixed;

 問 題min-width: 200px;  答 えmin-width:200px; height:50px; ボタン
3 すいか →

↑tdとformを同時に色を変えられるようにした。onclickで色が変わるイベントはなしに。
 
 
 
table-layout:fixed;

 問 題min-width: 200px;  答 えmin-width:200px; height:40px; ボタン
4 いちご→

↑表に入れるとレスポンシブで見えない部分ができてしまう。
ローマ字一語ぐらいなら大丈夫そうだが
 
 
 
 
style=”display:inline;”にしてみたが・・・ダメ
※span style=”display:inline-flex”で挟むとAのアイコンが縦長になるので削除
答えの直前に→を入れると答えとくっつくぐらい近いので削除
答えの部分は表に入っていないので、位置が左に寄りすぎ 10のtomatoは表に入っている
 
 5. バナナ

 

 
 
 
table-layout:fixed;
レスポンシブで中央部が狭くなるので短い答えなら可(ローマ字1語など)
左はしのセルは幅75px、ボタンのセルは幅65px

ボタン
 6. もも

 
 
 
table-layout:fixed; border-style: none;
左はしのセルは幅指定しないと50%ずつになってしまう(左はしwidth: 75px)
 

 7. メロン

 
↑白いので『みる』が わかりにくい
Q の部分も表に入っている
 
 
 
↓ Q の部分は表に入っていない
table-layout:fixed; border-style: none;
左はしのセルはwidth: 70px
 
 8. にんじん

 
↑白いので『みる』が わかりにくい
 
 
↓ Q の部分は表に入っていない
table-layout:fixed; border-style: none;
左はしのセルはwidth: 50px
Aの左側の矢印→をなくした
 
 9. じゃがいも

 

↑白いので『みる』が わかりにくい
 
 
 
色のついた部分 または『見る』ボタンを クリック
 
 10. トマト

 

この英単語を もっとくわしく(英単語帳のページへ)
 
↑白いので『みる』が わかりにくい
答えの部分は表に入っているので、位置が左に寄りすぎない 5のbananaは表に入っていない
 
 
 
すべてを
 
 
すべてを
 
 
 
 
 
↓フォーマット(コピーして使う)

ようこそ 『英語ブロック』へ
おすすめです。 安心の 返金保証つき

ここにバナー画像を貼り付け

ここにテキストリンクを貼り付け

 
↓ おすすめです。 安心の 返金保証つき

ここにスマホ用バナー画像を貼り付け

ここにスマホ用のテキストリンクを貼り付け