セクションごとの細かなレイアウトへ進む前に、LP全体で使う基本スタイルと共通部品を作ります。同じ見た目を同じクラスで管理すると、後からデザインを調整しやすくなります。
最初から完成見本との1px単位の差を追わず、文字、色、幅、主要部品の順で大きなルールをそろえます。
基本スタイルを設定する
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--color-text);
font-family: system-ui, sans-serif;
line-height: 1.7;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}ブラウザの標準スタイルをすべて消すのではなく、制作で必要な差だけを整えます。フォーム部品やフォーカス表示を不用意に消さないでください。
次の画像は、「基本スタイルを設定する」で扱うコードや構成をブラウザで表示した結果です。
コンテナとセクション余白を共通化する
.container {
width: min(100% - 32px, var(--content-width));
margin-inline: auto;
}
.section {
padding-block: 64px;
}すべてのセクションへ個別の左右幅を書くのではなく、共通コンテナでそろえます。背景を画面いっぱいにし、その内側だけをコンテナへ入れる構造にします。
次の図では、「コンテナとセクション余白を共通化する」の仕組みや関係を確認できます。
見出し部品を作る
見出しの文字サイズ、行間、配置、下の余白をまとめます。ページ内で役割が同じ見出しに、異なるクラス名を増やさないでください。
次の図では、「見出し部品を作る」の仕組みや関係を確認できます。
.section-title {
margin: 0 0 32px;
font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
line-height: 1.3;
text-align: center;
}リンクをボタンとして装飾する
.button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-weight: 700;
text-decoration: none;
}
.button:hover {
opacity: .85;
}
.button:focus-visible {
outline: 3px solid #111827;
outline-offset: 3px;
}マウスのhoverだけでなく、キーボードのフォーカス位置も見えるようにします。文字と背景のコントラストも確認してください。
次の図では、「リンクをボタンとして装飾する」の仕組みや関係を確認できます。
カードの責任範囲を決める
カード自体の背景、角丸、内側余白はカードクラスへ書き、カード同士の列数や間隔は親の一覧クラスへ書きます。部品と配置を分けると、別の場所でもカードを再利用できます。
共通化の結果を確認する
共通化した部品は、別のセクションでも同じ見た目と操作で再利用できます。
同じ色、余白、角丸が複数箇所へ直接書かれていないか検索します。共通化しすぎて1回しか使わないクラスまで細分化していないかも確認してください。