【実習07】PC幅-ファーストビューの作成 | SkillhubAI(スキルハブエーアイ)

【実習07】PC幅-ファーストビューの作成

実習範囲

ナビゲーションを含む、下図の範囲をカンプに合うよう作成してください。

タブレット幅(768px以上)でも無理なく見えるように調整をお願いします。

file

本範囲コーディング完了時に、提出の必要はありません。 コーディングが出来たら、書き2つの方法で確認してください。 * デザインと重ねてセルフチェックを行う * 解説のコーディングと見合わせてみる

コーディングのヒント

1.全体配置

スマホ幅を作った時に、あらかじめ考えてあったブロック構成を活かします。 左右の入れ替えにはorderプロパティを使います。

2.STEP部分

今回の範囲で最もカンプに合わせにくいのが、STEP1などの画像を4つ配置する箇所かと思います。

file

ネガティブマージンも使うと位置を合わせやすいです。 少し無理のあるコードにはなってしまいますが、デザイン再現重視の場合は仕方がない部分もあります。崩れないことに注意しつつ、割り切ってCSSを設定してみてください。