ページシェル

component

ページのコンテンツ領域を標準幅（--container-page = 1220px 暫定）に中央寄せするラッパーです。ヘッダー・フッター・main それぞれの内側に置くと、帯（背景色）は全幅のまま中身の幅が揃います。長文の本文はこの内側でさらに max-w-article（672px）で絞ります。

コンテナ幅トークン

ページシェルは page、長文本文は article。サイズ名（max-w-5xl 等）の新規使用は非推奨

--container-page	76.25rem (1220px)	`max-w-page` / `.page-shell`	ページシェル（ヘッダー / フッター / 一覧）
--container-article	42rem (672px)	`max-w-article`	長文本文（規約・記事系）

使用例: ヘッダー + 本文

帯は全幅・中身は .page-shell で標準幅（点線 = シェルの端）。このプレビュー枠は 1220px より狭いため、実際の画面では左右余白がさらに広がります

relay

ページタイトル

一覧やカードグリッドなど、通常のコンテンツはページシェルの幅いっぱいに置きます。

利用規約や記事のような長文は、ページシェルの内側でさらに max-w-article で行長を絞ると読みやすくなります（この段落がその幅です）。

機能

このコンポーネントの用途

ページのコンテンツ領域幅を全ページで揃えるためのラッパー。ヘッダー・
フッター・main それぞれの内側に置くと、帯（背景色）は全幅のまま中身の
幅が揃う。長文本文の幅は max-w-article（規約・記事系）。

使用法

推奨される使い方と、やりがちな NG パターン

✓全幅の帯（header / footer / section）の直下に置き、中身をこの中に入れる。
✓フォームや設定・詳細など主コンテンツを一覧より狭くしたいときは page-shell に .page-shell-content を併記して 900px に絞る。
✓長文の本文は page-shell の内側でさらに max-w-article で絞る。

✕max-w-5xl 等のサイズ名でコンテナ幅を新規に書かない → max-w-page / max-w-content / max-w-article。
✕page-shell を入れ子にしない → 帯ごとに 1 つ。