便利！CSS変数（カスタムプロパティ）の使い方と注意点
プログラミング言語でもおなじみの「変数」。
CSSなどにおける「変数」は、データに名前をつけて登録しておくと、名前からデータを呼び出すことができる仕組みです。
CSSでの正式名称は「カスケード変数のためのCSSカスタムプロパティ」といって、「CSS変数」や「カスタムプロパティ」などとも呼ばれています。
この「CSS変数」、何度も同じ色を使うデザインや、色違いのデザインをさっと確認、作成する時などに、とても便利！
ここでは、CSS変数（カスタムプロパティ）の書き方、できること、注意点などの要点をまとめています。
じっくり解説というより、さっと見返したい時用の内容となっています。
CSS変数の書き方
CSS変数（カスタムプロパティ）の使い方は、「①登録して」「②呼び出す」だけ！
まずは下記の形式で、変数名とその中に入れるデータを登録します。
:root{
--変数名: 値;
}
変数名は任意の名前をつけられるので、自分で覚えやすい・使いやすい名前でOKです。
あとは、登録したデータを使いたい時に「var(--変数名);」という形式で呼び出すだけ。
.box{
プロパティ: var(--変数名);
}
最初に「var」を書くのは「変数を使うよ！」といった合図で、続けて「(--変数名);」を指定します。
具体的な書き方の例としてはこちら。
/*セットアップ*/
:root{
--custom-color: rgba(250,250,250,0.8);
--custom-line: solid 1px #ccc;
--custom-img: url('img/sample.png');
}
/*呼び出し*/
.box{
color: var(--custom-color);
border: var(--custom-line);
background: var(--custom-img);
}
実際に使う時は、エラー回避の小技としてフォールバック指定をしておく事もあります。
.box1{
color: var(--custom-color) , #eee;
border: var(--custom-line) , solid 1px #aaa;
background: var(--custom-img) , ('img/sample.png');
}
フォント指定時などでおなじみの、「,」（カンマ）で区切って、もう1つ別の指定をしておく方法です。
あらかじめ代替手段を指定しておくことで、変数が存在していない時や、変数はあるけど入っている値が使用不可の場合でも、デザイン崩れを防ぐ事ができます。
こういった指定がない場合で、指定された変数が存在しない、または値が使用不可の場合は、プロパティの初期値が自動的に適用されます。
CSS変数を使うときの注意点
ここからは、CSS変数を使う時に気をつけたい 3つの注意点を見ていきます。
CSS変数名は大文字と小文字は別扱い
CSS変数名では、小文字と大文字が区別されます。
例えば「text-box」と「Text-box」は別の変数として認識されるので、変数指定をする時などには気をつけましょう！
変数にはプロパティは指定できない
CSS変数には値を登録して使うので、「プロパティ名」を値として登録する事はできません。
例えば「1px」などは値なので登録できますが、「background:」などはプロパティなので、CSS変数の値に登録する事はできません。
単位のない数値は呼び出し元によっては無効になる
また、CSS変数には「1」といった「単位のない数値」も登録できますが、単位が必要なプロパティの値として呼び出すと無効になります。
変数名のうしろに単位を足しても無効になるので、「数値」と「単位付きの値」は別の変数を使う、もしくはcalc関数を使うなどして対応しましょう。
:root{
--large: 8;
}
.sample{
margin: var(--large);/*単位がないので無効*/
margin: var(--large)px;/*変数名のうしろに単位をつけても無効*/
}
:root{
--large: 8;
--large2: 8px;
}
.sample{
line-height: var(--large);/*単位の必要ないプロパティでは数値のみでも有効*/
margin: var(--large2);/*単位つきなので有効*/
}
また、CSS変数（カスタムプロパティ）はわりかし新しめの機能なので、 対応ブラウザも一度チェックしておきましょう。
CSS変数のベンリな小技
ここからは、CSS変数の便利な使い方をまとめています。
CSS変数は組み合わせて使える
CSS変数の値には、CSS変数をふくめることも出来ます。
CSS変数で色を指定しておき、さらにCSS変数でグラデーションを指定する、といった使い方もできて便利です。
:root{
--set-color: #eee;
--key-color: #aaa;
--gra-classic: linear-gradient(150deg, var(--set-color) 0%, var(key-color) 100%) fixed;
}
.box{
color: var(--gra-classic);
}
calc関数で計算できる
CSS変数は、calc関数()で計算にも利用できます。
さきほど、CSS変数に単位のない数値を入れると、呼び出し元によっては無効になると書きましたが……
このcalc関数を使うことで、単位の「後づけ」をする小技もあります。
:root{
--large: 8;
}
.sample{
margin: calc( var(--large) * 1px);
}
上記の例では変数「--large」には「単位なしの数値」が入っていますが、呼び出し元でcalc関数を使って「変数 ｘ 1px」と指定する事で、値を維持しつつ単位を「後づけ」しています。
うーん、すごい！
java scriptからCSS変数の値を取得、変更する
また、CSS変数の値は、他のプロパティのようにjava scriptから取得したり、変更したりすることができます。
java scriptからCSS変数を扱う時は、
「getPropertyValue('--変数名')」で値の取得、
「setProperty('--変数名','値')」で値の変更ができます。
例として以下のCSSで、CSS変数の値を取得、変更する書き方を見てみましょう。
:root{
--sample: pink;
}
.box{
background: var(--sample);
}
まず、値を取得したい時の書き方はこちら。
const SelectElement = document.querySelector('.box');
const SelectStyle = getComputedStyle(SelectElement);
const StyleValue = String(SelectStyle.getPropertyValue('--sample')).trim();
初見では分かりづらいので、この下にalert()を設置すると、ポップアップで取得した値のアラートが出てくるので、それぞれのコードでどんな値が取得できているのか、手軽に実感しやすいと思います（Chromeの場合）。
const SelectElement = document.querySelector('.box');
const SelectStyle = getComputedStyle(SelectElement);
const StyleValue = String(SelectStyle.getPropertyValue('--sample')).trim();
alert(SelectElement);
alert(SelectStyle);
alert(StyleValue);
java scriptからCSS変数の値を変更したい場合は1行でOKです。
document.documentElement.style.setProperty('--sample','aliceblue');
本当に動くか確かめたい時は、以下のコードをHTMLファイルにコピペしてみてください。
<div class="box">
サンプルテキスト
</div>
<style>
:root{
--sample: pink;
}
.box{
background: var(--sample);
}
</style>
<script>
document.documentElement.style.setProperty('--sample','skyblue');
</script>
java scriptが無効の場合は、サンプルテキストの背景色は「pink」ですが、うまく動作すると「skyblue」で表示されます。
実際にjava scriptからCSS変数を扱うとき躓くかもしれない点として、java scriptコードが書かれた時点で書かれていないclass名は取得できないので、反映されない、、という時は、一番最後にjava scriptコードを書く事で動作するかも知れません。
CSS変数とjava scriptの合わせ技は、ページに動的な変化をつけたい時に活用できそうですね！
CSS変数（カスタムプロパティ）余談
ここまでCSS変数（カスタムプロパティ）の使い方を見てきました。
余談として、CSS変数（カスタムプロパティ）は「メディアクエリ（@media）」内でも普通に利用することができます。
SassやLESSといったCSSプロセッサーでの独自変数では、メディアクエリ内では利用できない制限もありますが、CSS変数なら利用可能！
Sassなどになじみがないと使えて当然のようですが、これもCSS変数（カスタムプロパティ）の便利なところの1つですね。
CSS変数を活用するとデザイン管理もしやすくなるので、どんどん活用してサイト制作に役立てましょう！
