余白
余白は量ではなく、差で効きます。組の中は詰め、組のあいだを空ける。それだけで構造が見えてきます。
図の中身を文字で読む
- ✕ 全部おなじ 16px ○ 差をつける
- スケールは守れているが、どこで区切るか読めない 組の中は詰め、組と組の間は空ける
- 8px（組の中）
- 32px（組と組）
- スケールは値の候補集であって、
- 同じ値を使う理由ではない。
- 余白の刻み
- 4 8 12 16 24 32 48 64 96
- この階段の中からしか選ばない。px ではなく rem で定義し、利用者の文字サイズ設定に追従させる。
ひと目で#
- 余白
- 要素が置かれていない空間。地の色が白いかどうかとは関係ない
- マージン
- 要素の外側。背景色に含まれない
- パディング
- 要素の内側。背景色に含まれ、押せる範囲にもなる
- ギャップ
- 親が子どうしのあいだに作る空き。相殺が起きないので読みやすい
- 余白スケール
- 使ってよい値の一覧。5〜7段
- マクロ余白 / ミクロ余白
- 節のあいだの大きな空き / 行間や字間の小さな空き
量ではなく差で構造が出ます。 すべてを同じ値にすると、刻みは守れても近接が死にます。
使い分け#
| こう感じたら | 直すところ |
|---|---|
| 全体が窮屈 | 量が足りない。マクロ余白を広げる |
| 量は足りているのに構造が読めない | 差がない。組の中を詰め、組のあいだを空ける |
| 高級感を出したい | マクロ余白を大きく取る |
| 情報を探すページで見つけにくい | マクロ余白を抑える。余白はただの移動距離になる |
| 長文が読みにくい | ミクロ余白、つまり行送りを確保する |
| ボタンが押しにくい | パディングで押せる範囲を広げる |
間違えやすいところ#
- 8の倍数で揃えたから全部 16px値は揃っても近接が死ぬ。刻みは候補の集まりで、同じ値を使う理由ではない
- 上下の両方からマージンを与える相殺が起きて、値が追えなくなる。片方向に統一する
- 親に
gapを1つ指定して終わり組の中と外が同じ距離になる - 余白を px で決める利用者の文字サイズ設定に追従しない。rem を使う
- 余白は多いほど良いと考える業種と目的で適した量が変わる
box-sizingを設定しないパディングが幅に足され、計算が直感と食い違う
相殺は、値を足しても増えない現象です。24 と 32 が向かい合えば、残るのは 32 だけ。どの値が効いているのかコードから読めなくなります。
図の中身を文字で読む
- ✕ 上下の両方から距離を出す ○ 距離を出すのは片方だけ
- 32 と 24 を足しても 56 にならない。大きいほうだけが残る gap なら相殺そのものが起きない
- 前の段落 前の段落
- margin-block-end: 24
- gap: 32
- 次の見出し margin-block-start: 32 次の見出し
- 実際の距離は 32。24 は消える 書いた値がそのまま距離になる
- 見た目を直そうと 24 を 40 にすると、今度は 40 が勝つ。 .stack > * + * { margin-block-start: … } でもよい。
- どの値が効いているのか、コードを読んでも分からない。 上からは出さないと決めておくと、要素を入れ替えても間隔が動かない。
- 相殺は隣どうしだけでなく、親と最初の子のあいだでも起きる。親に padding か border があれば止まる。
- 「余白が消えた」「なぜか外側に漏れた」はここを疑う。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、珈琲店の読み物ページを組み直します。見出しと本文、段落と段落、章と章。距離がすべて 16px で並んでいます。刻みは守られているので、コードを見るかぎり間違いはありません。それでも、どこまでがひと組なのか読めません。
左が直す前です。「豆の煎り分けについて」の見出しと、その本文の距離が、次の見出しとの距離と同じ。読者は見出しがどの本文に属するのか、内容を読んでから判断することになります。
右が直した後です。見出しと本文を 8 で詰め、段落の組と次の見出しのあいだを 32、章の切れ目を 96 に開きました。量は増やしていません。差を付けただけです。 見出しの位置は変わらないのに、章が3つあることがひと目で分かります。
直すときの順序は決まっています。まず「ひと組」の範囲を決める。次にその外側を、組の中の2.5〜4倍に開く。値を選ぶのは最後です。先に値から入ると、8の倍数で揃った均一なページに戻ります。
記事・フォーム・LP それぞれの数値は 余白の実例集 に、3場面分まとめてあります。
確認する#
- 見出しと直後の本文の距離が、次の見出しまでの距離より明らかに小さい
- 章の切れ目の余白が、組と組のあいだの2.5倍以上ある（32 と 96 なら 3 倍）
- 上下の両方から margin を出している要素がなく、書いた値がそのまま距離になっている
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字5 語
語の名前から引くなら用語索引へ。
- 8ポイントグリッド
- 余白と寸法をすべて8の倍数で揃える方式。UI 部品の寸法設計で広く使われる。
- マクロ余白
- ミクロ余白
- ネガティブスペース
- 要素そのもの（ポジティブスペース）ではなく、その周囲や内側に生じる空間を、意味のある形として扱う考え方。
- 光学的余白
- 数値上は同じ余白でも、隣接する形によって違って見えるため、見た目が揃うように値を調整すること。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
4か8の倍数の階段を作り、その中からしか選ばない。中間の値を作った時点で統一は崩れる。
このコードで動いている見本です
4 8 12 16 24 32 48 64 96 128。文字とラベルは4〜8、組の中は8〜16、組と組は24〜48。
このコードで動いている見本です
上を下の2〜3倍空ける。見出しは次の本文に属するので、前との距離を大きく取る。
このコードで動いている見本です
上下marginの相殺が起きている。gapかpaddingに替えるか、flex/gridの中に入れる。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は余白と幅を決めるにまとめてある。逆引きには全188件。
刻みを作る#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 字と余白と幅
単位と段数を決めると刻みが出ます。組の中と組と組の差が、画面のリズムになります。
組の中と組と組が同じ刻みです。近接の階層が消えます。
この道具は JavaScript で動きます。無効の場合は 4 8 12 16 24 32 48 64 96 128 を使ってください。