diff options
Diffstat (limited to 'files/ja/web/css/position_value')
| -rw-r--r-- | files/ja/web/css/position_value/index.md | 163 | ||||
| -rw-r--r-- | files/ja/web/css/position_value/position_type.png | bin | 0 -> 16184 bytes |
2 files changed, 64 insertions, 99 deletions
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: <position> 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><position></code></strong> (または <strong><code><bg-position></code></strong>) は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。</p> +**`<position>`** (または **`<bg-position>`**) は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。 -<div class="note"> -<p><strong>注:</strong> <code><position></code> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。</p> -</div> +> **Note:** `<position>` 値で記述される最終的な位置は、要素ボックスの中である必要はありません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;">The <code><position></code> データ型は1～2つのキーワードと、任意のオフセットで定義されます。</p> +`<position>` データ型は 1 ～ 2 つのキーワードと、任意のオフセットで定義されます。 -<p>キーワード値は <code>center</code>、 <code>top</code>、 <code>right</code>、 <code>bottom</code>、 <code>left</code> です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 <code>center</code> は左右の辺の中心か、上下の辺の中心を表します。</p> +キーワード値は `center`、 `top`、 `right`、 `bottom`、 `left` です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 `center` は左右の辺の中心か、上下の辺の中心を表します。 -<p>オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。</p> +オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。 -<p>単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の <code>center</code> に設定されます。</p> +単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の `center` に設定されます。 -<pre class="brush:css notranslate">/* 値1つの構文 */ -<var>keyword</var> /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */ -<var>value</var> /* X 座標の位置。 Y 座標は既定値の 50% になる */ +```css +/* 値 1 つの構文 */ +keyword /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */ +value /* X 座標の位置。 Y 座標は既定値の 50% になる */ -/* 値2つの構文 */ -<var>keyword</var> <var>keyword</var> /* それぞれの方向のキーワード（順不同） */ -<var>keyword</var> <var>value</var> /* キーワードで定義された辺からのオフセット */ -<var>value</var> <var>keyword</var> /* 水平位置を表す値、垂直位置を表すキーワード */ -<var>value</var> <var>value</var> /* それぞれの方向（水平、垂直）の距離の値 */ +/* 値 2 つの構文 */ +keyword keyword /* それぞれの方向のキーワード（順不同） */ +keyword value /* キーワードで定義された辺からのオフセット */ +value keyword /* 水平位置を表す値、垂直位置を表すキーワード */ +value value /* それぞれの方向（水平、垂直）の距離の値 */ -/* 値4つの構文 */ -<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* それぞれの値はその前のキーワードからのオフセット */ -</pre> +/* 値 4 つの構文 */ +keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */ +``` -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +### 形式文法 -<pre class="syntaxbox notranslate">[ +```css +[ [ left | center | right ] || [ top | center | bottom ] | - [ left | center | right | <length> | <percentage> ] - [ top | center | bottom | <length> | <percentage> ]? + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? | - [ [ left | right ] [ <length> | <percentage> ] ] && - [ [ top | bottom ] [ <length> | <percentage> ] ] + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] ] -</pre> +``` -<div class="blockIndicator note"> -<p><strong>注</strong>: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <code><position></code> を使用する他のプロパティでは許可されません。</p> -</div> +> **Note:** {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは `<position>` を使用する他のプロパティでは許可されません。 -<h2 id="Interpolation" name="Interpolation">補間</h2> +## 補間 -<p>アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>が用いられるため、座標は直線に移動します。</p> +アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの[タイミング関数](/ja/docs/Web/CSS/easing-function)が用いられるため、座標は直線に移動します。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_positions" name="Valid_positions">有効な位置</h3> +### 有効な位置 -<pre class="notranslate">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 -</pre> + 10% 20% + 8rem 14px -<h3 id="Invalid_positions" name="Invalid_positions">無効な位置</h3> +### 無効な位置 -<pre class="example-bad notranslate">left right +```plain example-bad +left right bottom top 10px 15px 20px 15px -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Values', '#position', '<position>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <code><position></code> の定義も使用される。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td><code><position></code> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-position', '<position>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td><code><position></code> を {{cssxref("background-position")}} の値として無名で定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.position")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位の紹介</a></li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> - <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li> -</ul> +``` + +## 仕様書 + +{{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 Binary files differnew file mode 100644 index 0000000000..3431698e93 --- /dev/null +++ b/files/ja/web/css/position_value/position_type.png |
