Grid Template Areas（grid-template-areas）名前付き領域プロパティ

最終更新：2026-09-13

grid-template-areas Grid Template Areas（grid-template-areas）名前付き領域プロパティ

grid-template-areas プロパティを使うと、名前付き領域でグリッドレイアウトの構造を視覚的に定義できます。各文字列が 1 行を表し、文字列内の各識別子がセルが属する領域を表します。同じ名前の隣接するセルは自動的に 1 つの領域に統合されます。これによりグリッドレイアウトの可読性が大きく向上し、ページ全体のデザインに特に適しています。

カテゴリ
初期値	none
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

grid-template-areas: none | <string>+;

⚙️ 値

値	タイプ	説明
`none`	キーワード	名前付き領域なし
`<string>`	タイプ	領域名の定義

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
grid-template-areas	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： 領域名は行と列に沿って並べて書かれるため、ページ構造が一目で分かります。これは grid-template-areas の最大の利点の一つです。

注意： すべての文字列のセル数はグリッドの列数と一致していなければならず、すべての領域は長方形でなければなりません。L 字型や不規則な形は許されません。

❓ よくある質問

Qgrid-template-areas の領域名の規則は何ですか？

A領域名は有効な CSS 識別子でなければなりません。数字で始めてはならず、スペースや特殊文字を含んではいけません（ハイフンとアンダースコアは可）。auto や span などのグローバルなキーワードは使えません。各文字列はグリッドの 1 行を定義し、文字列内で同じ名前を共有する隣接セルは 1 つの領域に統合されます。その領域は長方形でなければならず、L 字型や断片化した形は無効です。

Qセルを空にするにはどうすればよいですか？

A1 つ以上の連続するドット（.）を使って空のセルを表します。たとえば "header . ." とすると 2 列目と 3 列目が空になります。すべての行の文字列は同じ長さ、つまり同じセル数でなければならず、空のプレースホルダーも列数に含まれます。空にしたいセルには 1 つの . を書きます。余分なドットは可読性のためだけで、意味は持ちません。

Qgrid-template-areas でレスポンシブレイアウトを作るにはどうすればよいですか？

A領域の割り当てを CSS に移します。デスクトップでは "header header" / "sidebar main" のようなテンプレートを使い、モバイルのメディアクエリでは "header" / "main" / "sidebar" にテンプレートを切り替えます。子要素は引き続き grid-area で領域名を参照し、DOM は変わりません。領域名は意味を持たない単なるラベルなので、アイテムの grid-area 参照がテンプレートと一致している限り自由に名前を変えられます。このレイアウトと構造の分離こそが grid-template-areas の中核的な価値です。