ドキュメントサイトのメインコンテンツ余白を `.content-container` で統一
ページごとにバラバラだったメインコンテンツの上下余白と最大幅設定を、.content-container クラスを正規の基底プリミティブとして定義し直すことで一元管理できるようになりました。
背景
これまでドキュメントサイトでは、メインコンテンツの上下余白（padding-block）と中央寄せ・最大幅の指定が統一されていませんでした。ページによってインライン <style> で指定するもの、カスタムパネル経由で設定するもの、そもそも設定されていないものが混在し、バナー・サブヘッダー・ナビゲーションなどのラッパーコンポーネントもそれぞれ独自に最大幅と中央寄せを手書きしていました。
この状況はスタイルの管理コストを高めるだけでなく、ページ間でのレイアウト一貫性も損なっていました。本PRはこれを解消するため、.content-container を「コンテンツを包む唯一の正規クラス」として位置づけ直しています。
技術的な変更
.content-container の定義が utils.css で刷新され、max-width から論理プロパティ max-inline-size への移行と、カスタムプロパティの改名（--max-width → --max-inline-size）が行われました。これにより、書字方向に依存しないレイアウトが実現します。
変更前:
.content-container {
margin-inline: auto;
max-width: var(--max-width, var(--content-width-l));
padding-inline: var(--content-padding-inline);
}
変更後:
.content-container {
margin-inline: auto;
max-inline-size: var(--max-inline-size, var(--content-width-l));
padding-inline: var(--content-padding-inline);
}
あわせて、wa-page コンポーネントのスロットとして配置される <main> に対し、2つの新しいルールが追加されました。.content-container クラスを持つ <main> には padding-block: var(--wa-space-4xl)（約64px）の上下余白が付与されます。一方、クラスを持たない <main> には padding: 0 を明示することで、wa-page のシャドウDOM内の ::slotted(main) { padding: var(--wa-space-3xl) } によるデフォルトパディングを打ち消し、フルブリードページが完全にフラッシュな状態を保てます。
wa-page > main.content-container {
padding-block: var(--wa-space-4xl);
}
wa-page > main:not(.content-container) {
padding: 0;
}
テンプレート側では、base.njk の <main> タグがフロントマターの hasFlushMain フラグで出し分けされるようになりました。hasFlushMain: true が設定されたページでは class="content-container" が付与されないため、フルブリードなマーケティングページなどが自身のレイアウトを完全に制御できます。
<main id="content"{% if not hasFlushMain %} class="content-container"{% endif %}>
バナー（slot-banner-ba-kickstarter.njk）、サブヘッダー（slot-subheader.njk）、製品ナビゲーション（nav-products.njk）の各ラッパーコンポーネントも、独自の最大幅・中央寄せ指定を削除し、content-container クラスを追加する形で統一されました。
設計判断
「クラスの有無でオプトアウトする」方式 が採用されました。オプトインではなくオプトアウトにすることで、新規ページはデフォルトで一貫した余白を得られ、例外的なフルブリードページだけが hasFlushMain: true を宣言する設計になっています。
utils.css のコメントには「このクラスを別のファイルで再定義しないこと（プロサイトの site.css やアプリの app.css での基底クラス再定義を禁止する）」と明記されており、複数リポジトリ（webawesome-pro、webawesome-app）にまたがるエコシステム全体での一貫性を守るための規約が埋め込まれています。スコープ付きオーバーライド（.page-footer .content-container { ... } 等）は許可されており、柔軟性と統一性のバランスが取られています。
また、--max-inline-size カスタムプロパティをインスタンスごとに上書きする手段も残されており、特定コンテキストで幅を変えたい場合は main { --max-inline-size: var(--content-width-xs); } のように対応できます。
まとめ
本PRは、バラバラだった余白・最大幅の定義を .content-container という単一の正規プリミティブに集約し、テンプレートレベルの hasFlushMain フラグによるオプトアウト機構を組み合わせることで、例外ページの自由度を損なわずにサイト全体のレイアウト一貫性を実現しています。コメントによるリポジトリ間の規約の明文化も、マルチリポジトリ構成での長期的なスタイル管理に寄与しています。