CSS変数とは？

CSS変数とは、CSS内で使用できる変数のことです。ユーザー定義CSSプロパティ（CSS Custom Properties）とも呼ばれるCSS変数は、JavaScriptやPHPといったプログラミング言語で広く使われている変数の概念をCSSに取り入れたものです。CSS変数の導入により、変数を使うことの利点をCSSでも活かせるようになりました。

CSS変数を活用することで、CSSコードの再利用や保守がしやすくなるため、CSSを扱うウェブ開発者の間で広く利用されています。まずはCSS変数を使う必要性について確認し、その後にCSS変数の使い方やCSS変数の値の変更方法などについて見ていきましょう。

CSS変数を使う必要性

変数とは値を保存して再利用するためのツールであり、JavaScriptやPHPといったプログラミング言語で広く使われています。CSSでも変数を導入することで、変数を使うことの利点を活かせるようになりました。

変数を使うと、同じ値を何度も使用する場合に便利です。

例えば、ウェブサイトのメインカラーとして濃い紫色（#8B008B）を使用すると仮定します。テキストの色をウェブサイトのメインカラーである濃い紫色に指定するには、次のようにCSSコードを書きます。

CSS 
p {
    color: #8B008B;
}

しかし、ウェブサイトのメインカラーである濃い紫色を何度も指定する必要がある場合は、同じCSSコードを繰り返し使わなければなりません。

CSS 
p {
    color: #8B008B;
}
h1 {
    background-color: #8B008B;
}
div {
    border-color: #8B008B;
}
...

この場合、その都度濃い紫色を表す#8B008Bを何度もコードに記述しなければなりません。

しかし、もしウェブサイトのメインカラーである濃い紫色を、単なる気まぐれや方針変更により濃いグレー（#A9A9A9）に変更しなければならなくなった場合、コードはどう変更すればよいでしょうか？

もちろん、一つずつ変更すれば問題ありません。以下のように変更すればよいです。

CSS 
p {
    color: #A9A9A9;
}
h1 {
    background-color: #A9A9A9;
}
div {
    border-color: #A9A9A9;
}
...

しかし、上記の例のように数箇所のコードだけを変更すればよいのではなく、変更すべき色コードが100個や200個もあるとしたらどうでしょうか？

エディタを使って一度に簡単に置換することもできますが、このような繰り返しの修正は非常に手間がかかり、ミスを誘発しやすいため非効率的だと言えます。また、上記の例でわかるように、色コードは人の目で見ても他のコードと区別しづらいという問題もあります。

以下のサンプルコードは、CSS変数を使ってウェブサイトのメインカラーである濃い紫色を指定したものです。まだCSS変数の使い方がわからなくても、コードを見れば大まかにイメージがつかめるでしょう。

CSS CSS変数を使った例です。 
:root {
    --primary-color: #8B008B;
    /* ウェブサイトのメインカラーとして濃い紫色（#8B008B）を、--primary-colorという変数名で保存します */
}
p {
    color: var(--primary-color);
    /* var(変数名)を使って、--primary-color変数の値が必要な場所に挿入します */
}
h1 {
    background-color: var(--primary-color);
    /* var(変数名)を使って、--primary-color変数の値が必要な場所に挿入します */
}
div {
    border-color: var(--primary-color);
    /* var(変数名)を使って、--primary-color変数の値が必要な場所に挿入します */
}
...

CSS変数を活用して、ウェブサイトのメインカラーである濃い紫色を、単なる気まぐれや方針変更により濃いグレー（#A9A9A9）に変更してみましょう。

CSS CSS変数を使った例です。 
:root {
    --primary-color: #A9A9A9; /* 紫色（#8B008B）を濃いグレー（#A9A9A9）に変更する */
}
p {
    color: var(--primary-color);
}
h1 {
    background-color: var(--primary-color);
}
div {
    border-color: var(--primary-color);
}
...

上記のサンプルコードからわかるように、CSS変数を使わなかった場合と比べて、CSS変数を使うと同じ値を何度も使用する際に、--primary-color: #8B008B; を --primary-color: #A9A9A9; に一度変更するだけで済むため非常に便利です。CSS変数は、CSSコードの再利用や保守を容易にする便利な機能です。

ちょっと待ってください！ CSS変数は、CSSプロパティ（CSS Custom Properties）という名称で2015年に導入され、2017年にCSS Cascading and Inheritance Level 3（CSS 3）の一部として正式に標準化されました。

それでは、CSS変数の使い方について見ていきましょう。

CSS変数の基本的な使い方

CSS変数（またはユーザー定義CSSプロパティ）は、次のような構文と書式で定義・使用できます。

CSS変数の定義方法

CSS CSS変数の定義方法 
selector { /* セレクタは変数が適用される範囲を決定するために使います。 */
    --primary-color: #8B008B;
    /* --変数名: 値 */
}
  • selector：セレクタは変数が適用される範囲を決定するために使われます。もし文書全体で使う変数を設定する場合は、セレクタに:rootやbodyを使います。もし.containerというクラスの内部の子孫要素だけで使う変数であれば、セレクタに.containerを指定します。
  • --primary-color：使用する変数名を指定したものです。変数名は--記号の後に続けて使う名前でなければならないというルールがあります。
  • #8B008B：変数の値です。

定義した変数は、変数を定義したセレクタやその子孫要素で、var(定義した変数名)という関数形式で、任意のプロパティの値として使用できます。このプロパティの値は定義した変数の値になります。上記のCSS変数定義の例で定義した変数--primary-colorを使う場合、var(--primary-color)は#8B008Bと同じ意味です。以下のCSS変数使用例で確認してみましょう。

CSS変数の使い方

CSS CSS変数の使い方 
p { /* このセレクタは、変数を定義したセレクタの子孫要素でなければなりません */
    color: var(--primary-color); /* color: #8B008B; と同じです */
    /* var(定義した変数名) の形式で、--primary-color変数の値が必要な場所に挿入します */
}
h1 { /* このセレクタは、変数を定義したセレクタの子孫要素でなければなりません */
    background-color: var(--primary-color); /* background-color: #8B008B; と同じです */
    /* var(定義した変数名) の形式で、--primary-color変数の値が必要な場所に挿入します */
}
div { /* このセレクタは、変数を定義したセレクタの子孫要素でなければなりません */
    border-color: var(--primary-color); /* border-color: #8B008B; と同じです */
    /* var(定義した変数名) の形式で、--primary-color変数の値が必要な場所に挿入します */
}

上記の例は、selector内で--primary-colorという変数を定義し、それを使用したものです。selectorの内部でのみ--primary-color変数を使用できます。

CSS変数の継承とCSS変数値の変更（Overriding）

CSS変数も継承の対象となります。したがって、特定の要素にユーザー定義プロパティの値が設定されていない場合は、その親要素の値を使用します。以下のHTMLコードの例で確認してみましょう。

HTML 
<div class="one">
    one
    <div class="two">
        two
        <div class="three">tree</div>
        <div class="four">four</div>
    </div>
</div>

以下のCSSコードを適用します。

CSS 
.two {
    --test: 10px;
}

.three {
    --test: 2em;
}
div {
    fon-size: var(--test);
}

それでは、font-size: var(--test); の結果は以下のようになります。

font-size: var(--test) の結果画面
  • class="two" の要素の font-size：10px
  • class="three" の要素の font-size：2em
  • class="four" の要素の font-size：10px（親要素から継承）
  • class="one" の要素の font-size：無効です

上記の例から分かるように、CSS変数は変数を定義したセレクタの範囲内でのみ継承されます。 変数のスコープ内で値を変更すると、その変更された値はそのセレクタの内部で継承されます。

レスポンシブWeb（メディアクエリ）におけるCSS変数値の変更

レスポンシブWeb対応のために、メディアクエリ内でCSS変数の値を変更することも可能です。

CSS 
:root {
    --font-size: 15px;
}
p {
    font-size: var(--font-size);
}

@media (max-width: 1024px) {
    :root {
        --font-size: 13px;
    } 
}

この例のコードを実行すると、ビューポートが1024px以下の場合、<p>要素のfont-sizeは13pxになります。このように、メディアクエリ内でCSS変数の値を変更できることが分かります。

ビュー ポート（viewport）とは、ウェブブラウザ用語で、現在のウィンドウ（または全画面モードで文書を表示している場合の画面）に表示される文書の部分、つまりウェブページが表示される領域を指します。

CSS変数の代替値（またはデフォルト値）の使用

CSS変数の代替値（またはfallback value）は、変数が定義されていない場合に使用されるデフォルト値を指定する任意の値です。これにより、変数が定義されていない場合でもスタイルが崩れずにデフォルト値を設定できます。

CSS変数の代替値は、var()関数の第2引数として使用されます。var()関数の構文は以下の通りです。

CSS var()関数の構文形式 
var(--変数名[, 代替値]);

ここで代替値とは、変数が定義されていない場合に使用される値のことです。任意で指定できます。例えば、以下のようにCSS変数に代替値を設定した例を見てみましょう。

CSS 
:root {
    --primary-color: #00a0e9;
}
.container {
    color: var(--primary-color, #1a1aff);
    background-color: var(--secondary-color, #3333ff);  /* --secondary-color変数は定義されていません */
}

上記のコード例において、.containerのcolorプロパティに使われているvar(--primary-color, #1a1aff)は、:rootセレクタで定義されている--primary-color変数が存在するため、その値である#00a0e9が使用されます。

しかし、.containerのbackground-colorプロパティに使われているvar(--secondary-color, #3333ff)は定義されていない変数です。このように、変数が定義されていない場合は、代替値の#3333ffが使用されます。

代替値を使用することで、ウェブページのスタイルを安定して維持でき、予期せぬエラーを防ぐことができます。

ちなみに、代替値はCSS変数としても使用できます。代替値をCSS変数として使用する場合、以下のように記述することも可能です。

CSS 
.container {
    background-color: var(--my-var, var(--my-background, pink));
    /* my-varおよび--my-backgroundが定義されていない場合、pinkが適用されます */
}
.container {
  background-color: var(--my-var, --my-background, pink);
  /* 無効です: "--my-background, pink" */
}
.container {
    background-color: var(--my-var, --my-primary-background);
    /* 無効です（代替値がない変数は代替値として使用できません） : "--my-primary-background" */
}

注意してください！
CSS変数の代替値は静的な値でなければ使用できません。CSS変数の代替値は、通常、変数が定義されていない場合にデフォルト値を提供するために使用されるからです。

JavaScriptを用いたCSS変数の制御

CSS変数にJavaScriptでアクセスし、設定する方法は簡単です。CSS変数を使うことで、JavaScriptから値を動的に変更してスタイルを操作することができます。

ブラウザ互換性

CSS変数のブラウザ対応状況
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
--* 49 15 31 9.1
var() 49 15 31 9.1

caniuse.comで詳しい情報をご確認ください。

仕様書

CSS変数に関する仕様書
仕様書
CSS変数 CSS Custom Properties for Cascading Variables Module Level 1
#defining-variables

参考資料