カスタムプロパティ (--*): CSS 変数

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年4月.

接頭辞-- が付いたプロパティ名、例えば--example-name は、カスタムプロパティを表し、var() 関数を用いて他の宣言の中で使用することができる値を持ちます。

カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。

初期値	本文を参照
適用対象	すべての要素
継承	あり
計算値	変数を代入して指定した通り
アニメーションの種類	離散値

構文

css

--some-keyword: left;--some-color: #123456;--some-complex-value: 3px 6px rgb(20 32 54);

<declaration-value>: この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。

メモ:カスタムプロパティ名は大文字・小文字の区別があります。--my-color は--My-color とは別なカスタムプロパティとして扱われます。

例

HTML

html

<p>  この段落は青色の背景で黄色のテキストとなります。</p><p>  この段落は黄色の背景で青色のテキストとなります。</p><div>  <p>    この段落は緑色の背景で黄色のテキストとなります。  </p></div>

CSS

css

:root {  --first-color: #1166ff;  --second-color: #ffff77;}#firstParagraph {  background-color: var(--first-color);  color: var(--second-color);}#secondParagraph {  background-color: var(--second-color);  color: var(--first-color);}#container {  --first-color: #229900;}#thirdParagraph {  background-color: var(--first-color);  color: var(--second-color);}