グリッドテンプレート領域
grid-template-areasでグリッドの領域に名前を付け、読みやすく意味のあるレイアウトを作成します。
「グリッドテンプレート領域」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
名前付きグリッドエリア
grid-template-areasを使うと、ASCIIアートでグリッドの領域に名前を付けられます。レイアウトの可読性と保守性が大きく向上します。
テンプレートエリアの定義
引用符で囲んだ各文字列が1行を表します。同じ名前のセルで長方形のエリアが形成されます。空のセルには.を使用します。
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>名前による項目の配置
grid-areaプロパティにエリア名（引用符なし）を指定すると、グリッド項目を名前付きエリアに割り当てられます。
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>テンプレートエリアのルール
名前付きエリアは長方形でなければなりません。各セルは1つのエリアにしか属せません。エリア名を離れたセルに配置することはできません。そのような指定は無効になります。
.による空のセル
grid-template-areasで、1つ以上のピリオドを使って空のセルを示します。
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>メディアクエリによるレスポンシブなエリア
メディアクエリ内でgrid-template-areasを再定義すると、レイアウト構造を完全に組み替えられます。
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>自動生成される名前付きライン
エリアに名前を付けると、CSSは行と列の両方にarea-startとarea-endという名前付きグリッドラインを自動的に作成します。
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>エリアとライン番号の組み合わせ
名前付きエリアと明示的なライン番号は、同じグリッド内で共存できます。項目は名前、ライン番号、またはspanで配置できます。
グリッドのビジュアル設計ワークフロー
一般的な手順では、まずテンプレートエリアでレイアウトをスケッチし、その後で列と行のサイズを定義します。これにより、構造とサイズ設定を分離できます。
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>テンプレートエリアとアクセシビリティ
Gridの視覚的な順序は、DOMのソース順序と異なる場合があります。スクリーンリーダーは視覚的な配置ではなくDOMの順序に従います。Gridの配置で項目を視覚的に並べ替える場合でも、DOMの順序が論理的になるようにしてください。
grid-templateのショートハンド
grid-template-areas、grid-template-columns、grid-template-rowsを、1つのgrid-template宣言にまとめられます。
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>確認問題
grid-template-areasで、空のセルを示すために使う文字は何ですか。
まとめ
grid-template-areasはASCIIアートを使ってレイアウト領域に名前を付けます。項目はgrid-area: nameで配置します。エリアは長方形でなければならず、空のセルには.を使用します。メディアクエリでエリアを再定義すると、すっきりした読みやすいCSSで完全にレスポンシブなレイアウトを作成できます。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「グリッドテンプレート領域」レッスンは無料ですか？
はい。「グリッドテンプレート領域」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「グリッドテンプレート領域」で何を学びますか？
grid-template-areasでグリッドの領域に名前を付け、読みやすく意味のあるレイアウトを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「グリッドテンプレート領域」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Display Gridとテンプレートの列・行
- fr単位とRepeat
- Gapとグリッド配置
- グリッドテンプレート領域