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

--example-name のように、頭に -- 接頭辞がつけられたプロパティはカスタムプロパティを表し、 (var) 関数を使用して文書全体で再利用できる値を持ちます。

カスタムプロパティはカスケードに関連しています。これらのプロパティは複数回表示させることが可能で、変数の値は、カスケードのアルゴリズムによって決められたカスタムプロパティで定義された値とマッチします。

構文

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

<declaration-value>

シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。

形式文法

<declaration-value>

例

HTML

<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
  <p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

結果

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• CSS 変数の利用