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
|
---
title: <angle>
slug: Web/CSS/angle
tags:
- CSS
- CSS データ型
- データ型
- レイアウト
- リファレンス
- ウェブ
- angle
browser-compat: css.types.angle
translation_of: Web/CSS/angle
---
{{ CSSRef() }}
**`<angle>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
## 構文
`<angle>` データ型は、1 つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の 1 つから成ります。単位と数値の間に空白は置きません。 数値 `0` の後では、角度の単位は任意です。
任意で、先行して単一の符号 (`+` または `-`) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 `90deg` は `-270deg` と等価で、 `1turn` は `4turn` と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。
### 単位
- `deg`
- : 角度を[度数法 (度)](https://ja.wikipedia.org/wiki/%E5%BA%A6_(%E8%A7%92%E5%BA%A6)) で表します。円一周は `360deg` です。例: `0deg`, `90deg`, `14.23deg`
- `grad`
- : 角度を[グラード](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%BC%E3%83%89_(%E5%8D%98%E4%BD%8D))で表します。円一周は `400grad` です。例: `0grad`, `100grad`, `38.8grad`
- `rad`
- : 角度を[弧度法 (ラジアン)](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B8%E3%82%A2%E3%83%B3) で表します。円一周は 2π ラジアンで、およそ `6.2832rad` です。 `1rad` は 180/π 度です。例: `0rad`, `1.0708rad`, `6.2832rad`
- `turn`
- : 角度を回転数で表します。円一周は `1turn` です。例: `0turn`, `0.25turn`, `1.2turn`
## 例
### 時計回りに直角を設定
<table class="standard-table">
<tbody>
<tr>
- : <img class="default internal" src="angle90.png" />
- : `90deg = 100grad = 0.25turn ≈ 1.5708rad`
</tr>
</tbody>
</table>
### 平角を設定
<table class="standard-table">
<tbody>
<tr>
- : <img class="default internal" src="angle180.png" />
- : `180deg = 200grad = 0.5turn ≈ 3.1416rad`
</tr>
</tbody>
</table>
### 反時計回りに直角を設定
<table class="standard-table">
<tbody>
<tr>
- : <img class="default internal" src="angleminus90.png" />
- : `-90deg = -100grad = -0.25turn ≈ -1.5708rad`
</tr>
</tbody>
</table>
### 0 度を設定
<table class="standard-table">
<tbody>
<tr>
- : <img class="default internal" src="angle0.png" />
- : `0 = 0deg = 0grad = 0turn = 0rad`
</tr>
</tbody>
</table>
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS データ型](/ja/docs/Web/CSS/CSS_Types)
- [`<gradient>`](/ja/docs/Web/CSS/gradient) 型
- CSS 回転変換: [`rotate()`](</ja/docs/Web/CSS/transform-function/rotate()>), [`rotate3d()`](</ja/docs/Web/CSS/transform-function/rotate3d()>), [`rotateX()`](</ja/docs/Web/CSS/transform-function/rotateX()>), [`rotateY()`](</ja/docs/Web/CSS/transform-function/rotateY()>), [`rotateZ()`](</ja/docs/Web/CSS/transform-function/rotateZ()>)
- [CSS 変換](/ja/docs/Web/CSS/CSS_Transforms)
- [CSS 変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
|
