final dump 2020-12-14

6 files changed, 129 insertions, 65 deletions

diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html
index f52d2475d1..7415097af4 100644
--- a/files/ja/web/css/_colon_-moz-drag-over/index.html
+++ b/files/ja/web/css/_colon_-moz-drag-over/index.html
@@ -3,10 +3,14 @@ title: ':-moz-drag-over'
 slug: 'Web/CSS/:-moz-drag-over'
 tags:
   - CSS
-  - Mozilla 拡張
+  - 'CSS:Mozilla Extensions'
+  - Firefox
+  - Mozilla
+  - NeedsCompatTable
   - Non-standard
+  - Pseudo-class
   - Reference
-  - 疑似クラス
+  - Selector
 translation_of: 'Web/CSS/:-moz-drag-over'
 ---
 <div>{{CSSRef}}{{Non-standard_header}}</div>
@@ -15,14 +19,14 @@ translation_of: 'Web/CSS/:-moz-drag-over'
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
-<pre class="syntaxbox">:-moz-drag-over
+<pre class="syntaxbox notranslate">:-moz-drag-over
 </pre>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples" name="Examples">例</h2>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush:html">&lt;table border="1"&gt;
+<pre class="brush:html notranslate">&lt;table border="1"&gt;
   &lt;tr&gt;
     &lt;td width="100px" height="100px"&gt;Drag Over&lt;/td&gt;
   &lt;/tr&gt;
@@ -31,7 +35,7 @@ translation_of: 'Web/CSS/:-moz-drag-over'
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush:css">td:-moz-drag-over {
+<pre class="brush:css notranslate">td:-moz-drag-over {
   color: red;
 }
 </pre>
@@ -39,3 +43,20 @@ translation_of: 'Web/CSS/:-moz-drag-over'
 <h3 id="Result" name="Result">結果</h3>
 
 <p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>いずれの標準にも含まれていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.selectors:-moz-drag-over")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla の CSS 拡張</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ＆ドロップ</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html
index c5816dd2ca..1bc44e63ed 100644
--- a/files/ja/web/css/_colon_focus-within/index.html
+++ b/files/ja/web/css/_colon_focus-within/index.html
@@ -2,21 +2,21 @@
 title: ':focus-within'
 slug: 'Web/CSS/:focus-within'
 tags:
+  - ':focus'
+  - ':focus-within'
   - CSS
   - Layout
+  - Pseudo-class
   - Reference
+  - Selector
   - Web
-  - ウェブ
-  - セレクター
-  - レイアウト
-  - 疑似クラス
 translation_of: 'Web/CSS/:focus-within'
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 疑似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p>
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">擬似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p>
 
-<pre class="brush: css no-line-numbers">/* 子孫要素の一つにフォーカスがある &lt;div&gt; を選択 */
+<pre class="brush: css no-line-numbers notranslate">/* 子孫要素の一つにフォーカスがある &lt;div&gt; を選択 */
 div:focus-within {
   background: cyan;
 }</pre>
@@ -25,15 +25,15 @@ div:focus-within {
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
-<pre class="syntaxbox">{{CSSSyntax}}</pre>
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples" name="Examples">例</h2>
 
 <p>この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。</p>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html">&lt;p&gt;このフォームに入力してみてください。&lt;/p&gt;
+<pre class="brush: html notranslate">&lt;p&gt;このフォームに入力してみてください。&lt;/p&gt;
 
 &lt;form&gt;
   &lt;label for="given_name"&gt;名前:&lt;/label&gt;
@@ -45,7 +45,7 @@ div:focus-within {
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css highlight[7]">form {
+<pre class="brush: css highlight[7] notranslate">form {
   border: 1px solid;
   color: gray;
   padding: 4px;
@@ -63,7 +63,7 @@ input {
 
 <h3 id="Result" name="Result">結果</h3>
 
-<p>{{EmbedLiveSample("Example", 500, 150)}}</p>
+<p>{{EmbedLiveSample("Examples", 500, 150)}}</p>
 
 <h2 id="Specifications" name="Specifications">仕様書</h2>
 
@@ -84,7 +84,7 @@ input {
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
 <div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
 
@@ -95,4 +95,5 @@ input {
 <ul>
  <li>{{CSSxRef(":focus")}}</li>
  <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li>
 </ul>
diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html
index 85c6321ad1..ea0bb496a5 100644
--- a/files/ja/web/css/_colon_lang/index.html
+++ b/files/ja/web/css/_colon_lang/index.html
@@ -3,60 +3,60 @@ title: ':lang'
 slug: 'Web/CSS/:lang'
 tags:
   - CSS
-  - ウェブ
-  - セレクター
-  - リファレンス
-  - レイアウト
-  - 疑似クラス
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
 translation_of: 'Web/CSS/:lang'
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:lang()</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a> は、要素を定義された言語に基づいて選択します。</p>
+<p><strong><code>:lang()</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、指定された言語に基づいて要素に一致させます。</p>
 
-<pre class="brush: css no-line-numbers">/* 英語 (en) の &lt;p&gt; をすべて選択 */
+<pre class="brush: css no-line-numbers notranslate">/* &lt;p&gt; のうち English (en) のものをすべて選択 */
 p:lang(en) {
   quotes: '\201C' '\201D' '\2018' '\2019';
 }</pre>
 
 <div class="note">
-<p><strong>メモ:</strong> HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報（HTTP ヘッダーなど）の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。</p>
+<p><strong>メモ:</strong> HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。</p>
 </div>
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
 <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
 
-<pre class="syntaxbox">{{csssyntax}}</pre>
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
 
 <h3 id="Parameter" name="Parameter">引数</h3>
 
 <dl>
  <dt><code>&lt;language-code&gt;</code></dt>
- <dd>対象としたい言語を表す {{cssxref("&lt;string&gt;")}} です。利用可能な値は <a href="/ja/docs/Web/HTML">HTML</a> の仕様書で定義されています。</dd>
+ <dd>{{cssxref("&lt;string&gt;")}} で、ターゲットにしたい言語を表します。受付可能な値は <a href="/ja/docs/Web/HTML">HTML</a> 仕様書で定義されています。</dd>
 </dl>
 
 <h2 id="Example" name="Example">例</h2>
 
-<p>この例では、 <a href="/en-US/docs/Web/CSS/Child_selectors">子結合子</a> を使用して引用要素 ({{htmlElement("q")}}) の親を選択するために <code>:lang()</code> 疑似クラスを使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。</p>
+<p>この例では、 <code>:lang()</code> 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために <a href="/ja/docs/Web/CSS/Child_selectors">子結合子</a> を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。</p>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+<pre class="brush: html notranslate">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
 &lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
 &lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
 </pre>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+<pre class="brush: css notranslate">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
 :lang(fr) &gt; q { quotes: '« ' ' »'; }
 :lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
 </pre>
 
 <h3 id="Result" name="Result">結果</h3>
 
-<p>{{EmbedLiveSample('Example', 350)}}</p>
+<p>{{EmbedLiveSample('Examples', 350)}}</p>
 
 <h2 id="Specifications" name="Specifications">仕様書</h2>
 
@@ -64,8 +64,8 @@ p:lang(en) {
  <thead>
   <tr>
    <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
   </tr>
  </thead>
  <tbody>
@@ -87,10 +87,10 @@ p:lang(en) {
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
 
 <div>
-<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
 
 <p>{{Compat("css.selectors.lang")}}</p>
 </div>
@@ -98,7 +98,8 @@ p:lang(en) {
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li>言語に関する疑似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
- <li>HTML の {{htmlattrxref("lang")}} attribute</li>
- <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - 言語を識別するタグ</a></li>
+ <li>原語に関する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>HTML の {{htmlattrxref("lang")}} 属性</li>
+ <li>HTML の {{htmlattrxref("translate")}} 属性</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages</a></li>
 </ul>
diff --git a/files/ja/web/css/contain-intrinsic-size/index.html b/files/ja/web/css/contain-intrinsic-size/index.html
new file mode 100644
index 0000000000..a62a3a121a
--- /dev/null
+++ b/files/ja/web/css/contain-intrinsic-size/index.html
@@ -0,0 +1,49 @@
+---
+title: contain-intrinsic-size
+slug: Web/CSS/contain-intrinsic-size
+translation_of: Web/CSS/contain-intrinsic-size
+---
+<p>{{CSSRef}}</p>
+
+<p><code>contains-intrinsic-size</code> CSSプロパティは、<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/content-visibility"><code>content-visibility</code></a>で指定された要素の自然なサイズを制御します。</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; values */
+contain-intrinsic-size: 1000px;
+contain-intrinsic-size: 10rem;
+
+/* &lt;percentage&gt; value */
+contain-intrinsic-size: 10%;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Sizing', '#propdef-contain-intrinsic-size')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.contain-intrinsic-size")}}</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://web.dev/content-visibility/">content-visibility: the new CSS property that boosts your rendering performance</a> (web.dev)</li>
+</ul>
diff --git a/files/ja/web/css/content-visibility/index.html b/files/ja/web/css/content-visibility/index.html
index d480c67fed..ac51db4435 100644
--- a/files/ja/web/css/content-visibility/index.html
+++ b/files/ja/web/css/content-visibility/index.html
@@ -5,12 +5,10 @@ translation_of: Web/CSS/content-visibility
 ---
 <p>{{CSSRef}}</p>
 
-<p><span style="">content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p>
+<p><span>content-visibility CSSプロパティは、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な包含セットを強制することで、ユーザーエージェントが必要になるまで大量のレイアウトとレンダリング作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。</span></p>
 
 <p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>文法</strong></span></font></p>
 
-
-
 <pre class="brush: css no-line-numbers notranslate">/* Keyword values */
 content-visibility: visible;
 content-visibility: hidden;
@@ -21,22 +19,16 @@ content-visibility: initial;
 content-visibility: unset;
 </pre>
 
-
-
 <h3 id="値">値</h3>
 
 <dl>
  <dt><code>visible</code></dt>
  <dd>
  <p dir="ltr" id="tw-target-text">無効。要素のコンテンツは通常どおりにレイアウトおよびレンダリングされます。</p>
-
-
  </dd>
  <dt><code>hidden</code></dt>
  <dd>
  <p dir="ltr" id="tw-target-text">要素はその内容をスキップします。スキップされたコンテンツは、ページ内検索、タブオーダーナビゲーションなどのユーザーエージェント機能にアクセスできたり、選択またはフォーカス可能であってはなりません。これは、<code>display: none</code>をコンテンツに与えるのと似ています。</p>
-
-
  </dd>
  <dt><code>auto</code></dt>
  <dd>
diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
index 2ca01d4bc6..764104469a 100644
--- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
+++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -62,7 +62,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <pre class="brush: css notranslate">.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p>
 </div>
 
-<p><code>align-self: start</code> を設定すると、それぞれの子 <code>&lt;div&gt;</code> の高さは <code>&lt;div&gt; </code>の中身によって決定されることを覚えておいてください。対照的に、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-items</a></code> を完全に省略すると、それぞれの子 <code>&lt;div&gt;</code> の高さはグリッドエリアを満たすように広がります。</p>
+<p><code>align-self: start</code> を設定すると、それぞれの子 <code>&lt;div&gt;</code> の高さはコンテンツの <code>&lt;div&gt;</code>  によって決定されることを覚えておいてください。また、<code><a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-self">align-self</a></code> を完全に省略すると、それぞれの子 <code>&lt;div&gt;</code> の高さはグリッドエリアを満たすように広がります。</p>
 
 <p>{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で <code>align-self</code> を使えばプロパティを個別に設定できるということです。</p>
 
@@ -125,7 +125,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <pre class="brush: css notranslate">.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -161,11 +161,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p>
 </div>
 
-<h3 id="固有のアスペクト比を持つアイテム">固有のアスペクト比を持つアイテム</h3>
+<h3 id="アイテムと固有のアスペクト比">アイテムと固有のアスペクト比</h3>
 
 <p>デフォルトでは、{{cssxref("align-self")}} の振る舞いはアイテムを広げます。しかし、固有のアスペクト比を持つアイテムの振る舞いは <code>start</code> になります。固有のアスペクト比を持つアイテムにデフォルトで <code>stretch</code> を設定するとアイテムを歪めるからです。</p>
 
-<p>この振る舞いは現在、仕様で明確になっていますが、ブラウザーへの実装はまだ途上です。それまでの間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を <code>start</code> に設定することによって、グリッドの直接の子である画像などのアイテムが、デフォルトで広がらないことを保証できます。これは正しい動作を模倣します。</p>
+<p>この振る舞いは現在、仕様で明確になっていますが、ブラウザーはまだ正しく実装していません。その間、{{cssxref("align-self")}} と {{cssxref("justify-self")}} を <code>start</code> に設定することによって、画像などのアイテムがグリッドの直接の子のようにデフォルトで広がらないことを保証できます。これは正しい動作を模倣します。</p>
 
 <h2 id="インライン軸上のアイテムの位置揃え">インライン軸上のアイテムの位置揃え</h2>
 
@@ -210,7 +210,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <pre class="brush: css notranslate">.wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 100px;
   grid-template-areas:
     "a a a a b b b b"
@@ -248,11 +248,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p>{{cssxref("align-self")}} と {{cssxref("align-items")}} と同様に、グリッドコンテナに {{cssxref("justify-items")}} を適用することで、すべてのアイテムに {{cssxref("justify-self")}} の値を設定できます。</p>
 
-<p>{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティは<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>に実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを両端揃えすることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。</p>
+<p>{{cssxref("justify-self")}} と {{cssxref("justify-items")}} プロパティは<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>に実装されていません。これはフレックスボックスが一次元であること、軸にそって複数のアイテムがあるかもしれず単一のアイテムを揃えることができないことによります。フレックスボックスのメイン軸・インライン軸に沿って配置するには、{{cssxref("justify-content")}} プロパティを使用します。</p>
 
 <h3 id="ショートハンドプロパティ">ショートハンドプロパティ</h3>
 
-<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p>
+<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-item")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p>
 
 <h2 id="エリア内のアイテムを中央に揃える">エリア内のアイテムを中央に揃える</h2>
 
@@ -281,7 +281,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 <pre class="brush: css notranslate">.wrapper {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  grid-gap: 10px;
   grid-auto-rows: 200px;
   grid-template-areas:
     ". a a ."
@@ -304,7 +304,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <h2 id="ブロック軸上のグリッドトラックの配置">ブロック軸上のグリッドトラックの配置</h2>
 
-<p>グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸上のトラックを配置し、{{cssxref("justify-content")}} はインライン軸上の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。</p>
+<p>グリッドトラックが使うエリアがグリッドコンテナより小さければ、コンテナ内にグリッドトラック自体を配置できます。繰り返しますが、これはブロック軸とインライン軸上で行われます。{{cssxref("align-content")}} はブロック軸方向でトラックを配置し、{{cssxref("justify-content")}} はインライン軸方向の配置を行います。{{cssxref("place-content")}} プロパティは {{cssxref("align-content")}} と {{cssxref("justify-content")}} のショートハンドです。{{cssxref("align-content")}} と {{cssxref("justify-content")}} と {{cssxref("place-content")}} の値は次の通りです。</p>
 
 <ul>
  <li><code>normal</code></li>
@@ -320,9 +320,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
  <li><code>last baseline</code></li>
 </ul>
 
-<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。</p>
+<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも隙間があることを意味します。</p>
 
-<p><code>align-content</code> プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。</p>
+<p><code>align-content</code> プロパティはグリッドコンテナに、すなわちすべてのグリッドに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドが始まるラインに合わせて整列しています。</p>
 
 <div id="alignment_5">
 <div class="hidden">
@@ -350,7 +350,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
   grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
-  gap: 10px;
+  grid-gap: 10px;
   grid-template-areas:
     "a a b"
     "a a b"
@@ -409,7 +409,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
   grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
-  gap: 10px;
+  grid-gap: 10px;
   grid-template-areas:
     "a a b"
     "a a b"
@@ -503,7 +503,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
 
 <p>スペース配分の値を使用すると、グリッド上のアイテムが大きくなる可能性があることに注意してください。アイテムが複数のグリッドトラックにまたがる場合、トラック間にさらにスペースを追加すると、アイテムはその分大きくなる必要があります。グリッドは常に厳密です。したがって、これらの値を使用する場合は、トラックの内容が追加のスペースに対応できるようにするか、整列プロパティを使用して引き伸ばさず始点に置くようにします。</p>
 
-<p>下の図では、<code>align-content</code> と <code>start</code> で配置したグリッドの隣に、<code>align-content</code> を <code>space-between</code> に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。</p>
+<p>下の図では、<code>align-content</code> を <code>start</code> にして配置したグリッドの隣に、<code>align-content</code> を <code>space-between</code> に設定して配置したグリッドがあります。2 つのトラックの間にスペースを取るとき、2 つの行トラックにまたがる Item 1 と 2 が どのように余分な高さを確保しているか見てください。</p>
 
 <p><img alt="space-between を使用したときアイテムがどのように大きくなるかのデモ。" src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
 
@@ -539,7 +539,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
   grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
-  gap: 10px;
+  grid-gap: 10px;
   grid-template-areas:
     "a a b"
     "a a b"
@@ -604,7 +604,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
   grid-template-rows: repeat(3, 100px);
   height: 500px;
   width: 500px;
-  gap: 10px;
+  grid-gap: 10px;
   grid-template-areas:
     "a a b"
     "a a b"