From 35918176145e2f9de541ac623706cd3ced71612d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 17:30:52 +0900 Subject: CSS Values and Units の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/19 時点の英語版に同期 --- files/ja/web/css/angle/index.md | 159 +++++++++++++++++++++------------------- 1 file changed, 83 insertions(+), 76 deletions(-) (limited to 'files/ja/web/css/angle') diff --git a/files/ja/web/css/angle/index.md b/files/ja/web/css/angle/index.md index 4986591cbc..4d3257c6cd 100644 --- a/files/ja/web/css/angle/index.md +++ b/files/ja/web/css/angle/index.md @@ -3,90 +3,97 @@ title: slug: Web/CSS/angle tags: - CSS - - CSS Data Type - CSS データ型 - - CSS 値と単位 - - Layout - - Reference - - Web - - ウェブ + - データ型 - レイアウト + - リファレンス + - ウェブ + - angle +browser-compat: css.types.angle translation_of: Web/CSS/angle --- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
- - - -

構文

- -

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

- -

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

- -

単位

- -
-
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
-
- -

例

- - - - - - - - - - - - - - - - - - - - +{{ CSSRef() }} + +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。 + +{{EmbedInteractiveExample("pages/css/type-angle.html")}} + +## 構文 + +`` データ型は、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` + +## 例 + +### 時計回りに直角を設定 + +
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
+ + + - : + - : `90deg = 100grad = 0.25turn ≈ 1.5708rad` + +
-

仕様書

+### 平角を設定 - - - - - - - - - - - - - - - - - - - + + + - : + - : `180deg = 200grad = 0.5turn ≈ 3.1416rad` + +
仕様書状態備考
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}初回定義。
-

ブラウザーの対応

+### 反時計回りに直角を設定 + + + + + - : + - : `-90deg = -100grad = -0.25turn ≈ -1.5708rad` + + +
+ +### 0 度を設定 + + + + + - : + - : `0 = 0deg = 0grad = 0turn = 0rad` + + +
+ +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

{{Compat("css.types.angle")}}

+- [CSS データ型](/ja/docs/Web/CSS/CSS_Types) +- [``](/ja/docs/Web/CSS/gradient) 型 +- CSS 回転変換: [`rotate()`](), [`rotate3d()`](), [`rotateX()`](), [`rotateY()`](), [`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) -- cgit v1.2.3-54-g00ecf