initial commit

1 files changed, 138 insertions, 0 deletions

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: <position>
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - データ型
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;position&gt;</code></strong> (または <strong><code>&lt;bg-position&gt;</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>
+
+<div class="note">
+<p><strong>注:</strong> <code>&lt;position&gt;</code> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。</p>
+</div>
+
+<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>&lt;position&gt;</code> データ型は1～2つのキーワードと、任意のオフセットで定義されます。</p>
+
+<p>キーワード値は <code>center</code>、 <code>top</code>、 <code>right</code>、 <code>bottom</code>、 <code>left</code> です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 <code>center</code> は左右の辺の中心か、上下の辺の中心を表します。</p>
+
+<p>オフセット値を指定する場合は、相対的な {{cssxref("&lt;percentage&gt;")}} 値か絶対的な {{cssxref("&lt;length&gt;")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。</p>
+
+<p>単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の <code>center</code> に設定されます。</p>
+
+<pre class="brush:css notranslate">/* 値1つの構文 */
+<var>keyword</var>                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
+<var>value</var>                    /* 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>              /* それぞれの方向（水平、垂直）の距離の値 */
+
+/* 値4つの構文 */
+<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* それぞれの値はその前のキーワードからのオフセット */
+</pre>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
+ [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
+|
+ [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
+ [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
+]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <code>&lt;position&gt;</code> を使用する他のプロパティでは許可されません。</p>
+</div>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>が用いられるため、座標は直線に移動します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_positions" name="Valid_positions">有効な位置</h3>
+
+<pre class="notranslate">center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+</pre>
+
+<h3 id="Invalid_positions" name="Invalid_positions">無効な位置</h3>
+
+<pre class="example-bad notranslate">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', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <code>&lt;position&gt;</code> の定義も使用される。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '&lt;bg-position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td><code>&lt;position&gt;</code> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>キーワードと {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の値の組み合わせを許可。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>&lt;position&gt;</code> を {{cssxref("background-position")}} の値として無名で定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<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>