From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/position_value/index.html | 138 +++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 files/ja/web/css/position_value/index.html (limited to 'files/ja/web/css/position_value/index.html') diff --git a/files/ja/web/css/position_value/index.html b/files/ja/web/css/position_value/index.html new file mode 100644 index 0000000000..6b72b16c08 --- /dev/null +++ b/files/ja/web/css/position_value/index.html @@ -0,0 +1,138 @@ +--- +title: +slug: Web/CSS/position_value +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Data Type + - Layout + - Reference + - Web + - データ型 +translation_of: Web/CSS/position_value +--- +
{{CSSRef}}
+ +

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

+ +
+

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

+
+ +

構文

+ +

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

+ +

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

+ +

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

+ +

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

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

形式文法

+ +
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+
+ +
+

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

+
+ +

補間

+ +

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

+ +

例

+ +

有効な位置

+ +
center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+
+ +

無効な位置

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

+ + -- cgit v1.2.3-54-g00ecf