CSSグリッド入門！grid-areaで名前付き領域を使ったレイアウトの作り方をやさしく解説

grid-areaで名前付き領域を使ったレイアウトの作り方

先生と生徒の会話形式で理解しよう

生徒

「CSSのグリッドレイアウトで、数字じゃなくて名前で配置できる方法があるって聞いたんですが…」

先生

「それがgrid-areaです。場所に名前を付けて配置できるので、とても分かりやすくなります」

生徒

「数字が苦手なので、名前で指定できるなら助かりそうです」

先生

「間取り図の部屋に名前を書くような感覚で覚えられますよ」

1. grid-areaとは何かを超かんたんに説明

grid-areaは、CSSグリッドレイアウトで使える配置方法のひとつです。数字で位置を指定する代わりに、場所に名前を付けて要素を置けます。

たとえば、家の間取り図で「リビング」「キッチン」「寝室」と名前を書くように、画面のエリアにも名前を付けるイメージです。プログラミング未経験の人でも理解しやすいのが大きな特徴です。

2. 名前付き領域を使うと何がうれしいのか

grid-areaを使う最大のメリットは、コードが読みやすくなることです。数字だけの指定だと、どこに配置されるのか分かりにくくなります。

名前付き領域なら、「ここはヘッダー」「ここはメニュー」と一目で分かります。将来見直したときも、内容を思い出しやすくなります。

3. grid-template-areasでレイアウトの設計図を作る

まずは、親要素にgrid-template-areasを書いて、画面全体の設計図を作ります。文字でレイアウトを書くので、見た目の想像がしやすいです。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "header header"
        "menu main";
}
</style>

<div class="container"></div>

ブラウザ表示

この例では、header、menu、mainという3つの名前付き領域を作っています。同じ名前を並べることで、横に広いエリアも表現できます。

4. 各要素にgrid-areaで名前を割り当てる

次に、子要素にgrid-areaを使って、どの領域に入るか指定します。名前が一致した場所に、自動で配置されます。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
        "header header"
        "menu main";
}
.header { grid-area: header; background: lightblue; }
.menu { grid-area: menu; background: lightgreen; }
.main { grid-area: main; background: lightyellow; }
</style>

<div class="container">
    <div class="header">ヘッダー</div>
    <div class="menu">メニュー</div>
    <div class="main">メイン</div>
</div>

ブラウザ表示

HTMLの並び順に関係なく、指定した名前の場所に配置されます。見た目とコードの意味が一致しやすくなります。

5. ドットを使って空白エリアを作る方法

grid-template-areasでは、使わない場所をドットで表します。これにより、あえて何も置かない余白を作れます。


<style>
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "header header header"
        ". main .";
}
.header { grid-area: header; }
.main { grid-area: main; }
</style>

<div class="container">
    <div class="header">ヘッダー</div>
    <div class="main">中央コンテンツ</div>
</div>

ブラウザ表示

ドットは「何も置かない場所」という意味です。中央寄せのようなレイアウトも、感覚的に作れます。