CSSのvar関数を完全ガイド！初心者でもわかる変数の呼び出し方

変数をvar()関数で参照する方法と基本構文

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

生徒

「CSSで変数を決めたのですが、実際にどうやって使えばいいんですか？」

先生

「決めた変数を呼び出すには、varという特別な書き方を使うんですよ。」

生徒

「バァ、ですか？具体的にはどのように書くんですか？」

先生

「使い方はとてもシンプルです。基本の構文をマスターしていきましょう！」

1. CSSのvar関数とは何かを知ろう

CSSの「var（バァ）」とは、あらかじめ自分で決めておいた「変数（名前をつけた箱）」の中身を、必要な場所で取り出すための専用の命令です。プログラミング未経験の方には、「保存しておいたラベルを呼び出す機能」と考えると分かりやすいかもしれません。

たとえば、サイト全体のテーマカラーを「メインの色」という箱に保存したとします。その色を実際に文字や背景に使いたいときに、「あのメインの色をここに塗ってください」とパソコンにお願いするのがvar関数の役割です。これを使うことで、何度も同じ色コード（#ffffffなど）を打ち込む必要がなくなります。これはウェブデザインにおいて、作業を劇的に楽にするための非常に重要なステップです。

2. var関数の基本構文と書き方のルール

var関数を使うときの書き方は非常に決まっています。基本的には「var(--変数名)」という形で記述します。ここで最も大切なのは、ハイフン二つ（--）を含めた名前をカッコの中に入れるという点です。これを忘れてしまうと、パソコンはどの箱を探せばいいのか分からず、正しく動作してくれません。

パソコンを初めて触る方にとって、カッコやハイフンを入力するのは少し手間に感じるかもしれませんが、これはパソコンとの約束事です。半角英数字で正確に入力しましょう。また、CSSのルールとして、必ず最後に「;（セミコロン）」を付けることも忘れないでください。これは文章の句読点「。」のようなもので、命令の終わりを意味します。


<style>
	:root {
		--primary-blue: #0000ff;
	}
	.box-text {
		color: var(--primary-blue);
	}
</style>

<div class="box-text">
	<p>この文字は変数で指定した青色になります。</p>
</div>

ブラウザ表示

3. 実際に文字の色を変数で参照してみよう

次は、実際に文字の色を変数を使って変えてみる練習です。変数を呼び出す（参照する）ときは、通常の色を指定する場所にそのまま「var()」を書き込みます。一度この方法を覚えると、色の変更が驚くほど簡単になります。たとえば、複数の見出しがある場合でも、すべての見出しに同じ変数名を指定しておけば、後で箱の中身の色を変えるだけで一気に全部の色が変わるのです。

このように、一つの場所を変えるだけで全体に影響を与えることができる仕組みを「一括管理」と呼びます。プロの制作者は、手作業で何箇所も書き直すようなことはしません。必ずこのように変数とvar関数を組み合わせて、賢く効率的にサイトを作っています。まずは簡単な文字色から挑戦して、慣れていきましょう。


<style>
	:root {
		--accent-pink: #ff69b4;
	}
	.title-pink {
		color: var(--accent-pink);
		font-weight: bold;
	}
</style>

<h1 class="title-pink">アクセントカラーの見出し</h1>
<p>var関数を使うことで、特定の色を簡単に呼び出せました。</p>

ブラウザ表示

4. 背景色や枠線に変数を使う応用テクニック

var関数は文字の色だけでなく、背景色（background-color）や枠線（border）など、あらゆる場所で使うことができます。デザインに統一感を出すためには、文字の色と枠線の色を揃えることがよくありますが、そんなときこそ変数の出番です。同じ変数名をそれぞれの場所に記述するだけで、完璧に色の揃った美しいデザインが完成します。

もし、後から「もう少し薄いグレーにしたいな」と思ったら、大元の変数の値を修正するだけです。var関数で参照しているすべてのパーツが、あなたの指示に従って一斉に色を変えてくれます。まるで魔法のように感じられるかもしれませんが、これがウェブ制作の基本となる便利な仕組みなのです。初心者の方は、色々なプロパティでvar関数が使えることを覚えておいてください。


<style>
	:root {
		--theme-gray: #f0f0f0;
		--border-dark: #333333;
	}
	.sample-card {
		background-color: var(--theme-gray);
		border: 2px solid var(--border-dark);
		padding: 20px;
		width: 300px;
	}
</style>

<div class="sample-card">
	<img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid mb-2">
	<p>背景と枠線の両方に変数を使用しています。</p>
</div>

ブラウザ表示

5. 変数が見つからないときの予備設定（フォールバック）

実はvar関数には、とても親切な機能が備わっています。それは、もし何らかの理由で指定した変数が見つからなかった場合に、「代わりにこの色を使ってください」という予備の指示を出せる機能です。これを専門用語で「フォールバック」と呼びます。書き方は「var(--変数名, 予備の値)」という風に、コンマ（,）で区切って予備の色などを書き加えます。

これは、大規模なサイト制作や、チームで作業をするときに非常に役立ちます。万が一の入力ミスでデザインが真っ白になってしまうのを防いでくれる「保険」のようなものだと考えてください。初心者の方は、まずは基本の書き方をマスターすることが先決ですが、慣れてきたらこのフォールバックの設定も活用して、より壊れにくい丈夫なプログラムを書けるようになりましょう。

6. サイズや数値を変数でコントロールする方法

これまでは色について解説してきましたが、var関数は「大きさ」の指定にも使うことができます。たとえば、サイト内の余白（マージン）や、ボタンの丸み（角丸）などを数値で保存しておき、それを呼び出すことができます。これにより、サイト全体のバランスを均等に保つことが非常に簡単になります。

パソコンの画面上で、ある場所の余白は10ピクセルなのに別の場所は12ピクセルになっていると、見た人に違和感を与えてしまいます。すべての場所に同じ変数をvar関数で適用しておけば、数学的に正確な、整ったレイアウトを作ることができます。デザインのプロは、このように数値もしっかりと管理して、美しいウェブサイトを構築しているのです。


<style>
	:root {
		--standard-radius: 15px;
		--main-spacing: 10px;
	}
	.rounded-box {
		border-radius: var(--standard-radius);
		padding: var(--main-spacing);
		background-color: #e0ffe0;
		border: 1px solid green;
	}
</style>

<div class="rounded-box">
	<p>角の丸みと余白を変数で指定しています。</p>
	<img src="/img/sample120-120.jpg" alt="アイコン画像" class="img-fluid">
</div>

ブラウザ表示

7. なぜ直接書かずにvar関数を使うのか

プログラミングを始めたばかりの頃は、「直接色を書いた方が早いのではないか？」と疑問に思うかもしれません。しかし、ウェブサイトを運用していく中では、デザインの変更は必ずと言っていいほど発生します。クライアント（依頼主）から「やっぱり全体のイメージを少し明るくしてほしい」と言われたとき、数百枚のページを一箇所ずつ修正するのは現実的ではありません。

var関数を使っていれば、変更作業はほんの数秒で終わります。この「修正のしやすさ」を専門用語でメンテナンス性が高いと言います。良いエンジニアやデザイナーは、作る瞬間だけでなく、将来の修正のことも考えてコードを書いています。var関数を使うことは、未来の自分や仲間の負担を減らすための、とても思いやりのある書き方なのです。ぜひ、今のうちからこの習慣を身につけておきましょう。

8. 入力ミスを防ぐためのパソコン操作のコツ

最後に、var関数を使うときに初心者が陥りやすいミスを防ぐコツをお伝えします。それは「コピーと貼り付け（コピペ）」を積極的に使うことです。自分で決めた変数名を、var関数のカッコの中に手入力すると、どうしても「-」が一つ足りなかったり、スペルを間違えたりしてしまいます。パソコンは一文字の間違いも許してくれない、とても真面目な機械です。

変数名を決めたら、その部分をマウスでなぞってコピーし、var関数のカッコの中に貼り付けるようにしましょう。これだけで、原因不明の「動かない！」というトラブルの半分以上を回避できます。また、英数字の入力は必ず「半角」で行ってください。全角で入力してしまうと、パソコンはそれを命令として認識できなくなります。こうした小さな注意の積み重ねが、スムーズな学習の鍵となります。

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