実習範囲
下図の範囲をカンプに合うよう作成してください。
タブレット幅(768px以上)でも無理なく見えるようにCSS設定をお願いします。
本範囲コーディング完了時に、提出の必要はありません。
コーディングが出来たら、書き2つの方法で確認してください。
- デザインと重ねてセルフチェックを行う
- 解説のコーディングと見合わせてみる
コーディングのヒント
1.ブロックの配置変更
理由1~3までは、.why-item_descにdisplay:flex;を指定すれば横並びになるように組みました。
しかし、それだけでは画面いっぱいまで伸びてしまいます。 最大幅を制限してください。
2.背景色
横並びにしたブロックに最大幅を指定すると、そこまでしか背景色白も付きません。 画面の端から白背景が続いているデザインを再現しましょう。
このレイアウトを作るオーソドックスな方法は、下記の2つでしょう。
解説では方法①で作成します。