CSS変数

2024年3月13日 12:03

例えば、

<p id="p1">p1の段落</p>
<p id="p2">p2の段落</p>

の文字の色を同じにする場合は、

#p1{color: red;}
#p2{color: red;}

とすればよいですが、いちいち書くのは面倒です。セレクタのグループ化を使えば、

#p1,
#p2{color: red;}

となりますが、値を頻繁に変えるケースだと、CSSの中の該当箇所を探さないといけないので、面倒です。変数の設定は一箇所にまとめたほうがいいでしょう。そこで「CSS変数」の出番です。

え、CSSに変数ってあるの？ですが、、、あるんですよね。

まず、CSS変数の値を定義します。

:root{
--textColor: red;
}

「:root」は、<html>要素の中を示す擬似クラスです。ここでは単にhtml要素と考えましょう。
「--textColor」の「--」は変数の名前の前につける証、「--textColor」という変数の名前。それにredという値を代入している状態です。

次にCSS変数をCSS内に埋め込みます。

#p1{color: var(--textColor);}
#p2{color: var(--textColor);}

「var()」はvariable(=変数)です。
丸かっこの中に変数の名前を入れたvar(--textColor)は、redを示すことになり、文字のいろ(=color)は赤色(=red)になります。

使わなくてもWebページはできますが、値を:rootの中にまとめて格納できるので、見晴らしがよくなりますし、ちょっとかっこよいですね。

参考にしてください。