問題5: グリッドエリアが機能しない

問題

grid-template-areasを使ってレイアウトを定義したのに、要素が正しく配置されません。なぜでしょうか？

HTML

<div class="page-layout">
  <header>ヘッダー</header>
  <nav>ナビゲーション</nav>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>

CSS

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "nav main sidebar"
    "footer footer";  /* 列数が異なる */
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 1fr 60px;
  gap: 10px;
  height: 500px;
}

header {
  grid-area: header;
  background-color: #FF6B6B;
}
nav {
  grid-area: nav;
  background-color: #4CAF50;
}
main {
  grid-area: main;
  background-color: #2196F3;
}
aside {
  grid-area: sidebar;  /* HTMLはaside、エリア名はsidebar */
  background-color: #9C27B0;
}
footer {
  grid-area: footer;
  background-color: #FFC107;
}

実行結果

ヘッダー
ナビゲーション
メインコンテンツ
サイドバー
フッター

※ 意図したレイアウトになっていません

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの "footer footer"; を "footer footer footer"; に修正して、列数を統一してみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

grid-template-areasの定義をよく見てください：

  1. 各行の列数が一致している必要があります
  2. エリア名は矩形でなければなりません
  3. エリア名のタイポに注意

フッター行の列数が他の行と異なっています。

解答

クリックして解答を表示

問題の原因

grid-template-areasの定義に問題があります：

  1. フッター行の列数が2つしかない（他は3列）
  2. 全ての行で同じ列数が必要

grid-template-areasのルール

  • 各行の列数は同じでなければならない
  • エリアは矩形である必要がある
  • エリア名は連続していなければならない
  • 空のセルはドット（.）で表す
  • エリア名はCSS識別子の規則に従う

修正方法

方法1: フッター行を3列に修正

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "nav main sidebar"
    "footer footer footer";  /* 3列に修正 */
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 1fr 60px;
  gap: 10px;
  height: 500px;
}
修正後の結果
ヘッダー
ナビゲーション
メインコンテンツ
サイドバー
フッター

方法2: 異なるレイアウトパターン

/* ナビとサイドバーを1行にまとめる */
.page-layout {
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
}

/* サイドバーなしのシンプルレイアウト */
.page-layout-simple {
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
}

/* モバイル向け縦並び */
.page-layout-mobile {
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: 60px 50px 1fr auto 60px;
}

よくある間違いと対処法

間違い エラー内容 修正方法
列数の不一致 レイアウトが壊れる 全行を同じ列数に
エリア名のタイポ 要素が配置されない 名前を統一
非矩形エリア 無効な定義 矩形に修正
エリア名の分断 無効な定義 連続した配置に

デバッグのコツ

/* デバッグ用のスタイル */
.page-layout {
  /* グリッド線を表示（開発者ツール） */
  border: 2px solid red;
}

.page-layout > * {
  /* 各要素の境界を表示 */
  outline: 1px dashed blue;
  /* エリア名を表示 */
  position: relative;
}

.page-layout > *::before {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 5px;
  font-size: 12px;
}

覚えておくポイント

  • grid-template-areasの各行は同じ列数が必須
  • エリアは必ず矩形で連続している
  • 空セルはドット（.）で表現
  • エリア名とgrid-areaの値を完全一致させる
  • ブラウザの開発ツールでグリッドを可視化して確認
  • 複雑なレイアウトは段階的に構築してテスト