CSSのカスタムプロパティ（変数機能）の使い方

2020年8月30日

著者：サイトウマサカズ

SassやStylusといったプリプロセッサーを使っている人であれば、あたりまえの機能である「変数」。

IE11では対応していないのでPolyfillが必要ですが、モダンブラウザであればCSSでも使えるようになっているので、今回はそのCSSの変数機能（カスタムプロパティ）についてまとめておきます。

CSS変数の使い方

変数の定義

まずは変数の定義です。

:rootに定義しておくとCSS全体で使用できるグローバル変数として定義できます。

:root{
  /* ここに変数を定義する */
  --primary-color: #0000ff;
}

変数の名前は最初にハイフン2つを付けて「–」そのあとは自由に名前を設定できます。

あとは通常のCSSプロパティを指定するときと同様にコロンのあとに値を入力します。

変数は:rootでなくても定義できるけど、基本は:rootが無難

ちなみに、各セレクタにも定義できますが、その場合は定義したセレクタより下のHTML階層に反映されます。
「基本的には:rootに書くけど、各セレクタにも一応書けるんだ」と覚えておきましょう。

具体的に:root以外に書くケースとしては、classのありなしによって変数の中身を変えたいときです。

例えば、メディアクエリを使わずに、ユーザーの意思でボタンでダークモードを切り替える機能を作るときなどは、ボタンのオンオフでbodyにclassを付け外しします。
ライトモード用のclassが付いているときはライトモードの変数指定、ダークモード用のclassが付いているときはダークモード用の変数を指定します。

body.light-mode{
  /* ライトモード指定のときに.light-modeのclassをJavaScriptで付ける */
  --text-color: #000;
}
body.dark-mode{
  /* ダークモード指定のときに.dark-modeのclassをJavaScriptで付ける */
  --text-color: #fff;
}

他にも「フォントサイズが大きくなるボタン」を作って、押すとフォントサイズを定義している変数の中身が変わったり、ウェブサービスで自分の好みのテーマを設定する機能などにも使えそうです。

ただ、その場合もあくまで:rootで定義しておいた変数をあとから上書きする目的で使います。

プログラムのように大量に変数を扱う場合は、グローバル変数だけだと干渉が起きてしまったり、不都合なことが多いですが、CSSの場合はそこまで多く定義することもないので、:rootにまとめて管理した方がラクです。

変数の呼び出し

先ほど定義した変数を呼び出すときはvar(変数名)で呼び出せます。

h2 {
  // 変数の呼び出し
  color: var(--primary-color);
}

いままではcolorに対して直接固定の値を書いていましたが、それをvar(変数名)に変えるだけなので簡単ですね。

また、変数名のあとに,（カンマ）で区切って、代替値の設定もできます。

h2 {
  // 変数の呼び出し
  color: var(--primary-color, #333);
}

こうすることで、--primary-colorが定義されていないときは#333が適用されます。

「ダークモード用の変数が適用されていないときは、この色にする」と設定しておくことで、ダークモードになったら同じ色になるけど、ライトモードでは別々の色にしたりができるわけですね。

IE11対応

残念ながら、CSS変数はIE11に対応していません。

caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#feat=css-variables

IE11で対応したい場合は、Polyfillがありますので、こちらを使用するとIE11でも使えるようになります。

GitHub

nuxodin/ie11CustomProperties

https://github.com/nuxodin/ie11CustomProperties

CSS変数の便利な使い方

色やマージンの管理

色やマージン、フォントサイズを共通化しておくことで、かなりラクに値の管理ができます。

ただこれはコーディングだけでどうにかなる問題ではなく、デザイナー側にも共通化を意識してデザインしてもらう必要があります。

とくにマージンやパディングはデザインの都合上、大量に数値が発生してしまいがちなので、本当に最低限のセクション間の共通化だけを目指して、それ以外は固定値を入力が現実的です。
変数が大量に生まれてしまうと、変数の命名もめちゃくちゃになってしまいがちですし、どの変数がどれに対応しているかもわからなくなってくるので、あまり大量に作りすぎないのがポイントです。

:root {
  --main-margin: 28px auto 68px;
  --main-padding: 18px 20px;

  --primary-color: #ffff00;
  --secondary-color: #00ffff;
  --primary-bg: #fff;
  --secondary-bg: #ccc;
  --text-color: #333;

  --fz-md: 16px;
  --fz-lg: 22px;
  --fz-xl: 28px;
}

ダークモードでの色変更

メディアクエリでダークモードかどうか判定ができるので、ダークモードのときに変数を書き換えて色を変更します。

Webrandum

Safari 12.1から外観モード（ライト/ダーク）の判定をCSSで行えるように！

https://webrandum.net/safari-appearance-mode

:root{
  --c-primary: #0076b5;
  --c-secondary: #17C2C7;
  --c-background-base: #F7F9FB;
  --c-background-primary: #FFF;
  --c-background-secondary: #F0F2F5;
  --c-text-base: #555;
  --c-text-lighter: #676767;
  --c-text-link: #0076b5;
}
@media (prefers-color-scheme: dark) {
  :root{
    --c-primary: #EBCB1A;
    --c-secondary: #FF178D;
    --c-background-base: #2B2B2B;
    --c-background-primary: #313131;
    --c-background-secondary: #242424;
    --c-text-base: #EAEAEA;
    --c-text-lighter: #B7B7B7;
    --c-text-link: #0076b5;
  }
}

きちんと変数で管理ができていれば、非常に簡単にダークモード対応ができます。