どうも、何でも屋さんのささぴよです。
私は比較的新しいCSSの機能に追いついていきつつ、すぐに使える物を紹介するシリーズを書いていこうかと思います。どうぞお付き合いください。
初回に当たる今回はCSSカスタムプロパティです。通称CSS変数と呼ばれることもありますが、これについて至極簡単に使えるよという紹介をしていきたいなと思います。
CSSカスタムプロパティとは
CSSカスタムプロパティとは、通称で「変数」と呼ばれることもあるくらいですので、「事前に定義しておいた物を、呼び出して使う事ができる」というものです。
前もって定義しておくことで、色コードのミスを防いだり、まとめて同じ部分の色を調整したりすることができます。色の一元管理という意味では、デザインのデータ作りでもカラーパレットを作ったりすることがありますけれども、それに近い感じですね。
Sassの変数との違い
Sass / SCSS（以降、総称してSassと言います）を使って居た方なら「それ、Sassでできるじゃん」となると思いますが、Sassの変数のデメリットはCSSになった後の変更がしづらい点です。
Sassの変数はコンパイル（変換作業）のタイミングで展開され、それぞれの変数が値に置き換わります。つまりできあがったCSSの中にはあくまでも値だけが残り、変数の姿はありません。ここから色の変更をするとなると、元々あったSassのファイルを弄る必要があり、もちろん再コンパイルも必要です。
Sassでありがちなのは _variables.scss等という名前で変数用のファイルを作るパターンかなと思いますが、その感覚でCSSのカスタムプロパティも扱うことができます。そして、CSS側に変数の役割が残りますので、デベロッパーツールで色の変更を試すと言う作業もやりやすいと思います。（そのあとファイルに反映させるのをお忘れ無く。）
基本的な使い方
カスタムプロパティの定義
カスタムプロパティの定義の仕方としては、いつも使うCSSプロパティ（例えば displayとか、widthとか）と同じようにカスタムプロパティを記述して定義します。そのときに、-- で始まる必要があります。つまり --main-color のような表現になるということです。そして: で挟んでカスタムプロパティにおさめたい値を記述します。ということで、書き方の基本形は以下のような感じになります。
--white: #fff;
--black: #000;
--yellow: #ffbf41;
--lightgray: #a3a3a3;
--darkgray: #434343;
--orange: rgb(252, 56, 24);
--red: rgb(234, 0, 0);
--purple: rgb(143, 24, 255);
--bluegreen: rgb(93, 249, 195);
--green: rgb(0, 172, 0);
--attention-bg-color: rgb(255, 192, 192);
--attention-accent: rgb(192, 32, 32);コレをどこかのブロックに適用させるように書けば使えるということですね。非常にシンプルでした。
カスタムプロパティを呼び出す
定義したカスタムプロパティを使う為に呼び出すときには var(<カスタムプロパティ名>) の形式で記述します。このとき -- も必要です。JavaScriptに触れている方などは、 var も使い慣れている方もいらっしゃるかと思いますが、この var は variables の略ですね。変数という意味合いです。
ということで、実際に先述のカスタムプロパティから、文字色に対して --bluegreen を使おうとするなら、以下のような記述になります。
font-color: var(--bluegreen);なんとシンプルなのか！ これで簡単にカスタムプロパティを使える様になりましたね！
書くべき場所とは
では、このカスタムプロパティはどのように扱うのが理想なのでしょうか。
一般的なベストプラクティスとしては、HTMLのrootに指定するというのがあると思います。HTMLはツリー構造ですので、理論上 html のタグが根（=root）になるかと思います。であれば html タグに対して指定すればいい…となりそうですが、ここで登場するのがrootを表すセレクタです。
それが疑似クラス :root です。CSSはHTMLとセットで使われる事が多いですので、HTMLだけを対象とするイメージを持っている方もいるかもしれませんが、CSS自体は適切な解釈のできるツールがあればなんにでも適用できるように言語のルールが決められています。そのとき、根を示す方法があるのは理想的である事から :root という疑似クラスがあります。
実際に :root はCSSカスタムプロパティを定義するのに向いているとしてMDNでも例をあげられています。そして実際にもこの書き方で使われる事が多いでしょう。 :root は html タグのセレクタよりも詳細度が高いため、 html をセレクタとして利用するよりも強いという事になります。それも含めて、最強の根のセレクタというイメージで良いのかなと思います。
これらを踏まえて、先述の例を :root に指定すると以下のようになりますね。
:root {
--white: #fff;
--black: #000;
--yellow: #ffbf41;
--lightgray: #a3a3a3;
--darkgray: #434343;
--orange: rgb(252, 56, 24);
--red: rgb(234, 0, 0);
--purple: rgb(143, 24, 255);
--bluegreen: rgb(93, 249, 195);
--green: rgb(0, 172, 0);
--attention-bg-color: rgb(255, 192, 192);
--attention-accent: rgb(192, 32, 32);
}後は内側の各要素で
p {
background-color: var(--darkgray);
color: var(--white);
}という感じで使っていければ良いわけです。
特定の要素にだけ効かせたい
特定の要素でだけ使いたい場合もあるかも知れません。パッと思いつく例はないのですが、そういう制約がかかることもあるかも知れません。
カスタムプロパティは継承される形になりますので、普通にどこかの要素に対して定義することも可能で、その内側（子孫要素）で適用させることも可能です。
つまりこういう感じになります。
main section {
--my-red: #cc0000; /* mainの中にあるsectionで --my-red が使える状態になる */
}
main section .attention {
color: var(--my-red); /* mainの中のsectionのさらに内側の要素なので --my-red が適用される */
}
main .attention {
color: var(--my-red); /* mainの中だけど更にsectionの中を対象にしていないので --my-red は適用できない（ブラウザの規定値が使われる） */
}指定されたものが適用できない場合には規定値が適用されるというルールがあるので、上記の通りになりますね。コレは指定されるべき値が間違ったところに使われた場合にも同様です。
section {
--my-size: 18px; /* sectionで --my-size が使える状態になる */
}
section p {
color: #ff0000; /* 文字色が赤に指定される */
font-size: var(--my-size); /* font-sizeに18pxが適用される */
color: var(--my-size); /* 色に対して18pxの指定ということになるので適用できない → 規定値を適用しようとするため、文字色が黒で上書きされる */
}意図的にやることはないと思いますが、何かで間違った場合に前に指定された値が適用されるのではなく規定値が適用されるという点は、挙動の注意点かもしれませんね。
実は他にも便利な機能がある
ちょっと挙動の注意点のようなところも触れましたが、「継承」という扱いがある為にカスタムプロパティの規定値という物を指定することも可能です。子孫要素で指定が無ければコレを使いなさいという指定ができるというパターンですね。
ここまでする必要があるのか、個人的にはあまりイメージが湧いていないところもありますが、先述のように色名をカスタムプロパティ名とするやり方ではなく、役割をカスタムプロパティ名にした場合などに対応しやすいのかもしれません。この辺りは本家の説明を見ていただくと良いかと思います。
最近流行のダークモードにも使える
実際に皆さんが目にすることが多いのは、ダークモードとライトモードの切り替えが可能になっているサイトで使われているパターンでは無いかと思います。
基本パターンを指定しておき、 html タグにクラスがついたとき（あるいは body タグにクラスがついたとき）にカラースキームが変わるようにカスタムプロパティを上書きしていくようにすればJavaScriptとしてクラスの付け替えをするだけで良いですよね。こういう動的な変化に強い書き方であるという事もSassの変数とは違うところですね。
まとめ
比較的新しい書き方とはいえ、かなり一般的に使われるようになってきたCSSカスタムプロパティですが、色だけで無く数値なども入れることができますし、とても可能性があるものだと思います。
Sassで書いていても導入できますし、コーダーでも簡単に扱っていける物の一つだと思うので、是非積極的に導入して、まずは「できる人になった気になる」ところから「できるコーダー」を目指してみるのもいいかもしれませんね。形から入るのも私は一つの道だと思ってます。
ということで、CSSのカスタムプロパティについてご紹介しました。ではでは。