CSS変数とは？初心者にもわかるCSSカスタムプロパティの使い方とメリット

こんにちは。ゆうせいです。

新人研修中に受講者から以下の質問をいただきました。

今回はこの質問の答えたいと思います。

CSSを書いていると、同じ色や同じ余白を何度も書く場面がありますよね。

たとえば、サイトのメインカラーとして青色を使う場合、ボタン、見出し、リンク、アイコンなど、いろいろな場所に同じ色を指定します。

そのときに便利なのが、CSS変数です。

CSS変数とは、CSSの中で値に名前をつけて管理できる仕組みです。

正式には、CSSカスタムプロパティと呼ばれます。

「変数」という言葉が少し難しく感じるかもしれませんが、イメージはとてもシンプルです。

変数とは、値を入れておく名前付きの箱です。

たとえば、学校のロッカーを想像してください。

1番のロッカーには体操服、2番のロッカーには教科書、3番のロッカーには部活道具が入っていますよね。

CSS変数も同じです。

--primary-color という箱に #4a90e2 という色を入れておく。

そして、必要な場所でその箱から色を取り出して使います。

CSS変数の基本形

CSS変数は、次のように書きます。

:root {
	--primary-color: #4a90e2;
	--text-color: #333;
	--bg-color: #f9f9f9;
}

この中で大事なポイントは、-- から始まる名前です。

--primary-color

--text-color

--bg-color

このように、CSS変数は必ず -- から始めます。

そして、変数を使うときは var() を使います。変数を英語でVariableというのですね。

body {
	color: var(--text-color);
	background-color: var(--bg-color);
}

button {
	background-color: var(--primary-color);
}

var() は、CSS変数の中身を取り出すための関数です。

関数とは、何かの処理をしてくれる道具のようなものです。

var(--primary-color) と書くと、「--primary-color に入っている値を使ってください」という意味になります。

:rootとは何か

CSS変数は、よく :root の中に書かれます。

:root {
	--primary-color: #4a90e2;
}

:root は、HTML文書の一番上の要素を表します。

通常のHTMLページでは、html要素とほぼ同じ意味だと考えて大丈夫です。

では、なぜ :root にCSS変数を書くのでしょうか？

理由は、ページ全体から使いやすくするためです。

:root に書いたCSS変数は、サイト全体で使える共通設定のような役割になります。

たとえるなら、学校全体のルールを職員室に貼っておくようなものです。

各教室にバラバラのルールを書いておくより、1か所にまとめたほうがわかりやすいですよね。

CSS変数を使うメリット

CSS変数の大きなメリットは、修正が楽になることです。

たとえば、サイト全体のメインカラーを青からオレンジに変えたいとします。

CSS変数を使っていない場合は、CSSファイルの中から #4a90e2 を探して、何か所も修正する必要があります。

でも、CSS変数を使っていれば、次の1か所を変えるだけです。

:root {
	--primary-color: #f5a623;
}

すると、var(--primary-color) を使っている場所の色がまとめて変わります。

まるで、教室の時計を全部手作業で直すのではなく、親時計を1つ直したら全部の時計がそろうようなイメージです。

便利ですね！

CSS変数を使うメリットを整理すると、次のようになります。

特に大事なのは、色に意味を持たせられる点です。

たとえば、#4a90e2 とだけ書かれていても、何の色なのかすぐにはわかりません。

でも、--primary-color と書かれていれば、「メインカラーなんだな」と判断できます。

名前があるだけで、CSSの読みやすさがかなり変わります。

CSS変数を使わない場合と使う場合の違い

まず、CSS変数を使わない例を見てみましょう。

button {
	background-color: #4a90e2;
	color: #fff;
}

a {
	color: #4a90e2;
}

.heading {
	border-bottom: 3px solid #4a90e2;
}

同じ #4a90e2 が何度も出てきています。

もし色を変えたくなったら、すべての場所を探して修正しなければいけません。

次に、CSS変数を使った例です。

:root {
	--primary-color: #4a90e2;
	--white: #fff;
}

button {
	background-color: var(--primary-color);
	color: var(--white);
}

a {
	color: var(--primary-color);
}

.heading {
	border-bottom: 3px solid var(--primary-color);
}

同じ色を使っていても、値そのものは :root にまとめられています。

色を変えたいときは、--primary-color の値だけ変えればOKです。

管理がかなり楽になります！

CSS変数の名前の付け方

CSS変数の名前は自由につけられます。

ただし、あとから見ても意味がわかる名前にしましょう。

悪い例です。

:root {
	--blue: #4a90e2;
}

この名前でも動きます。

ただ、将来メインカラーが青から赤に変わったらどうでしょうか。

--blue という名前なのに、中身は赤色になります。

少し気持ち悪いですよね。

おすすめは、色そのものではなく役割で名前をつけることです。

:root {
	--primary-color: #4a90e2;
	--secondary-color: #f5a623;
	--text-color: #333;
	--bg-color: #f9f9f9;
	--border-color: #ddd;
}

このように名前をつけると、色が変わっても役割は変わりません。

--primary-color はメインカラー。

--text-color は文字色。

--border-color は枠線の色。

名前を見ただけで目的がわかります。

CSS変数のデメリット

CSS変数は便利ですが、何でもかんでも変数にすればよいわけではありません。

変数を増やしすぎると、逆に管理が難しくなります。

たとえば、次のように細かく作りすぎると大変です。

--button-blue

--button-light-blue

--button-hover-blue

--button-border-blue

--button-shadow-blue

似た名前が増えすぎると、「どれを使えばいいの？」と迷います。

引き出しを整理するためにラベルを貼ったのに、ラベルが多すぎて探しにくくなるようなものです。

CSS変数は、よく使う値やサイト全体で統一したい値に使うのがおすすめです。

たとえば、次のような値です。

CSS変数の実用例

実際のWebサイトでは、次のようにまとめると使いやすいです。

:root {
	--primary-color: #4a90e2;
	--secondary-color: #f5a623;
	--text-color: #333;
	--bg-color: #f9f9f9;
	--white: #fff;
	--gray: #777;
	--border-color: #ddd;
}

body {
	color: var(--text-color);
	background-color: var(--bg-color);
}

.card {
	background-color: var(--white);
	border: 1px solid var(--border-color);
}

.button {
	background-color: var(--primary-color);
	color: var(--white);
}

.button:hover {
	background-color: var(--secondary-color);
}

この例では、ページ全体の基本色を :root にまとめています。

body、card、button では、直接色コードを書かずに var() で呼び出しています。

この書き方に慣れると、CSSの修正がかなり楽になります。

CSS変数を一言でまとめると

CSS変数とは、CSSの値に名前をつけて使い回すための仕組みです。

-- で変数を作る。

var() で変数を使う。

:root に書くと全体で使いやすい。

この3つをまず覚えてください。

CSS変数は、デザインの設定ファイルのような存在です。

サイト全体の色や余白を1か所にまとめておけば、修正するときに迷いにくくなります。

最初は、色だけをCSS変数にするところから始めましょう。

慣れてきたら、余白、文字サイズ、角丸、影なども変数化してみてください。

今後の学習では、var() の予備値、CSSの継承、:root と html の違い、ダークモード対応の順番で学ぶと理解が深まります。まずは自分のCSSに --primary-color を1つ作って、ボタンやリンクに使ってみましょう！

セイ・コンサルティング・グループでは新人エンジニア研修のアシスタント講師を募集しています。

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

学生時代は趣味と実益を兼ねてリゾートバイトにいそしむ。長野県白馬村に始まり、志賀高原でのスキーインストラクター、沖縄石垣島、北海道トマム。高じてオーストラリアのゴールドコーストでツアーガイドなど。現在は野菜作りにはまっている。

最新の投稿

• 新人エンジニア研修講師2026年6月9日CSS変数とは？初心者にもわかるCSSカスタムプロパティの使い方とメリット
• 新人エンジニア研修講師2026年6月9日デイリースクラムで話すこと｜進捗報告で終わらせないスクラム開発の進め方
• 新人エンジニア研修講師2026年6月9日TLSによるメール暗号化の仕組みと見積書送付における情報漏洩リスクの対策
• 新人エンジニア研修講師2026年6月8日Spring Bootでデータベースのコネクションをフィールドに保持すべきではない理由と正しい管理方法