CSS変数の使い方を完全ガイド！初心者でもわかる宣言方法とメリット

CSS変数の宣言方法と使い方（--変数名: 値）

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

生徒

CSSで色を指定するとき、同じ色を何度も書くのが大変です。もっと効率的な方法はありますか？

先生

それならCSS変数を使ってみましょう。一箇所で色を管理できるので、修正も一瞬で終わりますよ。

生徒

変数ってプログラミングみたいで難しそうですが、私でもできますか？

先生

大丈夫です。ルールさえ覚えれば、パソコン初心者の方でもすぐに使いこなせます。一緒に見ていきましょう！

1. CSS変数とは何かをやさしく解説

CSS変数とは、ウェブサイトのデザインで使う色やサイズなどの情報を、あらかじめ名前を付けた箱に入れて保存しておく仕組みのことです。専門用語ではカスタムプロパティとも呼ばれます。たとえば、サイト全体で使いたいメインの青色がある場合、その色にメインカラーという名前をつけて保存しておけば、後から何度でもその名前で色を呼び出すことができます。

これの何が便利かというと、もし後から「やっぱり青じゃなくて緑にしたい」と思ったときです。普通なら、何十箇所もある色の指定をすべて書き直さなければなりませんが、変数を使っていれば、箱の中身を書き換えるだけで、その変数を使っているすべての場所の色が自動的に変わります。これは、ウェブ制作の作業効率を劇的にアップさせる非常に強力なテクニックです。

2. 変数の宣言方法と基本の書き方

CSS変数を使うためには、まず変数を宣言する必要があります。宣言とは、パソコンに対して「これからこの名前の箱を使いますよ」と教えてあげる作業のことです。変数の名前には必ず先頭にハイフンを二つ付けます。例えば「--main-color」といった具合です。

この宣言をどこに書くかというと、一般的には「:root（ルート）」という場所に書きます。ルートとは、HTML文書全体の一番大元の部分という意味です。ここに書いておくことで、ページ内のどこからでもその変数を使えるようになります。記述の形式は、プロパティ名の代わりに変数名を書き、コロンで区切って値を指定し、最後にセミコロンを付けます。


<style>
	:root {
		--my-blue: #007bff;
		--my-font-size: 20px;
	}
	.title {
		color: var(--my-blue);
		font-size: var(--my-font-size);
	}
</style>

<h1 class="title">CSS変数のテスト表示</h1>
<p>ルートで設定した青色とサイズが適用されています。</p>

ブラウザ表示

3. 保存した変数を呼び出すvar関数の使い方

宣言した変数を使うときには、「var（バァ）」という命令を使います。これを関数と呼びますが、使い方は簡単です。値を指定したい場所に「var(変数名)」と書くだけです。例えば、背景色を変数にしたい場合は「background-color: var(--main-bg);」となります。

パソコンは、このvarという文字を見つけると、「あ、これは箱の中身を見に行けばいいんだな」と理解して、保存されている具体的な色や数値に置き換えて処理してくれます。もし変数名を間違えてしまうと、何も表示されなかったり、デザインが崩れたりするので、名前のスペルには注意しましょう。大文字と小文字も区別されるので、基本的には小文字で統一するのがおすすめです。

4. 複数の場所で同じ色を使い回す具体例

ここでは、実際に複数の要素に同じ変数を適用してみましょう。見出しとボタン、そして枠線の色を一つの変数で管理する例です。一箇所で管理することのメリットを実感してみてください。


<style>
	:root {
		--brand-color: #e83e8c;
	}
	.header-text {
		color: var(--brand-color);
		border-bottom: 3px solid var(--brand-color);
	}
	.sample-button {
		background-color: var(--brand-color);
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
	}
</style>

<h2 class="header-text">ブランドカラーの見出し</h2>
<button class="sample-button">お申し込みはこちら</button>
<p>見出しの文字、下線、ボタンの背景がすべて同じ色で統一されています。</p>

ブラウザ表示

5. 余白やサイズの指定にも変数を活用しよう

CSS変数は色だけに使うものではありません。余白の大きさや、画像の幅など、数値であれば何でも入れることができます。例えば「--standard-gap: 15px;」のように定義しておけば、パーツ同士の間隔を常に一定に保つことができます。

デザインに統一感を出すためには、適当な数値を使わず、決まったルールに従って余白を設定することが大切です。変数を使えば、そのルールを名前で管理できるので、「ここはどれくらいの隙間だったかな？」と迷うことがなくなります。初心者の方は、まずはよく使う数値を変数にすることから始めてみると良いでしょう。


<style>
	:root {
		--box-size: 100px;
		--box-margin: 20px;
	}
	.color-box {
		width: var(--box-size);
		height: var(--box-size);
		margin: var(--box-margin);
		background-color: #ffc107;
		display: inline-block;
	}
</style>

<div class="color-box"></div>
<div class="color-box"></div>
<p>ボックスの大きさと隙間を変数で制御しています。画像を並べるときなどに便利です。</p>

ブラウザ表示

6. 画像の角を丸める設定を変数にする方法

サイト内の画像の角を少し丸くしたいとき、一律で同じ丸みをつけたい場合があります。これも変数にしておけば、後から「もう少し丸くしたい」と思った時に一括で調整可能です。サンプルのパスを使って、実際にどのように見えるか試してみましょう。


<style>
	:root {
		--img-radius: 20px;
		--img-border: #6c757d;
	}
	.rounded-photo {
		border-radius: var(--img-radius);
		border: 5px solid var(--img-border);
		width: 150px;
	}
</style>

<img src="/img/sample150-100.jpg" alt="サンプル画像" class="rounded-photo">
<p>画像の角の丸みと、枠線の色を変数で指定しています。</p>

ブラウザ表示

7. 初心者が注意すべき名前の付け方のルール

変数の名前をつけるときは、自由といってもいくつかの注意点があります。まず、日本語（全角文字）は使えません。必ず半角の英数字とハイフンを使用してください。また、名前の始まりを数字にすることもできません。「--1-color」はダメですが、「--color-1」なら大丈夫です。

また、名前はできるだけ意味がわかるものにしましょう。「--aaa」や「--bbb」という名前だと、後で見返したときに何の色だったか忘れてしまいます。「--main-text-color（メインの文字色）」や「--sub-bg-color（サブの背景色）」のように、役割がわかる名前にするのがプロのコツです。一見面倒に思えますが、ページが大きくなるほどこの習慣が自分を助けてくれます。

8. 変数が効かないときのチェックポイント

もし設定した変数が反映されない場合は、まず次の点を確認してみましょう。一つ目は、コロン「:」とセミコロン「;」が逆になっていないかです。二つ目は、名前の前のハイフンが二つ「--」ちゃんと付いているか。三つ目は、呼び出しのときに「var()」の中に正しい名前を入れているかです。

意外と多いミスが、カッコの閉じ忘れです。「var(--name」のように閉じカッコを忘れると、それ以降のCSSがすべて無効になってしまうこともあります。プログラミング未経験の方は、一文字ずつ丁寧に確認する癖をつけると、上達が早くなります。また、パソコンのキーボードで「ハイフン」を打つのが難しいかもしれませんが、ひらがなの「ほ」のキーをそのまま押せば入力できますよ。

9. 管理のしやすさがサイトの品質を決める

綺麗なウェブサイトを作るためには、コードも綺麗に保つ必要があります。 CSS変数を使う最大の意義は、コードの整理整頓です。整理整頓されたコードは、ミスが少なく、他の人が見ても理解しやすいものになります。

最初は「わざわざ変数にしなくても、直接色を書けばいいじゃないか」と思うかもしれません。しかし、サイトが成長してページ数が増えていくと、変数のありがたみが身に染みてわかってきます。初心者から一歩抜け出して、メンテナンスのしやすいスマートな書き方を今のうちから身につけておきましょう。これができれば、プロのエンジニアへの第一歩を踏み出したと言っても過言ではありません。

2026年最新スキルアップ・実践セミナー