blob: 35e6f15e2be093b7dfef36fde63d0927210b33f2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
---
title: 'カスタムプロパティ (--*): CSS 変数'
slug: Web/CSS/--*
tags:
- CSS
- CSS カスタムプロパティ
- ガイド
- リファレンス
browser-compat: css.properties.custom-property
translation_of: Web/CSS/--*
---
{{CSSRef}}
接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。
カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。
{{CSSInfo}}
## 構文
```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```
- `<declaration-value>`
- : この並びに許可されていないトークンが含まれていない限り、この値は 1 つ以上のトークンの並びに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。
> **Note:** カスタムプロパティ名は大文字・小文字の区別があります。 `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。
### 形式文法
{{CSSSyntax}}
## 例
### HTML
```html
<p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
<p id="secondParagraph">この段落は黄色の背景で青色のテキストとなります。</p>
<div id="container">
<p id="thirdParagraph">この段落は緑色の背景で黄色のテキストとなります。</p>
</div>
```
### 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);
}
```
### 結果
{{EmbedLiveSample('Example', 500, 130)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS 変数の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties)
- {{cssxref("var()")}} 関数
|
