files/ja/web/css/@property/syntax/index.md


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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

---
title: syntax
slug: Web/CSS/@property/syntax
tags:
  - CSS
  - リファレンス
  - ウェブ
  - プロパティ
  - Houdini
browser-compat: css.at-rules.property.syntax
translation_of: Web/CSS/@property/syntax
---
{{CSSRef}}{{SeeCompatTable}}

**`syntax`** は [CSS](/ja/docs/Web/CSS) の記述子で、 {{cssxref("@property")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用する上で必要であり、そのプロパティで許可される構文を記述します。

## 構文

以下のものはすべて、有効な構文の文字列です。

```css
syntax: '<color>'; /* 色を受け入れる */

syntax: '<length> | <percentage>'; /* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない */

syntax: 'small | medium | large'; /* カスタム識別子で設定されたこれらの値の何れかを受け入れる */

syntax: '*'; /* 常に有効なトークン */
```

## 値

仕様で定義されている対応する構文を持つ文字列。対応する構文は [CSS 型](/ja/docs/Web/CSS/CSS_Types)のサブセットです。これらは一緒に使うこともできますし、いくつかの型を組み合わせて使うこともできます。

- `"<length>"`
  - : あらゆる有効な {{cssxref("&lt;length&gt;")}} の値です。
- `"<number>"`
  - : あらゆる有効な {{cssxref("&lt;number&gt;")}} の値です。
- `"<percentage>"`
  - : あらゆる有効な {{cssxref("&lt;percentage&gt;")}} の値です。
- `"<length-percentage>"`
  - : あらゆる有効な {{cssxref("&lt;length-percentage&gt;")}} の値です。
- `"<color>"`
  - : あらゆる有効な {{cssxref("&lt;color&gt;")}} の値です。
- `"<image>"`
  - : あらゆる有効な {{cssxref("&lt;image&gt;")}} の値です。
- `"<url>"`
  - : あらゆる有効な {{cssxref("url()","url()")}} の値です。
- `"<integer>"`
  - : あらゆる有効な {{cssxref("&lt;integer&gt;")}} の値です。
- `"<angle>"`
  - : あらゆる有効な {{cssxref("&lt;angle&gt;")}} の値です。
- `"<time>"`
  - : あらゆる有効な {{cssxref("&lt;time&gt;")}} の値です。
- `"<resolution>"`
  - : あらゆる有効な {{cssxref("&lt;resolution&gt;")}} の値です。
- `"<transform-function>"`
  - : あらゆる有効な {{cssxref("&lt;transform-function&gt;")}} の値です。
- `"<custom-ident>"`
  - : あらゆる有効な {{cssxref("&lt;custom-ident&gt;")}} の値です。
- `"<transform-list>"`
  - : 有効な {{cssxref("&lt;transform-function&gt;")}} の値のリストです。

## 公式定義

{{cssinfo}}

## 形式文法

{{csssyntax}}

## 例

`--my-color` {{cssxref('--*', 'カスタムプロパティ')}}に、 `<color>` の構文を使用して型チェックを追加します。

[CSS](/ja/docs/Web/CSS) の {{cssxref('@property')}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用すると次のようになります。

```css
@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}
```

[JavaScript](/ja/docs/Web/JavaScript) の {{domxref('CSS.registerProperty')}} を使用すると次のようになります。

```js
window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: '#c0ffee',
});
```

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}

## 関連情報

- [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API)
- [CSS 描画 API](/ja/docs/Web/API/CSS_Painting_API)
- [CSS 型付きオブジェクトモデル](/ja/docs/Web/API/CSS_Typed_OM_API)
- [CSS Houdini](/ja/docs/Web/Guide/Houdini)