CSS変数（カスタムプロパティ）を使って実際に1サイト構築したので使い方の説明や所感など
前田 大地
セブンシックスは、IE11への対応を2020年いっぱいで終了します。それに先駆け2020年12月、せっかくなのでセブンシックスのサイトもIE11を完全無視してリニューアルしました。
IE11を無視することで得られる大きなポイントが、CSSのカスタムプロパティ（俗に言うCSS変数）が使えるようになることです。その存在はすでに知れ渡っていますが、私はまだ使ったことがありませんでした。今回、サイトリニューアルにあたりゼロ知識から試行錯誤してみましたので、それらの忘備録として記事にしたいと思います。
CSS変数（カスタムプロパティ）って？何がいいの？
プログラミングをする人にとって「変数」は説明不要なものですよね。入門書ではよく、中身を入れておける「箱」のようなものだと表現されます。JavaScriptでもWordPressでも変数は普通に出てくるので、ノンプログラマーなコーダーさんでも知識はあると思います。
CSS変数（カスタムプロパティ）は、CSS内でも変数っぽいものが使える仕組みで、複雑なサイトになればなるほど、CSS変数をうまく使うことで色々なことが便利になる可能性を秘めています。
例えば、色を指定したいところに色コードではなく変数を使えば、あとから色を変更したくなったときに変数の値だけ書き換えればよくなります。毎回、「ここの色コード何だっけ？」と、デザインデータから色コードを引っ張ってくる必要がなくなり、作業効率もアップ！変数名をわかりやすい名前にしておけば、「ああ、ここはメインカラーね」って分かるので、コードを見たときに全体像が把握しやすくなります。
書き方
値をセット
CSSの変数の定義は、root要素に対して行います。カスタムプロパティ名はハイフン2つからはじめないといけないルールがあります。書き方は、普通のCSSと同じですね。
:root {
--var1: value1;
--var2: value2;
}
HTML文書のroot要素は「html」なので、以下のように記述しても同じように反映されます。
html {
--var1: value1;
--var2: value2;
}
ということは、当たり前ですがHTMLタグに対してインラインで直接記述することもできます。
<html style="--var1: value1; --var2: value2;">
値を使用
CSS内で変数の値を使うには、var()関数を使います。
:root {
--fontsize: 10px;
}
body {
font-size: var(--fontsize);
}
上記の例では、以下と同じことが起こります。
body {
font-size: 10px;
}
ちなみに、変数が定義されていないときのために代替値を指定しておくこともできます。
body {
font-size: var(--fontsize, 10px);
}
上記のように記述すると、–fontsizeが定義されていなかったり無効な値だったときは代わりに10pxが使われるようになります。
そしてそして、変数が定義されていなくて、さらに代替値もない場合、CSS変数の値には親要素の値が継承されます。
body {
font-size: 10px;
}
p {
font-size: var(--fontsize);
}
上記の例だと、–fontsizeが定義されていなかったり無効な値の場合、bodyに指定されている10pxが子要素であるpにも継承されます。このあたりは普通のCSSと同じ感覚でOKですね。
メディアクエリとの併用
CSS変数の良いところは、メディアクエリ内でも変数が定義できることです。つまり、同じ名前の変数でも、条件によってセットする値を変えることができます。
:root {
--fontsize: 10px;
}
@media (min-width: 900px){
:root {
--fontsize: 12px;
}
}
上記例だと、スマホ表示（幅899以下）のときは10px、幅900以上で12pxになります。たぶんきっとこれができることがCSS変数の最大のメリットなのではないかと思います。継承と組み合わせてPCだけフォントサイズを変更するような手法も見えてきますね（あ、そんなことしたらコードを追うのが大変になるだけか）。
JavaScriptで変数をセット、値を取得
CSS変数は、なんだかんだでルート要素に記述されたCSSプロパティの一種なので、JavaScriptで普通にCSSを操作するのと同じ感覚で扱えます。
変数のセット
document.documentElement.style.setProperty('--fontsize', '10px');
値の取得
const fontsize = document.documentElement.style.getPropertyValue('--fontsize');
で、実際に使ってみた所感
当サイトで、実際にCSS変数を使ってみました。はじめてだったので、CSS変数を使ったほうが良い箇所とそうでない箇所の判断がちょっと曖昧ですが、まあ、そこはご愛嬌ということで。
- よく使う色（変数名：–c-xxx）
- 最大幅（変数名：–w-xxx）
- マージン幅（変数名：–m-xxx）
- フォントサイズ（変数名：–f-xxx）
上記の命名規則で設計しています。まずデザインの基本ルールに当てはめるカタチで変数を定義しておき、イレギュラーなものは変数を使わず個別で対応する方式です。PCとスマホで要素の上下マージン幅が変えられたのはとっても便利でした。はじめはいちいち「var()」と打つのが非効率な気もしましたが、慣れてくるとむしろ色コードやピクセル数を暗記せずにさくさくコーディングを進めていけるので、作業効率はアップしたかもしれません。なにより新鮮な気持ちで楽しくコーディングできました。楽しいが一番です。
ただ、通常の業務でCSS変数を積極的に使用するかどうかという点では難しいところです。例えIE非対応の案件でも、普通にコーディングしていればIEでもそれなりの見た目が保てます。しかし、CSS変数を使ってしまうと完全にIEで見た目が破綻することになります。IE用の記述をひとつずつ適用するのも馬鹿らしいので、明確な許可をもらってから着手しないと怒られちゃいますね。
ちなみに、この記事のアイキャッチ画像は、変数名が「ダンボール」で値が「ネコ」です。あしからず。