実習範囲
クロージング~フッターまでを、PC幅でもカンプに合うよう調整してください。
タブレット幅(768px以上)でも無理なく見えるようにCSS設定をお願いします。
本範囲コーディング完了時に、提出の必要はありません。
コーディングが出来たら、書き2つの方法で確認してください。
- デザインと重ねてセルフチェックを行う
- 解説のコーディングと見合わせてみる
コーディングのヒント
今回の範囲で最も大変な箇所は、縦並び、かつ重ねて表示していた部分を横一列に並べる部分です。
display: flex;に切り替えるだけではなく、flexコンテナ内の配置方法を設定したりと細々した調整が必要になるでしょう。
その際、スマホ幅を作成時に設定したmarginやpaddingが邪魔になってきます。
↓スマホでの余白がこんな感じに付いています。
どう配置すべきか、どう余白を入れて位置を合わせるか… 迷ったら、一旦marginとpaddingをゼロにしてみると分かりやすいです。