CSS変数(カスタムプロパティ)

プログラミングでは当たり前のように使っている変数機能が CSSでも使えます。
呼び方はCSS変数カスタムプロパティ、 またはカスケード変数です。

サイトのメインカラーなど、 複数個所で記述する設定に対してCSS変数を設定しておくと、 変更する場合に1か所の修正で済みます。 開発効率が高まるのでCSS変数をぜひ使ってみてください。

CSS変数の記述方法

「--main-bg-color: green」のように先頭に--(ハイフン2つ)をつけ、 「変数名: 値;」の形式で記述します。

変数名を付ける場合は、「--main-bg-color」や「--main-text-color」のように、 見てすぐにわかる変数名を付けることをお勧めします。

変数名は大文字・小文字が区別されますので、 「--bg-colr」と--「BG-Color」は別のCSS変数になります。 混在すると紛らわしいので、小文字で統一しておく方が賢明です。

要素 {
	--main-bg-color: green;
}

各要素に対してCSS変数を設定できますが、 通常はHTML文書全体に対して設定します。 そのためには :root 擬似クラスを使って次のように記述します。

:root {
	--main-bg-color: green;
}

実際にCSS変数を使用する場合は、var()関数を使います。

要素 {
	background-color: var(--main-bg-color);
}

CSS変数の使用上の注意点

大文字・小文字が区別される

変数名は大文字・小文字が区別されますので、 「--bg-colr」と--「BG-Color」は別のCSS変数になります。 混在すると紛らわしいので、小文字で統一しておく方が賢明です。

単位を付け足すことはできない

var()関数を使って呼び出すときに、単位を付け足すことはできません。
例えば次ような設定はNGです。

:root {
	--main-font-size: 15;
}

要素 {
	font-size: var(--main-font-size)px;  /* NG例 */
}

次のように、CSS変数を設定するときに単位も付けます。

:root {
	--main-font-size: 15px;
}

要素 {
	font-size: var(--main-font-size);
}