files/ja/web/css/position_value/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

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

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