余白の実例集

同じ刻みから、記事・フォーム・LP がそれぞれ違う値を選びます。どこが 8 で、どこが 32 かを3つの現場で並べて見せます。

刻みは1つです。4 8 12 16 24 32 48 64 96 128、この中からしか選びません。それでも記事とフォームと LP では、選ぶ値が変わります。ページの目的が違うからです。考え方は余白に、値の定義は出発点のCSSにあります。

図を大きく見る

図の中身を文字で読む

• 刻みは1つ。選ぶ値が場面ごとに違う
• 4　8　12　16　24　32　48　64　96　128
• 記事　フォーム　LP
• 組の中 8　ラベルと入力 8　見出しと本文 12
• 組と組 32　欄と欄 24　要素と要素 48
• 節と節 96　章と章 64　節と節 128
• 見出しの上を下の2〜3倍空ける　欄の間は広げすぎない。まとまりを保つ　大きく取るほど、1画面の情報は減る

3場面に共通する決め方は2つだけです。組の中は詰め、組のあいだを空ける。距離を出すのは片方向だけ。 あとは、どの階段を「組のあいだ」に当てるかの違いです。

記事#

読み物のページです。読者は上から下へ通して読むので、余白は「ここで話題が変わる」という合図になります。

* + * で下方向にだけ距離を出しています。見出しの手前だけ後から上書きするので、値が二重に効くことがありません。

図版の上下を本文より広くするのは、図が本文の流れをいったん止めるからです。ここを 12 のままにすると、図が段落の一部に見えます。

出発点のCSSでは h2 の上を 64 にしています。長い読み物では一段上げて 96 にすると、章の切れ目がはっきりします。どちらも数値の早見表が示す章と章の範囲（64〜128）の中です。

フォーム#

入力欄が並ぶページです。読者は上から埋めていくので、余白は「次はここ」を示す道しるべになります。記事より全体に詰めます。

欄と欄の 24 は、記事の段落間 12 より広く、記事の節間 96 よりはるかに狭い値です。フォームは「ひと続きの作業」なので、切れすぎると別の手続きに見えます。

送信ボタンの手前だけ 48 に広げます。ここで入力が終わる、という区切りだからです。

LP#

売り込みのページです。読者はスクロールで流し見するので、余白そのものが「間」になります。3場面でいちばん大きな値を使います。

節を padding-block で作ると、色面を敷いたときに余白ごと色が乗ります。margin で作ると、面と面のあいだに地の色が残ります。色面を敷く節は padding、敷かない節は margin と決めておくと、後から色を足しても間隔が崩れません。

128 は狭い画面では大きすぎます。clamp() で下限を 64 にすると、375px でも間延びしません。

3場面を並べて見る#

同じ「節と節」でも、96・64・128 と変わります。目的が変わると、選ぶ段が変わる。刻みそのものは変えない。 案件ごとに 20px や 40px を作り始めた時点で、揃いは崩れます。

どの場面でも、組の中から組と組へ、組と組から節と節へ、2.5〜4倍ずつ広がっています。この広がり方が保たれていれば、選ぶ段そのものは案件で変わってかまいません。

確認する#

• 3場面のどれも、値が刻みの中の1つになっている（20・40・56 のような中間値がない）
• 距離を出しているのが上下どちらか片方に統一され、相殺が起きていない
• 375px で、節と節の余白がスクロール1回分を超えていない

関連#

• 余白量ではなく差で構造を出す
• 縦スタックgap だけで間隔を取る完成形
• フォーム基本レイアウトラベル上・入力下の完成形
• 和文本文段記事の見出し余白と行送り
• LPを組む節をパターンで積む手引き
• 数値の早見表ここに出てくる値の根拠