CSS 変数は、 CSS の作者によって作成され、ドキュメント全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、--main-color: black;)によって設定し、var() 関数(たとえば、color: var(--main-color);) を使ってアクセスします。

複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはいけません。 CSS 変数を使えば、一ヶ所に値を保存しておき、複数の場所から参照できます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 --main-text-color#00ff00 より理解しやすいでしょう。とりわけ、同じ色がさまざまな文脈で使われる場合はそうです。

CSS 変数はカスケードの対象であり、親からの値を継承します。

基本的な使用方法

変数の宣言:

element {
  --main-bg-color: brown;
}

変数の使用:

element {
  background-color: var(--main-bg-color);
}

メモ: 初期仕様のカスタムプロパティの接頭辞は var- でしたが、最新の仕様では -- に変更されました。 Firefox 31 以上は最新仕様に従っています。 (バグ 985838)

CSS 変数の最初のステップ

それぞれ異なるクラスの要素に同じ色を付けるシンプルな CSS を考えてみましょう。

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

これを下の HTML に適用します。

<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three">
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

このようになるはずです。

CSS 中に同じ宣言が繰り返し出てくることがわかるでしょうか。いろいろな場所で background colorbrown を設定しています。カスケードの上流で変数を宣言し、継承を利用することでこの問題を自然に解決することもできます。大きなプロジェクトでは、常にこの手法が取れるわけではありません。 :root 擬似クラスで変数を宣言することにより、変数を利用して CSS 作者は同じ値を繰り返し書くことをやめることができるのです。

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

この結果は前の例と同じになるはずです。望んだプロパティを 1 つの標準的な宣言で実現することができます。

CSS 変数の継承

カスタムプロパティは継承されます。これはつまり、もし与えられた要素にカスタムプロパティの値がない場合、その値は親の値を使用するということです。

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

下記の CSS を適用します。

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

この場合、 var(--test) の結果は以下の通りです。

  • class="two" の要素: 10px
  • class="three" の要素: 2em
  • class="four" の要素: 10px (親から継承)
  • class="one" の要素: 無効な値、これはすべてのカスタムプロパティの既定値です。

これらはカスタムプロパティであり、実際には CSS 変数ではないことに留意してください。値は必要に応じて計算され、他の規則で使用するために格納されるわけではありません。例えば、要素にプロパティを設定して、兄弟の子孫の規則で受け取ることを期待することはできません。通常の CSS と同様、プロパティは一致するセレクター及びその子孫に対してのみ設定されます。

カスタムプロパティ代替値

var() を使用して、指定された変数が定義されていない場合の代替値を複数定義することができます。 Custom Elements 及び Shadow DOM で作業するときに便利なことがあります。

関数の最初の引数は、代替されるカスタムプロパティの名前です。関数の二番目の引数は、もしあれば、参照されたカスタムプロパティが無効であった場合に代わりに使用される代替値です。例えば以下のようになります。

.two {
  color: var(--my-var, red); /* --my-var が定義されていなければ red */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /*  my-var 及び --my-background が定義されていなければ pink */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* 無効: "--my-background, pink" */
}

メモ: 代替値の構文は、カスタムプロパティの場合のように、コンマを使用することができます。例えば、 var(--foo, red, blue)red, blue という代替値を定義します。 — 最初のコンマから関数の終わりまでが代替値とみなされます。

メモ: 上記で示されたテクニックはパフォーマンスの問題を起こすことがあります。変数を解釈するのにより時間が掛かるため、ブラウザーがページを表示するのが通常よりも遅くなります。

値と妥当性

古典的な CSS の妥当性のコンセプトとして、 (値が) それぞれのプロパティに縛られているというものがあります。これはカスタムプロパティに関してはあまり使いやすいものではありません。カスタムプロパティの値が解析されるとき、ブラウザーはそれがどこで使用されるのか知りません。そのため、ほぼすべての値を有効なものとみなす必要があります。

残念ながら、これらの有効な値は、 var() 関数表記を使用して、あまり意味のない可能性がある文脈で使用することができてしまいます。プロパティとカスタム変数が無効な CSS 文を生成する可能性があることから、計算時の妥当性確認という新しい概念が導かれます。

JavaScript での値

カスタムプロパティを JavaScript で使用するには、標準のプロパティのようにします。

// インラインスタイルから値を取得
element.style.getPropertyValue("--my-var");

// あらゆる場所の変数を取得
getComputedStyle(element).getPropertyValue("--my-var");

// インラインスタイルに値を設定
element.style.setProperty("--my-var", jsVar + 4);

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 49.0 (有) 42 (42) 未サポート 36.0 9.1
機能 Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本対応 (有) 29 (29) ? ? 9.1 49.0

 

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, hamasaki, YuichiNukiyama, lv7777, buffarin
最終更新者: mfuji09,