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

URL: https://webrandum.net/css-custom-property/
公開日: 2020-08-30
更新日: 2020-08-30
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

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に対応していません。

![Data on support for the css-variables feature across the major browsers from caniuse.com](https://caniuse.bitsofco.de/image/css-variables.jpg)

[![](https://www.google.com/s2/favicons?domain=caniuse.com)caniuse.com![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fcaniuse.com%2F%23feat%3Dcss-variables?w=160)Can I use... Support tables for HTML5, CSS3, etchttps://caniuse.com/#feat=css-variables](https://caniuse.com/#feat=css-variables)

IE11で対応したい場合は、[Polyfill](https://github.com/nuxodin/ie11CustomProperties)がありますので、こちらを使用するとIE11でも使えるようになります。

[![](https://www.google.com/s2/favicons?domain=github.com)GitHub![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/2fbf28ff1c4bd7e32700d4084e3d9a82c914a389ec4484892c70a565265f7c5d.webp)nuxodin/ie11CustomPropertieshttps://github.com/nuxodin/ie11CustomPropertiesCSS variables (Custom Properties) polyfill for IE11 - 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;
}
```

### ダークモードでの色変更

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/02/eyecatch-2.jpg)Safari 12.1から外観モード（ライト/ダーク）の判定をCSSで行えるように！https://webrandum.net/safari-appearance-modeSafari 12.1から、Macの外観モードの状態に応じてメディアクエリで判定できるようになりました。ちなみに、外観モードはmacOS Mojave以降で［システム環境設定］→［一般］→「外観モード:」で変更できる、UIの色を選択できる機能の事です。対応ブラウザが現状Safariの12.1でないと使えないので、わざわざ実装する機会は少ないと思いますが、Macのシステム環境内の状態を判定できるのは面白いので紹介しておきます。実際の動作Safari 12.1からCSSでダークモードの判定が出来るようになった。メディアクエリで「prefers-color-scheme: dar...](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;
  }
}
```

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

## CSS変数のその他の使い方

### メディアクエリで変数を書き換えてレスポンシブ対応

メディアクエリの中に:rootを書くことで、メディアクエリの条件に合致したときのみ変数の値を書き換えられます。

これを使うことで、フォントサイズやマージンをメディアクエリで変数を書き換えて簡単にレスポンシブ対応ができます。

全てをカバーするのは難しいですが、共通化された部分は一気にレスポンシブ対応できるので、非常にラクにレスポンシブ化できます。

とは言っても、CSSの設計がちゃんとできているのであれば、共通classを付けてメディアクエリでclassの書き換えをしているのと本質は変わらないので、基本はあまり使わない方法です。