ホーリーグレイル
ヘッダー／（左ナビ・メイン・右アサイド）／フッターの3段5領域を、CSS Grid の grid-template-areas で組む古典的な万能レイアウト。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- ヘッダー／左ナビ／本文／右アサイド／フッターの管理画面
- grid-template-areas で領域を名前で置きたいとき
- DOM 順と見た目の配置を分けたい骨組み
- 避ける場面
- 右アサイドに置くものが無い 2 カラム
- 狭幅で 1 列に組み替えない場合（本文が潰れる）
- 構成要素
- ヘッダー
- 左ナビ
- メイン
- 右アサイド
- フッター
- 持っている状態
- 通常
- キーボード
操作要素なし（領域の骨組みだけ）。中に置く部品側でフォーカス移動を確保する
- 支援技術
header／nav／main／aside／footer のランドマークで領域を移動できる。nav に aria-label。読み上げは DOM 順（ヘッダー→ナビ→本文→アサイド→フッター）
- 動き
なし
デザインの要点
- grid-template-areas に領域名を書くだけで配置が決まる。DOM は header→nav→main→aside→footer の読み順のまま
- 列幅は 0.8fr / 1.6fr / 0.9fr。本文を最も広く取り、ナビとアサイドは同格に見えない程度の微差を付ける
- ヘッダーとフッターは auto、中段だけ 1fr。高さが余ったときフッターが浮かず、余りは本文が吸収する
実装メモ
grid-template-areas に領域名を書くだけで、DOM順に依存せず配置できます。狭幅では areas を1列（header/nav/main/aside/footer の縦積み）へ組み替えるのが定石です。
コード（コピーして使えます）
<div class="stage">
<div class="hg">
<header class="hg-header">Header</header>
<nav class="hg-nav" aria-label="サイドナビ">Nav</nav>
<main class="hg-main">Main</main>
<aside class="hg-aside">Aside</aside>
<footer class="hg-footer">Footer</footer>
</div>
</div>