var() / Custom Properties

CSS変数（カスタムプロパティ）を使うと、値を変数として定義し、複数の場所で再利用できます。テーマカラーや余白サイズなどを一箇所で管理できるため、保守性が大幅に向上します。

Syntax

CSS変数は定義と参照の2つの記法で使います。

記法	概要
--変数名: 値;	変数を定義します。変数名は必ず『--』（ハイフン2つ）で始める必要があります。
var(--変数名)	定義した変数を参照します。
var(--変数名, フォールバック値)	変数が未定義・無効なときに使われるデフォルト値を指定します。

グローバルに使いたい変数は、すべての要素の祖先となる『:root』セレクタで定義するのが一般的です。

Sample Code

テーマカラーや余白を変数で管理する例です。

:root {
	--main-color: #3498db;
	--sub-color: #2ecc71;
	--text-color: #333;
	--spacing: 16px;
}

.header {
	background-color: var(--main-color);
	color: #fff;
	padding: var(--spacing);
}

.button {
	background-color: var(--sub-color);
	color: var(--text-color);
	padding: var(--spacing);
}

フォールバック値

『var()』の第2引数にフォールバック値を指定すると、変数が未定義または無効な場合にその値が使われます。

.box {
	/* --undefined-color が未定義のため、#ff0000 が使われる */
	color: var(--undefined-color, #ff0000);

	/* フォールバック値にさらに var() を使うこともできる */
	background-color: var(--bg-color, var(--main-color, #fff));
}

スコープ

CSS変数はセレクタのスコープ内（およびその子孫要素）でのみ有効です。

/* グローバル変数: すべての要素で参照できる */
:root {
	--global-color: #3498db;
}

/* ローカル変数: .card 要素とその子孫でのみ有効 */
.card {
	--card-bg: #f5f5f5;
	background-color: var(--card-bg);
}

.card .title {
	/* .card の子孫なので --card-bg を参照できる */
	border-bottom: 1px solid var(--card-bg);
}

.other {
	/* .card の外なので --card-bg は未定義扱い */
	background-color: var(--card-bg, #fff);
}

変数は子要素に継承されます。親要素で定義した変数は、子要素・孫要素からもそのまま参照できます。

JavaScriptから操作する

JavaScriptからCSS変数の値を取得・変更できます。動的なテーマ切り替えなどに活用できます。

/* 変数の値を変更する */
document.documentElement.style.setProperty('--main-color', '#e74c3c');

/* 変数の値を取得する */
var value = getComputedStyle(document.documentElement).getPropertyValue('--main-color');

/* 特定の要素のスコープで変数を変更する */
var el = document.querySelector('.card');
el.style.setProperty('--card-bg', '#e8f4fd');

メディアクエリとの組み合わせ

メディアクエリの中でCSS変数を再定義すると、画面サイズに応じて変数の値をまとめて切り替えられます。

:root {
	--font-size: 14px;
	--spacing: 12px;
	--columns: 1;
}

@media (min-width: 768px) {
	:root {
		--font-size: 16px;
		--spacing: 24px;
		--columns: 2;
	}
}

@media (min-width: 1200px) {
	:root {
		--font-size: 18px;
		--spacing: 32px;
		--columns: 3;
	}
}

.container {
	font-size: var(--font-size);
	padding: var(--spacing);
	column-count: var(--columns);
}

変数を切り替えるだけでレイアウト全体に変更が反映されるため、レスポンシブデザインのコードをシンプルに保てます。