実習範囲
ナビゲーションを含む、下図の範囲をカンプに合うよう作成してください。
タブレット幅(768px以上)でも無理なく見えるように調整をお願いします。
本範囲コーディング完了時に、提出の必要はありません。 コーディングが出来たら、書き2つの方法で確認してください。 * デザインと重ねてセルフチェックを行う * 解説のコーディングと見合わせてみる
コーディングのヒント
1.全体配置
スマホ幅を作った時に、あらかじめ考えてあったブロック構成を活かします。 左右の入れ替えにはorderプロパティを使います。
2.STEP部分
今回の範囲で最もカンプに合わせにくいのが、STEP1などの画像を4つ配置する箇所かと思います。
ネガティブマージンも使うと位置を合わせやすいです。 少し無理のあるコードにはなってしまいますが、デザイン再現重視の場合は仕方がない部分もあります。崩れないことに注意しつつ、割り切ってCSSを設定してみてください。