ホーリーグレイルレイアウト
ホーリーグレイルレイアウトは、ヘッダー・サイドバー・メイン・フッターを組み合わせた定番のページ構成です。この部品では CSS Grid を使い、 grid-template-areas で各領域に名前を付けて配置しています。
解説
ホーリーグレイルレイアウトは、ヘッダー・サイドバー・メイン・フッターを組み合わせた定番のページ構成です。この部品では CSS Grid を使い、grid-template-areas で各領域に名前を付けて配置しています。列は 200px 1fr でサイドバー幅を固定しメインを可変に、行は auto 1fr auto でヘッダーとフッターを内容なり、中央を伸縮させています。名前で配置するので、CSS を読むだけで画面構成が直感的に分かるのが利点です。
使う場面
- 管理画面やドキュメントサイトなど、左にナビ・右に本文という構成
- ヘッダーとフッターを上下に固定したい標準的なページ
- サイドバー付きレイアウトの土台をすばやく用意したいとき
サイドバー幅は grid-template-columns の 200px を変えるだけで調整できます。スマートフォン向けには、grid-template-areas をメディアクエリで縦積みに書き換えると 1 カラムになります。古い構成と違い余分なラッパー要素が要らず、各領域を grid-area で割り当てるだけで完結します。
よくある質問
スマートフォンでは縦並びにできますか？
できます。メディアクエリの中で列指定を 1 カラムにし、領域の割り当てをヘッダー・メイン・サイドバー・フッターの順に縦積みへ書き換えれば、狭い画面で読みやすい一列レイアウトになります。
サイドバーの幅は変えられますか？
はい。列の指定にある固定値（初期値は 200px）を好きな幅に変えるだけで、サイドバーの太さを調整できます。メイン側は残り幅を自動で埋めます。