2021-08-30

CSS変数（カスタムプロパティ）とは

CSS変数（カスタムプロパティ）とは、 プログラミングで利用する変数と同じような機能を持った ものです。 サイトのメインカラーなど、 複数個所で記述する設定に対してCSS変数を設定しておくと、 変更する場合に1か所の修正で済みます。 CSS変数を利用することで開発効率が高まるので おすすめの機能です。

呼び方はCSS変数、カスタムプロパティ、 またはカスケード変数です。

CSS変数の記述・使用方法

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

変数名を付ける場合は「--main-bg-color」や「--main-text-color」のように、 見てすぐにわかる変数名を付けることをお勧めします。 変数名は大文字・小文字が区別されます

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

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

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

実際にCSS変数を使用する場合は、 var()関数の引数にCSS変数を指定します。

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

使用上の注意点

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

変数名は大文字・小文字が区別されるので、 「--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);
}