path: root/files/ja/web/css/position_value/index.html

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