From e160f04ecb5945c3dcf028e9d836be665dbf0ddc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 20 Nov 2021 23:56:35 +0900 Subject: CSS Values and Units のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/position_value/index.html | 136 ----------------------------- files/ja/web/css/position_value/index.md | 136 +++++++++++++++++++++++++++++ 2 files changed, 136 insertions(+), 136 deletions(-) delete mode 100644 files/ja/web/css/position_value/index.html create mode 100644 files/ja/web/css/position_value/index.md (limited to 'files/ja/web/css/position_value') diff --git a/files/ja/web/css/position_value/index.html b/files/ja/web/css/position_value/index.html deleted file mode 100644 index 0969fd97b3..0000000000 --- a/files/ja/web/css/position_value/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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

- - diff --git a/files/ja/web/css/position_value/index.md b/files/ja/web/css/position_value/index.md new file mode 100644 index 0000000000..0969fd97b3 --- /dev/null +++ b/files/ja/web/css/position_value/index.md @@ -0,0 +1,136 @@ +--- +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