共通部品ができたら、デザイン画像の上から順番にセクションを実装します。1つのセクションをHTML、基本レイアウト、細かな装飾、確認まで完成させてから次へ進みます。
Flexbox、Grid、通常の文書の流れを使い分け、絶対配置は重なりが必要な装飾へ限定します。
ヒーローの目的を優先する
ヒーローでは、最初に伝える価値と次に行ってほしい操作を優先して配置します。
ヒーローでは、ページの内容、利用者が得られる価値、最も重要なCTAが最初に伝わるようにします。高さを画面いっぱいへ固定し、内容が見切れないか確認してください。
.hero {
display: grid;
min-height: min(720px, 100svh);
align-items: center;
padding-block: 96px 64px;
background: #fef2f2;
}
.hero__inner {
display: grid;
gap: 32px;
}カード一覧をGridで作る
同じ種類の情報はカードとしてそろえ、Gridで列と間隔を管理します。
同じ種類のカードを並べる場合は、親要素で列数と間隔を管理します。カードの内容量が違っても、読む順番と操作位置が不自然にならないか確認します。
.feature-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.feature-card {
padding: 32px;
border-radius: var(--radius-card);
background: #fff;
box-shadow: 0 12px 32px rgb(15 23 42 / 10%);
}画像と文章を並べる
画像と文章を近くへ置き、どの説明と対応しているか分かるレイアウトにします。
画像と説明文は、HTMLでは読む順番で置き、CSSで横並びにします。左右交互のデザインでも、スマートフォンで順番が不自然にならない構造にします。
.media {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 48px;
}背景とコンテンツ幅を分ける
背景色や背景画像を持つsectionは画面幅いっぱいにし、文章やカードだけを内側のcontainerへ入れます。背景を付けるためだけに、コンテンツ幅の指定を複製しません。
次の図では、「背景とコンテンツ幅を分ける」で押さえる違いを左右で比較しています。
絶対配置を使う前に通常配置を試す
position: absoluteは文書の通常の流れから外れるため、文章量や画面幅が変わると重なりやすくなります。装飾の重なりなど、位置関係を固定する必要がある場所だけで使います。
次の図では、「絶対配置を使う前に通常配置を試す」の仕組みや関係を確認できます。
親要素へposition: relativeを設定し、基準となる範囲を明確にしてください。
各セクションを完成見本と比較する
次の図では、「各セクションを完成見本と比較する」で押さえる違いを左右で比較しています。
- セクション全体の高さとコンテンツ幅を比較する
- 見出し、画像、文章の位置関係を比較する
- 余白、文字、色、枠線の順で細部を調整する
- 長い文章や画像なしの状態も確認する
- 完成した単位でGitへコミットする