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

生徒

「CSSのグリッドレイアウトを勉強中なのですが、要素をどこのマスに置くか数字で指定するのが少し難しくて混乱してしまいます。」

先生

「確かに数字で線を数えるのは大変ですよね。実は、エリアに名前をつけて、まるでお絵描きのように直感的にレイアウトを設計する方法があるんですよ。」

生徒

「名前に基づいて配置できるんですか？それなら、どこに何があるかパッと見て分かりそうですね！」

先生

「その通りです！それが『grid-template-areas』という機能です。さっそく、初心者の方でも簡単にできる設計のコツを解説しますね。」

1. grid-template-areasとは？文字で描くレイアウト

CSSの grid-template-areas は、Webページのレイアウトを「文字の地図」として設計できる非常に便利なプロパティです。通常、グリッドレイアウトでは「1番目の線から3番目の線まで」といった数字を使って場所を指定しますが、この方法では頭の中で複雑なパズルを解くような作業が必要になります。

一方で、 grid-template-areas を使うと、「ここはヘッダー」「ここはサイドバー」というように、エリアに直接名前を付けて配置できます。CSSのコードの中に、実際の画面構成に近い見た目の「設計図」を書くことができるため、後から見直した時にもどこを修正すればいいか一目でわかるのが大きなメリットです。パソコン初心者の方でも、地図を描くような感覚で楽しくレイアウトを作ることができます。

2. エリア設計の基本ステップ：まずは名札を付けよう

この機能を使うためには、まず各パーツに「名札」を付けることから始めます。例えば、Webサイトのヘッダー、メイン記事、サイドメニュー、フッターといった要素に対して、自分なりに分かりやすい名前を付けます。

名札を付けるには、各要素（子要素）に対して grid-area プロパティを使用します。ここで付けた名前を、後ほど親要素の設計図で呼び出すことになります。この準備作業を丁寧に行うことが、複雑なページを簡単に組み立てるためのコツです。難しい専門用語のように感じますが、要は「この箱は『header』という名前にします」という宣言をするだけです。


<style>
	/* 各パーツに名前（名札）を付ける */
	.header { grid-area: hd; background: #ffadad; }
	.sidebar { grid-area: sd; background: #ffd6a5; }
	.main { grid-area: mn; background: #fdffb6; }
	.footer { grid-area: ft; background: #caffbf; }

	.container {
		display: grid;
		gap: 10px;
		/* ここで地図を描く */
		grid-template-areas:
			"hd hd"
			"sd mn"
			"ft ft";
		grid-template-columns: 100px 1fr;
		grid-template-rows: 50px 150px 50px;
	}
	.item { padding: 10px; text-align: center; font-weight: bold; }
</style>

<div class="container">
	<div class="item header">ヘッダー</div>
	<div class="item sidebar">サイド</div>
	<div class="item main">メインコンテンツ</div>
	<div class="item footer">フッター</div>
</div>

ブラウザ表示

3. ダブルクォーテーションで囲む設計図の書き方

親要素でレイアウトを定義する際は、 grid-template-areas の後にダブルクォーテーション " " を使って1行ずつの構成を書いていきます。この中に入力した文字が、そのまま各マスの担当エリアになります。

例えば、 "hd hd" と書くと、その行の2つのマスは両方とも「hd（ヘッダー）」という要素が占領するという意味になります。同じ名前を横や縦に並べることで、要素を連結させることができるのです。この書き方は、まるで方眼紙に色を塗って「ここは公園、ここは住宅」と決めていく作業に似ています。視覚的に非常に分かりやすいため、初心者の方でもミスを防ぎやすい設計手法と言えるでしょう。

4. 空白を作りたいときはドットを使うのがコツ

全てのマス目を要素で埋めたくない場合もありますよね。デザイン上、あえて何も置かない「空きスペース」を作りたいときは、名前の代わりにドット . を入力します。ドット1つが、グリッドの1マス分を空室にすることを意味します。

例えば、 "hd . mn" と書けば、ヘッダーとメインの間にぽっかりと隙間が空きます。これを活用することで、より洗練された余裕のあるデザインを作ることができます。ドットを複数並べて ... と書いても1つの空室として扱われますが、見た目の美しさを保つために、他の名前の文字数に合わせて調整するとコードが読みやすくなります。


<style>
	.box-a { grid-area: a; background: #9bf6ff; }
	.box-b { grid-area: b; background: #a0c4ff; }
	
	.empty-grid {
		display: grid;
		gap: 10px;
		/* ドットを使って中央を空ける */
		grid-template-areas:
			"a . b"
			"a . b";
		grid-template-columns: 1fr 50px 1fr;
		height: 150px;
	}
	.item-s { padding: 20px; text-align: center; }
</style>

<div class="empty-grid">
	<div class="item-s box-a">左側の箱</div>
	<div class="item-s box-b">右側の箱</div>
</div>

ブラウザ表示

5. 四角形のルールを守って美しく配置

grid-template-areas を使う際には、一つだけ厳格なルールがあります。それは、各エリアが必ず「四角形」でなければならないということです。L字型やT字型のように、いびつな形でエリアを広げることはできません。

もし名前を "hd hd" "hd sd" のように配置してL字型を作ろうとすると、ブラウザが困ってしまい、レイアウトが正しく表示されません。常に「縦×横の四角い範囲」を意識して、同じ名前を並べていくのが成功の秘訣です。パズルを組み立てるように、綺麗な長方形が並んでいるか確認しながら設計を進めましょう。

6. 画像と文字をセンスよく重ねる設計例

画像の上にキャッチコピーを配置するような、バナー風のレイアウトもこの方法で作れます。背景用の大きなエリアの中に、あえて名前を重複させることで、要素が重なっているような見せ方をすることも可能です。CSS Gridの真骨頂は、このような自由な配置がシンプルなコードで実現できる点にあります。

以下の例では、共通のエリア名を使うのではなく、重なりを意識した設計を行っています。初心者の方は、まずパーツを並べることから始め、慣れてきたら少しずつ複雑な重なりに挑戦してみると良いでしょう。


<style>
	.banner {
		display: grid;
		grid-template-areas: "hero";
		width: 100%;
		height: 200px;
	}
	.photo {
		grid-area: hero;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.title {
		grid-area: hero;
		place-self: center; /* 中央に配置 */
		color: white;
		background: rgba(0,0,0,0.5);
		padding: 10px 20px;
		font-size: 24px;
	}
</style>

<div class="banner">
	<img src="/img/sample150-100.jpg" class="photo" alt="風景">
	<h1 class="title">素敵な旅の思い出</h1>
</div>

ブラウザ表示

7. レスポンシブ対応が魔法のように簡単になる

この設計方法の本当の凄さは、画面サイズに合わせてレイアウトを変える「レスポンシブデザイン」で発揮されます。スマホで見るときは縦一列、パソコンで見るときは横並び、といった変更が、設計図を書き換えるだけで完了します。

HTMLの構造をいじる必要はなく、CSSの grid-template-areas の文字列を並べ替えるだけです。例えば、スマホ用には "hd" "mn" "sd" "ft" と縦に書き、パソコン用には "hd hd" "sd mn" "ft ft" と書くだけで、劇的に見た目が切り替わります。この手軽さを知ると、もう数字を使った配置には戻れなくなるほど強力な機能です。

8. 挫折しないための開発者ツールの活用

最後に、設計がうまくいかない時の解決法をお伝えします。Google Chromeなどのブラウザには「開発者ツール」という機能があり、これを使うと自分が設計したグリッドが画面上でどのように分割されているか、引かれた線を直接見ることができます。

「このエリアの名前が間違っていないか」「四角形のルールを破っていないか」など、視覚的に答え合わせができるため、独学でプログラミングを始めたばかりの方でもスムーズに学習を進めることができます。最初は小さな2マス×2マスの設計から始めて、徐々に大きなサイトの地図を描けるようになっていきましょう。自分の思い通りの形に要素がピタッとはまる感覚は、一度味わうと病みつきになりますよ！