ホーリーグレイル レイアウト
ホーリーグレイル レイアウトは、ヘッダー・左ナビ・中央本文・右サイド・フッターという定番の5分割構成です。この実装は CSS Grid の grid-template に名前付きエリアを書く方式で、HTML は意味どおりに header nav main aside footer を並べるだけ。
解説
ホーリーグレイル レイアウトは、ヘッダー・左ナビ・中央本文・右サイド・フッターという定番の5分割構成です。この実装は CSS Grid の grid-template に名前付きエリアを書く方式で、HTML は意味どおりに header nav main aside footer を並べるだけ。各要素は grid-area で配置先を指定します。文字列で組んだ領域図がそのまま画面配置になるため、構造が一目で読めるのが利点です。
レスポンシブの仕組み
狭い画面では縦一列、min-width:680px を超えると 160px 1fr 160px の3カラムへ切り替わります。サイドの幅は固定、本文だけが 1fr で伸びるため、画面サイズに応じて中央が自然に広がります。
- 管理画面やダッシュボードの土台
- サイドバー付きのブログ・ドキュメント
- 左右にナビと補足を置く資料ページ
カラム幅は grid-template の数値、要素間の隙間は gap で調整します。視覚順より文書順を優先するため、HTML は読み上げの流れを意識した並びにしておくとアクセシビリティ面でも安心です。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
左右のサイドの幅だけ変えたいです
PC向けの grid-template にある160pxの数値を書き換えるだけです。左右を別々の幅にしたり、片方を狭くしたりも自由にできます。
サイドバーを下に回すスマホ表示にできますか
はい。狭い画面用の grid-template はエリアの並び順がそのまま縦の順番になるので、文字列の行を入れ替えれば表示順を変えられます。