CSS<angle> データ型は、度、グラード、ラジアン、回転の値で表される角度の値を表します。話し声の高さなどの周波数の値を表します。例えば、 <gradient> 関数や一部の transform 関数などで使われています。

構文

<angle> データ型は、一つの <number> とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 0 の後は、角度の単位は任意です。

任意で、先行して単一の符号(+ または -)を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。 静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 90deg-270deg と等価で、 1turn4turn と等価です。しかし、 animationtransition に適用されるような動的なプロパティでは、効果が異なります。

単位

deg
角度を度数法(度)で表します。円一周は 360deg です。例: 0deg, 90deg, 14.23deg
grad
角度をグラードで表します。円一周は 400grad です。例: 0grad, 100grad, 38.8grad
rad
角度を弧度法(ラジアン)で表します。円一周は 2π ラジアンで、およそ 6.2832rad です。 1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad
turn
角度を回転数で表します。円一周は 1turn です。例: 0turn, 0.25turn, 1.2turn

Angle90.png 直角: 90deg = 100grad = 0.25turn ≈ 1.5708rad
Angle180.png 平角: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png 直角(反時計回り): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png 角度なし: 0 = 0deg = 0grad = 0turn = 0rad

仕様策定状況

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
<angle> の定義
勧告候補 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応2123.69 あり4
deg2123.69 あり4
grad2123.69 あり4
rad2123.69 あり4
turn あり12139 あり10
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
deg あり あり あり4 あり あり あり
grad あり あり あり4 あり あり あり
rad あり あり あり4 あり あり あり
turn あり あり あり14 あり10 あり

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Hixhi, mrstork, fscholz, teoli, ethertank, sosleepy, FredB, Marsf
最終更新者: mfuji09,