files/ja/web/css/right/index.md


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
137
138
139
140
141

---
title: right
slug: Web/CSS/right
tags:
  - CSS
  - CSS プロパティ
  - CSS 位置指定レイアウト
  - Reference
  - ウェブ
translation_of: Web/CSS/right
---
<div>{{CSSRef}}</div>

<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>right</code></strong> プロパティは、<ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby>の水平位置の決定に関与します。位置指定されていない要素には効果はありません。</p>

<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>

<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<p><code>right</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p>

<ul>
 <li><code>position</code> が <code>absolute</code> 又は <code>fixed</code> に設定されている場合、 <code>right</code> プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。</li>
 <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>right</code> プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。</li>
 <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>right</code> プロパティは要素がビューポート内にある場合は <code>position</code> が <code>relative</code> であるかのように、外の場合は <code>position</code> が <code>fixed</code> の場合と同様に動作します。</li>
 <li><code>position</code> が <code>static</code> に設定されている場合、 <code>right</code> プロパティは<em>効果がありません</em>。</li>
</ul>

<p>{{cssxref("left")}} と <code>right</code> の両方が定義された場合、要素の位置は<em>過剰指定</em>になります。内包ブロックが左書きの場合 (つまり、 <code>right</code> の計算値が <code>-left</code> に設定されていた場合)、 <code>left</code> の値が優先されます。内包ブロックが右書きの場合 (つまり、 <code>left</code> の計算値が <code>-right</code> に設定されていた場合)、 <code>right</code> の値が優先されます。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
right: 3px;
right: 2.4em;

/* 内包ブロックの幅に対する &lt;percentage&gt; */
right: 10%;

/* キーワード値 */
right: auto;

/* グローバル値 */
right: inherit;
right: initial;
right: unset;
</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>負、null、または正の {{cssxref("&lt;length&gt;")}} で、以下のものを表します。
 <ul>
  <li><em>絶対位置指定要素</em>の場合は、包含ブロックの右辺までの距離。</li>
  <li><em>相対位置指定要素</em>の場合は、通常の位置からの左方向への移動量。</li>
 </ul>
 </dd>
 <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
 <dd>包含ブロックの幅に対する {{cssxref("&lt;percentage&gt;")}} です。</dd>
 <dt><code>auto</code></dt>
 <dd>以下のように指定します。
 <ul>
  <li><em>絶対位置指定要素</em>では、要素の位置は {{Cssxref("left")}} プロパティに基づいて決まり、 <code>width: auto</code> は内容物の幅に基づいて決まります。また、 <code>left</code> も <code>auto</code> であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。</li>
  <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("left")}} に基づきます。また、 <code>left</code> も <code>auto</code> であった場合は、水平方向には移動しません。</li>
 </ul>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又は <code>auto</code> キーワードと同様に扱われます。</dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: css; highlight:[16]">#example_3 {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example_4 {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}</pre>

<pre class="brush: html">&lt;div id="example_3"&gt;Example 3&lt;/div&gt;
&lt;div id="example_4"&gt;Example 4&lt;/div&gt;
</pre>

<p>{{ EmbedLiveSample('Examples', 500, 220) }}</p>

<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 Transitions', '#animatable-css', 'right')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>right</code> をアニメーション可能として定義</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td>sticky の位置の動作を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p>{{Compat("css.properties.right")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref("position")}}, {{cssxref("left")}}, {{cssxref("top")}}, {{cssxref("bottom")}}</li>
</ul>