CSSグリッドとレイアウトを数値を数式で制御！初心者でも失敗しない変数活用術

グリッドやレイアウトのサイズを変数で制御する方法

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

生徒

「ホームページの画面を縦や横に綺麗に並べたいのですが、一箇所サイズを変えると全部ずれてしまって大変です。」

先生

「それはレイアウトの管理が大変な状態ですね。CSS変数を使えば、全体のサイズや隙間の間隔を一つの数字でコントロールできるようになりますよ。」

生徒

「一つの数字を変えるだけで、全体のバランスが整うんですか？」

先生

「その通りです！図工の設計図を作るような感覚で、グリッドやレイアウトを効率よく作る方法を解説しますね。」

1. レイアウトとグリッドの基本を初心者向けに解説

ウェブサイトの制作において、文章や画像を整理して配置することを「レイアウト」と呼びます。そして、そのレイアウトを「網目状のマス目」で考える手法を「グリッド（CSS Grid）」と言います。パソコンの画面を大きな方眼紙だと想像してみてください。そこに縦線と横線を引いて、どの場所に何を置くかを決めていくのがグリッドの仕組みです。

通常、このマス目の幅や高さ、マス目同士の隙間（余白）は、ピクセル（px）などの数字で指定します。しかし、サイトが大きくなると「ここの隙間は何ピクセルだったかな？」と混乱してしまいます。そこで「CSS変数」という箱に数字を入れて名前を付けることで、誰が見ても分かりやすい設計図を作ることができるようになります。

2. グリッドの隙間を変数で一括管理するメリット

レイアウトを綺麗に見せる最大のコツは「余白の統一」です。あちこちでバラバラな隙間の広さを使っていると、サイト全体が散らかった印象になってしまいます。

そこで「--grid-gap」という名前の変数を作ってみましょう。この箱の中に「20px」という数字を入れておけば、サイト内の全てのマス目の隙間にこの変数を使うことができます。もし後から「やっぱり隙間をもう少し広げて30pxにしたい」と思ったときも、箱の中身を一つ書き換えるだけで、全ての場所が同時に整います。これは、何度も同じ作業を繰り返さなくて済むため、パソコン操作に慣れていない方にも非常に優しい方法です。


<style>
	:root {
		/* マス目の隙間を管理する変数 */
		--layout-gap: 15px;
		--box-color: #e3f2fd;
	}

	.grid-container {
		display: grid;
		/* 3つの列を同じ幅で並べる */
		grid-template-columns: repeat(3, 1fr);
		/* 変数を使って隙間を設定 */
		gap: var(--layout-gap);
		padding: 10px;
	}

	.grid-item {
		background-color: var(--box-color);
		border: 2px solid #2196f3;
		padding: 20px;
		text-align: center;
	}
</style>

<div class="grid-container">
	<div class="grid-item">1番</div>
	<div class="grid-item">2番</div>
	<div class="grid-item">3番</div>
</div>
<p>隙間の広さを変数一つで決めています。</p>

ブラウザ表示

3. 画面の横幅を変数で決めて中央に配置する

多くのウェブサイトでは、内容が画面の真ん中にギュッと集まっています。これは「コンテンツの最大幅」が決まっているからです。この最大幅も変数で管理しましょう。たとえば「--content-width」という箱に「800px」と入れておきます。

中央寄せの設定は少し複雑ですが、変数を使うことで「ここは横幅を決めている場所なんだな」と一目で理解できるようになります。難しい単語を使わずに言うならば、これは「机の上に置く画用紙の大きさを決める」ようなものです。画用紙のサイズを変数にしておけば、中身を書き換えるだけで、大きな画用紙にしたり小さな画用紙にしたりが自由自在です。

4. 複数の列を柔軟に作り出すリピート機能の活用

グリッドには「repeat（リピート）」という、同じ設定を繰り返す便利な命令があります。これと変数を組み合わせると、さらに強力です。たとえば、商品の並びを「横に何個並べるか」という数字を変数にしてみましょう。

「--column-count」という変数に「4」と入れれば4列に、「2」と入れれば2列になります。このように、数字の部分を変数に置き換えるだけで、デザインのパターンを簡単に切り替えることができます。プログラミングの難しい計算をしなくても、箱の数字を入れ替えるだけで見た目がガラッと変わるのは、制作の大きな楽しみの一つです。


<style>
	:root {
		/* 横に並べる個数 */
		--col-num: 2;
	}

	.flexible-grid {
		display: grid;
		/* 変数を使って列の数を決める */
		grid-template-columns: repeat(var(--col-num), 1fr);
		gap: 10px;
	}

	.card {
		background: #fff5f5;
		border: 1px solid #ff8787;
		padding: 15px;
		text-align: center;
	}
</style>

<div class="flexible-grid">
	<div class="card">商品 A</div>
	<div class="card">商品 B</div>
	<div class="card">商品 C</div>
	<div class="card">商品 D</div>
</div>
<p>現在は2列（--col-num: 2）の設定になっています。</p>

ブラウザ表示

5. calc関数を使ってサイズを自動計算させる方法

レイアウトを作っていると、「全体の幅から余白の分だけ引き算したい」といった計算が必要になる場面があります。ここで登場するのが「calc（カルク）」という命令です。これは英語の「calculate（計算する）」の略です。

たとえば「--total-width」という全体の幅から、「100px」だけ引いた残りをメインの幅にしたい場合、「calc(var(--total-width) - 100px)」と書くことができます。変数とこの計算式を組み合わせれば、複雑なサイズの調整をブラウザ（画面を見るソフト）が自動でやってくれます。自分で電卓を叩いて計算する必要がないので、算数が苦手な方でも安心です。

6. サイドバーとメインコンテンツの比率を変数で決める

ブログのような「左にメニュー、右に記事」というレイアウトを作る際、その比率を変数で管理してみましょう。「--sidebar-width（メニューの幅）」を「200px」に設定します。メイン記事の方は、画面全体の幅からこの「--sidebar-width」を引いた残りに設定すれば、サイドバーを太くしたり細くしたりしても、メイン記事がずれることなく自動で追従してくれます。

この「連動する仕組み」こそが、美しいレイアウトを作る秘訣です。一箇所の変数を変えると、関連する全ての場所が算数の法則に従ってピタッと収まる快感は、一度味わうと病みつきになりますよ。


<style>
	:root {
		--side-w: 100px;
	}

	.main-layout {
		display: grid;
		/* サイドバーと残りの幅を割り当てる */
		grid-template-columns: var(--side-w) 1fr;
		min-height: 100px;
		border: 2px dashed #ccc;
	}

	.sidebar {
		background-color: #f1f3f5;
		padding: 10px;
	}

	.content {
		background-color: #ffffff;
		padding: 10px;
	}
</style>

<div class="main-layout">
	<div class="sidebar">メニュー</div>
	<div class="content">メインの記事内容がここに入ります。</div>
</div>
<p>サイドバーの幅を変数で指定しています。</p>

ブラウザ表示

7. パソコン初心者でも失敗しない！半角入力の鉄則

CSSや変数を書くときに一番注意しなければならないのは、文字の種類です。プログラミングの命令は、すべて「半角英数字」という種類で書く決まりがあります。日本語を入力するときの「全角」が混ざってしまうと、パソコンは命令を理解できず、画面が真っ白になったり崩れたりしてしまいます。

特に「-（ハイフン）」や「:（コロン）」、「;（セミコロン）」などは間違いやすいポイントです。見た目は似ていても、全角の「：」では動きません。もし上手くいかないときは、キーボードの「半角/全角」キーを確認して、もう一度半角で打ち直してみてください。この小さなルールを守るだけで、エラーの8割は解決します。

8. 画像の縦横比を変数で固定するテクニック

レイアウトの中に写真を並べるとき、バラバラな大きさの画像が混ざると見栄えが悪くなります。ここでも変数が役立ちます。画像の「アスペクト比（縦横の比率）」を変数にしてみましょう。

「--ratio-w: 16; --ratio-h: 9;」のように箱を作ります。最近のCSSには「aspect-ratio」という便利なプロパティがあり、これに変数を組み合わせれば、どんな画像でも自動的に「16対9」の映画のような比率で切り取ってくれます。画像一枚ずつにサイズを書き込む手間が省け、プロのカメラマンが並べたような美しいギャラリーサイトが完成します。


<style>
	:root {
		/* 16:9 の比率を変数で設定 */
		--r-w: 16;
		--r-h: 9;
	}

	.photo-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
	}

	.photo-item {
		width: 100%;
		/* 変数を使って比率を固定 */
		aspect-ratio: var(--r-w) / var(--r-h);
		object-fit: cover;
		border: 1px solid #333;
	}
</style>

<div class="photo-grid">
	<img src="/img/sample150-100.jpg" class="photo-item" alt="写真1">
	<img src="/img/sample120-120.jpg" class="photo-item" alt="写真2">
</div>
<p>比率が固定されているので、元の画像サイズが違っても綺麗に並びます。</p>

ブラウザ表示