CSS Positioned Layout のプロパティの文書を更新

- 2021/11/06 時点の英語版に同期

1 files changed, 131 insertions, 98 deletions

diff --git a/files/ja/web/css/right/index.md b/files/ja/web/css/right/index.md
index 91156b300d..c71b524781 100644
--- a/files/ja/web/css/right/index.md
+++ b/files/ja/web/css/right/index.md
@@ -3,38 +3,29 @@ title: right
 slug: Web/CSS/right
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 位置指定レイアウト
-  - Reference
+  - CSS プロパティ
+  - レイアウト
+  - リファレンス
   - ウェブ
+  - recipe:css-property
+browser-compat: css.properties.right
 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>
+{{CSSRef}}
 
-<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>
+**`right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の水平位置の決定に関与します。位置指定されていない要素には効果はありません。
 
-<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>
+{{EmbedInteractiveExample("pages/css/right.html")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 right: 3px;
 right: 2.4em;
 
-/* 内包ブロックの幅に対する &lt;percentage&gt; */
+/* 包含ブロックの幅に対する <percentage> */
 right: 10%;
 
 /* キーワード値 */
@@ -43,39 +34,65 @@ right: auto;
 /* グローバル値 */
 right: inherit;
 right: initial;
+right: revert;
 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>
+```
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+
+  - : 負、null、または正の {{cssxref("&lt;length&gt;")}} で、以下のものを表します。
+
+    - *絶対位置指定要素*の場合は、包含ブロックの右辺までの距離。
+    - *相対位置指定要素*の場合は、通常の位置からの左方向への移動量。
+
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 包含ブロックの幅に対する {{cssxref("&lt;percentage&gt;")}} です。
+- `auto`
+
+  - : 以下のように指定します。
+
+    - *絶対位置指定要素*では、要素の位置は {{Cssxref("left")}} プロパティに基づいて決まり、 `width: auto` は内容物の幅に基づいて決まります。また、 `left` も `auto` であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
+    - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("left")}} に基づきます。また、 `left` も `auto` であった場合は、水平方向には移動しません。
+
+- `inherit`
+  - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, または `auto` キーワードと同様に扱われます。
+
+## 解説
+
+`right` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。
+
+- `position` が `absolute` または `fixed` に設定されている場合、 `right` プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。
+- `position` が `relative` に設定されている場合、 `right` プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
+- `position` が `sticky` に設定されている場合、 `right` プロパティは要素がビューポート内にある場合は `position` が `relative` であるかのように、外の場合は `position` が `fixed` の場合と同様に動作します。
+- `position` が `static` に設定されている場合、 `right` プロパティは*効果がありません*。
+
+{{cssxref("left")}} と `right` の両方が定義された場合、他のプロパティで制約されていなければ、要素は両方を満たすように引き伸ばされます。もし要素が両方を満たすように伸びることができない場合 -- 例えば `width` が宣言されている場合 -- 要素の位置は*過剰制約*になります。このような場合、コンテナーが左書きの場合は `left` の値が優先され、コンテナーが右書きの場合は `right` の値が優先されます。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式定義
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+<h3 id="Absolute_and_relative_positioning_using_right">絶対位置指定および相対位置指定で right を使用</h3>
+
+#### HTML
 
-<pre class="brush: css; highlight:[16]">#example_3 {
+```html
+<div id="relative">Relatively positioned</div>
+<div id="absolute">Absolutely positioned</div>
+```
+
+#### CSS
+
+```css
+#relative {
   width: 100px;
   height: 100px;
   background-color: #FFC7E4;
@@ -84,58 +101,74 @@ right: unset;
   left: 20px;
 }
 
-#example_4 {
+#absolute {
   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>
+}
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Absolute_and_relative_positioning_using_right', 500, 220) }}
+
+<h3 id="Declaring_both_left_and_right">left と right の同時指定</h3>
+
+`left` と `right` の両方が宣言されている場合、他の制約条件がそれを妨げない限り、要素は両方を満たすように伸びます。要素が両方を満たすように伸びたり縮んだりしない場合、要素の位置が*過剰指定*のとなり、コンテナーの書字方向に基づいて優先順位が決まります。コンテナーの書字方向が左書きであれば、`left` が優先されます。コンテナーの書字方向が右書きの場合は、`right` が優先されます。
+
+#### HTML
+
+```html
+<div id="parent">Parent
+    <div id="noWidth">No width</div>
+    <div id="width">width: 100px</div>
+</div>
+```
+
+#### CSS
+
+```css
+div {
+  outline: 1px solid #CCCCCC;
+}
+#parent {
+  width: 200px;
+  height: 200px;
+  background-color: #FFC7E4;
+  position: relative;
+}
+/* declare both a left and a right */
+#width,
+#noWidth {
+  background-color: #C2FFD7;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+/* declare a width */
+#width {
+  width: 100px;
+  top: 60px;
+}
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Declaring_both_left_and_right', 500, 220) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定
+- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}
+- {{cssxref("position")}}