並べる・揃える

近接から直す。関係のあるものを寄せ、無いもののあいだを空ける。線や枠を足すのは最後。デザインの4原則

.section { margin-block: var(--space-8); }
.section > * + * { margin-block-start: var(--space-4); }

大きさ・太さ・色・位置・余白のうち、2つだけで差をつける。全部を変えると差が消える。視覚階層

h1 { font-size: var(--text-2xl); font-weight: 700; }
p.lead { font-size: var(--text-lg); color: var(--color-text-muted); }

揃っていない端を探す。左端が1本の線に乗っているか、余白が同じ刻みかを見る。構図とバランス

.page {
  max-inline-size: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

左揃えに戻す。中央揃えは端が揃わないので、要素が増えるほど落ち着かなくなる。構図とバランス

.content { text-align: start; max-inline-size: var(--page); margin-inline: auto; }

同じ重さのものを4つ以上並べると、どれも見られなくなる。優先順位を付けて差をつける。視覚階層

主役1 + 副2まで。4つ以上は優先順位で差をつける

枠は最後の手段。余白で分けられていないものを、枠で分けようとしている。デザインの4原則

.group { display: flex; flex-direction: column; gap: var(--space-4); }

繰り返しは統一の手段で、単調さは別の問題。大きさか位置に1か所だけ変化を入れる。デザインの4原則

.cards > :first-child { grid-column: span 2; }
.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); }

同じ色・同じ形・同じ枠で囲む。距離で結べないなら、見た目の共通点で結ぶ。ゲシュタルト

.related { color: var(--color-accent-text); border: 1px solid var(--color-border); }

順序があるなら縦、比較させるなら横。読む向きと、比べる向きは違う。構図のパターン

.steps { display: flex; flex-direction: column; gap: var(--space-5); }
.compare { display: flex; flex-direction: row; gap: var(--space-5); }

12列が扱いやすい。2・3・4・6に割り切れるので、大半の分割が作れる。グリッド

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

溝（gutter）が狭い。列幅の1/4前後を目安に広げる。グリッド

<div class="grid">…</div>

:root {
  --space-6: 32px;
}
.grid { gap: var(--space-6); } /* 列幅の1/4前後 */

先に版面を決め、写真を断ち落とすかどうかを決める。半々にすると、どちらも主役にならない。構図とバランス

.split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-8);
}

Gridのサブグリッドで、見出し・本文・ボタンの行を列をまたいで揃える。レイアウトの実装

<div class="cards">
  <article class="card">
    <h3>…</h3><p>…</p><button type="button">詳細</button>
  </article>
</div>

:root {
  --col-min: 12rem;
  --space-5: 24px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.card { display: grid; grid-template-rows: auto 1fr auto; }

一度に見せる数を減らす。選ぶ数が増えるほど、決めるまでの時間は伸びる。認知の法則

一度に見せる数を5件以下に絞る

小さくて遠い的ほど押しにくい。よく使うものを大きくし、動線の近くに置く。認知の法則

.toolbar { display: flex; gap: var(--space-2); }   /* 隣の的と 8px あける */
.toolbar .button { min-inline-size: 2.75rem; }     /* 横も 44px 以上 */
/* 基底の .button は「出発点のCSS」にある */

縦罫を消し、横罫だけにする。数値は右揃えにして等幅の数字を使う。構図のパターン

td, th { border-block-end: 1px solid var(--color-border); border-inline: none; }
td.num { text-align: end; font-variant-numeric: tabular-nums; }