【実習10】PC幅-Webデザイナースキルが~部分の作成 | SkillhubAI(スキルハブエーアイ)

【実習10】PC幅-Webデザイナースキルが~部分の作成

実習範囲

下図の範囲をカンプに合うよう作成してください。
タブレット幅(768px以上)でも無理なく見えるようにCSS設定をお願いします。

file

本範囲コーディング完了時に、提出の必要はありません。
コーディングが出来たら、書き2つの方法で確認してください。

  • デザインと重ねてセルフチェックを行う
  • 解説のコーディングと見合わせてみる

コーディングのヒント

1.ブロックの配置変更

理由1~3までは、.why-item_descにdisplay:flex;を指定すれば横並びになるように組みました。

しかし、それだけでは画面いっぱいまで伸びてしまいます。 最大幅を制限してください。

2.背景色

横並びにしたブロックに最大幅を指定すると、そこまでしか背景色白も付きません。 画面の端から白背景が続いているデザインを再現しましょう。

file

このレイアウトを作るオーソドックスな方法は、下記の2つでしょう。

file

解説では方法①で作成します。