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

`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 var() 関数を用いて他の宣言の中で使用することができる値を持ちます。 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。
初期値本文を参照
適用対象すべての要素
継承あり
計算値変数を代入して指定した通り
アニメーションの種類離散値
## 構文 ```css --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); ``` - `` - : この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。 > **Note:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。 ### 形式文法
<declaration-value>
## 例 ### HTM ```html

この段落は青色の背景で黄色のテキストとなります。

この段落は黄色の背景で青色のテキストとなります。

この段落は緑色の背景で黄色のテキストとなります。

``` ### CSS ```css :root { --first-color: #16f; --second-color: #ff7; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } #secondParagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #290; } #thirdParagraph { background-color: var(--first-color); color: var(--second-color); } ``` ### 結果 ## 仕様書
If you're able to see this, something went wrong on this page.
## ブラウザーの互換性
If you're able to see this, something went wrong on this page.
## 関連情報 - [CSS 変数の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) - var() 関数