CSS変数を使ってみよう

2020年12月27日CSS

CSS変数を使うことで、修正・変更対応がしやすくなり、その際のミスも劇的に減らすことができます。
管理もしやすくなるので、CSS変数の使い方を学んでいきましょう。

CSS変数ってどう便利なの？

まずは、CSS変数が使えるとなぜ便利なのかを理解しておきましょう。

たとえば、次のようなケースを考えてみます。

h2 {
  color: skyblue;
  border-left: 3px solid skyblue;
  border-bottom: 3px solid skyblue;
}

.btn {
  background-color: skyblue;
  color: white;
}

4箇所にスカイブルーの色が指定されています。
これらを赤色に変えたいとき、今までの知識でやるのであれば単純に一つずつ変更する必要があります。

h2 {
  color: red;
  border-left: 3px solid red;
  border-bottom: 3px solid red;
}

.btn {
  background-color: red;
  color: white;
}

こんな感じです。

CSS変数を使わないデメリットは、2つあります。

  • すべてを変更する手間がかかる
  • 変更し忘れが発生する可能性が高くなる

この2つのデメリットを解消できるのが、CSS変数です。

では、具体的に、CSS変数の使い方をみていきましょう。

CSS変数の使い方

まずは、スタイルシート内にCSS変数を使うと宣言することで使えるようになります。

  1. 先頭に「–」をつける
  2. 変数名をつける

これだけでCSS変数の宣言ができます。(例.–main-color: skyblue;)

これでCSS変数を宣言したことになります。
名前をつけるときは、必ず「–」で始める必要があります。そのあとは好きに名前をつけてOKです。

そして、CSS変数を使うときは、次のように書きます。
var()関数を使って変数を渡せばOKです。 例.var(–main-color)

具体的には次のようになります。

h2 {
  --main-color: skyblue;
  color: var(--main-color);
  border-left: 3px solid var(--main-color);
  border-bottom: 3px solid var(--main-color);
}

.btn {
  background-color: var(--main-color);
  color: white;
}

CSS変数を継承してみよう

CSS変数は、継承されるプロパティです。
上の例では、要素内で宣言をしています。
CSS変数は要素内で宣言したら、その要素内でしか使えません。
他の要素にも適用したい場合、CSS変数を共通の親要素で指定します。
そうすることで、CSS変数を継承することができるようになります。

そのためCSS変数の宣言は、body要素や、html要素を示すroot擬似クラス「:root」で行うといいでしょう。

:root {
  --my-color: blue;
}

デフォルト値を設定する

CSS変数に値が設定されていない場合のデフォルト値を設定することができます。

var(--my-color, skyblue);

というように、var関数の（）内の変数の後にカンマで区切ってデフォルト値として指定したい値を書きます。

CSS変数の注意点

CSS変数の利用には、いつくか注意点があるので、把握しておきましょう。

大文字と小文字を区別する

CSS変数は、大文字と小文字を区別するので、宣言した通りに書くようにしましょう。

対応ブラウザを確認する必要がある

CSS変数は、比較的新しい技術のため、canIuse.comというWebサイトでブラウザの対応状況を確認することが必要です。
サイト内で「CSS Variables」で検索するといいでしょう。

プロパティ自体には使えない

CSS変数は、プロパティの値に使えるもので、プロパティ自体には使えません。
つまり、下のようなプロパティ自体をCSS変数に指定することはできないということです。

:root {
  --main-color: green;
  --font-color: blue;
}

h2 {
  /*このvar(--font-color)のようにプロパティ自体には使えない。*/
  var(--font-color): var(--main-color);
}

後から単位を追加できない

CSS変数では、後から単位を追加することができません。

つまり、下のようなことはできません。

:root {
  --main-color: green;
  --main-margin-bottom: 40;
}

h2 {
  background-color: var(--main-color);
  /*このvar(--main-margin-bottom)pxのように後から単位はつけられない。*/
  margin-bottom: var(--main-margin-bottom)px;
}

CSS変数で単位をつけたいときは、主に2つ方法があるので紹介します。
一つは、単純に宣言時に単位もつける方法です。

:root {
  --main-color: green;
  --main-margin-bottom: 40px;
}

h2 {
  background-color: var(--main-color);
  margin-bottom: var(--main-margin-bottom);
}

もうひとつは、calc関数を使って単位をつける方法です。

:root {
  --main-color: green;
  --main-margin-bottom: 40;
}

h2 {
  background-color: var(--main-color);
  margin-bottom: calc(var(--main-margin-bottom)) * 1px;
}

calc関数を使う場合は、CSS変数の宣言時には単位をつけなくてOKです。
calc関数でCSS変数に単位をかけることで、その単位にすることができます。
1をかければ単位だけ変わるので、たとえば、pxなら*1pxとします。

CSS

Posted by devsakaso