CSS Box Alignments 関係の文書を更新

- 2021/10/17 時点の英語版に同期
- 一部および画像は新規翻訳

1 files changed, 159 insertions, 119 deletions

diff --git a/files/ja/web/css/justify-self/index.md b/files/ja/web/css/justify-self/index.md
index 5f90a9d470..4011804c02 100644
--- a/files/ja/web/css/justify-self/index.md
+++ b/files/ja/web/css/justify-self/index.md
@@ -3,32 +3,31 @@ title: justify-self
 slug: Web/CSS/justify-self
 tags:
   - CSS
-  - CSS プロパティ
   - CSS ボックス配置
+  - CSS プロパティ
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.justify-self
 translation_of: Web/CSS/justify-self
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-self</code></strong> プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。</p>
+[CSS](/ja/docs/Web/CSS) の **`justify-self`** プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>
+{{EmbedInteractiveExample("pages/css/justify-self.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+このプロパティの効果は、現在のレイアウトモードに依存します。
 
-<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p>
+- ブロックレベルレイアウトでは、包含ブロック内のアイテムをインライン軸で配置します。
+- 絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、包含ブロック内のアイテムをインライン軸で配置します。
+- 表のセルレイアウトでは、このプロパティは*無視されます* (絶対位置指定および表レイアウトのブロック内の配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables))
+- フレックスボックスレイアウトでは、このプロパティは*無視されます* (フレックスボックス内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox))
+- グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については[こちら](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout))
 
-<ul>
- <li>ブロックレベルレイアウトでは、内包ブロック内のアイテムをインライン軸で配置します。</li>
- <li>絶対位置指定の要素では、 top, left, bottom, right の各オフセット値を反映して、内包ブロック内のアイテムをインライン軸で配置します。</li>
- <li>表のセルレイアウトでは、このプロパティは<em>無視されます</em> (絶対配置及び表レイアウトのブロック内の配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">こちら</a>)</li>
- <li>フレックスボックスレイアウトでは、このプロパティは<em>無視されます</em> (フレックスボックス内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">こちら</a>)</li>
- <li>グリッドレイアウトでは、グリッド領域内のアイテムをインライン軸に配置します (グリッドレイアウト内での配置については<a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">こちら</a>)</li>
-</ul>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* 基本キーワード */
+```css
+/* 基本キーワード */
 justify-self: auto;
 justify-self: normal;
 justify-self: stretch;
@@ -56,107 +55,148 @@ justify-self: unsafe center;
 /* グローバル値 */
 justify-self: inherit;
 justify-self: initial;
+justify-self: revert;
 justify-self: unset;
-</pre>
-
-<p>このプロパティは３つの異なる形式のうち１つを取ることができます。</p>
-
-<ul>
- <li>基本キーワード: キーワード値 <code>normal</code>, <code>auto</code>, <code>stretch</code> のうちの一つ。</li>
- <li>ベースラインによる配置: <code>baseline</code> キーワードに加えて、任意で <code>first</code> 又は <code>last</code> のどちらか。</li>
- <li>位置による配置:
-  <ul>
-   <li><code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, <code>right</code> のうちの一つ。</li>
-   <li>加えて任意で <code>safe</code> 又は <code>unsafe</code>。</li>
-  </ul>
- </li>
-</ul>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>使用される値は、ボックスに親があれば、親ボックスの <code>justify-items</code> プロパティ、そうでなければ絶対位置であり、このような場合、 <code>auto</code> は <code>normal</code> を表します。</dd>
- <dt><code>normal</code></dt>
- <dd>このキーワードの効果は、レイアウトモードに依存します。
- <ul>
-  <li>ブロックレベルレイアウトでは、このキーワードは <code>start</code> の別名です。</li>
-  <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように振舞い、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように振舞います。</li>
-  <li>表のセルレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li>
-  <li>フレックスボックスレイアウトでは、このキーワードは意味を持たず、<em>無視</em>されます。</li>
-  <li>グリッドレイアウトでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように振舞います。</li>
- </ul>
- </dd>
- <dt><code>start</code></dt>
- <dd>アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。</dd>
- <dt><code>end</code></dt>
- <dd>アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。</dd>
- <dt><code>flex-start</code></dt>
- <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>start</code> のように扱われます。</dd>
- <dt><code>flex-end</code></dt>
- <dd>フレックスコンテナーの子ではないアイテムにおいては、この値は <code>end</code> のように扱われます。</dd>
- <dt><code>self-start</code></dt>
- <dd>アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd>
- <dt><code>self-end</code></dt>
- <dd>アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。</dd>
- <dt><code>center</code></dt>
- <dd>アイテムは配置コンテナーの中央で、互いに接するように詰められます。</dd>
- <dt><code>left</code></dt>
- <dd>アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は <code>start</code> のように動作します。</dd>
- <dt><code>right</code></dt>
- <dd>アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は <code>start</code> のように動作します。</dd>
- <dt><code>baseline<br>
- first baseline</code><br>
- <code>last baseline</code></dt>
- <dd>first- 又は last-baseline 配置への参加を指定します。ボックスの最初又は最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br>
- <code>first baseline</code> の代替配置は <code>start</code>、 <code>last baseline</code> の代替配置は <code>end</code> です。</dd>
- <dt><code>stretch</code></dt>
- <dd>アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が <code>auto</code> であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。</dd>
- <dt><code>safe</code></dt>
- <dd>アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが <code>start</code> であったかのように配置されます。</dd>
- <dt><code>unsafe</code></dt>
- <dd>アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{CSSSyntax}}
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>状態</th>
-   <th>備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{CSSInfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
-
-<p>{{Compat("css.properties.justify-self.flex_context")}}</p>
-
-<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
-
-<p>{{Compat("css.properties.justify-self.grid_context")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">CSS ボックス配置</a></li>
- <li>{{CSSxRef("justify-items")}} プロパティ</li>
-</ul>
+```
+
+このプロパティは 3 つの異なる形式のうち 1 つを取ることができます。
+
+- 基本キーワード: キーワード値 `normal`, `auto`, `stretch` のうちの一つ。
+- ベースラインによる配置: `baseline` キーワードに加えて、任意で `first` または `last` のどちらか。
+- 位置による配置:
+
+  - `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, `right` のうちの一つ。
+  - 加えて任意で `safe` または `unsafe`。
+
+### 値
+
+- `auto`
+  - : 使用される値は、ボックスに親があれば、親ボックスの `justify-items` プロパティ、そうでなければ絶対位置であり、このような場合、 `auto` は `normal` を表します。
+- `normal`
+
+  - : このキーワードの効果は、レイアウトモードに依存します。
+    - ブロックレベルレイアウトでは、このキーワードは `start` の別名です。
+    - 絶対位置のレイアウトでは、このキーワードは*置換*の絶対位置ボックスには `start` のように振舞い、*その他*の絶対位置ボックスには `stretch` のように振舞います。
+    - 表のセルレイアウトでは、このキーワードは意味を持たず、*無視*されます。
+    - フレックスボックスレイアウトでは、このキーワードは意味を持たず、*無視*されます。
+    - グリッドレイアウトでは、このキーワードは `stretch` のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは `start` のように振舞います。
+
+- `start`
+  - : アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。
+- `end`
+  - : アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。
+- `flex-start`
+  - : フレックスコンテナーの子ではないアイテムにおいては、この値は `start` のように扱われます。
+- `flex-end`
+  - : フレックスコンテナーの子ではないアイテムにおいては、この値は `end` のように扱われます。
+- `self-start`
+  - : アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+- `self-end`
+  - : アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
+- `center`
+  - : アイテムは配置コンテナーの中央で、互いに接するように詰められます。
+- `left`
+  - : アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は `start` のように動作します。
+- `right`
+  - : アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は `start` のように動作します。
+- `baseline`, `first baseline`, `last baseline`
+  - : first- または last-baseline 配置への参加を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+    `first baseline` の代替配置は `start`、 `last baseline` の代替配置は `end` です。
+- `stretch`
+  - : アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が `auto` であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。
+- `safe`
+  - : アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが `start` であったかのように配置されます。
+- `unsafe`
+  - : アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 関連情報
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Simple_demonstration">簡単なデモ</h3>
+
+以下の例では簡単な 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーには `justify-items` の値を `stretch` に — 既定値に — 設定し、グリッドアイテムがセルの幅全体に広がるようにしています。
+
+2 番目、3 番目、4 番目のグリッドアイテムは、別々な `justify-self` の値を指定し、これらが `justify-items` の値をオーバーライドする様子を表示します。これらの値はグリッドアイテムを内容物の幅に設定し、セルごとに異なる位置に配置しています。
+
+#### HTML
+
+```html
+<article class="container">
+  <span>First child</span>
+  <span>Second child</span>
+  <span>Third child</span>
+  <span>Fourth child</span>
+</article>
+```
+
+#### CSS
+
+```css
+html {
+  font-family: helvetica, arial, sans-serif;
+  letter-spacing: 1px;
+}
+
+article {
+  background-color: red;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 40px;
+  grid-gap: 10px;
+  width: 300px;
+  justify-items: stretch;
+}
+
+span:nth-child(2) {
+  justify-self: start;
+}
+
+span:nth-child(3) {
+justify-self: center;
+}
+
+span:nth-child(4) {
+justify-self: end;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+  text-align: center;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article {
+  margin: 20px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}
+
+## 仕様書
+
+{{Specifications("css.properties.justify-self.grid_context")}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- CSS グリッドガイド: _[CSS グリッドレイアウトのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
+- {{CSSxRef("justify-items")}} プロパティ