CSS変数（カスタムプロパティ）を利用してコーディングを効率化しよう（入門編）

2021.05.24

WEB

Webデザイン

2015年にW3Cから勧告されて以来、CSSで変数（CSSカスタムプロパティ）が使えるようになってしばらく経ちました。

一部のレガシーブラウザ（主にIE11）が対応していなかったり、Sassなどのプリプロセッサで代用できるため実務で使う機会が少なかったのですが、IE11をサポート対象外にする案件が増えてきましたので今後のために基本的な使い方をまとめておきたいと思います。

INDEX

CSS変数とは

変数 (プログラミング)（wikipedia）

プログラミングの世界では必須の機能で、変数を宣言し、値を代入することで様々な場所からその値を参照できるようになります。CSSで変数が使えるようになると、colorやwidthのような繰り返し使うプロパティ値を一か所で定義、管理することができます。

変数が使えない場合、共通の値を変更する際にはエディタの置換機能等を使ってCSSファイル全体を修正する必要がありましたが、変数で一元管理している場合は修正は一か所で済みます。

最近のエディタやIDEの置換機能は優秀ですが、意図しない箇所まで置換に巻き込まれてしまうこともありますので、保守やメンテナンスコストを考慮すると変数を利用した一元管理をおすすめします。

プログラミングの変数と同じように、「変数を宣言して値を代入」し、「代入された値を参照する」ことでCSS変数を利用することができます。代入することができる値はCSSのプロパティ値として有効なものに限られます。

CSS変数を宣言、代入するには「–」で始まる任意の変数名を指定し、通常のCSSプロパティと同じように「:」で区切って値を設定します。

:root {
    --primary-color: #f00;
    --base_line_height: 1.5;
    --column2-1: 48.5%;
}

変数名には半角英数字、ハイフン「-」、アンダースコア「_」が利用でき、大文字と小文字は区別されます。また、 :root に定義することでグローバルスコープ（CSS全体）で変数を利用できるようになります。

特定のスコープ（セレクタ内）に限定して変数を定義したい場合は、

:root {
    --primary-color: #f00;
}
.foo {
    --primary-color: #0f0;
    color: var(--primary-color); // #0f0が適用される
}

上記のように、任意のセレクタ内で変数を定義することができます。同じ変数名で再定義した場合、値は上書きされるので、特定のセレクタに限定してスタイルを変更することが可能です。

CSS変数を参照するには var() 関数を利用します。

body {
    line-height: var(--base_line-height);
}
.foo {
    color: var(--primary-color);
}

変数を参照する際にはフォールバック（代替値）を指定することも可能です。

.bar {
    font-size: var(--font-small, 12px);
}

–font-small が変数定義されていない場合は、12pxが.barセレクタに適用されます。

Sassでも変数機能は提供されていますが、CSS変数はJavaScriptから値にアクセスできるという点が大きく異なります。

:root {
    --bg-color: #ff0;
}
#hoge {
    background-color: var(--bg-color);
}

このように変数とセレクタが定義されている場合、

const style = getComputedStyle(document.getElementById('hoge'));
const bg = style.getPropertyValue('--bg-color');
console.log(bg); // #ff0

JavaScriptを利用して変数の値を取得することができます。値を変更することももちろん可能で、

document.getElementById('hoge').style.setProperty('--bg-color', '#000');

ユーザーのアクションやイベントに応じて値を変更することでデザインを柔軟に変更できるようになります。

いかがでしたでしょうか。IE11を除くモダンブラウザでは問題なく利用できますので今後CSS変数を利用する機会が増えるかもしれません。ブラウザで直接実行できる分、Sass等のプリプロセッサよりも気軽に導入できますので、ぜひ試してみてください。

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。