CSSで変数（カスタムプロパティ）を使ってみよう
プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！
CSS変数とは？
公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。
変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というものです。数学では数値のみ使えましたが、プログラミングの世界では文字列も含められます。そしてその中身の入った箱は何度も繰り返し利用でき、箱の中身が変わると他の箇所も変更されるという仕組みです。
何度も繰り返し利用する数値やカラーコードなどにCSS変数を使えば、仮に変更することがあったとしてもすべての箇所を修正する必要はなく、最初に定義しておいた変数の中身だけ変えればOK！メンテナンスがしやすくなり、エラーも少なくなります。
CSS変数の使い方
1. CSS変数の定義
まずは変数の定義です。「この箱にはこの値が入ってるよー！」という宣言をします。各セレクターに記述することもできますが、:root に定義してグローバル変数のように使用できます。
変数の宣言には -- から始め、続いて変数の名前（好きなものでOK）を書きます。コロンで区切って変数の値を記述。この値が呼び出されるようになります。
変数はカラーコードだけではなく、単位のついた数値や文字列も設定できます。
例：
1 2 3 4 5 | :root { --main-gutter: 12px; --main-position: center; --main-lh: 1.5;} |
2. 定義したCSS変数を呼び出す
実際に使いたい箇所で var(--変数名) と記述すると、定義した値を当てはめられます。
例：
1 2 3 4 5 6 7 8 | :root { --main-gutter: 30px;}.box { width: 300px; height: 100px; margin: var(--main-gutter);} |
この例だと .box という要素に margin: 30px; が加わります。
様々な場面でCSS変数を使ってみよう
CSS変数は、一度定義しておけば、あとは好きなところで呼び出して使う！というだけのシンプルなもの。でもそれだけじゃ物足りないので、「こんな時にも使えるよ！」というのをまとめてみます。
変数の中で変数を使う
例えば変数で色を定義した後、その色を使った変数も定義できます。
CSS
1 2 3 4 5 6 7 8 | :root { --main-color: #7117ea; --sub-color: #ea6060; --bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%) fixed;}body { background: var(--bg-gradation);} |
この例ではまず --main-color と --sub-color で二色を設定。そして --bg-gradation でグラデーションを作る値を作成し、その中に --main-color と --sub-color を盛り込んでいます。呼び出す時のコードがとってもシンプル！
こんな感じでグラデーションが設定できました。
メディアクエリーとCSS変数
「CSSで変数使わず、普通にSassで使えばいいやんけ！」という声がチラホラ聞こえてきます。Sassはとっても便利で、私もいつも使っています。昔Sassについての記事も書きましたね…！
ですが、SassやLESSなどのCSSプリプロセッサーの変数はCSSに変換されるため、ブラウザー幅の可変には対応できないのです。メディアクエリー内で変数を定義はできません。
Sass
1 2 3 4 5 6 7 8 9 | $bg: pink;@media (max-width: 600px) { $bg: yellow;}body { background: $bg;} |
例えば上記のコードでは基本の背景色をピンクに、600px以下の幅になると黄色にしたい、という内容ですが、実際には黄色にはなりません。$bg: yellow; という変数は無効となります。
デモ画面右上「Edit on CODEPEN」をクリックしてデバイスの幅を変更してみてください。黄色にはならずピンクのままです。
代わりにCSS変数を使ってみましょう。
CSS
01 02 03 04 05 06 07 08 09 10 11 12 | :root { --bg: pink;}@media (max-width: 600px) { :root { --bg: yellow; }}body { background: var(--bg);} |
この書き方だとメディアクエリー内で再定義した --bg: yellow; が有効なので、600px以下の幅では背景色が黄色になります。こちらも上記デモで確認してみてください！
JavaScriptとCSS変数
CSS変数が動的に利用できるので、JavaScriptでも活用できます。JavaScriptでCSS変数の値を取得したい場合はこんな感じ：
1 2 3 4 5 | const boxElement = document.querySelector('.box');const cssStyle = getComputedStyle(boxElement);const cssValue = String(cssStyle.getPropertyValue('--default-position')).trim(); console.log(cssValue); |
getPropertyValue で変数の値を取得できます。
JavaScriptで変数の値を変更したい時は setProperty が使えます：
1 | document.documentElement.style.setProperty('--default-position', '50px'); |
組み合わせてあれこれできそうな予感！この辺はまたさらに深掘りしてみたいです。
CSS変数が取得できなかった時のフォールバック
CSS変数ではフォールバックを記述できます。フォールバック値を記述しておくと、CSS変数が宣言されていなかったり、無効になってしまった時のために代わりの値が適用できます。
CSS
1 2 3 | .box { color: var(--my-color, pink);} |
この場合、変数 --my-color が無効の場合、pink が適応されます。
CSS変数を使う時の注意点
CSS変数を使う時のルールも覚えておきましょう。こんな場合は無効になるので注意が必要です！
CSS変数では大文字と小文字が区別される
たとえば、--var と --VAR は別のCSS変数とみなされます。
CSS
1 2 3 4 | :root { --bg: pink; --BG: orange;} |
これらは別の変数なので、var(--bg); とすればピンクが、var(--BG); とすればオレンジが適用されます。
プロパティ名を変数にできない
CSS変数には値のみが利用できます。プロパティ名を変数にすることはできません。
CSS
1 2 3 4 | body { --bg: background-color; var(--bg): pink;} |
この書き方で background-color: pink; の指定はできません。無効となります。
呼び出す時に（単純に）単位を書き足しても無効となる
数値の変数を定義し、呼び出す時 var(--変数名) の後ろに px や % を書き足しても無効となります。
CSS
1 2 3 4 | div { --gutter: 30; margin: var(--gutter)px;} |
この例だと margin: 30px; とはなりません。変数に --gutter: 30px; として単位も含めておく必要があります。
CSS
1 2 3 4 | div { --gutter: 30px; margin: var(--gutter);} |
↑これならOK！
また、calc() 関数を使って単位を含めることも可能です。
CSS
1 2 3 4 | div { --gutter: 30; margin: calc(var(--gutter) * 1px);} |
1px など、1を掛けることで単位をプラスする技ですね！
対応ブラウザー
CSS変数の対応ブラウザーはChrome, Firefox, Safari, Edge等です。IE以外のモダンブラウザーには対応しているので、これからCSS変数を使う機会はどんどん増えてくるでしょう。
みなさんもぜひ試してみてくださいね！
参照リンク
