CSS変数とは？カスタムプロパティの基本・使い方・注意点まとめ

CSS変数（カスタムプロパティ）を使うと、カラーコードやサイズなどの値を効率よく再利用でき、スタイルの管理やメンテナンスがぐっと楽になります。

本記事では、CSS変数の基本的な使い方から注意点まで、初心者向けにわかりやすく解説します。

変数とは

「変数」とは、文字や数値などのデータ（値）を入れておく“名前付きの箱”のようなもので、後から呼び出して再利用することができます。
一度値を変更すれば、その変数を使っているすべての箇所に自動的に反映されるため、再利用や一括管理が簡単になります。
 

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

CSS変数の使い方

CSS変数の定義

CSS変数は –変数名: 値; の形式で定義します。変数名の前には必ず — をつけましょう。

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

CSS変数の呼び出し

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

フォールバック値の設定

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

フォールバック値を設定する場合は、var(--変数名, フォールバック値) の形式を使用します。
たとえば、ブラウザの非対応や意図しない上書きで変数が無効になった場合でも、フォールバック値があればデザインの崩れを防げます。

CSS変数を使う際の注意点

変数名のルール

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

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

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

プロパティ名自体は変数にできない

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

単位の扱いに注意

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

NG例：

 

OK例：

JavaScriptからも値を変更できる

CSS変数はJavaScriptから動的に変更することも可能です。テーマ切り替えやレスポンシブデザインの補助に活用できます。

まとめ

CSS変数を上手に使うことで、サイト全体のスタイルを効率よく管理でき、メンテナンスもしやすくなります。
まずは色やサイズから変数を使ってみて、少しずつ活用範囲を広げていきましょう。