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/position_value/index.md | 163 +++++++++------------- files/ja/web/css/position_value/position_type.png | Bin 0 -> 16184 bytes 2 files changed, 64 insertions(+), 99 deletions(-) create mode 100644 files/ja/web/css/position_value/position_type.png (limited to 'files/ja/web/css/position_value') diff --git a/files/ja/web/css/position_value/index.md b/files/ja/web/css/position_value/index.md index 0969fd97b3..160e564f85 100644 --- a/files/ja/web/css/position_value/index.md +++ b/files/ja/web/css/position_value/index.md @@ -3,134 +3,99 @@ title: slug: Web/CSS/position_value tags: - CSS - - CSS Data Type - CSS データ型 - - Data Type - - Layout - - Reference - - Web - データ型 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.position translation_of: Web/CSS/position_value --- -
{{CSSRef}}
+{{CSSRef}} -

<position> (または <bg-position>) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。

+**``** (または **``**) は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。 -
-

注: <position> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

-
+> **Note:** `` 値で記述される最終的な位置は、要素ボックスの中である必要はありません。 -

構文

+## 構文 -

The <position> データ型は1～2つのキーワードと、任意のオフセットで定義されます。

+![](position_type.png)`` データ型は 1 ～ 2 つのキーワードと、任意のオフセットで定義されます。 -

キーワード値は center、 top、 right、 bottom、 left です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 center は左右の辺の中心か、上下の辺の中心を表します。

+キーワード値は `center`、 `top`、 `right`、 `bottom`、 `left` です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 `center` は左右の辺の中心か、上下の辺の中心を表します。 -

オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

+オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。 -

単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の center に設定されます。

+単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の `center` に設定されます。 -
/* 値1つの構文 */
-keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
-value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
+```css
+/* 値 1 つの構文 */
+keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
+value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
 
-/* 値2つの構文 */
-keyword keyword          /* それぞれの方向のキーワード（順不同） */
-keyword value            /* キーワードで定義された辺からのオフセット */
-value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
-value value              /* それぞれの方向（水平、垂直）の距離の値 */
+/* 値 2 つの構文 */
+keyword keyword          /* それぞれの方向のキーワード（順不同） */
+keyword value            /* キーワードで定義された辺からのオフセット */
+value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
+value value              /* それぞれの方向（水平、垂直）の距離の値 */
 
-/* 値4つの構文 */
-keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */
-
+/* 値 4 つの構文 */ +keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */ +``` -

形式文法

+### 形式文法 -
[
+```css
+[
  [ left | center | right ] || [ top | center | bottom ]
 |
- [ left | center | right | <length> | <percentage> ]
- [ top | center | bottom | <length> | <percentage> ]?
+ [ left | center | right |  |  ]
+ [ top | center | bottom |  |  ]?
 |
- [ [ left | right ] [ <length> | <percentage> ] ] &&
- [ [ top | bottom ] [ <length> | <percentage> ] ]
+ [ [ left | right ] [  |  ] ] &&
+ [ [ top | bottom ] [  |  ] ]
 ]
-
+``` -
-

注: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <position> を使用する他のプロパティでは許可されません。

-
+> **Note:** {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは `` を使用する他のプロパティでは許可されません。 -

補間

+## 補間 -

アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

+アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの[タイミング関数](/ja/docs/Web/CSS/easing-function)が用いられるため、座標は直線に移動します。 -

例

+## 例 -

有効な位置

+### 有効な位置 -
center
-left
-center top
+    center
+    left
+    center top
 
-right 8.5%
-bottom 12vmin right -6px
+    right 8.5%
+    bottom 12vmin right -6px
 
-10% 20%
-8rem 14px
-
+ 10% 20% + 8rem 14px -

無効な位置

+### 無効な位置 -
left right
+```plain example-bad
+left right
 bottom top
 10px 15px 20px 15px
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <position> の定義も使用される。
{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}{{Spec2('CSS3 Backgrounds')}}<position> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> を {{cssxref("background-position")}} の値として無名で定義。
- -

ブラウザーの互換性

- -

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

- -

See also

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 値と単位の紹介](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) +- {{cssxref("background-position")}} +- {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} +- {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} diff --git a/files/ja/web/css/position_value/position_type.png b/files/ja/web/css/position_value/position_type.png new file mode 100644 index 0000000000..3431698e93 Binary files /dev/null and b/files/ja/web/css/position_value/position_type.png differ -- cgit v1.2.3-54-g00ecf