Flexboxによるホーリーグレイルレイアウト

ホーリーグレイルレイアウト

ホーリーグレイルレイアウトは、ヘッダー、フッター、3つのカラム（左サイドバー、メインコンテンツ、右サイドバー）で構成されるクラシックなWebデザインパターンです。Flexboxなら簡単に実現できます。

CSSコード

.page {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.header {
  flex: 0 0 100%;
}

.nav {
  flex: 0 0 200px;
  order: 1;
}

.main {
  flex: 1;
  min-width: 0;
  order: 2;
}

.aside {
  flex: 0 0 200px;
  order: 3;
}

.footer {
  flex: 0 0 100%;
  order: 4;
}

仕組み

レイアウトはflex-wrap: wrapを使用した単一のフレックスコンテナを使用します：

1. ヘッダーとフッター: flex: 0 0 100%で全幅を占め、独自の行を作成。
2. サイドバー: flex: 0 0 200pxで各200pxの固定幅。
3. メインコンテンツ: flex: 1で残りの水平スペースすべてを埋める。
4. Order: orderプロパティがHTMLソース順序とは独立に視覚的な配置を制御。

ソース順序 vs 視覚的順序

Flexboxアプローチの大きな利点は、HTMLソース順序をアクセシビリティとSEOに最適化（メインコンテンツを先に）しながら、視覚的な順序をCSSで完全に制御できることです。