CSS変数（カスタムプロパティ）の基本や便利な使い方

「変数」はプログラミングではおなじみの概念ですが、これまでCSSでは基本的に変数は使えず、Sassのようなプリプロセッサを使用する場合に使うことができました。

しかし2021年現在のCSSでは変数を使えるようになっており、より効率的にCSSを書くことが可能になっています。

今回はCSSの変数とその基本的な使い方やルール、効率的な使用方法などを解説します。

CSS変数とは

「変数」とは数値や文字列などを定義する箱のようなもので、一度定義した後は何度でも使い回せる点が特徴です。

変数に定義した数値や文字列を変えると、変数の使用箇所にもそれが反映されるので、使用箇所ごとに修正する手間を省くことが可能です。

今までCSSでは変数を使用できませんでしたが、現在ではInternet Explorerなどのブラウザを除くほとんどのブラウザでCSS変数がサポートされたことで、使用できるようになっています。

ただし、モダンブラウザの中でもMicrosoft Edgeはバグが多発するという報告があるので、CSS変数を使う場合は注意が必要です。

CSS変数を使うことのメリット

CSS変数を使うメリットは他のプログラミング言語で変数を使う場合と大差なく、コード管理やメンテナンスがしやすい点にあります。

例えばWebサイトの原色を変更する場合、変数に代入するカラーコードを変更すれば、その変数を使用している箇所の色が全て変わるので、後で原色を修正することになってもその手間が省けます。

 CSS変数とプリプロセッサ変数の違い

CSS変数はSassのようなプリプロセッサ変数と違い、「ブラウザで実行する動的なCSSプロパティ」であり、JavaScriptなどのプログラミング言語で操作・選択することが可能になっています。

一方のSassはコンパイルを経てCSSに変換するのでブラウザは関与せず、JavaScriptなどで操作・選択することはできません。

この「コーディングやソースコード管理の手間を省きつつ、JavaScriptなどでスタイルを操作できるというCSSのメリットを損なっていないこと」も、CSS変数のメリットだと言えます。

CSS変数の基本的な使い方

以下は、CSS変数の基本的な使い方についての解説です。

CSS変数の定義のやり方

まず、CSS変数を定義するには以下のように「–」ハイフン2つを先頭につけます。

以下の「:root」とはグローバル変数のことであり、「宣言するとあらゆるところで使用」できます。

:root {

--red: #e60033;

｝

上記の「–red」が変数名に該当し、好きな名前をつけることができます。

CSS変数を呼び出す方法

CSS変数を呼び出すには、「var(変数名)」を使用します。

.cont_wrap {

background-color: var(--red);

}

このとき、何らかの理由で変数が使えなくなった場合に備えてフォールバック関数（予備の関数）を設定しておくと便利です。

.cont_wrap {

background-color: var(--red,red);

}

CSS変数の中でCSS変数を使うこともできる

CSS変数の中で変数を使用し、よりコード管理を簡単にできます。

:root {

--box-top: 150px;

--box-bottom: 30px;

--box-padding: var(--box-top) var(--box-bottom);

}

.box {

padding: var(--box-padding);

}

CSS変数は継承される

通常のCSSの値と同様、CSS変数は継承されます。

以下のようにある要素の親要素に適用させたCSS変数はその子要素にも適用されます。

<div class="cont_wrap">

<p>aaaaaa </p>

<div class="text_one">

<p>bbbbbb</p>

</div>

<div class="text_two">

<p>cccccc</p>

</div>

<div class="text_three">

<p>dddddd</p>

</div>

</div>

 

:root {

--main-color: blue;

}

.cont_wrap p {

color: var(--text-color);

}

この場合、class=”text_one”からclass=”text_three”まで、親要素「class=”cont_wrap”」の値を継承します。

CSS変数の効率的な使い方

先に述べたようにCSS変数はSassのようなプリプロセッサの変数では不可能な、JavaScriptでの操作やメディアクエリ内での使用が可能です。

メディアクエリ内でのCSS変数の使用

CSSに変換されるプリプロセッサの変数とは異なり、CSS変数はブラウザの可変幅にも対応できます。

そのため以下のようにメディアクエリ内で変数を定義し、特定の画面幅以下でそれを適用させることが可能です。

:root {

--background: red;

}

@media (max-width: 600px) {

:root {

--background: blue;

}

}


body {

background: var(--background);

}

上記の書き方では画面幅が600px以上で背景色が赤く、画面幅が600px以下になったときに背景色が青くなるようになっています。

CSS変数をJavaScriptなどで操作する

ブラウザで動的に実行するCSS変数は、以下のようにJavaScriptで操作することが可能です。

.sidebar {

--left: 100px;

}

以下は上記の値を所得するコードです。

const sidebarElement = document.querySelector('.sidebar');

const cssStyles = getComputedStyle(sidebarElement);

const cssVal = String(cssStyles.getPropertyValue('--left')).trim();

console.log(cssVal);

CSS変数の値をJavaScriptで変更する場合は、以下のようにします。

document.documentElement.style.setProperty('--left ', '50px');

CSS変数を使うときの注意点

コード管理に便利なCSS変数ですが、使用時にはいくつかの注意点があります。

プロパティ名をCSS変数にできない

CSSのプロパティ名を変数にはできません。

例えば「background-color」という、背景色を指定するCSSプロパティを使っている以下のコードは無効になります。

body {

--background: background-color;

var(--background): blue;

}

CSS変数を呼び出す際、単位だけを追加適用できない

CSS変数を呼び出す際、「var(–変数名) 」の後に px や % を書き足しても無効化されます。

:root{

--mar: 50;

}

wrap{

margin: var(--mar)px;

}

この場合だと「margin:50px;」と指定できず、エラーが生じてしまうので、CSS変数内に「–mar: 50px;」と単位も含めておく必要があります。

また、calc関数内で単位を含めることは可能です。

:root{

--mar: 50;

}

wrap {

margin: calc(var(--mar) + 1px);

}

上記の例だと、calc関数を使って「–mar」変数内の50に1pxを掛けているので、50pxと指定できます。

CSS変数は大文字と小文字が区別される

CSS変数では、大文字と小文字が明確に区別されます。

例えば「–fr」と「–FR」は別の変数としてみなされるので、これらを使う場合は以下のようにします。

:root {

--fr: red;

--FR: blue;

}

これらは別々に扱われるので、var(–fr); では赤、var(–FR); では青が適用されます。

まとめ

CSS変数の対応ブラウザはChrome, Firefox, Safari, Edgeなどであり、今後CSS変数が使われる機会が増えてくるかも知れません。

また、CSS変数に頼りすぎてCSSが複雑になり、却って管理が大変になってしまわないよう、上手にCSSを管理することが大切です。