デザインの基礎

レイアウト

幅を制限したラッパー、間隔トークン、列グリッド、明示的なトラックでページを組み立てます。

このページの内容

ページは3つの判断から組み立てます。幅を制限するラッパー、ガターやマージンの間隔トークン、領域を配置する列グリッドです。レイアウトはネイティブの Grid と Flexbox が担い、Master CSS は値に名前を与えます。

スライダーや矢印キーでビューポートを調整し、コンパクトな縦並びから8列の構成に変わる様子を確認してください。

ワークスペースのレイアウト

ビューポート

iframe のビューポートを調整します。内容全体を見るには、プレビュー内をスクロールしてください。

<main class="w-full max-w-3xl mx-auto p-md">  <section class="grid-cols(4) gap-sm grid-cols(8)@2xs gap-md@2xs">    <header class="grid-col-span(4) grid-col-span(8)@2xs"><h1>Project overview</h1></header>    <article class="grid-col-span(4)"><h2>Revenue</h2><p>$128.4k</p></article>    <article class="grid-col-span(4)"><h2>Activation</h2><p>64.2%</p></article>    <article class="grid-col-span(4) grid-col-span(5)@2xs"><h2>Weekly demand</h2></article>    <aside class="grid-col-span(4) grid-col-span(3)@2xs"><h2>Launch tasks</h2></aside>  </section></main>

生成された CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem;    --container-3xl: 48rem  }}@layer utilities {  .grid-cols\(4\) {    display: grid;    grid-template-columns: repeat(4, minmax(0, 1fr))  }  .max-w-3xl {    max-width: var(--container-3xl)  }  .p-md {    padding: var(--spacing-md)  }  @media (width >= 37.5rem) {    .grid-cols\(8\)\@2xs {      display: grid;      grid-template-columns: repeat(8, minmax(0, 1fr))    }  }  @media (width >= 37.5rem) {    .gap-md\@2xs {      gap: var(--spacing-md)    }  }  @media (width >= 37.5rem) {    .grid-col-span\(5\)\@2xs {      grid-column: span 5/span 5    }  }}

2xs 未満では各領域が4列すべてにまたがります。2xs になるとヘッダーは8列を使い、2つの指標が同じ行に並びます。次の行は需要とタスクの領域で5対3に分けます。

#間隔の値を選ぶ

p-、m-、gap- などの間隔クラスには3つの形式があります。

形式	クラス	生成結果
間隔トークン	`p-md`	`padding: var(--spacing-md)`
直接値	`p(1)`	`padding: calc(1 * 1px)`
ネイティブの長さ	`(padding:0.5rem)`	`padding: 0.5rem`

生成された CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem  }}@layer utilities {  .p-md {    padding: var(--spacing-md)  }  .p\(1\) {    padding: calc(1 * 1px)  }  .\(padding\:0\.5rem\) {    padding: 0.5rem  }}

ガター、内側の余白、セクション間隔など、ページで共有するリズムにはトークンを使います。直接値の長さはピクセル単位なので、p(1) はスケールの1段階ではなく1ピクセルのパディングです。細い線や m(0) のようなリセットに使います。ほかの単位はネイティブ宣言で記述してください。スケールは間隔、各関数は直接値を参照してください。

同じ距離を繰り返し使うようになったら、役割で名前を付けます。--spacing-1 のような数値のキーは、直接値の p(1) と紛らわしくなります。

index.css

@theme {  --spacing-section: 6rem;}

<section class="py-section">…</section>

px-* と py-* は論理的なインライン方向とブロック方向のパディングを設定します。物理的な方向は要素の書字方向に従います。

p-* は4辺を設定します。1辺だけ変える場合は、その辺のクラスを追加します。

#コンテナーサイズで幅を制限する

w-、max-w-、h-、min-w-、basis- は --container-* トークンを読みます。たとえば max-w-5xl は max-width: var(--container-5xl) です。一方、全幅と内在サイズは固定ユーティリティです。w-full、w-fit、w-max、w-min は常に 100%、fit-content、max-content、min-content を設定し、プロジェクトの --container-full トークンでは変わりません。

生成された CSS

@layer theme {  :root,  :host {    --container-5xl: 64rem  }}@layer utilities {  .max-w-5xl {    max-width: var(--container-5xl)  }  .w-full {    width: 100%  }  .w-fit {    width: fit-content  }}

コンテナートークンが設定するのは長さだけです。コンテナークエリーのしきい値は変わりません。スケールはコンテナーサイズを参照してください。

#ページのラッパーから始める

ラッパーを親いっぱいに広げ、コンテナーサイズで上限を設け、中央に配置します。内容の左右の余白は間隔スケールから選びます。

<main class="w-full max-w-7xl mx-auto px-md px-xl@md">…</main>

生成された CSS

@layer theme {  :root,  :host {    --spacing-md: 1rem;    --spacing-xl: 2rem;    --container-7xl: 80rem  }}@layer utilities {  .mx-auto {    margin-inline: auto  }  .max-w-7xl {    max-width: var(--container-7xl)  }  .px-md {    padding-inline: var(--spacing-md)  }  .w-full {    width: 100%  }  @media (width >= 64rem) {    .px-xl\@md {      padding-inline: var(--spacing-xl)    }  }}

ページ全体の位置合わせはラッパーが担い、内容同士の関係は内側のグリッドで決めます。

#列グリッドを組む

grid-cols(<count>) は等幅の列グリッドを作り、grid-col-span(<count>) は項目を複数列にまたがって配置します。ブレークポイントで列数を変えたら、同じ境界でスパンも変えます。

グリッドは12列に増えますが、記事が4列のままなので4列が空きます。

<section class="grid-cols(4) gap-lg grid-cols(12)@md">  <article class="grid-col-span(4)">…</article>  <aside class="grid-col-span(4)">…</aside></section>

同じブレークポイントで記事を8列に広げます。

<section class="grid-cols(4) gap-lg grid-cols(12)@md">  <article class="grid-col-span(4) grid-col-span(8)@md">…</article>  <aside class="grid-col-span(4)">…</aside></section>

生成された CSS

@layer utilities {  .grid-cols\(4\) {    display: grid;    grid-template-columns: repeat(4, minmax(0, 1fr))  }  @media (width >= 64rem) {    .grid-cols\(12\)\@md {      display: grid;      grid-template-columns: repeat(12, minmax(0, 1fr))    }  }  @media (width >= 64rem) {    .grid-col-span\(8\)\@md {      grid-column: span 8/span 8    }  }}

2つの軸で異なる間隔トークンが必要なら、col-gap-* と row-gap-* を使います。グリッドトラックを参照してください。

#トラックを明示する

固定幅や混在したトラックには、ネイティブの grid-template-columns 値を記述します。トラックを | で区切ると、生成 CSS では空白になります。

<section class="grid (grid-template-columns:4.5rem|minmax(0,1fr)) gap-md">  <nav>…</nav>  <main class="min-w(0)">…</main></section>

生成された CSS

@layer utilities {  .min-w\(0\) {    min-width: calc(0 * 1px)  }  .\(grid-template-columns\:4\.5rem\|minmax\(0\,1fr\)\) {    grid-template-columns: 4.5rem minmax(0, 1fr)  }}

min-w(0) を使うとメイン領域を内容の幅より狭くできます。通常の内容には等幅の列とスパンを使い、アプリの外枠や分割ペインには明示的なトラックを使います。

#長い内容でレイアウトを検証する

各ブレークポイントの前後でサイズを変え、列数と子要素のスパンを両方確認します。長い見出しやタスク名を使い、内容が縦に伸びられることを確かめてください。固定寸法は、寸法の決まった要素や意図的なビューポートに使います。ページのカードには通常、パディングと幅の制約だけで十分です。

プレビューのタスクのチェックボックスをキーボードで操作し、セクションリンクもたどってください。内容が折り返しても使えるレイアウトにします。固定高さのカードに収めるために文字を小さくすると、根本の制約が見えなくなります。

レイアウト

#概要

#間隔の値を選ぶ

#コンテナーサイズで幅を制限する

#ページのラッパーから始める

#列グリッドを組む

#トラックを明示する

#長い内容でレイアウトを検証する