CSS Box Alignments 関係の文書を更新

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

1 files changed, 258 insertions, 176 deletions

diff --git a/files/ja/web/css/place-items/index.md b/files/ja/web/css/place-items/index.md
index 6c79e3e785..0f7f4f0b33 100644
--- a/files/ja/web/css/place-items/index.md
+++ b/files/ja/web/css/place-items/index.md
@@ -3,24 +3,31 @@ title: place-items
 slug: Web/CSS/place-items
 tags:
   - CSS
+  - CSS フレックスボックス
   - CSS グリッドレイアウト
-  - CSS フレックスボックスレイアウト
   - CSS プロパティ
-  - CSS ボックス配置
-  - Reference
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.place-items
 translation_of: Web/CSS/place-items
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>place-items</code></strong> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティは、 {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティをそれぞれ設定します。二番目の値が設定されていない場合、最初の値がそちらにも使用されます。</p>
+[CSS](/ja/docs/Web/CSS) の **`place-items`** は[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわち {{CSSxRef("align-items")}} および {{CSSxRef("justify-items")}} プロパティ) を、[グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)や[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)などのレイアウトシステムにおいて、一度に指定することができます。2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。
 
-<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div>
+{{EmbedInteractiveExample("pages/css/place-items.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構成要素のプロパティ
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<pre class="brush:css">/* キーワード値 */
+- [`align-items`](/ja/docs/Web/CSS/align-items)
+- [`justify-items`](/ja/docs/Web/CSS/justify-items)
+
+## 構文
+
+```css
+/* キーワード値 */
 place-items: auto center;
 place-items: normal start;
 
@@ -44,92 +51,190 @@ place-items: stretch auto;
 /* グローバル値 */
 place-items: inherit;
 place-items: initial;
+place-items: revert;
 place-items: unset;
-</pre>
-
-<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>アイテムは、配置コンテナーの主軸または交差軸の先頭側の端に向けて、互いに寄せて配置されます。<br>
- これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <code>start</code> のように扱われます。</dd>
- <dt><code>flex-end</code></dt>
- <dd>アイテムは、配置コンテナーの主軸または交差軸の末尾側の端に向けて、互いに寄せて配置されます。<br>
- これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は <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-baseline 配置または 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>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{CSSSyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css; highlight[4]">#container {
+```
+
+### 値
+
+- `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-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
+ `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。
+- `stretch`
+  - : 各アイテムの寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が `auto` のアイテムは、 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、寸法の合計が配置コンテナーを満たすようになります。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 関連情報
+
+{{csssyntax}}
+
+## 例
+
+<h3 id="Placing_items_in_a_flex_container">フレックスコンテナー内でのアイテムの配置</h3>
+
+フレックスボックスでは、主軸のアイテムがグループとして扱われるため、{{cssxref("justify-self")}} や {{cssxref("justify-items")}} したがって、2 番目の値は無視されます。
+
+```css hidden
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+  font-size: 2em;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+```
+
+```html hidden
+<div id="container">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+</div>
+
+<div class="row">
+  <label for="values">place-items: </label>
+  <select id="values">
+    <option value="stretch">stretch</option>
+    <option value="start">start</option>
+    <option value="center">center</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+    <option value="auto center">auto center</option>
+    <option value="normal start">normal start</option>
+    <option value="center normal">center normal</option>
+    <option value="start auto">start auto</option>
+    <option value="end normal">end normal</option>
+    <option value="self-start auto">self-start auto</option>
+    <option value="self-end normal">self-end normal</option>
+    <option value="flex-start auto">flex-start auto</option>
+    <option value="flex-end normal">flex-end normal</option>
+    <option value="left auto">left auto</option>
+    <option value="right normal">right normal</option>
+    <option value="baseline normal">baseline normal</option>
+    <option value="first baseline auto">first baseline auto</option>
+    <option value="last baseline normal">last baseline normal</option>
+    <option value="stretch auto">stretch auto</option>
+  </select>
+</div>
+```
+
+```js hidden
+let values = document.getElementById('values');
+let container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.placeItems = evt.target.value;
+});
+```
+
+#### CSS
+
+```css
+#container {
   height:200px;
   width: 240px;
-  place-items: center; /* You can change this value by selecting another option in the list */
+  place-items: stretch; /* You can change this value by selecting another option in the list */
   background-color: #8c8c8c;
-}
-
-.flex {
   display: flex;
-  flex-wrap: wrap;
 }
 
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 50px);
-}
-</pre>
+```
+
+#### 結果
+
+{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}}
+
 
-<div class="hidden">
-<pre class="brush: css;">div &gt; div {
+<h3 id="Placing_items_in_a_grid_container">グリッドコンテナーでのアイテムの配置</h3>
+
+以下のグリッドコンテナーのアイテムは、配置されるグリッド領域よりも小さいため、`place-items` はブロック方向とインライン方向にアイテムを移動します。
+
+```css hidden
+div > div {
   box-sizing: border-box;
   border: 2px solid #8c8c8c;
-  width: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 #item1 {
   background-color: #8cffa0;
   min-height: 30px;
+  font-size: 2em;
 }
 
 #item2 {
@@ -155,7 +260,6 @@ place-items: unset;
 #item6 {
   background-color: #8cffff;
   min-height: 50px;
-  font-size: 30px;
 }
 
 select {
@@ -164,114 +268,92 @@ select {
 
 .row {
   margin-top: 10px;
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container" class="flex"&gt;
-  &lt;div id="item1"&gt;1&lt;/div&gt;
-  &lt;div id="item2"&gt;2&lt;/div&gt;
-  &lt;div id="item3"&gt;3&lt;/div&gt;
-  &lt;div id="item4"&gt;4&lt;/div&gt;
-  &lt;div id="item5"&gt;5&lt;/div&gt;
-  &lt;div id="item6"&gt;6&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="display"&gt;display: &lt;/label&gt;
-  &lt;select id="display"&gt;
-    &lt;option value="flex"&gt;flex&lt;/option&gt;
-    &lt;option value="grid"&gt;grid&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-
-&lt;div class="row"&gt;
-  &lt;label for="values"&gt;place-items: &lt;/label&gt;
-  &lt;select id="values"&gt;
-    &lt;option value="start"&gt;start&lt;/option&gt;
-    &lt;option value="center"&gt;center&lt;/option&gt;
-    &lt;option value="end"&gt;end&lt;/option&gt;
-    &lt;option value="left"&gt;left&lt;/option&gt;
-    &lt;option value="right"&gt;right&lt;/option&gt;
-    &lt;option value="auto center"&gt;auto center&lt;/option&gt;
-    &lt;option value="normal start"&gt;normal start&lt;/option&gt;
-    &lt;option value="center normal"&gt;center normal&lt;/option&gt;
-    &lt;option value="start auto"&gt;start auto&lt;/option&gt;
-    &lt;option value="end normal"&gt;end normal&lt;/option&gt;
-    &lt;option value="self-start auto"&gt;self-start auto&lt;/option&gt;
-    &lt;option value="self-end normal"&gt;self-end normal&lt;/option&gt;
-    &lt;option value="flex-start auto"&gt;flex-start auto&lt;/option&gt;
-    &lt;option value="flex-end normal"&gt;flex-end normal&lt;/option&gt;
-    &lt;option value="left auto"&gt;left auto&lt;/option&gt;
-    &lt;option value="right normal"&gt;right normal&lt;/option&gt;
-    &lt;option value="baseline normal"&gt;baseline normal&lt;/option&gt;
-    &lt;option value="first baseline auto"&gt;first baseline auto&lt;/option&gt;
-    &lt;option value="last baseline normal"&gt;last baseline normal&lt;/option&gt;
-    &lt;option value="stretch auto"&gt;stretch auto&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var values = document.getElementById('values');
-var display = document.getElementById('display');
-var container = document.getElementById('container');
+}
+```
+
+```html hidden
+<div id="gridcontainer">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+</div>
+
+<div class="row">
+  <label for="gridvalues">place-items: </label>
+  <select id="gridvalues">
+    <option value="stretch">stretch</option>
+    <option value="start">start</option>
+    <option value="center">center</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+    <option value="auto center">auto center</option>
+    <option value="normal start">normal start</option>
+    <option value="center normal">center normal</option>
+    <option value="start auto">start auto</option>
+    <option value="end normal">end normal</option>
+    <option value="self-start auto">self-start auto</option>
+    <option value="self-end normal">self-end normal</option>
+    <option value="flex-start auto">flex-start auto</option>
+    <option value="flex-end normal">flex-end normal</option>
+    <option value="left auto">left auto</option>
+    <option value="right normal">right normal</option>
+    <option value="baseline normal">baseline normal</option>
+    <option value="first baseline auto">first baseline auto</option>
+    <option value="last baseline normal">last baseline normal</option>
+    <option value="stretch auto">stretch auto</option>
+  </select>
+</div>
+```
+
+```js hidden
+let values = document.getElementById('gridvalues');
+let container = document.getElementById('gridcontainer');
 
 values.addEventListener('change', function (evt) {
   container.style.placeItems = evt.target.value;
 });
+```
 
-display.addEventListener('change', function (evt) {
-  container.className = evt.target.value;
-});
-</pre>
-</div>
-
-<h3 id="Result">Result</h3>
+#### CSS
 
-<p>{{EmbedLiveSample("Examples", 260, 290)}}</p>
+```css
+#gridcontainer {
+  height:200px;
+  width: 240px;
+  place-items: stretch; /* You can change this value by selecting another option in the list */
+  background-color: #8c8c8c;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+#gridcontainer > div {
+  width: 50px;
+}
 
-<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 Box Alignment", "#place-items-property", "place-items")}}</td>
-   <td>{{Spec2("CSS3 Box Alignment")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<p>{{CSSInfo}}</p>
+#### 結果
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+{{EmbedLiveSample("Placing_items_in_a_grid_container", 260, 290)}}
 
-<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+## 仕様書
 
-<p>{{Compat("css.properties.place-items.flex_context")}}</p>
+{{Specifications}}
 
-<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.place-items.grid_context")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
- <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内でのアイテムの配置</a></em></li>
- <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("align-items")}} プロパティ</li>
- <li>{{CSSxRef("align-self")}} プロパティ</li>
- <li>{{CSSxRef("justify-items")}} プロパティ</li>
- <li>{{CSSxRef("justify-self")}} プロパティ</li>
-</ul>
+- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS フレックスボックスガイド: _[フレックスコンテナー内でのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- CSS グリッドガイド: _[CSS グリッドレイアウト内でのボックス配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- [CSS ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment)
+- {{CSSxRef("align-items")}} プロパティ
+- {{CSSxRef("align-self")}} プロパティ
+- {{CSSxRef("justify-items")}} プロパティ
+- {{CSSxRef("justify-self")}} プロパティ