CSS変数（カスタムプロパティ）の使い方

CSS変数（カスタムプロパティ）を使えば、より効率的かつ便利なCSSを書くことができます。

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

変数とは、文字や数値などのデータ（値）を格納しておく「箱」のようなものです。
この箱に入れたデータは、何度でも使い回すことができます。
また、一度変数の値を変更すれば、その変数を使っている箇所全てに変更が反映されます。

 

たとえば、繰り返し利用する数値やカラーコードをCSS変数で定義しておけば、一箇所で変更するだけでスタイル全体を更新できます。

CSS変数（カスタムプロパティ）の使い方

CSS変数の定義

CSS変数は --変数名: 値; の形式で定義します。
変数名には自由な名前をつけることができます。なお、– から始める必要があります。

:root セレクタに定義すると、HTML全体で利用可能になります。
特定の要素でのみ使用したい場合は、そのセレクタ内に定義することも可能です。

CSS変数の呼び出し

CSS変数を呼び出す際は、var(--変数名) の形式を使います。

 

フォールバック値の設定

何らかの理由で変数が適用されなかった場合に備えて、予備となる値（フォールバック値）を設定することも可能です。

 
フォールバック値を設定する場合は、var(--変数名, フォールバック値) の形式を使用します。

CSS変数を使う際の注意点

変数名にスペースは使用できない

変数名には、英数字、アンダースコア（_）、ハイフン（-）を使用できます。
スペースは使用できません。

大文字と小文字は区別される

CSS変数では、大文字と小文字が区別されます。
例えば、--Key-color と --key-color は別の変数として扱われます。

プロパティ名をCSS変数にすることはできない

以下の例のように「color」プロパティ自体を変数として定義することはできません。

呼び出し時に単位を付加できない

CSS変数を呼び出す際には、変数の値に単位が含まれている必要があります。

NG例：

 

OK例：

 

これらのポイントを意識してCSS変数を活用すれば、管理しやすくメンテナンス性の高いCSSコードを書くことができます。