CSS変数の使い方を完全ガイド！初心者でもわかるカスタムプロパティ

CSS変数とは？カスタムプロパティの基本を理解しよう

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

生徒

CSSでたくさんの場所の色を変えたいとき、ひとつずつ書き直すのが大変なんです。もっと楽にする方法はありますか？

先生

そんなときこそ、CSS変数（カスタムプロパティ）の出番です。箱の中に色などの情報をしまっておいて、どこからでも使い回せる仕組みですよ。

生徒

箱に入れて使い回す、ですか？難しそうに聞こえますが、私にも使えますか？

先生

大丈夫です。一度覚えてしまえば、ホームページ作りが驚くほど効率的になります。基本からゆっくり解説していきますね！

1. CSS変数とは何かを学ぼう

ホームページを作っていると、「このメインの青色を、あっちのボタンにも、こっちの見出しにも使いたい」という場面がよくあります。しかし、あとから「やっぱり少し明るい青色に変えたいな」と思ったとき、全ての場所を手作業で書き換えるのは非常に手間がかかります。そこで便利なのが、CSS変数（別名：カスタムプロパティ）です。

変数は、プログラミングの世界でよく使われる「データを入れておく箱」のようなものです。この箱に名前をつけて、中身に色やサイズなどの値を保存しておきます。 CSS変数を活用することで、一箇所を書き換えるだけで、その変数を使っている全ての場所のデザインを同時に変更できるようになります。これは、ウェブデザインの管理を劇的に簡単にする魔法のような機能です。

2. 変数の書き方とルールを知ろう

CSS変数を定義するときには、特別なルールがあります。まず、変数名の前には必ず「--」（ハイフン二つ）を付けなければなりません。例えば、メインの色を保存したい場合は「--main-color」といった名前にします。

この変数は、通常「:root（ルート）」という場所に記述します。 rootとは、HTML文書全体の一番上の階層を指します。ここに書いておくことで、ページ内のどの要素からでもその変数を使えるようになります。大文字と小文字は区別されるので、名前をつけるときは注意しましょう。基本的には、半角の英数字とハイフンを使って、自分が見て分かりやすい名前をつけるのがコツです。


<style>
	:root {
		--primary-color: #ff6347;
		--base-font-size: 16px;
	}
	.title {
		color: var(--primary-color);
		font-size: var(--base-font-size);
	}
</style>

<h1 class="title">CSS変数の基本テスト</h1>
<p>この文字は変数で指定された色とサイズになります。</p>

ブラウザ表示

3. var関数を使って値を呼び出す方法

定義した変数を実際に使いたいときは、「var()」という関数を使います。括弧（かっこ）の中に、先ほど決めた変数名を入れるだけです。例えば、背景色に変数を適用したい場合は「background-color: var(--my-bg-color);」のように記述します。

もし、万が一変数が読み込めなかったときのために、「予備の値（フォールバック）」を設定することもできます。「var(--main-color, blue)」と書けば、変数が正しく機能しないときに青色が適用されます。初心者の方は、まずはシンプルに変数名を入れるところから練習してみましょう。

4. 色の管理を効率化する具体例

実際のサイト制作では、メインカラー、サブカラー、アクセントカラーといった複数の色を変数で管理します。ここでは、カード型のデザインを例に、複数の変数を使ってみましょう。画像とテキストを組み合わせたパーツで、背景や文字の色を変数で制御します。


<style>
	:root {
		--card-bg: #f8f9fa;
		--card-border: #007bff;
		--text-main: #333333;
	}
	.custom-card {
		background-color: var(--card-bg);
		border: 2px solid var(--card-border);
		padding: 20px;
		width: 250px;
		border-radius: 10px;
	}
	.custom-card p {
		color: var(--text-main);
	}
</style>

<div class="custom-card">
	<img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mb-2">
	<p>変数でデザインされたカードです。管理がとても簡単になります。</p>
</div>

ブラウザ表示

5. 数値やサイズにも変数を使ってみよう

CSS変数は色だけでなく、余白（マージンやパディング）や、文字の大きさ、ボーダーの太さなど、数値が必要な場所ならどこにでも使えます。例えば、サイト全体の余白を「--standard-padding: 15px;」として定義しておけば、統一感のあるレイアウトが簡単に作れます。

また、calc（計算）という機能と組み合わせることも可能です。「var(--size) * 2」のように計算式を入れることで、基本の大きさを基準に、倍のサイズを作るなど、高度な使い方もできるようになります。まずは決まった数値を箱に入れる感覚で、身近なところから試してみてください。

6. メンテナンス性が高まる理由

プログラミング未経験の方が最も実感しにくいのが「メンテナンス性」という言葉かもしれません。これは「あとで修正しやすくなる」という意味です。一人で練習しているときは少なく感じますが、実際の仕事では何百行、何千行というCSSを書くことがあります。

もし全ての箇所に直接「#ff0000」と書いていたら、色が変更になったときに、そのコードを一つずつ探して修正しなければなりません。しかし変数を使っていれば、最初のroot設定を一箇所書き換えるだけで、魔法のようにサイト全体の色が変わります。この便利さを知ると、もう変数なしでのコーディングには戻れなくなるでしょう。


<style>
	:root {
		--btn-color: #28a745;
		--btn-spacing: 12px 24px;
	}
	.my-button {
		display: inline-block;
		background-color: var(--btn-color);
		color: white;
		padding: var(--btn-spacing);
		text-decoration: none;
		border-radius: 5px;
		font-weight: bold;
	}
</style>

<a href="#" class="my-button">ボタンの変数を適用</a>
<p>余白も色も、すべて変数で決めています。</p>

ブラウザ表示

7. ダークモードへの対応が簡単になる

最近のスマートフォンやパソコンでは「ダークモード」が人気です。画面を黒っぽくして目に優しくする機能ですが、これもCSS変数を使うと簡単に実装できます。通常時用の色の変数と、ダークモード用の色の変数を用意し、切り替える仕組みを作るのです。

変数を一箇所で管理しているからこそ、ページ全体の色をごっそり入れ替えることが可能になります。これからプログラミングを学ぶ上で、このような「変化に対応しやすい作り方」を意識することは非常に重要です。将来的に動きのあるサイトを作りたいときにも、この基礎知識が必ず役立ちます。

8. 初心者が間違えやすい注意点

最後に、初心者がハマりやすいポイントをいくつか紹介します。一つ目は、セミコロン「;」の忘れです。変数を定義するとき、最後には必ずセミコロンをつけてください。二つ目は、名前の付け方です。数字から始まる名前は使えません。必ず英字から始めるようにしましょう。

三つ目は、スペルミスです。定義した名前と、var関数の中で使う名前が1文字でも違うと、正しく表示されません。エラーが出たときは、まず「--」の後の名前が全く同じかどうかを確認しましょう。パソコンの操作に慣れていない方は、コピー＆ペーストを上手に使うとミスが減りますよ。


<style>
	:root {
		--my-icon-size: 80px;
		--icon-bg: #e9ecef;
	}
	.icon-box {
		width: var(--my-icon-size);
		height: var(--my-icon-size);
		background-color: var(--icon-bg);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
</style>

<div class="icon-box">
	<img src="/img/sample120-120.jpg" alt="アイコン" width="50" height="50">
</div>
<p>丸いアイコンの枠線やサイズも変数で管理しています。</p>

ブラウザ表示

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