grid-template-areasとレスポンシブグリッドはどのように機能しますか？

Question

Accepted Answer

`grid-template-areas`を使用すると、グリッドの領域に名前を付けることで**視覚的に**レイアウトでき、複雑なページレイアウトが読みやすく、レスポンシブに再配置しやすくなります。

## 名前付き領域の定義

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCIIアート形式の`grid-template-areas`は*レイアウトそのもの*です。構造を一目で確認でき、名前を繰り返すと領域が複数のセルにまたがります。

## モバイル対応 — マップを描き直すだけ

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

モバイル用にレイアウト全体を変更するには、領域マップを書き直すだけで済みます。HTMLと`grid-area`の割り当ては同じままです。これは各要素を個別に再配置するよりもはるかにクリーンです。

## これが強力な理由

- **自己記述的** — CSSは視覚的にレンダリングされたレイアウトを反映しています。
- **ソース順序から分離** — HTML順序に関係なく、要素を任意の場所に配置できます（アクセシビリティのためにDOMで`main`を最初に配置しながら、視覚的にはサイドバーを最初に表示するのに適しています）。
- **簡単なレスポンシブリフロー** — ブレークポイントごとに領域テンプレートを切り替えます。

## なぜ重要なのか

名前付きグリッド領域により、ページレベルのレイアウト（header/sidebar/main/footer）が読みやすく、かつ簡単にレスポンシブ対応になります。構造の変更は ASCII マップを編集するだけで、位置を再配線する必要がありません。

これはCSSが提供する最もわかりやすく、保守性の高いレイアウト技術の1つです。