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