839 files changed, 124146 insertions, 0 deletions

diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html
new file mode 100644
index 0000000000..0061706fe3
--- /dev/null
+++ b/files/ja/web/css/--_star_/index.html
@@ -0,0 +1,105 @@
+---
+title: 'カスタムプロパティ (--*): CSS 変数'
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - CSS カスタムプロパティ
+  - Reference
+translation_of: Web/CSS/--*
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><code>--example-name</code> のように、頭に <code>--</code> 接頭辞がつけられたプロパティは<em>カスタムプロパティ</em>を表し、 {{cssxref("var")}} 関数を使用して他の宣言の中で使用することができる値を持ちます。</span></p>
+
+<p>カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+</pre>
+
+<dl>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>シーケンスが許可されていないトークンを含んでいない限り、この値は 1 つ以上のトークンのシーケンスに一致します。つまり、有効な宣言がその値として保持できるものすべてを意味します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="firstParagraph"&gt;この段落は青色の背景で黄色のテキストとなります。&lt;/p&gt;
+&lt;p id="secondParagraph"&gt;この段落は黄色の背景で青色のテキストとなります。&lt;/p&gt;
+&lt;div id="container"&gt;
+  &lt;p id="thirdParagraph"&gt;この段落は緑色の背景で黄色のテキストとなります。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[2,3]">:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 500, 130)}}</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 Variables", "#defining-variables", "--*")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.custom-property")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数の利用</a></li>
+</ul>
diff --git a/files/ja/web/css/-moz-binding/index.html b/files/ja/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..d79650ead6
--- /dev/null
+++ b/files/ja/web/css/-moz-binding/index.html
@@ -0,0 +1,68 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+tags:
+  - CSS
+  - CSS プロパティ
+  - 'CSS:Mozilla 拡張'
+  - Mozilla 拡張
+  - Reference
+  - XBL
+  - XUL
+  - リファレンス
+  - 標準外
+  - 非推奨
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(57)}}</div>
+
+<p>CSS の <strong><code>-moz-binding</code></strong> プロパティは、 Mozilla ベースのアプリケーションで <a href="/ja/docs/XBL">XBL</a> を DOM 要素に結び付けるために使用します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* &lt;url&gt; 値 */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* グローバル値 */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>(フラグメント識別子を含む) XBL バインドのための URI</dd>
+ <dt><code>none</code></dt>
+ <dd>要素に XBL バインドを適用しない事を示すキーワード</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.-moz-binding")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">XBL Reference: Binding Attachment and Detachment</a></li>
+ <li><a href="/ja/docs/XUL_Tutorial/Introduction_to_XBL">XUL Tutorial: Introduction to XBL</a></li>
+</ul>
diff --git a/files/ja/web/css/-moz-border-bottom-colors/index.html b/files/ja/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..9dce6086e2
--- /dev/null
+++ b/files/ja/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,95 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - 'CSS:Mozilla 拡張'
+  - Mozilla 拡張
+  - Obsolete
+  - Reference
+  - 'recipe:css-property'
+  - 廃止
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div>
+
+<p>Firefox などの Mozilla アプリケーションにおいて、 CSS の <strong><code>-moz-border-bottom-colors</code></strong> プロパティは下辺の境界に色のリストを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 単一の &lt;color&gt; 値 */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* 複数の &lt;color&gt; 値 */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<p>要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<p>以下の場合は適用されません。</p>
+
+<ol>
+ <li>{{Cssxref("border-style")}} が <code>dashed</code> または <code>dotted</code> である場合</li>
+ <li>表で <code>border-collapse: collapse</code> の場合</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>ホワイトスペースで区切られた色の値のリストを受け付けます。</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>境界の下辺におけるピクセルの線の色を指定します。 <code>transparent</code> も有効です。利用可能な単位は {{cssxref("&lt;color&gt;")}} 値を参照してください。</dd>
+ <dt>none</dt>
+ <dd>既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html notranslate">&lt;div id="example"&gt;Example&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</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.properties.-moz-border-bottom-colors")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("border-color")}}</li>
+ <li>{{CSSxRef("-moz-border-right-colors")}}</li>
+ <li>{{CSSxRef("-moz-border-top-colors")}}</li>
+ <li>{{CSSxRef("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-border-left-colors/index.html b/files/ja/web/css/-moz-border-left-colors/index.html
new file mode 100644
index 0000000000..2ca80dbb53
--- /dev/null
+++ b/files/ja/web/css/-moz-border-left-colors/index.html
@@ -0,0 +1,94 @@
+---
+title: '-moz-border-left-colors'
+slug: Web/CSS/-moz-border-left-colors
+tags:
+  - CSS
+  - CSS プロパティ
+  - Mozilla 拡張
+  - Non-standard
+  - Obsolete
+  - Reference
+  - 廃止
+  - 標準外
+translation_of: Archive/Web/CSS/-moz-border-left-colors
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div>
+
+<p>Firefox などの Mozilla アプリケーションにおいて、 CSS の <strong><code>-moz-border-left-colors</code></strong> プロパティは左辺の境界に色のリストを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 単一の &lt;color&gt; 値 */
+-moz-border-left-colors: #f0f0f0;
+
+/* 複数の &lt;color&gt; 値 */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+</pre>
+
+<p>要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<p>以下の場合は適用されません。</p>
+
+<ol>
+ <li>{{Cssxref("border-style")}} が <code>dashed</code> または <code>dotted</code> である場合</li>
+ <li>表で <code>border-collapse: collapse</code> の場合</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>ホワイトスペースで区切られた色の値のリストを受け付けます。</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>境界の左辺におけるピクセルの線の色を指定します。 <code>transparent</code> も有効です。利用可能な単位は {{cssxref("&lt;color&gt;")}} 値を参照してください。</dd>
+ <dt>none</dt>
+ <dd>既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html notranslate">&lt;div id="example"&gt;Example&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</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.properties.-moz-border-left-colors")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-border-right-colors/index.html b/files/ja/web/css/-moz-border-right-colors/index.html
new file mode 100644
index 0000000000..b14493e123
--- /dev/null
+++ b/files/ja/web/css/-moz-border-right-colors/index.html
@@ -0,0 +1,98 @@
+---
+title: '-moz-border-right-colors'
+slug: Web/CSS/-moz-border-right-colors
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - Non-standard
+  - Obsolete
+  - Reference
+  - 'recipe:css-property'
+  - 廃止
+  - 標準外
+translation_of: Archive/Web/CSS/-moz-border-right-colors
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div>
+
+<p>Firefox などの Mozilla アプリケーションにおいて、 CSS の <strong><code>-moz-border-right-colors</code></strong> プロパティは右辺の境界に色のリストを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Single &lt;color&gt; value */
+/* 単一の &lt;color&gt; 値 */
+-moz-border-right-colors: #f0f0f0;
+
+/* 複数の &lt;color&gt; 値 */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+</pre>
+
+<p>要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<p>以下の場合は適用されません。</p>
+
+<ol>
+ <li>{{Cssxref("border-style")}} が <code>dashed</code> または <code>dotted</code> である場合</li>
+ <li>表で <code>border-collapse: collapse</code> の場合</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>ホワイトスペースで区切られた色の値のリストを受け付けます。</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>境界の右辺におけるピクセルの線の色を指定します。 <code>transparent</code> も有効です。利用可能な単位は {{cssxref("&lt;color&gt;")}} 値を参照してください。</dd>
+ <dt>none</dt>
+ <dd>既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html notranslate">&lt;div id="example"&gt;Example&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</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.properties.-moz-border-right-colors")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-top-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-border-top-colors/index.html b/files/ja/web/css/-moz-border-top-colors/index.html
new file mode 100644
index 0000000000..f19fbbc462
--- /dev/null
+++ b/files/ja/web/css/-moz-border-top-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-top-colors'
+slug: Web/CSS/-moz-border-top-colors
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - Non-standard
+  - Obsolete
+  - Reference
+  - 'recipe:css-property'
+  - 標準外
+translation_of: Archive/Web/CSS/-moz-border-top-colors
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header(59)}}</div>
+
+<p>Firefox などの Mozilla アプリケーションにおいて、 CSS の <strong><code>-moz-border-top-colors</code></strong> プロパティは上辺の境界に色のリストを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 単一の &lt;color&gt; 値 */
+-moz-border-top-colors: #f0f0f0;
+
+/* 複数の &lt;color&gt; 値 */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* グローバル値 */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+</pre>
+
+<p>要素が 1 CSS ピクセルより太い幅の境界を持つ場合、各ピクセルの線はプロパティで指定された次の色を外側から内側に向かって使用します。これは入れ子状のボックスを除去する必要があります。境界がこのプロパティで指定された色の数よりも太いとき、境界の残りの部分は最も内側の色が指定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<p>以下の場合は適用されません。</p>
+
+<ol>
+ <li>{{Cssxref("border-style")}} が <code>dashed</code> または <code>dotted</code> である場合</li>
+ <li>表で <code>border-collapse: collapse</code> の場合</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>ホワイトスペースで区切られた色の値のリストを受け付けます。</p>
+
+<dl>
+ <dt>&lt;color&gt;</dt>
+ <dd>境界の上辺におけるピクセルの線の色を指定します。 <code>transparent</code> も有効です。利用可能な単位は {{cssxref("&lt;color&gt;")}} 値を参照してください。</dd>
+ <dt>none</dt>
+ <dd>既定値で、色が描かれないか、指定されていれば {{cssxref("border-color")}} が使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html notranslate">&lt;div id="example"&gt;Example&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", 120, 90)}}</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.properties.-moz-border-top-colors")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{Cssxref("-moz-border-right-colors")}}</li>
+ <li>{{Cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{Cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-box-ordinal-group/index.html b/files/ja/web/css/-moz-box-ordinal-group/index.html
new file mode 100644
index 0000000000..ac4851b66d
--- /dev/null
+++ b/files/ja/web/css/-moz-box-ordinal-group/index.html
@@ -0,0 +1,65 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/-moz-box-ordinal-group
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+  - フレックスボックス
+translation_of: Web/CSS/box-ordinal-group
+---
+<p>{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}</p>
+
+<p>このプロパティの代わりに何を使用するべきかについての詳細情報は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>をご覧ください。</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。</p>
+
+<h2 id="Values" name="Values">値</h2>
+
+<p>値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+&lt;/style&gt;
+
+&lt;div id="Flexbox"&gt;
+  &lt;div id="text1"&gt;text 1&lt;/div&gt;
+  &lt;div id="text2"&gt;text 2&lt;/div&gt;
+  &lt;div id="text3"&gt;text 3&lt;/div&gt;
+  &lt;div id="text4"&gt;text 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
diff --git a/files/ja/web/css/-moz-context-properties/index.html b/files/ja/web/css/-moz-context-properties/index.html
new file mode 100644
index 0000000000..3ab18e2434
--- /dev/null
+++ b/files/ja/web/css/-moz-context-properties/index.html
@@ -0,0 +1,101 @@
+---
+title: '-moz-context-properties'
+slug: Web/CSS/-moz-context-properties
+tags:
+  - '-moz-context-properties'
+  - CSS
+  - CSS Property
+  - 'CSS:Mozilla Extensions'
+  - Experimental
+  - Needs Privileges
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-context-properties
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary"><code><strong>-moz-context-properties</strong></code> プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。</span></p>
+
+<p>ウェブページで (例えば {{htmlelement("img")}} 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は <code>-moz-context-properties</code> プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 <code>context-fill</code> 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* グローバル値 */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>画像に設定された <code>fill</code> の値を埋め込まれた SVG に伝えます。</dd>
+ <dt><code>stroke</code></dt>
+ <dd>画像に設定された <code>stroke</code> の値を埋め込まれた SVG に伝えます。</dd>
+ <dt><code>fill-opacity</code></dt>
+ <dd>画像に設定された <code>fill-opacity</code> の値を埋め込まれた SVG に伝えます。</dd>
+ <dt><code>stroke-opacity</code></dt>
+ <dd>画像に設定された <code>stoke-opacity</code> の値を埋め込まれた SVG に伝えます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Exposing_fill_and_stroke_to_an_SVG_image" name="Exposing_fill_and_stroke_to_an_SVG_image">SVG 画像への塗りつぶしとストロークの公開</h3>
+
+<p>この例では、 <code>&lt;img&gt;</code> 要素を使用して埋め込まれた簡単な SVG を使用します。</p>
+
+<p>以下のように、最初に埋め込み SVG に伝えたい値のプロパティを <code>-moz-context-properties</code> プロパティで埋め込む要素に指定する必要があります。</p>
+
+<pre class="brush: css notranslate">.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}</pre>
+
+<p>これを行うと、次のように SVG 画像は {{cssxref("fill")}} および {{cssxref("stroke")}} の値を使用することができるようになります。</p>
+
+<pre class="brush: html notranslate">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
+                       &lt;rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+
+<p>ここで、画像の <code>src</code> に単純な SVG 画像を含む data URI を設定しました。内部の <code>&lt;rect&gt;</code> は、 <code>&lt;img&gt;</code> 要素の {{cssxref("fill")}} および {{cssxref("stroke")}} から <code>fill</code> および <code>stroke</code> の値を取り、これらの値の <code>context-fill</code>/<code>context-stroke</code> キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。</p>
+
+<div class="note">
+<p><strong>注</strong>: <a href="https://mdn.github.io/css-examples/moz-context-properties/">Github に動作するサンプル</a>があります。</p>
+</div>
+
+<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.properties.-moz-context-properties")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a></li>
+ <li><a href="/ja/docs/Web/Media/images">HTML での画像の使用</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブへのベクターグラフィックの追加</a></li>
+ <li><a href="/ja/docs/Web/SVG/SVG_as_an_Image">画像としての SVG</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li>
+</ul>
diff --git a/files/ja/web/css/-moz-float-edge/index.html b/files/ja/web/css/-moz-float-edge/index.html
new file mode 100644
index 0000000000..c21d0d6965
--- /dev/null
+++ b/files/ja/web/css/-moz-float-edge/index.html
@@ -0,0 +1,90 @@
+---
+title: '-moz-float-edge'
+slug: Web/CSS/-moz-float-edge
+tags:
+  - CSS
+  - CSS Property
+  - 'CSS:Mozilla Extensions'
+  - Layout
+  - NeedsCompatTable
+  - Non-standard
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-float-edge
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>非標準の <strong><code>-moz-float-edge</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは要素の高さと幅のプロパティが margin 、border 、padding の厚さを含んでいるのかを指定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Global values */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>高さと幅のプロパティがコンテンツ、padding および border を含むが、margin は含まない。</dd>
+ <dt><code>content-box</code></dt>
+ <dd>高さと幅のプロパティがコンテンツを含むが、padding 、border および margin は含まない。</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>高さと幅のプロパティがコンテンツ、padding 、 border および margin を含む。</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>高さと幅のプロパティがコンテンツと padding を含むが、border および margin は含まない。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">形式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="html prettyprint notranslate"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span><span class="pln"> </span>
+<span class="pln">  </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
+</span><span class="tag">&lt;/div&gt;</span></pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.box {
+  display: <span class="highVAL">block</span>;
+  height: 5px;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+} </pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples') }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティはどの CSS 標準でも定義されていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの対応</h2>
+
+
+
+<p>{{Compat("css.properties.-moz-float-edge")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{bug(432891)}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-force-broken-image-icon/index.html b/files/ja/web/css/-moz-force-broken-image-icon/index.html
new file mode 100644
index 0000000000..4a52d9fbfa
--- /dev/null
+++ b/files/ja/web/css/-moz-force-broken-image-icon/index.html
@@ -0,0 +1,67 @@
+---
+title: '-moz-force-broken-image-icon'
+slug: Web/CSS/-moz-force-broken-image-icon
+tags:
+  - CSS
+  - NeedsCompatTable
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-force-broken-image-icon
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Mozillaの拡張CSSプロパティである <strong><code>-moz-force-broken-image-icon</code></strong> は、画像が壊れているときに表示されるイメージアイコンを、たとえ <code>alt</code> 属性を持っていたとしても、強制的に表示させるために使用されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>プロパティの値に <code>1</code> を指定した場合、その画像が {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}} 属性を持っていたとしても、壊れたイメージアイコンが表示されます。<code>0</code> を指定した場合、通常通り <code>alt</code> 属性のみが表示されます。</dd>
+</dl>
+
+<div class="note"><strong>注:</strong> プロパティの値に <code>1</code> を指定した場合もなお、 <code>alt</code> 属性は壊れたイメージアイコンの隣に同時に表示されます。</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;img src='/broken/image/link.png' alt='Broken image link'&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush:css;">img {
+  -moz-force-broken-image-icon: 1;
+  height: 100px;
+  width: 100px;
+}</pre>
+
+<h3 id="Result" name="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example','125','125','/files/4619/broken%20image%20link.png') }}</p>
+
+<div class="note"><strong>注:</strong> <code>-moz-force-broken-image-icon</code> の値に <code>1</code> を指定した場合、その画像にwidthとheightを明示的に指定しない限り、壊れたイメージアイコンは表示されず、 <code>alt</code> 属性も非表示になります。</div>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<ul>
+ <li>このプロパティは Geckoベースのブラウザでのみ使用できます。</li>
+ <li>このプロパティの使用は非推奨です。代わりに適切な <code>alt</code> 属性を使用してください。</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<p>どの仕様にも記載されていません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ Bug(58646) }}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-orient/index.html b/files/ja/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..ddd5011f73
--- /dev/null
+++ b/files/ja/web/css/-moz-orient/index.html
@@ -0,0 +1,81 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+tags:
+  - CSS
+  - CSS プロパティ
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-orient</code></strong> プロパティは、適用される要素の向きを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-orient</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。</dd>
+ <dt><code>block</code></dt>
+ <dd>要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>要素が水平方向に描画される</dd>
+ <dt><code>vertical</code></dt>
+ <dd>要素が垂直方向に描画される</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  The following progress meter
+  is horizontal (the default):
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+ The following progress meter
+ is vertical:
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples","200","360")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>W3C に<a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">提出</a>され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 <code>-moz-orient</code>) です。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.-moz-orient")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/ja/web/css/-moz-outline-radius-bottomleft/index.html b/files/ja/web/css/-moz-outline-radius-bottomleft/index.html
new file mode 100644
index 0000000000..1e839df23f
--- /dev/null
+++ b/files/ja/web/css/-moz-outline-radius-bottomleft/index.html
@@ -0,0 +1,76 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+tags:
+  - CSS
+  - CSS Property
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-outline-radius-bottomleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Mozilla アプリケーションにおいて、 <strong><code>-moz-outline-radius-bottomleft</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左下の角を丸くするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-outline-radius-bottomleft</code> の値は、 {{cssxref("length", "&lt;length&gt;")}} または境界ボックスの対応する大きさに対する<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>要素の下端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "&lt;length&gt;")}} で指定します。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>要素の左下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と左辺の<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>で指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Rounding_a_outline" name="Rounding_a_outline">アウトラインを丸める</h3>
+
+<p>これは Firefox 専用のプロパティなので、この例では Firefox 以外のブラウザーで表示している場合は、期待した効果が表示されません。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Look at this paragraph's bottom-left corner.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  margin: 10px;
+  border: solid cyan;
+  outline: dotted green;
+  -moz-outline-radius-bottomleft: 2em;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Rounding_a_outline")}}</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.properties.-moz-outline-radius-bottomleft")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。</li>
+</ul>
diff --git a/files/ja/web/css/-moz-outline-radius-bottomright/index.html b/files/ja/web/css/-moz-outline-radius-bottomright/index.html
new file mode 100644
index 0000000000..684044c104
--- /dev/null
+++ b/files/ja/web/css/-moz-outline-radius-bottomright/index.html
@@ -0,0 +1,76 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+tags:
+  - CSS
+  - CSS Property
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-outline-radius-bottomright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Mozilla アプリケーションにおいて、 <strong><code>-moz-outline-radius-bottomright</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の右下の角を丸くするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-outline-radius-bottomright</code> の値は、 {{cssxref("length", "&lt;length&gt;")}} または境界ボックスの対応する大きさに対する<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>要素の下端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "&lt;length&gt;")}} で指定します。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>要素の右下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と右辺の<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>で指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Look at this paragraph's bottom-right corner.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<div class="blockIndicator note">
+<p>注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。</p>
+</div>
+
+<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.properties.-moz-outline-radius-bottomright")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。</li>
+</ul>
diff --git a/files/ja/web/css/-moz-outline-radius-topleft/index.html b/files/ja/web/css/-moz-outline-radius-topleft/index.html
new file mode 100644
index 0000000000..7d7af0faa2
--- /dev/null
+++ b/files/ja/web/css/-moz-outline-radius-topleft/index.html
@@ -0,0 +1,74 @@
+---
+title: '-moz-outline-radius-topleft'
+slug: Web/CSS/-moz-outline-radius-topleft
+tags:
+  - CSS
+  - CSS Property
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-outline-radius-topleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Mozilla アプリケーションにおいて、 <strong><code>-moz-outline-radius-topleft</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左上の角を丸くするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-outline-radius-topleft</code> の値は、 {{cssxref("length", "&lt;length&gt;")}} または境界ボックスの対応する大きさに対する<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>要素の上端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "&lt;length&gt;")}} で指定します。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>要素の左上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と左辺の<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>で指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>下記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;段落の左上の角を見てください。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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.properties.-moz-outline-radius-topleft")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。</li>
+</ul>
diff --git a/files/ja/web/css/-moz-outline-radius-topright/index.html b/files/ja/web/css/-moz-outline-radius-topright/index.html
new file mode 100644
index 0000000000..7337f768c8
--- /dev/null
+++ b/files/ja/web/css/-moz-outline-radius-topright/index.html
@@ -0,0 +1,76 @@
+---
+title: '-moz-outline-radius-topright'
+slug: Web/CSS/-moz-outline-radius-topright
+tags:
+  - CSS
+  - CSS Property
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-moz-outline-radius-topright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Mozilla アプリケーションにおいて、 <strong><code>-moz-outline-radius-topright</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の⇀上の角を丸くするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-outline-radius-topright</code> の値は、 {{cssxref("length", "&lt;length&gt;")}} または境界ボックスの対応する大きさに対する<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>要素の上端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "&lt;length&gt;")}} で指定します。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>要素の右上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と右辺の<a href="/ja/docs/Web/CSS/percentage">パーセント値</a>で指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;段落の右上の角を見てください。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<div class="blockIndicator note">
+<p>上記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。</p>
+</div>
+
+<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.properties.-moz-outline-radius-topright")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。</li>
+</ul>
diff --git a/files/ja/web/css/-moz-outline-radius/index.html b/files/ja/web/css/-moz-outline-radius/index.html
new file mode 100644
index 0000000000..57fc74d787
--- /dev/null
+++ b/files/ja/web/css/-moz-outline-radius/index.html
@@ -0,0 +1,105 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - '-moz-outline-radius'
+  - '-moz-outline-radius-bottomleft'
+  - '-moz-outline-radius-bottomright'
+  - '-moz-outline-radius-topleft'
+  - '-moz-outline-radius-topright'
+  - CSS
+  - CSS プロパティ
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Firefox などの Mozilla アプリケーションにおいて、 <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-outline-radius</code></strong> プロパティは、要素の輪郭線 ({{cssxref("outline")}}) の角を丸くするために使用することができます。</p>
+
+<pre class="brush:css">/* 1つの値 */
+-moz-outline-radius: 25px;
+
+/* 2つの値 */
+-moz-outline-radius: 25px 1em;
+
+/* 3つの値 */
+-moz-outline-radius: 25px 1em 12%;
+
+/* 4つの値 */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* グローバル値 */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+</pre>
+
+<p>このプロパティは、<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>であり、4つのプロパティ {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}}, {{cssxref("-moz-outline-radius-bottomleft")}} を設定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<div class="note">楕円形の輪郭線や <code>&lt;percentage&gt;</code> の値は、 {{cssxref("border-radius")}} で説明されている構文に従います。</div>
+
+<p>1～4つの <code>&lt;outline-radius&gt;</code> 値で、次のうちの一つを表します。</p>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>取りうる値については {{cssxref("&lt;length&gt;")}} をご覧ください。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>{{cssxref("&lt;percentage&gt;")}}。詳しくは {{cssxref("border-radius")}} を参照してください。</dd>
+</dl>
+
+<ul>
+ <li>1つの値が設定された場合、全4隅に適用します。</li>
+ <li>2つの値が設定された場合、最初の値は左上と右下の角に、二番目の値は右上と左下の角に適用します。</li>
+ <li>3つの値が設定された場合、最初の値は左上の角に、二番目の値は右上と左下の角に、三番目の値は右下の角に適用します。</li>
+ <li>4つの値が設定された場合、最初の値は左上の角に、二番目の値は右上の角に、三番目の値は右下の角に、四番目の値は左下の角に適用します。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This element has a rounded outline!&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<p>注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。</p>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<ul>
+ <li><code>dotted</code> または <code>dashed</code> で角を丸めた輪郭線は、 Firefox 50 までは実戦で描かれていました。 {{bug("382721")}}</li>
+ <li>将来のバージョンの Gecko/Firefox では、このプロパティが完全になくなるかもしれません。 {{bug("593717")}} を参照してください。</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティはどの CSS 標準で定義されていません。</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.properties.-moz-outline-radius")}}</p>
diff --git a/files/ja/web/css/-moz-stack-sizing/index.html b/files/ja/web/css/-moz-stack-sizing/index.html
new file mode 100644
index 0000000000..ba09f8271f
--- /dev/null
+++ b/files/ja/web/css/-moz-stack-sizing/index.html
@@ -0,0 +1,57 @@
+---
+title: '-moz-stack-sizing'
+slug: Web/CSS/-moz-stack-sizing
+tags:
+  - CSS
+  - CSS Property
+  - NeedsCompatTable
+  - Non-standard
+  - Reference
+  - XUL
+translation_of: Archive/Web/CSS/-moz-stack-sizing
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p><strong><code>-moz-stack-sizing</code></strong> は拡張された <a href="/ja/docs/Web/CSS">CSS</a> プロパティです。通常、{{XULElem("stack")}} はすべての子要素が完全に表示できるように自身のサイズを変更します。例えば、スタックの子要素を右側に離すように移動するとスタックは幅を広げ、子要素は表示され続けます。</p>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+-moz-stack-sizing: auto;
+-moz-stack-sizing: ignore;
+
+/* グローバル値 */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+</pre>
+
+<p>スタックが子要素を収容しようと自動的にリサイズをしないようにするには、子要素の<code>-moz-stack-sizing</code> に<code>無視する (ignore)</code> を設定します。プロパティはスタック自身でなく、スタックの子要素に設定します。これにより特定の子要素を他の要素と区別して無視できます。</p>
+
+<p class="note"><strong>メモ:</strong> Gecko の以前のバージョンではスタック要素に非常に大きい負の下と右のマージンを、サイズを無視したくない子要素に同じように非常に大きな下と右のマージンを設定することで問題を回避することができました。(この問題はスタックの上や左に移動する子要素には影響を与えません。)</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>stretch-to-fit</code></dt>
+ <dd>子要素がスタックのサイズに影響する。</dd>
+ <dt><code>ignore</code></dt>
+ <dd>スタックはサイズを計算する時に、この子要素を考慮しない。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css notranslate">.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>{{bug("346189")}}</p>
diff --git a/files/ja/web/css/-moz-user-input/index.html b/files/ja/web/css/-moz-user-input/index.html
new file mode 100644
index 0000000000..76816cb4e3
--- /dev/null
+++ b/files/ja/web/css/-moz-user-input/index.html
@@ -0,0 +1,73 @@
+---
+title: '-moz-user-input'
+slug: Web/CSS/-moz-user-input
+tags:
+  - CSS
+  - CSS Property
+  - Deprecated
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-user-input
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(60)}}</div>
+
+<p>Mozilla アプリケーションでは、 <strong><code>-moz-user-input</code></strong> はある要素がユーザの入力を受け付けるかどうかを決定します。</p>
+
+<pre class="brush:css">/* キーワード値 */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* グローバル値 */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+</pre>
+
+<p>{{HTMLElement("textarea")}} のようなユーザーからの入力を通常受け付ける要素では <code>-moz-user-input</code> の初期値は <code>enabled</code> です。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>-moz-user-input</code> は、 CSS 3 {{cssxref("user-input")}} プロパティの先行実装案の一つでしたが、これはまだ (実装を要求する) 勧告候補に達していません。類似のプロパティ <code>user-focus</code> が <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">CSS3 UI 仕様の前身であった初期の草稿</a> で提案されましたが、ワーキンググループによって却下されました。</p>
+</div>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>要素はユーザーからの入力に反応せず {{CSSxRef(":active")}} にならない。</dd>
+ <dt>enabled</dt>
+ <dd>要素はユーザーからの入力を受け付ける。テキストボックスではこれが標準の動作。<strong>この値は Firefox 60 以降は対応していませんので注意してください ({{bug(1405087)}})。</strong></dd>
+ <dt>disabled</dt>
+ <dd>要素はユーザーからの入力を受け付けない。しかし、これは {{XULAttr("disabled")}} を true にするのとは等しくなく、要素は普通に (無効にならずに) 描画される。<strong>この値は Firefox 60 以降でサポートしませんので注意してください ({{bug(1405087)}})。</strong></dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">input.example {
+  /* ユーザーはテキストの選択はできますが変更はできません。 */
+  -moz-user-input: disabled;
+}
+</pre>
+
+<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.properties.-moz-user-input")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-modify")}}</li>
+ <li>{{CSSxRef("-moz-user-select")}}</li>
+</ul>
diff --git a/files/ja/web/css/-ms-accelerator/index.html b/files/ja/web/css/-ms-accelerator/index.html
new file mode 100644
index 0000000000..a057272e2e
--- /dev/null
+++ b/files/ja/web/css/-ms-accelerator/index.html
@@ -0,0 +1,76 @@
+---
+title: '-ms-accelerator'
+slug: Web/CSS/-ms-accelerator
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - リファレンス
+translation_of: Archive/Web/CSS/-ms-accelerator
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-ms-accelerator</code></strong> プロパティは、オブジェクトがキーボードショートカットを表しているかどうかを示す文字列を設定したり受け取ったりする <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* オブジェクトはキーボードショートカットではない (既定値) */
+-ms-accelerator: false
+/* オブジェクトはキーボードショートカットである */
+-ms-accelerator: true
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>
+ <p>オブジェクトはキーボードショートカットではありません。</p>
+ </dd>
+ <dt><code>true</code></dt>
+ <dd>
+ <p>オブジェクトはキーボードショートカットです。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は {{HTMLElement("u")}} 要素で <code>-ms-accelerator</code> 属性を使用して、 {{HTMLElement("label")}} 要素内の "N" がキーボードショートカットであると指定しています。ユーザーの画面のプロパティでオプション「Alt キーを押すまでキーボードショートカットを隠す」が有効になっていると、 "N" はユーザーが <kbd>Alt</kbd> キーを押すまで下線が引かれません。 <kbd>Alt</kbd> + <kbd>N</kbd> が押されると、 {{htmlattrxref("accessKey","input")}} 属性の値を "N" に定義した {{HTMLElement("input")}} 要素がフォーカスを受け取ります。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Accelerator&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;label for="oName"&gt;&lt;u style="-ms-accelerator: true; accelerator: true"&gt;N&lt;/u&gt;ame: &lt;/label&gt;
+    &lt;input type="text"
+      id="oName"
+      size="25"
+      accesskey="N"
+      value="Your name here" /&gt;
+  &lt;/body&gt;
+&lt;/html&gt;<strong>
+</strong></pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティは Windows 2000 以降で対応しています。ユーザーがメニュー項目やコントロールのナビゲーションのインジケーターを <kbd>Alt</kbd> キーが押されるまで隠すことができます。</p>
+
+<p>アクセスキーは、オブジェクトを選択するためのキーボードショートカットとして使われる単一の文字です。ユーザーは <kbd>Alt</kbd> キーを押し、押しながらオブジェクトへ入力フォーカスを移動する文字を押すと、オブジェクトに関連付けられた既定のイベントを呼び出します。</p>
+
+<p>Internet Explorer 8 (IE8) では、 <code>-ms-accelerator</code> 属性は CSS の拡張機能であり、 IE8 標準モードで <code>accelerator</code> の別名として使用することができます。</p>
diff --git a/files/ja/web/css/-ms-block-progression/index.html b/files/ja/web/css/-ms-block-progression/index.html
new file mode 100644
index 0000000000..ba8a3cd37b
--- /dev/null
+++ b/files/ja/web/css/-ms-block-progression/index.html
@@ -0,0 +1,51 @@
+---
+title: '-ms-block-progression'
+slug: Web/CSS/-ms-block-progression
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - block-progression
+translation_of: Archive/Web/CSS/-ms-block-progression
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-ms-block-progression</code></strong> プロパティは、ブロックの進行とレイアウト方向を指定するための <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>tb</code></dt>
+ <dd>既定値。上から下へのブロックの流れです。レイアウトは水平です。</dd>
+ <dt><code>rl</code></dt>
+ <dd>右から左へのブロックの流れです。レイアウトは垂直です。</dd>
+ <dt><code>bt</code></dt>
+ <dd>下から上へのブロックの流れです。レイアウトは水平です。</dd>
+ <dt><code>rl</code></dt>
+ <dd>左から右へのブロックの流れです。レイアウトは垂直です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>垂直のレイアウトでは、文字の行が時計方向に90°回転します。画像は回転しませんが、表は回転します。垂直方向のボックスレイアウトは反対の水平方向のレイアウトになります。 width, height, top, bottom, right, left はテキストと一緒に回転しません。</p>
+
+<p>一度に同時に一つのブロックの進行のみが有効です。これらの値は組み合わせることができません。</p>
+
+<p>このプロパティは CSS3 テキストレイアウトモジュールの <code>block-progression</code> プロパティに基づいています。</p>
diff --git a/files/ja/web/css/-ms-content-zoom-chaining/index.html b/files/ja/web/css/-ms-content-zoom-chaining/index.html
new file mode 100644
index 0000000000..1b1220ec7b
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zoom-chaining/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-content-zoom-chaining'
+slug: Web/CSS/-ms-content-zoom-chaining
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+  - リファレンス
+translation_of: Archive/Web/CSS/-ms-content-zoom-chaining
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><strong><code>-ms-content-zoom-chaining</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>プロパティで、ユーザーがページの操作中にズームの限界に当たった時に起こるズームの振る舞いを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>初期値です。ユーザーがページの操作中にズームの限界に当たった時に、跳ね返る効果が表示されます。</dd>
+ <dt><code>chained</code></dt>
+ <dd>ユーザーがページの操作中にズームの限界に当たった時に、直近のズーム可能な親要素がズームし始めます。跳ね返る効果は表示されません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティはズームできない要素には効果がありません。ズーム可能な要素については、 {{CSSXref("-ms-content-zooming")}} をご覧ください。</p>
+
+<p>Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-content-zoom-limit-max/index.html b/files/ja/web/css/-ms-content-zoom-limit-max/index.html
new file mode 100644
index 0000000000..964f6c4085
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zoom-limit-max/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-content-zoom-limit-max'
+slug: Web/CSS/-ms-content-zoom-limit-max
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+  - リファレンス
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-max
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><strong><code>-ms-content-zoom-limit-max</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>プロパティで、選択された要素の最大ズーム率を指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>
+ <p>最大ズーム率です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティは、 <code>msContentZoomFactor</code> プロパティの値と同様にタッチによるズームを制限を設定します。このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。</p>
+
+<p>Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-content-zoom-limit-min/index.html b/files/ja/web/css/-ms-content-zoom-limit-min/index.html
new file mode 100644
index 0000000000..080290a948
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zoom-limit-min/index.html
@@ -0,0 +1,47 @@
+---
+title: '-ms-content-zoom-limit-min'
+slug: Web/CSS/-ms-content-zoom-limit-min
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-min
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><strong><code>-ms-content-zoom-limit-min</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>プロパティで、最小ズーム率を指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>
+ <p>最小ズーム率です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティは、 <code>msContentZoomFactor</code> プロパティの値と同様にタッチによるズームを制限を設定します。このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。</p>
+
+<p>Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-content-zoom-limit/index.html b/files/ja/web/css/-ms-content-zoom-limit/index.html
new file mode 100644
index 0000000000..25a3b8c8d4
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zoom-limit/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-content-zoom-limit'
+slug: Web/CSS/-ms-content-zoom-limit
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - リファレンス
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-ms-content-zoom-limit</code></strong> 一括指定プロパティは、 {{CSSXref("-ms-content-zoom-limit-min")}} 及び {{CSSXref("-ms-content-zoom-limit-max")}} プロパティのための値を指定する <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-ms-content-zoom-limit</code> 一括指定プロパティは、以下のコンテンツズーム制限の値の1つ又は両方を、この順序で、空白で区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-limit-min</code></dt>
+ <dd>{{CSSXref("-ms-content-zoom-limit-min")}} プロパティの値です。</dd>
+ <dt><code>-ms-content-zoom-limit-max</code></dt>
+ <dd>{{CSSXref("-ms-content-zoom-limit-max")}} プロパティの値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。</p>
+
+<p>Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-content-zoom-snap/index.html b/files/ja/web/css/-ms-content-zoom-snap/index.html
new file mode 100644
index 0000000000..edbc58c33a
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zoom-snap/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-content-zoom-snap'
+slug: Web/CSS/-ms-content-zoom-snap
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - リファレンス
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-ms-content-zoom-snap</code></strong> 一括指定プロパティは、 {{CSSXref("-ms-content-zoom-snap-type")}} 及び {{CSSXref("-ms-content-zoom-snap-points")}} プロパティのための値を指定する <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-ms-content-zoom-snap</code> 一括指定プロパティは、以下のコンテンツズーム合わせの値の1つ又は両方を、この順序で、空白で区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-snap-type</code></dt>
+ <dd>{{CSSXref("-ms-content-zoom-snap-type")}} プロパティの値です。</dd>
+ <dt><code>-ms-content-zoom-snap-points</code></dt>
+ <dd>{{CSSXref("-ms-content-zoom-snap-points")}} プロパティの値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティはズーム可能ではない要素には効果がありません。ズーム可能な要素の詳細については、 {{CSSXRef("-ms-content-zooming")}} をご覧ください。</p>
+
+<p>Windows 8.1 以降、このプロパティはタッチパッドの反応でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-content-zooming/index.html b/files/ja/web/css/-ms-content-zooming/index.html
new file mode 100644
index 0000000000..4dab069127
--- /dev/null
+++ b/files/ja/web/css/-ms-content-zooming/index.html
@@ -0,0 +1,49 @@
+---
+title: '-ms-content-zooming'
+slug: Web/CSS/-ms-content-zooming
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Archive/Web/CSS/-ms-content-zooming
+---
+<div>{{CSSRef}}</div>
+
+<div>{{non-standard_header}}</div>
+
+<p><strong><code>-ms-content-zooming</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>プロパティで、ズームを有効にするかどうかを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>最上位の要素を除くすべての要素の初期値です。要素はズームできません。</dd>
+ <dt><code>zoom </code></dt>
+ <dd>最上位の要素の初期値です。要素はズーム可能です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">  {{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>このプロパティは、 X 軸と Y 軸の両方であふれが許可されていないと効果がありません。</p>
+
+<p>既定では、ズームが可能な要素はユーザーがピンチズームによってズームすることができます。最上位の要素はズームが有効であれば、ダブルタップでもズームすることができます。</p>
+
+<p>Windows 8.1 以降では、このプロパティはタッチパッド操作でも対応しています。</p>
+
+<p>このプロパティは Windows 8 以降でのみ対応しています。</p>
diff --git a/files/ja/web/css/-ms-high-contrast/index.html b/files/ja/web/css/-ms-high-contrast/index.html
new file mode 100644
index 0000000000..f98c01bc68
--- /dev/null
+++ b/files/ja/web/css/-ms-high-contrast/index.html
@@ -0,0 +1,94 @@
+---
+title: '-ms-high-contrast'
+slug: Web/CSS/-ms-high-contrast
+tags:
+  - '@media'
+  - CSS
+  - Microsoft 拡張
+  - Reference
+  - メディア特性
+  - 標準外
+translation_of: Web/CSS/@media/-ms-high-contrast
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-ms-high-contrast</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。</p>
+
+<p>高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。</p>
+
+<p>このメディア特性はビットマップメディア型に適用されます。 <em>min/max</em> 接頭辞は受け付けません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><strong><code>-ms-high-contrast</code></strong> メディア特性は以下の値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code> {{Deprecated_Inline}}</dt>
+ <dd>...<br>
+ <strong>Microsoft Edge 18 で対応がなくなりました。</strong></dd>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<h3 id="Theming" name="Theming">テーマ</h3>
+
+<p>高コントラストモードのテーマカラーは、非推奨となったの <a href="https://www.w3.org/TR/2018/REC-css-color-3-20180619/#css2-system">CSS2 システムカラー</a>の限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。</p>
+
+<ul>
+ <li><code>windowText</code>: テキストコンテンツの色を制御します。</li>
+ <li><code>highlightText</code>: 選択されたテキストの色を制御します。</li>
+ <li><code>highlight</code>: 選択されたテキストの背景色を制御します。</li>
+ <li><code>buttonFace</code>: {{HTMLElement("button")}} 要素のテキストの色を制御します。</li>
+ <li><code>window</code>: 背景色を制御します。</li>
+ <li>{{HTMLElement("a")}} 要素でリンクの色を制御します。</li>
+</ul>
+
+<p>高コントラストモードのテーマは動的なので、他の <a href="/ja/docs/Web/CSS/color">CSS カラー値</a>の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。</p>
+
+<h3 id="Content" name="Content">コンテンツ</h3>
+
+<p>可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>何れかの仕様書の一部ではありません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>Microsoft Edge 18 で、 <code>-ms-high-contrast: none</code> は対応がなくなりました。 Microsoft Edge バージョン18以降では、代わりに <a href="/ja/docs/Web/CSS/@media/forced-colors"><code>forced-colors</code> メディア特性</a>が使用される予定ですが、 <code>forced-colors</code> メディア特性の仕様は現在も作業中です。</p>
+
+<p><code>-ms-high-contrast</code> メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。</p>
+
+<p><code>-ms-high-contrast</code> メディア特性は Windows 8 で導入されました。</p>
diff --git a/files/ja/web/css/-ms-scrollbar-face-color/index.html b/files/ja/web/css/-ms-scrollbar-face-color/index.html
new file mode 100644
index 0000000000..ceac159737
--- /dev/null
+++ b/files/ja/web/css/-ms-scrollbar-face-color/index.html
@@ -0,0 +1,93 @@
+---
+title: '-ms-scrollbar-face-color'
+slug: Web/CSS/-ms-scrollbar-face-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - 'CSS:Microsoft 拡張'
+  - Deprecated
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 標準外
+  - 非推奨
+translation_of: Archive/Web/CSS/-ms-scrollbar-face-color
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>-ms-scrollbar-face-color</strong></code> プロパティは <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>で、スクロールバーのスクロールボックスおよびスクロール矢印の色を指定します。</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;color&gt;")}}</dt>
+ <dd>
+ <p>スクロールボックスおよびスクロール矢印の色です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、 <code>-ms-scrollbar-face-color</code> および {{cssxref("-ms-scrollbar-arrow-color")}} を使用して、青いスクロールボックスと矢印を持ったスクロールバー、および緑のスクロールボックスおよび矢印を持ったスクロールバーを表示します。</p>
+
+<pre class="brush: css; notranslate">div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+</pre>
+
+<pre class="brush: html; notranslate">&lt;body&gt;
+  &lt;div class="blueScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="greenScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<p>結果はこの画像の通りです。</p>
+
+<p><img alt="Image for -ms-scrollbar-face-color example" src="https://mdn.mozillademos.org/files/15826/image002.png" style="height: 168px; width: 330px;"></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.properties.-ms-scrollbar-face-color")}}</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>Windows Internet Explorer 8+ 以降で対応しています。 <code>-ms-scrollbar-face-color</code> 属性は CSS への拡張で、 IE8 標準モードでは <code>scrollbar-face-color</code> の別名として使用することができます。</p>
+
+<p>スクロールボックスとは、スクロールバー内の矩形のボックスで、上下または左右に移動することで、画面上のコンテンツの位置を変更することができます。スクロール矢印とは、スクロールバーの端に位置し、矢印が描かれた矩形のボタンで、画面上のコンテンツを上下または左右に少しだけ動かすためのものです。</p>
+
+<p>このプロパティはスクロールバーを表示する要素に適用されます。 CSS は {{CSSxRef("overflow")}} プロパティによってすべてのオブジェクトでスクロールが有効になります。</p>
diff --git a/files/ja/web/css/-ms-scrollbar-highlight-color/index.html b/files/ja/web/css/-ms-scrollbar-highlight-color/index.html
new file mode 100644
index 0000000000..eb03886c66
--- /dev/null
+++ b/files/ja/web/css/-ms-scrollbar-highlight-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-highlight-color'
+slug: Web/CSS/-ms-scrollbar-highlight-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - Obsolete
+  - Reference
+  - 廃止
+  - 標準外
+translation_of: Archive/Web/CSS/-ms-scrollbar-highlight-color
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>-ms-scrollbar-highlight-color</strong></code> プロパティは <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>で、スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色を指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>
+ <p>スクロールバーのスライダートレイ、スクロールボックスの上辺と左辺、スクロール矢印の色です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、 <code>-ms-scrollbar-highlight-color</code>, {{CSSXref("-ms-scrollbar-face-color")}}, {{CSSXref("-ms-scrollbar-arrow-color")}} を使用して、異なる色のスクロールバーを持った二つの {{HTMLElement("div")}} オブジェクトを生成します。</p>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}</pre>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="redScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<p>結果はこの画像の通りです。</p>
+
+<p><img alt="Image for -ms-scrollbar-highlight-color example" src="https://mdn.mozillademos.org/files/15827/Image%20for%20example.png" style="height: 166px; width: 328px;"></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.properties.-ms-scrollbar-highlight-color")}}</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p>Windows Internet Explorer 8+ 以降で対応しています。 <code>-ms-scrollbar-highlight-color</code> 属性は CSS への拡張で、 IE8 標準モードでは <code>scrollbar-highlight-color</code> の別名として使用することができます。</p>
+
+<p>スクロールボックスとは、スクロールバー内の矩形のボックスで、上下または左右に移動することで、画面上のコンテンツの位置を変更することができます。スクロール矢印とは、スクロールバーの端に位置し、矢印が描かれた矩形のボタンで、画面上のコンテンツを上下または左右に少しだけ動かすためのものです。</p>
+
+<p>このプロパティはスクロールバーを表示する要素に適用されます。 CSS は {{CSSXref("overflow")}} プロパティによってすべてのオブジェクトでスクロールが有効になります。</p>
diff --git a/files/ja/web/css/-ms-wrap-margin/index.html b/files/ja/web/css/-ms-wrap-margin/index.html
new file mode 100644
index 0000000000..af3add1678
--- /dev/null
+++ b/files/ja/web/css/-ms-wrap-margin/index.html
@@ -0,0 +1,42 @@
+---
+title: '-ms-wrap-margin'
+slug: Web/CSS/-ms-wrap-margin
+tags:
+  - CSS
+  - CSS プロパティ
+  - 'CSS:Microsoft 拡張'
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Archive/Web/CSS/-ms-wrap-margin
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p><strong><code>-ms-wrap-margin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>で、他のシェイプからの内部の折り返し形状をずらすマージンを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>マージンの寸法、負ではない値。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Remarks" name="Remarks">注釈</h2>
+
+<p><code>-ms-wrap-margin</code> プロパティで生成されたオフセットは、除外の外側からのオフセットです。このプロパティはあらゆる対応している長さの値を設定できます。</p>
diff --git a/files/ja/web/css/-webkit-line-clamp/index.html b/files/ja/web/css/-webkit-line-clamp/index.html
new file mode 100644
index 0000000000..8e52755eff
--- /dev/null
+++ b/files/ja/web/css/-webkit-line-clamp/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-line-clamp'
+slug: Web/CSS/-webkit-line-clamp
+tags:
+  - '-webkit-line-clamp'
+  - CSS
+  - CSS Property
+translation_of: Web/CSS/-webkit-line-clamp
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>-webkit-line-clamp</code></strong> CSS プロパティは {{Glossary("block container")}} のコンテンツを指定した行数に制限することができます。</p>
+
+<p>{{cssxref("display")}} プロパティに <code>-webkit-box</code> もしくは <code>-webkit-inline-box</code> が設定されており、かつ {{cssxref("-webkit-box-orient")}} プロパティに <code>vertical</code> が設定されている組み合わせのときのみ使用できます。</p>
+
+<p>ほとんどの場合、 {{cssxref("overflow")}} に <code>hidden</code> を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。</p>
+
+<p>アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: このプロパティは元々WebKitブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。<a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。</p>
+</div>
+
+<h2 id="文法">文法</h2>
+
+<pre class="brush:css notranslate">/* Keyword value */
+-webkit-line-clamp: none;
+
+/* &lt;integer&gt; values */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Global values */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+</pre>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>コンテンツの行数を制限しません。</dd>
+ <dt>{{cssxref("integer")}}</dt>
+ <dd>コンテンツを制限する行数を指定します。0より大きい値でなければなりません。</dd>
+</dl>
+
+<h2 id="例">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  In this example the &lt;code&gt;-webkit-line-clamp&lt;/code&gt; property is set to &lt;code&gt;3&lt;/code&gt;, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("例", "100%", "100")}}</p>
+
+<h2 id="仕様書">仕様書</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("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
+   <td>{{Spec2("CSS3 Overflow")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
+ <li>{{cssxref("line-clamp")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-overflow-scrolling/index.html b/files/ja/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..71ce00aefd
--- /dev/null
+++ b/files/ja/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,89 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - WebKit 拡張
+  - リファレンス
+  - 標準外
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p><code>-webkit-overflow-scrolling</code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティは、指定された要素で<ruby>惰性付き<rp> (</rp><rt>momentum-based</rt><rp>) </rp></ruby>のスクロールを使用するかどうかを制御します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Values" name="Values">値</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>「通常」のスクロールで、タッチパネルから指を離すとすぐにコンテンツはスクロールが停止します。</dd>
+ <dt><code>touch</code></dt>
+ <dd>惰性付きのスクロールで、コンテンツはスクロールのジェスチャーが終了し、タッチパネルから指を離した後もスクロールを続けます。スクロールを続ける速度と期間は、スクロールのジェスチャーがどれだけすばやく行われたかによります。また、新しい重ね合わせコンテキストを生成します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroll-touch"&gt;
+  &lt;p&gt;
+    This paragraph has momentum scrolling
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="scroll-auto"&gt;
+  &lt;p&gt;
+    This paragraph does not.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">Safari CSS Reference に説明</a>があります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Smashing Magazine- describing the effect of scroll bouncing and how it works on different web browsers</a></li>
+</ul>
diff --git a/files/ja/web/css/-webkit-print-color-adjust/index.html b/files/ja/web/css/-webkit-print-color-adjust/index.html
new file mode 100644
index 0000000000..d2a39762fe
--- /dev/null
+++ b/files/ja/web/css/-webkit-print-color-adjust/index.html
@@ -0,0 +1,64 @@
+---
+title: '-webkit-print-color-adjust'
+slug: Web/CSS/-webkit-print-color-adjust
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Non-standard
+  - Web
+translation_of: Web/CSS/-webkit-print-color-adjust
+---
+<div>{{CSSRef}}{{Non-standard_Header}}</div>
+
+<p><strong><code>-webkit-print-color-adjust</code></strong> CSSプロパティは、プリント時に背景色・背景画像の表示を強制できるようにする、WebKitブラウザ上で使用できる非標準のCSSプロパティです。</p>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+-webkit-print-color-adjust: economy;
+-webkit-print-color-adjust: exact;
+
+/* グローバル値 */
+-webkit-print-color-adjust: inherit;
+-webkit-print-color-adjust: initial;
+-webkit-print-color-adjust: unset;
+</pre>
+
+<h2 id="構文">構文</h2>
+
+<p>The <code>-webkit-print-color-adjust</code> 以下のいずれかの値を持ちます。</p>
+
+<h3 id="値">値</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>初期値です。背景色・背景画像はユーザーが明示的にブラウザの設定で許可した場合のみプリントされます。</dd>
+ <dt><code>exact</code></dt>
+ <dd>この値が適用された要素の背景色・背景画像を強制的にプリントします。ユーザーのプリント設定を上書きます。</dd>
+</dl>
+
+<h2 id="例">例</h2>
+
+<pre class="brush: css">/* 黒地に白文字でプリントする */
+article {
+  -webkit-print-color-adjust: exact;
+  background: #222;
+  color: #eee;
+}</pre>
+
+<h2 id="仕様書">仕様書</h2>
+
+<p>Not part of any specification yet, though there is a <a href="http://wiki.csswg.org/ideas/print-backgrounds">proposal in the CSSWG wiki</a> to standardize it.</p>
+
+<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-print-color-adjust")}}</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">bug 64583</a>: "WIP: Add CSS property to control printing of backgrounds for individual elements"</li>
+ <li>CSSWG wiki: <a href="http://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - a proposal to standardize this property</li>
+ <li>CSS Color Module Level 4:  the <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> property - a newer proposal to standardize this property</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-tap-highlight-color/index.html b/files/ja/web/css/-webkit-tap-highlight-color/index.html
new file mode 100644
index 0000000000..dedb683d9d
--- /dev/null
+++ b/files/ja/web/css/-webkit-tap-highlight-color/index.html
@@ -0,0 +1,40 @@
+---
+title: '-webkit-tap-highlight-color'
+slug: Web/CSS/-webkit-tap-highlight-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - WebKit 拡張
+  - 標準外
+translation_of: Web/CSS/-webkit-tap-highlight-color
+---
+<div>{{ CSSRef() }}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>-webkit-tap-highlight-color</code></strong> は CSS の標準外のプロパティで、リンクがタップされている間に表示される強調色を設定します。強調は、ユーザーがタップしたことが正常に認識されていることを示し、またどの要素がタップされているかを示します。</p>
+
+<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red;
+-webkit-tap-highlight-color: transparent; /* 強調をなくす */
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>A {{Cssxref("color value")}}.</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p><em>何れかの仕様書の一部ではありません。</em> Apple では <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">Safari Web Content Guide での説明</a>があります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>WebKit/Safari, Blink/Chrome, 一部のバージョンの Internet Explorer と Microsoft Edge が対応しています。</p>
diff --git a/files/ja/web/css/-webkit-text-fill-color/index.html b/files/ja/web/css/-webkit-text-fill-color/index.html
new file mode 100644
index 0000000000..bf72c45332
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-fill-color/index.html
@@ -0,0 +1,98 @@
+---
+title: '-webkit-text-fill-color'
+slug: Web/CSS/-webkit-text-fill-color
+translation_of: Web/CSS/-webkit-text-fill-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><code><strong>-webkit-text-fill-color</strong></code> はCSSのプロパティで、テキストの文字の色を示します。このプロパティが設定されていない場合、{{cssxref("color")}}プロパティの値が使用されます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;color&gt; 値 */
+-webkit-text-fill-color: red;
+-webkit-text-fill-color: #000000;
+-webkit-text-fill-color: rgb(100, 200, 0);
+
+/* グローバル値 */
+-webkit-text-fill-color: inherit;
+-webkit-text-fill-color: initial;
+-webkit-text-fill-color: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="構文">構文</h2>
+
+<h3 id="値">値</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>文字表面の塗りつぶし色。</dd>
+</dl>
+
+<h3 id="形式構文">形式構文</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="例">例</h2>
+
+<h3 id="色を変える">色を変える</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4] notranslate">p {
+  margin: 0;
+  font-size: 3em;
+  -webkit-text-fill-color: green;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;This text is green.&lt;/p&gt;
+</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("Changing_the_fill_color", "380px", "60px")}}</p>
+
+<h2 id="仕様書">仕様書</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('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'-webkit-text-fill-color' in that document.</small></a></td>
+   <td>標準外で非公式の文書化</td>
+   <td>初回文章化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-text-fill-color")}}</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
+ <li><a href="http://www.coding-dude.com/wp/css/css-stroke-text/">CSS Stroke Text: The Definitive Guide</a> by Coding Dude</li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.html b/files/ja/web/css/-webkit-text-stroke-color/index.html
new file mode 100644
index 0000000000..629533528e
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-stroke-color/index.html
@@ -0,0 +1,110 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+  - 標準外
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;color&gt; 値 */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* グローバル値 */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>角の色。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Text with stroke&lt;/p&gt;
+&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
+
+<pre class="brush: js notranslate">var colorPicker = document.querySelector("input");
+colorPicker.addEventListener("change", function(evt) {
+  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
+});</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "500px", "100px")}}</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('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small>文書内の '-webkit-text-stroke-color'</small></a></td>
+   <td>標準外で非公式の文書化</td>
+   <td>初回文書化</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.-webkit-text-stroke-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.html b/files/ja/web/css/-webkit-text-stroke-width/index.html
new file mode 100644
index 0000000000..4c76360a01
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-stroke-width/index.html
@@ -0,0 +1,121 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit
+  - WebKit 拡張
+  - 標準外
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* &lt;length&gt; 値 */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* グローバル値 */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>角の太さ。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+</pre>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;p id="thin"&gt;Thin stroke&lt;/p&gt;
+&lt;p id="medium"&gt;Medium stroke&lt;/p&gt;
+&lt;p id="thick"&gt;Thick stroke&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p>
+
+<h2 id="Specifications" name="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('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small>文書内の '-webkit-text-stroke-width'</small></a></td>
+   <td>標準外で非公式の文書化</td>
+   <td>初回文書化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-touch-callout/index.html b/files/ja/web/css/-webkit-touch-callout/index.html
new file mode 100644
index 0000000000..b5629e728c
--- /dev/null
+++ b/files/ja/web/css/-webkit-touch-callout/index.html
@@ -0,0 +1,63 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+  - 'recipe:css-property'
+  - リファレンス
+  - レイアウト
+  - 標準外
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p>
+
+<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* グローバル値 */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>既定のコールアウトが表示されます。</dd>
+ <dt><code>none</code></dt>
+ <dd>コールアウト表示が無効になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">.example {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</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.properties.-webkit-touch-callout")}}</p>
diff --git a/files/ja/web/css/@charset/index.html b/files/ja/web/css/@charset/index.html
new file mode 100644
index 0000000000..7cf9f35ab1
--- /dev/null
+++ b/files/ja/web/css/@charset/index.html
@@ -0,0 +1,79 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@charset
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>@charset</code></strong> <a href="/ja/docs/CSS/At-rule" title="At-rule">at-規則</a> は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。<a href="/ja/docs/CSS/Syntax#nested_statements" title="CSS/Syntax#nested_statements">入れ子の文</a> でないとしても、<a href="/ja/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">条件付きグループ規則</a> では使えません。複数の <code>@charset</code> at-規則が定義されると、最初のものだけが使われます。HTML 要素の <code>style</code> 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。</p>
+
+<pre class="brush: css no-line-numbers">@charset "utf-8";</pre>
+
+<p>この at-規則は、{{cssxref("content")}} のような CSS プロパティで非 ASCII 文字を使う際に便利です。</p>
+
+<p>スタイルシートの文字エンコーディングを定義する方法は複数あるので、ブラウザは次の手順を順番に試します (そして 1 つでも結果が得られると止めます):</p>
+
+<ol>
+ <li>ファイル先頭にある <a href="http://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%88%E9%A0%86%E3%83%9E%E3%83%BC%E3%82%AF" title="http://en.wikipedia.org/wiki/Byte_order_mark">Unicode byte-order</a> 文字 (BOM) の値</li>
+ <li><code>Content-Type:</code> HTTP ヘッダーの <code>charset</code> 属性、またはスタイルシートを送るのに使われたプロトコル内の同等のものから、得られた値</li>
+ <li>CSS の <code>@charset</code> at-規則</li>
+ <li>文書参照で定義されている文字エンコーディングを使用。{{HTMLElement("link")}} 要素の <code>charset</code> 属性です。この方式は HTML5 で廃止されており、使うべきではありません。</li>
+ <li>文書が UTF-8 だと仮定する</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre>@charset "UTF-8";
+@charset "iso-8859-15";
+</pre>
+
+<p>ここでは:</p>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>charset</em></dt>
+ <dd style="margin: 0 40px;">使う文字エンコーディングを意味する {{cssxref("&lt;string&gt;")}} です。<a href="http://www.iana.org/assignments/character-sets">IANA-registry</a> で定義されているウェブセーフな文字エンコーディングの名前でなければなりません。この名前は必ず 1 文字分の空白文字 (U+0020) の後に続き、二重引用符で囲われ、セミコロン記号で終わる必要があります。もし 1 つのエンコーディングに複数の名前が関連付けられている場合には、<em>preferred</em> とマークされているものだけが使われる必要があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@charset "UTF-8";       /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/
+@charset 'iso-8859-15'; /* 無効です。正しくない引用符が使用されています */
+ @charset "UTF-8";      /* 無効です。at-規則より前に文字（空白）があります */
+@charset UTF-8;         /* 無効です。' か " がなく、文字セットは CSS の {{cssxref("&lt;string&gt;")}} ではありません */
+</pre>
+
+<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('CSS2.1', 'syndata.html#x57', '@charset') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
+
+
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/ja/web/css/@counter-style/additive-symbols/index.html b/files/ja/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..7bb0386728
--- /dev/null
+++ b/files/ja/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,87 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+tags:
+  - '@counter-style'
+  - CSS
+  - CSS カウンタースタイル
+  - CSS 記述子
+  - リファレンス
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>additive-symbols</code></strong> 記述子で、カウンターの {{cssxref('system')}} 記述子が加算的 (<code>additive</code>) な場合の記号を指定することができます。 <code>additive-symbols</code> 記述子では<em>加算的なタプル</em>を、それぞれ記号と非負数の整数による重みの組で定義します。加算的なシステムは、ローマ数字のような <a href="http://en.wikipedia.org/wiki/Sign-value_notation">sign-value numbering</a> を構築するために使われます。</p>
+
+<pre class="brush: css no-line-numbers">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<p><code>system</code> 記述子が <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code>, <code>fixed</code> の場合は、 <code>additive-symbols</code> の代わりに {{cssxref('symbols')}} 記述子を使用してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+  &lt;li&gt;Five&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: V 5, IV 4, I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}、 匿名のカウンタースタイルを作成するために使用される関数形式の記述方法です。</li>
+</ul>
diff --git a/files/ja/web/css/@counter-style/index.html b/files/ja/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..a634e3ba0a
--- /dev/null
+++ b/files/ja/web/css/@counter-style/index.html
@@ -0,0 +1,171 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - At-rule
+  - CSS
+  - CSS Counter
+  - CSS カウンター
+  - Reference
+  - counter
+translation_of: Web/CSS/@counter-style
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>@counter-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で、スタイルにあらかじめ設定されたものではないカウンターのスタイルを定義することができます。 <code>@counter-style</code> 規則はカウンターの値をどのように文字列表現に変換するかを定義します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+  suffix: " ";
+}
+
+ul {
+  list-style: thumbs;
+}</pre>
+
+<p>初期バージョンの CSS では、有用なカウンターのスタイルのセットを定義していました。しかし、年月が経つにつれて、あらかじめ定義されたセットに他のスタイルが追加され、世界中の記法のニーズを満たすにはこのシステムでは不十分になりました。 <code>@counter-style</code> @規則は、あらかじめ定義されたスタイルがニーズに合っていないときに独自のカウンタースタイルを定義できるようにすることで、この欠点を完全に解決します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<p>各 <code>@counter-style</code> は名前で識別され、記述子のセットを持ちます。</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>カウンターの整数値を文字列表現に変換するために使用するアルゴリズムを指定します。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>値が負の数の時に、カウンター表現の前又は後に追加する記号を指定します。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>マーカー表現の前に追加する記号を指定します。接頭辞は表現の最終段階で追加されるため、カウンターの最終的な表現では、負号の前に来ます。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>prefix 記述子と同様に、マーカー表現に追加される記号を指定します。接尾辞はマーカー表現の後に来ます。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>カウンタースタイルが適用される値の範囲を定義します。カウンタースタイルが範囲を外れたカウンター値を表現するために使用されると、カウンタースタイルにはフォールバックスタイルが代用されます。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>マーカー表現に最少文字数を適用する必要がある場合に使用されます。例えば、カウンターが 01 から始まって 02、03、04 のように進む場合は、パッド文字が使用されます。指定されたパッド値よりも長い文字数の場合は、マーカーは通常通りに構築されます。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>指定したシステムでカウンター値の表現を構築できない場合や、カウンター値が指定された範囲の外にあった場合に、代わりに使用されるシステムを指定します。指定されたフォールバックも値の表現に失敗した場合は、フォールバックスタイルのフォールバックがあれば、それが使用されます。フォールバックシステムが記述されていない場合や、フォールバックシステムのチェーンがカウンター値を表現できなかった場合は、最終的に decimal スタイルにフォールバックされます。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd>マーカー表現に使用される記号を指定します。記号は文字列、画像、カスタム識別子を含むことができます。記号がマーカー表現を構築するためにどのように使用されるかは、 system 記述子で指定されたアルゴリズムによります。例えば、 system が fixed に指定されていた場合は、この記述子で N 個の記号が指定されていると、カウンターの最初の N 個の記号を表すために使用されます。記号のセットを使い切ると、リストの残りにはフォールバックスタイルが使用されます。<br>
+ <br>
+ 以下の <code>@counter-style</code> 規則では、文字の記号ではなく画像を使用しています。画像の値に記号を使用するのは現在のところ「リスクのある」機能で、実装されているブラウザーはありません。
+ <pre class="brush: css notranslate">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>symbols 記述子で指定された記号は、多くのアルゴリズムではマーカーを構築するために使用されますが、 'addaptive' などの一部のシステムではこの記述子の<em>加算的タプル</em>に依存します。それぞれの加算的タプルはカウンター記号と、非負の整数の重みによって成ります。加算的タプルは重みの降順で指定しなければなりません。</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>読み上げソフトのような音声シンセサイザーで、カウンタースタイルを読み上げる方法を記述します。例えば、マーカー記号の値はこの記述子の値に応じて、順序付きリストでは数値やアルファベットとして、順序なしリストでは合図として読み上げられることがあります。</dd>
+</dl>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_symbols_with_counter-style" name="Specifying_symbols_with_counter-style">counter-style で記号を設定</h3>
+
+<pre class="brush: css notranslate">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<p>上記のカウンタースタイル規則は、このようにリストに適用されます。</p>
+
+<pre class="brush: css notranslate">.items {
+  list-style: circled-alpha;
+}
+</pre>
+
+<p>このようなリストを生み出します。</p>
+
+<p>Ⓐ One<br>
+ Ⓑ Two<br>
+ Ⓒ Three<br>
+ Ⓓ Four<br>
+ Ⓔ FIve<br>
+ ...<br>
+ ...<br>
+ Ⓨ Twenty Five<br>
+ Ⓩ Twenty Six<br>
+ 27 Twenty Seven<br>
+ 28 Twenty Eight<br>
+ 29 Twenty Nine<br>
+ 30 Thirty</p>
+
+<p>他の例は<a href="https://mdn.github.io/css-examples/counter-style-demo/">デモページ</a>をご覧ください。</p>
+
+<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 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.counter-style")}}</p>
+
+<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+
+<ul>
+ <li>Gecko は <code>@counter-style</code> の <code>system</code> および <code>fallback</code> 記述子の値として <code>none</code> を許容していましたが、これは仕様書が無効な @ 規則として扱うべきとしています。 Firefox の新しいパラレル CSS エンジン (<a class="external external-icon" href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース済み) ではこれを修正されました ({{bug(1377414)}})。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}, {{Cssxref("list-style-type")}}</li>
+ <li>無名のカウンタースタイルを作成する関数表記である {{cssxref("symbols", "symbols()")}}</li>
+ <li>CSS の {{Cssxref("counter")}} および {{Cssxref("counters")}} 関数</li>
+ <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">カウンタースタイルのデモ</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">コード</a>)</li>
+</ul>
diff --git a/files/ja/web/css/@counter-style/prefix/index.html b/files/ja/web/css/@counter-style/prefix/index.html
new file mode 100644
index 0000000000..b69e7d4fcc
--- /dev/null
+++ b/files/ja/web/css/@counter-style/prefix/index.html
@@ -0,0 +1,96 @@
+---
+title: prefix
+slug: Web/CSS/@counter-style/prefix
+tags:
+  - '@counter-style'
+  - CSS
+  - CSS カウンタースタイル
+  - CSS 記述子
+  - リファレンス
+translation_of: Web/CSS/@counter-style/prefix
+---
+<div>{{CSSRef}}</div>
+
+<p>{{cssxref('@counter-style')}} 規則の <code><strong>prefix</strong></code> 記述子は、マーカーに先立って表示される内容を指定します。指定されていない場合、既定値は <code>""</code> (空文字列) になります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;symbol&gt; 値 */
+prefix: "»";
+prefix: "Page ";
+prefix: url(bullet.png);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>マーカーに先立って表示される <code>&lt;symbol&gt;</code> を指定します。 {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;custom-ident&gt;")}} の何れかです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="index"&gt;
+  &lt;li&gt;The Boy Who Lived&lt;/li&gt;
+  &lt;li&gt;The Vanishing Glass&lt;/li&gt;
+  &lt;li&gt;The Letters from No One&lt;/li&gt;
+  &lt;li&gt;The Keeper of the Keys&lt;/li&gt;
+  &lt;li&gt;Diagon Alley&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style chapters {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  prefix: 'Chapter ';
+}
+
+.index {
+  list-style: chapters;
+  padding-left: 15ch;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.counter-style.prefix")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}}、 匿名のカウンタースタイルを作成するために使用される関数形式の記述方法です。</li>
+</ul>
diff --git a/files/ja/web/css/@document/index.html b/files/ja/web/css/@document/index.html
new file mode 100644
index 0000000000..00087b8d9e
--- /dev/null
+++ b/files/ja/web/css/@document/index.html
@@ -0,0 +1,89 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+tags:
+  - '@-規則'
+  - '@document'
+  - CSS
+  - Reference
+translation_of: Web/CSS/@document
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>@document</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で、文書の URL に基づいて、その中に含まれるスタイル規則を制約します。これは主にユーザー定義スタイルシート用に設計されていますが、独自定義スタイルシートにも使うことができます。</p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>@document</code> 規則には 1 つ以上のマッチング関数を指定します。関数が URL に適用されると、規則がその URL に効果を及ぼします。利用可能な関数は次の通りです。</p>
+
+<ul>
+ <li><code>url()</code>: 正確な URL に一致します。</li>
+ <li><code>url-prefix()</code>: 文書の URL が指定された値で始まる場合に一致します。</li>
+ <li><code>domain()</code>: 文書の URL が指定されたドメイン (またはそのサブドメイン) にある場合に一致します。</li>
+ <li><code>media-document()</code>: 動画、画像、プラグイン、またはそのすべての引数</li>
+ <li><code>regexp()</code>: 文書の URL が、指定された<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>に一致する場合に一致します。正規表現は URL 全体に一致する必要があります。</li>
+</ul>
+
+<p><code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, <code>media-document()</code> 関数に与える値は、単一引用符または二重引用符で囲うこともできます。 <code>regexp()</code> 関数に与える値は、引用符で囲む<strong>必要があります</strong>。</p>
+
+<p><code>regexp()</code> 関数に与えるエスケープされた値は、 CSS によってさらにエスケープする必要があります。例えば、一つの <code>.</code> (ピリオド) は正規表現ではどんな文字にも一致します。リテラルのピリオドに一致させるには、まず正規表現の規則を使ってエスケープし (<code>\.</code> にします)、次に CSS の規則を使ってエスケープしなければなりません (<code>\\.</code> にします)。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: このプロパティの -moz 接頭辞がついたバージョン <code>@-moz-document</code> があります。これは Firefox 59 の Nightly および Beta で、潜在的な CSS インジェクション攻撃を緩和するための実験として、ユーザー定義スタイルシートとユーザーエージェントスタイルシートでしか使用できないように制限されました ({{bug(1035091)}} を参照)。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@document url("http://www.w3.org/"),
+          url-prefix("http://www.w3.org/Style/"),
+          domain("mozilla.org"),
+          media-document("video"),
+          regexp("https:.*") {
+  /* ここの CSS 規則は次の場所に適用されます。
+     - "http://www.w3.org/" のページ
+     - URL が "http://www.w3.org/Style/" で始まるすべてのページ
+     - URL のホストが "mozilla.org" である、
+       または ".mozilla.org" で終わるすべてのページ
+     - スタンドアロンビデオ
+     - URL が "https:" で始まるページ */
+
+  /* 上で挙げたページを見辛くする */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h3 id="Workaround_for_non-supporting_browsers" name="Workaround_for_non-supporting_browsers">未対応のブラウザーでの回避策</h3>
+
+<p><code>@document</code> は今のところ Firefox しか対応していません。もし、Firefox 以外のブラウザーでこのような機能を使用して複製したい場合は、 @An-Error94 による<a href="https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill">このポリフィル</a>を使用してみてください。これは、ユーザースクリプト、 <a href="/ja/docs/Web/HTML/Global_attributes/data-*">data-* 属性</a>、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を組み合わせて使用しています。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">当初</a>は {{SpecName('CSS3 Conditional')}} にありましたが、 <code>@document</code> は Level 4 に <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">延期されました</a>。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>www-style メーリングリストの <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a></li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..b10d04d028
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-display/index.html
@@ -0,0 +1,116 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - '@font-face'
+  - CSS
+  - CSS フォント
+  - CSS 記述子
+  - font-display
+  - ウェブフォント
+  - フォント
+  - リファレンス
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-display</code></strong> 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>フォントの表示戦略はユーザーエージェントが定義します。</dd>
+ <dt><code>block</code></dt>
+ <dd>フォントに対して短いブロック期の後、永続的にスワップ期を置きます。</dd>
+ <dt><code>swap</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。</dd>
+ <dt><code>fallback</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。</dd>
+ <dt><code>optional</code></dt>
+ <dd>フォントに対して非常に短いブロック期の後、スワップ期を置きません。</dd>
+</dl>
+
+<h2 id="Description" name="Description">説明</h2>
+
+<h3 id="The_font_display_timeline" name="The_font_display_timeline">フォント表示の過程</h3>
+
+<p>フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。</p>
+
+<dl>
+ <dt>フォントブロック期</dt>
+ <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は <em>不可視の</em> 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd>
+ <dt>フォントスワップ期</dt>
+ <dd>フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。</dd>
+ <dt>フォント失敗期</dt>
+ <dd>フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_fallback_font-display" name="Specifying_fallback_font-display">font-display のフォールバックを指定する</h3>
+
+<pre class="brush: css; highlight[7] notranslate">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-family/index.html b/files/ja/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..39aa78e3a9
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-family/index.html
@@ -0,0 +1,89 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - '@font-face'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-family</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;string&gt; 値 */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;custom-ident&gt; 値 */
+font-family: examplefont;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>フォントファミリーの名前を指定します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_the_font_family_name" name="Setting_the_font_family_name">フォントファミリー名の設定</h3>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+</pre>
+
+<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 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.font-family")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html
new file mode 100644
index 0000000000..1704f1d662
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-stretch/index.html
@@ -0,0 +1,187 @@
+---
+title: font-stretch
+slug: Web/CSS/@font-face/font-stretch
+tags:
+  - '@font-face'
+  - CSS
+  - Reference
+  - descripter
+  - font-stretch
+  - 記述子
+translation_of: Web/CSS/@font-face/font-stretch
+---
+<div>{{CSSRef}}{{draft}}</div>
+
+<p><strong><code>font-stretch</code></strong> は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。</p>
+
+<p>ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、<code>font-stretch</code> 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* 単一の値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* 複数値 */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+</pre>
+
+<p><code>font-weight</code> プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>普通の文字幅。</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>50% から 200% の {{cssxref("&lt;percentage&gt;")}} 値で示します。このプロパティに負の値は許可されていません。</dd>
+</dl>
+
+<p><code>font-stretch</code> の旧バージョンではプロパティは上記の <code>&lt;percentage&gt;</code> 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により<code>&lt;percentage&gt;</code> も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。</p>
+
+<p>フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。</p>
+
+<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードとパーセント値の対照表</h3>
+
+<p>以下の表はキーワード指定の際の字幅と <code>&lt;percentage&gt;</code> 指定時の幅の違いを示します:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">キーワード</th>
+   <th scope="col">パーセント値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_fonts" name="Variable_fonts">バリアブル (可変) フォント</h3>
+
+<p>ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。</p>
+
+<p>TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。</p>
+
+<p>以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。</p>
+
+<pre class="brush: css">@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>特にフォントの<a href="/ja/docs/Web/CSS/color#Accessibility_concerns">コントラストカラー比が低い</a>場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN 「知覚可能」、ガイドライン 1.4 の説明</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a> (英語)</li>
+</ul>
+
+<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('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.font-stretch")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-style/index.html b/files/ja/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..051fe294c0
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-style/index.html
@@ -0,0 +1,123 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+  - '@font-face'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/@font-face/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-style</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。</p>
+
+<p>特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 <code>font-style</code> 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>フォントファミリの通常の版を選択します。</dd>
+ <dt><code>italic</code></dt>
+ <dd>フォントフェイスが通常のフォントのイタリック版であることを指定します。</dd>
+ <dt><code>oblique</code></dt>
+ <dd>フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。</dd>
+</dl>
+
+<dl>
+ <dt><code>oblique</code> と角度</dt>
+ <dd><code>oblique</code> として分類されたフォントを選択し、テキストの角度を追加で指定します。</dd>
+ <dt><code>oblique</code> と角度の範囲</dt>
+ <dd><code>oblique</code> として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は <code>font-style</code> が <code>oblique</code> であるときにだけ対応しています。 <code>font-style: normal</code> 又は <code>italic</code> の場合は、第二の値は許可されません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_an_italic_font_style" name="Specifying_an_italic_font_style">イタリックフォントスタイルの指定</h3>
+
+<p>例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="スタイルなしの garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。</p>
+
+<p><img alt="人工的に傾けた garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>一方で、フォントファミリに真にイタリックである版がある場合、 <code>src</code> 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものでは<strong>ありません</strong>。</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  font-style: italic;
+}</pre>
+
+<p><img alt="イタリックの garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></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('CSS4 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>角度の値を付けた oblique キーワードを追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.font-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.html b/files/ja/web/css/@font-face/font-variation-settings/index.html
new file mode 100644
index 0000000000..5c26e1956a
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-variation-settings/index.html
@@ -0,0 +1,89 @@
+---
+title: font-variation-settings
+slug: Web/CSS/@font-face/font-variation-settings
+tags:
+  - '@font-face'
+  - CSS
+  - CSS Descriptor
+  - CSS Fonts
+  - CSS 記述子
+  - Reference
+translation_of: Web/CSS/@font-face/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-variation-settings</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* OpenType 軸名の値を設定 */
+font-variation-settings: "xhgt" 0.7;</pre>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>テキストは既定の設定を使用してレイアウトされます。</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("&lt;string&gt;")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 <code>&lt;string&gt;</code> の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 <code>&lt;number&gt;</code> は小数や負の数を取ることができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}</pre>
+
+<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('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.font-variation-settings")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html
new file mode 100644
index 0000000000..77106d3ea9
--- /dev/null
+++ b/files/ja/web/css/@font-face/font-weight/index.html
@@ -0,0 +1,179 @@
+---
+title: font-weight
+slug: Web/CSS/@font-face/font-weight
+tags:
+  - '@font-face'
+  - At-rule descriptor
+  - CSS
+  - Reference
+  - descriptor
+  - font-weight
+translation_of: Web/CSS/@font-face/font-weight
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>font-weight</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。</p>
+
+<p>特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 <code>font-weight</code> 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。</p>
+
+<p>一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate">/* 単一の値 */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* 複数の値 */
+font-weight: normal bold;
+font-weight: 300 500;
+</pre>
+
+<p><code>font-weight</code> プロパティは、以下に挙げる値のうちの一つを使用して記述します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常のフォントの太さです。 <code>400</code> と同じです。</dd>
+ <dt><code>bold</code></dt>
+ <dd>太字のフォントの太さです。 <code>700</code> と同じです。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>にあるように、共通の太さ名に対応しています。</dd>
+</dl>
+
+<p><code>font-weight</code> 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。</p>
+
+<p>CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。</p>
+
+<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">良くある太さ名の対応</h3>
+
+<p><code>100</code> から <code>900</code> の数値は、おおよそ以下の太さ名に対応します。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">値</th>
+   <th scope="col">太さ名</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
+
+<p>多くのフォントは、<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。</p>
+
+<p>TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_normal_font_weight_in_a_font-face_rule" name="Setting_normal_font_weight_in_a_font-face_rule">@font-face 規則における通常のフォントの太さの設定</h3>
+
+<p>以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。</p>
+
+<pre class="notranslate">@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}</pre>
+
+<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('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.font-weight")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html
new file mode 100644
index 0000000000..2a501194d9
--- /dev/null
+++ b/files/ja/web/css/@font-face/index.html
@@ -0,0 +1,197 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@-規則'
+  - '@規則'
+  - CSS
+  - CSS フォント
+  - Reference
+  - フォント
+  - リファレンス
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@font-face</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。</span> <code>local()</code> 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 <code>url()</code> 関数を使用して指定されたフォントリソースをダウンロードして使用します。</p>
+
+<p><code>@font-face</code> で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。</p>
+
+<p><code>url()</code> と <code>local()</code> を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。</p>
+
+<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>font プロパティの font face 値で使われる名前を指定します。</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>{{cssxref("font-stretch")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-stretch: 50% 200%;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>{{cssxref("font-style")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-style: oblique 20deg 50deg;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>{{cssxref("font-weight")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 <code>font-weight: 100 400;</code> のように二つの値を受け付けます。</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>{{cssxref("font-variant")}} 値です。</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>OpenType フォントで高度な印刷機能を制御することができるようにします。</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。</p>
+
+ <p>ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — <code>format()</code> 関数の中に形式を含めることができます。</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>利用可能な形式は、<code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, <code>"svg"</code> です。</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>フォントで使用される Unicode コードポイントの範囲です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">動作例を見る</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Font_MIME_Types" name="Font_MIME_Types">フォントの MIME タイプ</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>形式</th>
+   <th>MIME タイプ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<ul>
+ <li>フォントのダウンロードは、同一ドメイン制約に従います (フォントファイルは、それらが使用されているページと同じドメインにある必要があります)。 <a href="/ja/docs/HTTP_access_control">HTTP アクセス制御</a>によりこの制限を緩和できます。</li>
+ <li><code>@font-face</code> は CSS セレクターの中で宣言することはできません。例えば、次の例は動作しません。
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<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('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>新しい圧縮アルゴリズムのフォント形式を定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>フォント形式の定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/WOFF">WOFF について</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+ <li><a href="https://coolfont.org">Free Fancy Cool Fonts</a></li>
+</ul>
diff --git a/files/ja/web/css/@font-face/src/index.html b/files/ja/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..3e1b90b644
--- /dev/null
+++ b/files/ja/web/css/@font-face/src/index.html
@@ -0,0 +1,110 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+  - '@font-face'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - CSS Fonts
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>src</code></strong> は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 <code>@font-face</code> 規則を有効にするためには必要です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;url&gt; 値 */
+src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
+src: url(path/to/font.woff);                         /* 相対 URL */
+src: url(path/to/font.woff) format("woff");          /* 明示的な書式 */
+src: url('path/to/font.woff');                       /* 引用符付きの URL */
+src: url(path/to/svgfont.svg#example);               /* フラグメントで識別するフォント */
+
+/* &lt;font-face-name&gt; 値 */
+src: local(font);      /* 引用符なしの名前 */
+src: local(some font); /* 空白が入った名前 */
+src: local("font");    /* 引用符付きの名前 */
+
+/* 複数の項目 */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
+ <dd>{{cssxref("&lt;url&gt;")}} と、続けて任意で <code id="format()">format()</code> 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。</dd>
+ <dt><code>&lt;font-face-name&gt;</code></dt>
+ <dd><code id="local()">local()</code> を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。</p>
+
+<p>CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は <code>@font-face</code> 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 <code>@font-face</code> 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_font_resources_using_url_and_local" name="Specifying_font_resources_using_url_and_local">url() と local() を使用したフォントリソースの指定</h3>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+</pre>
+
+<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 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.src")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-face/unicode-range/index.html b/files/ja/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..691d5e7f17
--- /dev/null
+++ b/files/ja/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,118 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+  - At-rule descriptor
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Experimental
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>unicode-range</code></strong> は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* &lt;unicode-range&gt; 値 */
+unicode-range: U+26;               /* 単一の符号位置 */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* 符号位置の範囲 */
+unicode-range: U+4??;              /* ワイルドカードの範囲 */
+unicode-range: U+0025-00FF, U+4??; /* 複数の値 */
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><em><strong>単一の符号位置</strong></em></dt>
+ <dd>単一の Unicode 符号位置。例: <code>U+26</code>.</dd>
+ <dt><em><strong>符号位置の範囲</strong></em></dt>
+ <dd>Unicode 符号位置の範囲。例えば、 <code>U+0025-00FF</code> は、 <em><code>U+0025</code> から <code>U+00FF</code> の範囲内の全文字を含む</em>こと意味します。</dd>
+ <dt><em><strong>ワイルドカードの範囲</strong></em></dt>
+ <dd>ワイルドカード文字を含む Unicode 符号位置の範囲。 <code>'?'</code> 文字を使用します。例えば、<code>U+4??</code> は <em><code>U+400</code> から <code>U+4FF</code> の範囲の全文字を含む</em>ことを意味します。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_a_different_font_for_a_single_character">Using a different font for a single character</h3>
+
+<p>異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの <em>Helvetica</em> を使用し、アンパサンドにはセリフフォントの <em>Times New Roman</em> を使用します。</p>
+
+<p>CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}</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 Fonts', '#unicode-range-desc', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.font-face.unicode-range")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+</ul>
diff --git a/files/ja/web/css/@font-feature-values/index.html b/files/ja/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..18e2d4f558
--- /dev/null
+++ b/files/ja/web/css/@font-feature-values/index.html
@@ -0,0 +1,97 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+tags:
+  - At-rule
+  - CSS
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@font-feature-values</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule" title="At-rule">アット規則</a>で、OpenType で有効化された特性が異なるものに対して {{cssxref("font-variant-alternates")}} プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。</p>
+
+<p><code>@font-feature-values</code> アット規則は、CSS の最上位で使用することも、任意の <a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">CSS の条件付きグループアット規則</a>の内部で使用することもできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Feature_value_blocks" name="Feature_value_blocks">特性値のブロック</h3>
+
+<dl>
+ <dt><code>@swash</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "swash()", "#swash()")}} 関数記法に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。<code>ident1: 2</code> は正しいですが、<code>ident2: 2 4</code> は正しくありません。</dd>
+ <dt id="@annotation"><code>@annotation</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} 関数記法に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。<code>ident1: 2</code> は正しいですが、<code>ident2: 2 4</code> は正しくありません。</dd>
+ <dt id="@ornaments"><code>@ornaments</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} 関数記法に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。<code>ident1: 2</code> は正しいですが、<code>ident2: 2 4</code> は正しくありません。</dd>
+ <dt id="@stylistic"><code>@stylistic</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} 関数記法に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。<code>ident1: 2</code> は正しいですが、<code>ident2: 2 4</code> は正しくありません。</dd>
+ <dt id="@styleset"><code>@styleset</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} 関数記法に渡される特性名を指定します。<code>ident1: 2 4 12 1</code> は、OpenType 値 <code>ss02</code> および <code>ss04</code>, <code>ss12</code>, <code>ss01</code> にマッピングされます。<code>99</code> よりも大きな値は正しいですが、どの OpenType 値にもマッピングされず、無視されます。</dd>
+ <dt id="@character-variant"><code>@character-variant</code></dt>
+ <dd>{{cssxref("font-variant-alternates")}} の {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} 関数記法に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。<code>ident1: 3</code> は <code>cv03=1</code> にマッピングされ、<code>ident2: 2 4</code> は <code>cv02=4</code> にマッピングされますが、 <code>ident2: 2 4 5</code> は無効です。</dd>
+</dl>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_styleset_in_a_font-feature-values_rule" name="Using_styleset_in_a_font-feature-values_rule">@font-feature-values 規則内での @styleset の使用</h3>
+
+<pre class="brush: css notranslate">/* "nice-style" を Font One に指定するアット規則 */
+@font-feature-values Font One {
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+/* Font Two における "nice-style" のためのアット規則 */
+@font-feature-values Font Two {
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+/* 1 回の宣言でアット規則を適用 */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+</pre>
+
+<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 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.at-rules.font-feature-values")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このアット規則が定義する値を使用する {{cssxref("font-variant-alternates")}} プロパティ。</li>
+</ul>
diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html
new file mode 100644
index 0000000000..8ded925276
--- /dev/null
+++ b/files/ja/web/css/@import/index.html
@@ -0,0 +1,100 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+tags:
+  - '@-規則'
+  - CSS
+  - CSS カスケードと継承
+  - CSS 条件付き規則
+  - メディアクエリ
+  - リファレンス
+translation_of: Web/CSS/@import
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@import</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは<a href="/ja/docs/Web/CSS/Syntax#nested_statements">入れ子になるステートメント</a>ではないので、 <code>@import</code> は<a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">条件付き @-規則グループ</a>の中で使うことはできません。</p>
+
+<pre class="brush: css no-line-numbers">@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);</pre>
+
+<p>{{glossary("user agent", "ユーザーエージェント")}}は未知のメディアタイプのリソースを受け取ることを拒否することができるので、特定のメディアに依存した <code>@import</code> 規則を指定することができます。これらの条件付きインポートは、 URL の後でカンマ区切りの<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>で指定します。メディアクエリがないと、インポートは無条件で行われます。メディアに <code>all</code> を指定しても同じ効果になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">@import <var>url</var>;
+@import <var>url</var> <var>list-of-media-queries</var>;
+@import <var>url</var> supports( <var>supports-query</var> );
+@import <var>url</var> supports( <var>supports-query</var> ) <var>list-of-media-queries</var>;
+</pre>
+
+<p>内容は次の通りです。</p>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>インポートするリソースの位置を表す {{CSSxRef("&lt;string&gt;")}} または {{CSSxRef("&lt;url&gt;")}} です。 URL は絶対パス相対パスでも構いません。なお、 Mozilla パッケージでは URL はファイルを指定する必要はありません。パッケージ名やその一部で指定すると、自動的に適切なファイルが選択されます (例 <code>chrome://communicator/skin/</code>)。詳しくは<a href="/ja/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">こちらをご覧ください</a>。</dd>
+ <dt><em>list-of-media-queries</em></dt>
+ <dd>リンクした URL で定義された CSS 規則の適用の条件を示す、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>のカンマ区切りのリストです。ブラウザーがメディアクエリに対応していない場合、リンクされたリソースは読み込まれません。</dd>
+ <dt><em>supports-query</em></dt>
+ <dd>{{CSSxRef("@supports", "&lt;supports-condition&gt;", "#Syntax")}} または {{CSSxRef("Syntax", "&lt;declaration&gt;", "#CSS_declarations")}} のどちらかです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<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("CSS4 Cascade", "#at-import", 'the <code>@import</code> rule')}}</td>
+   <td>{{Spec2("CSS4 Cascade")}}</td>
+   <td>{{CSSxRef("@supports")}} 構文に対応するよう構文を拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>単純な <a href="/ja/docs/Web/CSS/@media#Media_types" title="CSS/@media#Media_types">メディアタイプ</a> だけでなく、いかなるメディアクエリもサポートするよう構文拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>スタイルシートの URL の記述する {{CSSxRef("&lt;string&gt;")}} のサポートを追加し、<br>
+    <code>@import</code> ルールを CSS 文書の最初に入れることを条件化</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.import")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("@media")}}</li>
+ <li>{{CSSxRef("@supports")}}</li>
+</ul>
diff --git a/files/ja/web/css/@keyframes/index.html b/files/ja/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..5858a51c9b
--- /dev/null
+++ b/files/ja/web/css/@keyframes/index.html
@@ -0,0 +1,145 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+tags:
+  - '@-規則'
+  - CSS
+  - CSS アニメーション
+  - Reference
+  - アニメーション
+translation_of: Web/CSS/@keyframes
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>@keyframes</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。</span>これにより、アニメーションの中間ステップを <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>よりも詳細に制御できます。</p>
+
+<pre class="brush: css no-line-numbers">@keyframes slidein {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}</pre>
+
+<p>JavaScript は、 CSS オブジェクトモデルのインターフェイス {{domxref("CSSKeyframesRule")}} によって <code>@keyframes</code> @-規則にアクセスできます。</p>
+
+<p>キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 {{ cssxref("animation-name") }} プロパティで指定したものと同じ名前がついた <code>@keyframes</code> 規則を作成します。それぞれの <code>@keyframes</code> 規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。</p>
+
+<p>キーフレームは任意の順番で並べることができます。それらは、作動する時を示すパーセント値の順番に従って制御されます。</p>
+
+<h3 id="Valid_keyframe_lists" name="Valid_keyframe_lists">有効なキーフレームのリスト</h3>
+
+<p>キーフレーム規則にアニメーションの開始と終了の状態 (<code>0%</code>/<code>from</code> と <code>100%</code>/<code>to</code>) を明示しない場合、ブラウザはその要素の既存のスタイルを開始・終了の状態として用います。これは、その要素を初期状態からアニメーションさせて元に戻すという処理に利用できます。</p>
+
+<p>キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。</p>
+
+<h3 id="Resolving_duplicates" name="Resolving_duplicates">重複の解決</h3>
+
+<p>複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。 <code>@keyframes</code> 規則がカスケード的に継承されることはないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。</p>
+
+<p>指定されたアニメーションのタイムオフセットが重複している場合は、 <code>@keyframes</code> 規則内のそのパーセント値を持つすべてのキーフレームがそのフレームに使用されます。 <code>@keyframes</code> 規則の中で、同じパーセント値を指定した複数のキーフレームがカスケード的に継承されます。</p>
+
+<h3 id="When_properties_are_left_out_of_some_keyframes" name="When_properties_are_left_out_of_some_keyframes">一部のキーフレームでプロパティが指定されていない場合</h3>
+
+<p>一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>この例では、 {{ cssxref("top") }} プロパティは <code>0%</code>, <code>30%</code>, <code>100%</code> のキーフレームでアニメーション指定されています。また、 {{ cssxref("left") }} プロパティは <code>0%</code>, <code>68%</code>, <code>72%</code>, <code>100%</code> のキーフレームで指定されています。</p>
+
+<h3 id="キーフレームが複数宣言された場合">キーフレームが複数宣言された場合</h3>
+
+<p>キーフレームが複数宣言されているものの、アニメーションで作用する全てのプロパティがそれぞれのキーフレームに存在するわけではない場合、これらのキーフレームで指定されたすべての値が適用されます。例えば、</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+</pre>
+
+<p>この例では、 <code>50%</code> のキーフレームで、使用される値は <code>top: 10px</code> と <code>left: 20px</code> です。</p>
+
+<p>{{ fx_minversion_inline("14") }} カスケード的なキーフレームは Firefox 14 から対応しています。</p>
+
+<h3 id="!important_in_a_keyframe" name="!important_in_a_keyframe">キーフレーム内の <code>!important</code></h3>
+
+<p>キーフレーム内で <code>!important</code> が付けられた宣言は無視されます。</p>
+
+<pre class="brush: css">@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* 無視される */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* 無視される */
+         margin-bottom: 50px; }
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident")}}</dt>
+ <dd>キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。</dd>
+ <dt><code>from</code></dt>
+ <dd>アニメーションの始まりである <code>0%</code> を示します。</dd>
+ <dt><code>to</code></dt>
+ <dd>アニメーションの終わりである <code>100%</code> を示します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>指定したキーフレームがアニメーションの中で作動する時間を示すパーセント値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの利用</a> を参照してください。</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 Animations', '#keyframes', '@keyframes') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.keyframes")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..0f0a90b57e
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-device-pixel-ratio/index.html
@@ -0,0 +1,58 @@
+---
+title: '-moz-device-pixel-ratio'
+slug: Web/CSS/@media/-moz-device-pixel-ratio
+tags:
+  - '@media'
+  - CSS
+  - Deprecated
+  - Non-standard
+  - media feature
+translation_of: Web/CSS/@media/-moz-device-pixel-ratio
+---
+<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}</div>
+
+<p><strong><code>-moz-device-pixel-ratio</code></strong> は Gecko 独自の <a href="/ja/docs/Web/CSS">CSS</a> の Gecko のみの<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。</p>
+
+<div class="warning">
+<p><strong>この特性を使用しないでください。</strong> <code><a href="/ja/docs/Web/CSS/@media/resolution">resolution</a></code> 特性と <code>dppx</code> の単位を代わりに使用してください。unit instead.</p>
+</div>
+
+<div class="note"><strong>注</strong>: このメディア特性は Webkit 及び <a href="https://msdn.microsoft.com/ja/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> でも <code>-webkit-device-pixel-ratio</code> として実装されています。 min 及び max 接頭辞は、 Gecko では <code>min--moz-device-pixel-ratio</code> 及び <code>max--moz-device-pixel-ratio</code> です。しかし、同じ接頭辞が Webkit では <code>-webkit-min-device-pixel-ratio</code> 及び <code>-webkit-max-device-pixel-ratio</code> として実装されています。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>CSS ピクセルあたりのデバイスピクセル数。</dd>
+</dl>
+
+<p><br>
+ <strong>メディア:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受付:</strong> はい</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_compatibility_example" name="Basic_compatibility_example">基本的な互換コード</h3>
+
+<p><code>-moz-device-pixel-ratio</code> は Firefox のバージョン 16 以前や、 <code>dppx</code> に未対応の WebKit ベースのブラウザーの <code>-webkit-device-pixel-ratio</code> との互換性のために使用されることがあります。</p>
+
+<p>例:</p>
+
+<pre class="brush: css notranslate">@media (-webkit-min-device-pixel-ratio: 2), /* Webkit ベースのブラウザー */
+       (min--moz-device-pixel-ratio: 2),    /* 古い Firefox ブラウザー (Firefox 16 以前) */
+       (min-resolution: 2dppx),             /* 標準の方法 */
+       (min-resolution: 192dpi)             /* dppx のフォールバック */ </pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>resolution</code> 及び <code>dppx</code> に関わる互換性の良い習慣については、 <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG の記事</a>を参照してください。</p>
+</div>
+
+<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.at-rules.media.-moz-device-pixel-ratio")}}</p>
diff --git a/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html
new file mode 100644
index 0000000000..5f41e28efb
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-mac-graphite-theme/index.html
@@ -0,0 +1,35 @@
+---
+title: '-moz-mac-graphite-theme'
+slug: Web/CSS/@media/-moz-mac-graphite-theme
+tags:
+  - '-moz-mac-graphite-theme'
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - メディア特性
+translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (例えば to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p>
+</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-mac-graphite-theme</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーが Mac OS X の "Graphite" テーマを有効にしているかどうかでスタイルを適用するために使用することができます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>ユーザーが Mac OS X で "Graphite" を使用するよう端末を設定している場合、これは 1 になります。ユーザーが標準の青い表示を使用しているか、 Mac OS X ではない場合、これは 0 になります。</dd>
+</dl>
+
+<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受付:</strong> いいえ</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この特性は、 CSS の {{CSSxRef(":-moz-system-metric/mac-graphite-theme", ":-moz-system-metric(mac-graphite-theme)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と深く関係しています。</li>
+</ul>
diff --git a/files/ja/web/css/@media/-moz-maemo-classic/index.html b/files/ja/web/css/@media/-moz-maemo-classic/index.html
new file mode 100644
index 0000000000..dfecdc64b9
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-maemo-classic/index.html
@@ -0,0 +1,30 @@
+---
+title: '-moz-maemo-classic'
+slug: Web/CSS/@media/-moz-maemo-classic
+tags:
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - メディア特性
+  - 標準外
+translation_of: Archive/Web/CSS/@media/-moz-maemo-classic
+---
+<p>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</p>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-maemo-classic</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーエージェントが Maemo のオリジナルのテーマを使用しているかどうかでスタイルを適用するために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>ユーザーエージェントがオリジナルのテーマで Maemo を使用している場合、これは 1 です。もっと新しい Fremantle テーマを使用している場合は、これは 0 です。</dd>
+</dl>
+
+<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受付:</strong> いいえ</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この特性は CSS の {{CSSxRef(":-moz-system-metric(maemo-classic)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>に対応します。</li>
+</ul>
diff --git a/files/ja/web/css/@media/-moz-os-version/index.html b/files/ja/web/css/@media/-moz-os-version/index.html
new file mode 100644
index 0000000000..10e70bc450
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-os-version/index.html
@@ -0,0 +1,35 @@
+---
+title: '-moz-os-version'
+slug: Web/CSS/@media/-moz-os-version
+tags:
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - メディア特性
+  - 標準外
+translation_of: Archive/Web/CSS/@media/-moz-os-version
+---
+<div>{{cssref}}{{Non-standard_header}}
+<div class="note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p>
+</div>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-os-version</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーの Microsoft Windows のバージョンによってスタイルを適用するために使用することができます。これはユーザーのオペレーティングシステムのバージョンに応じてアプリケーションのスキンやその他のクロームコードを適用するのに便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>windows-win7</code></dt>
+ <dd>ユーザーは Windows 7 オペレーティングシステムを利用しています。</dd>
+ <dt><code>windows-win8</code></dt>
+ <dd>ユーザーは Windows 8 オペレーティングシステムを利用しています。</dd>
+ <dt><code>windows-win10</code></dt>
+ <dd>ユーザーは Windows 10 オペレーティングシステムを利用しています。</dd>
+</dl>
+
+<p><br>
+ <strong>メディア:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受付:</strong> いいえ</p>
diff --git a/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
new file mode 100644
index 0000000000..81a7c78396
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-windows-accent-color-in-titlebar'
+slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+tags:
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - メディア特性
+  - 標準外
+translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p>
+</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-moz-windows-accent-color-in-titlebar</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、 Microsoft Windows のタイトルバーで強調色が有効であるかどうかでスタイルを適用するために使用することができます。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>最新の Windows のバージョンでは、ウィンドウのタイトルバーで強調色が有効であれば、これは 1 です。それ以外は 0 です。</dd>
+</dl>
+
+<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受付:</strong> いいえ</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この特性は、 CSS から Windows 強調色及び重複テキスト強調色にアクセスできるという点で、 Mozilla 独自の {{CSSxRef("&lt;color&gt;")}} 値である <code>-moz-win-accentcolor</code> 及び <code>-moz-win-accentcolortext</code> と深く関係しています。</li>
+</ul>
diff --git a/files/ja/web/css/@media/-moz-windows-classic/index.html b/files/ja/web/css/@media/-moz-windows-classic/index.html
new file mode 100644
index 0000000000..3c8754a33b
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-windows-classic/index.html
@@ -0,0 +1,35 @@
+---
+title: '-moz-windows-classic'
+slug: Web/CSS/@media/-moz-windows-classic
+tags:
+  - '-moz-windows-classic'
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - メディア特性
+translation_of: Archive/Web/CSS/@media/-moz-windows-classic
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd><span class="seoSummary">Windows をテーマなしで (uxtheme を使用しない classic モードで) 使用しているユーザーの場合は、 1 になります。そうでなければ 0 になります。</span></dd>
+</dl>
+
+<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受け付け:</strong> なし</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この機能は CSS の {{CSSxRef(":-moz-system-metric/windows-classic", ":-moz-system-metric(windows-classic)")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>に対応します。</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
+</ul>
diff --git a/files/ja/web/css/@media/-moz-windows-theme/index.html b/files/ja/web/css/@media/-moz-windows-theme/index.html
new file mode 100644
index 0000000000..288987c972
--- /dev/null
+++ b/files/ja/web/css/@media/-moz-windows-theme/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-windows-theme'
+slug: Web/CSS/@media/-moz-windows-theme
+tags:
+  - '-moz-windows-theme'
+  - '@media'
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - メディア特性
+  - 標準外
+translation_of: Archive/Web/CSS/@media/-moz-windows-theme
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Mozilla/Firefox/Releases/58">Firefox 58</a> 以降、このメディア特性はウェブコンテンツでは利用できなくなりました。内部 (e.g. to XUL / chrome code) でのみ利用できます。詳しくは {{bug(1396066)}} をご覧ください。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-windows-theme</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は Gecko 独自のもので、ユーザーの Windows のテーマに合わせてアプリケーションのスキンやその他のクロムコードをカスタマイズするのに便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-windows-theme</code> 特性は現在使用されている Windwos テーマを示すキーワード値です。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p><strong>メディア:</strong> {{CSSxRef("Media/Visual")}}<br>
+ <strong>min/max 接頭辞の受け付け:</strong> なし</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+</ul>
diff --git a/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..f8a9df9419
--- /dev/null
+++ b/files/ja/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -0,0 +1,120 @@
+---
+title: '-webkit-device-pixel-ratio'
+slug: Web/CSS/@media/-webkit-device-pixel-ratio
+tags:
+  - '@media'
+  - CSS
+  - NeedsBrowserCompatibility
+  - Non-standard
+  - WebKit
+  - media feature
+translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
+---
+<div>{{ CSSRef }} {{ Non-standard_header }}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-webkit-device-pixel-ratio</code></strong> 標準外の真偽値<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、標準の<a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a>メディア特性の代替です。</p>
+
+<div class="note">
+<p><strong>注:</strong> このメディア特性は WebKit の機能です。可能であれば、代わりに <a href="/ja/docs/Web/CSS/@media/resolution"><code>resolution</code></a> メディア特性クエリを使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-webkit-device-pixel-ratio</code> 特性は {{cssxref("&lt;number&gt;")}} 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた <strong><code>-webkit-min-device-pixel-ratio</code></strong> 及び <strong><code>-webkit-max-device-pixel-ratio</code></strong> の変化形を使用して、それぞれ最低値と最高値をクエリすることもできます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>CSS の <a href="/ja/docs/Web/CSS/length#Absolute_length_units"><code>px</code></a> を表すために使われるデバイスピクセルの数です。この値は <code>&lt;number&gt;</code> であり、構文的に単位を許可しておらず、暗黙の単位は <a href="/ja/docs/Web/CSS/resolution#dppx"><code>dppx</code></a> です。</dd>
+</dl>
+
+<h2 id="Implementation" name="Implementation">実装</h2>
+
+<pre class="brush: css notranslate">/* "dppx" の単位が含まれています。 */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (min-resolution: 2dppx) { ... }
+
+/* 同様に */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* ... は以下のものと同じです。 */
+@media (max-resolution: 2dppx) { ... }
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a test of your device's pixel density.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* 正確な解像度 */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* 最低解像度 */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* 最高解像度 */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回の標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>標準外の非公式文書</td>
+   <td>初回の文書化</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.-webkit-device-pixel-ratio")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></li>
+ <li>{{cssxref("resolution")}}</li>
+ <li><a href="/ja/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a></li>
+ <li><a href="/ja/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a></li>
+ <li><a href="/ja/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a></li>
+ <li><a href="/ja/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a></li>
+ <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">W3C Suggested Method to UnPrefix</a></li>
+</ul>
diff --git a/files/ja/web/css/@media/-webkit-transform-2d/index.html b/files/ja/web/css/@media/-webkit-transform-2d/index.html
new file mode 100644
index 0000000000..3b4ef6a179
--- /dev/null
+++ b/files/ja/web/css/@media/-webkit-transform-2d/index.html
@@ -0,0 +1,40 @@
+---
+title: '-webkit-transform-2d'
+slug: Web/CSS/@media/-webkit-transform-2d
+tags:
+  - '@media'
+  - CSS
+  - WebKit 拡張
+  - メディア特性
+  - リファレンス
+  - 標準外
+translation_of: Web/CSS/@media/-webkit-transform-2d
+---
+<div>{{ Non-standard_header }}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transform-2d</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、ベンダー接頭辞付きの CSS 2D {{cssxref("transform")}} に対応していれば値が <code>true</code> になります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメディア特性は WebKit でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference に説明</a>があります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li>
+ <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li>
+ <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Test page at quirksmode.org</a></li>
+</ul>
+
+<div>{{ CSSRef }}</div>
diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.html b/files/ja/web/css/@media/-webkit-transform-3d/index.html
new file mode 100644
index 0000000000..55d1da5975
--- /dev/null
+++ b/files/ja/web/css/@media/-webkit-transform-3d/index.html
@@ -0,0 +1,75 @@
+---
+title: '-webkit-transform-3d'
+slug: Web/CSS/@media/-webkit-transform-3d
+tags:
+  - '@media'
+  - CSS
+  - WebKit 拡張
+  - メディア特性
+  - リファレンス
+  - 標準外
+translation_of: Web/CSS/@media/-webkit-transform-3d
+---
+<div>{{ Non-standard_header }}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transform-3d</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が <code>true</code> になります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}</pre>
+
+<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('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回の標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference<br>
+    <small>'media query extensions' in that document.</small></a></td>
+   <td>標準外の非公式文書</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li>
+ <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Test page at quirksmode.org</a></li>
+</ul>
+
+<div>{{ CSSRef }}</div>
diff --git a/files/ja/web/css/@media/-webkit-transition/index.html b/files/ja/web/css/@media/-webkit-transition/index.html
new file mode 100644
index 0000000000..3c4b7b5dd6
--- /dev/null
+++ b/files/ja/web/css/@media/-webkit-transition/index.html
@@ -0,0 +1,61 @@
+---
+title: '-webkit-transition'
+slug: Web/CSS/@media/-webkit-transition
+tags:
+  - '@media'
+  - Blink
+  - CSS
+  - Deprecated
+  - Non-standard
+  - Reference
+  - WebKit
+  - WebKit 拡張
+  - メディア特性
+translation_of: Web/CSS/@media/-webkit-transition
+---
+<div>{{ CSSRef }} {{deprecated_header}} {{ Non-standard_header }}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transition</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、閲覧コンテキストが <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>に対応していれば値が <code>true</code> になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに {{cssxref("@supports")}} 特性クエリを使用してください。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Use_supports_instead" name="Use_supports_instead">代わりに @supports を使用してください</h3>
+
+<p><code>-webkit-transition</code> メディア特性を使用しないでください。代わりに、 CSS の {{cssxref("@supports")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>を用いてトランジションの有無を判定してください。</p>
+
+<pre class="brush: css">@supports (transition: initial) {
+  /* トランジションに対応している場合に使われる CSS */
+}
+</pre>
+
+<h3 id="Obsolete_example" name="Obsolete_example">廃止された例</h3>
+
+<p>廃止される以前、次のように <code>-webkit-transition</code> を使用することができました。</p>
+
+<pre class="brush: css">@media (-webkit-transition) {
+  /* トランジションに対応している場合に使われる CSS */
+}
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p>仕様書では定義されていません。 Apple には <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference に説明</a>があります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディア特性の利用</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("transition")}}</li>
+</ul>
diff --git a/files/ja/web/css/@media/any-hover/index.html b/files/ja/web/css/@media/any-hover/index.html
new file mode 100644
index 0000000000..d7f232b331
--- /dev/null
+++ b/files/ja/web/css/@media/any-hover/index.html
@@ -0,0 +1,74 @@
+---
+title: any-hover
+slug: Web/CSS/@media/any-hover
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/any-hover
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-hover</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、要素の上でホバーすることができる入力メカニズムが<em>何らか</em>利用できるかどうかをテストするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>any-hover</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>差支えなくホバーができる入力メカニズムがないか、又はポインティング入力メカニズムがない。</dd>
+ <dt><code>hover</code></dt>
+ <dd>一つ以上の入力メカニズムが、要素の上で差支えなくホバーすることができる。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.any-hover")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/@media/hover"><code>hover</code> メディア特性</a></li>
+</ul>
diff --git a/files/ja/web/css/@media/any-pointer/index.html b/files/ja/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..d05842a639
--- /dev/null
+++ b/files/ja/web/css/@media/any-pointer/index.html
@@ -0,0 +1,107 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/any-pointer
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>any-pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが (マウスなどの) <em>何かの</em>ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べるために使用することができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <em>第一の</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/pointer">pointer</a></code> を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>any-pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>利用できるポインティングデバイスがありません。</dd>
+ <dt><code>coarse</code></dt>
+ <dd>正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。</dd>
+ <dt><code>fine</code></dt>
+ <dd>正確性が高いポインティングデバイスが、少なくとも一つ含まれています。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 <code>none</code> はポインティングデバイスがない場合のみ一致します。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、粗いポインターを持つユーザーには大きなチェックボックスを生成します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code> メディア特性</a></li>
+</ul>
diff --git a/files/ja/web/css/@media/aspect-ratio/index.html b/files/ja/web/css/@media/aspect-ratio/index.html
new file mode 100644
index 0000000000..e8e8e36864
--- /dev/null
+++ b/files/ja/web/css/@media/aspect-ratio/index.html
@@ -0,0 +1,126 @@
+---
+title: aspect-ratio
+slug: Web/CSS/@media/aspect-ratio
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/aspect-ratio
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>aspect-ratio</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}のアスペクト比を調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>aspect-ratio</code> 特性は、ビューポートの幅対高さのアスペクト比を表現する {{cssxref("&lt;ratio&gt;")}} 値で指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-aspect-ratio</code></strong> および <code><strong>max-aspect-ratio</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例は独自のビューポートを生成する {{htmlElement("iframe")}} に含まれています。 <code>&lt;iframe&gt;</code> の大きさを変更して <code>aspect-ratio</code> の変化を確認してください。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='inner'&gt;
+  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 最小アスペクト比 */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* blue */
+  }
+}
+
+/* 最大アスペクト比 */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* cyan */
+  }
+}
+
+/* 正確なアスペクト比。上書きを防ぐために最下部に配置 */
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* red */
+  }
+}
+</pre>
+
+<div class="hidden">
+<h2 id="_Example">_Example</h2>
+
+<p>used iframe and DataURL to enable this iframe could resize</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
+&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
+&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
+&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
+
+&lt;iframe id="outer" src="data:text/html,&lt;style&gt; @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }&lt;/style&gt;&lt;div id='inner'&gt; Watch this element as you resize your viewport's width and height.&lt;/div&gt;"&gt;
+
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">iframe{
+  display:block;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<div style="overflow: auto;">
+<p>{{ EmbedLiveSample('_Example', '300px', '400px') }}</p>
+</div>
+
+<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('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.aspect-ratio")}}</p>
diff --git a/files/ja/web/css/@media/color-gamut/index.html b/files/ja/web/css/@media/color-gamut/index.html
new file mode 100644
index 0000000000..c052bb4183
--- /dev/null
+++ b/files/ja/web/css/@media/color-gamut/index.html
@@ -0,0 +1,70 @@
+---
+title: color-gamut
+slug: Web/CSS/@media/color-gamut
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/color-gamut
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>color-gamut</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("user agent", "ユーザーエージェント")}}及び出力機器が対応している色のおよその範囲を調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>color-gamut</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>srgb</code></dt>
+ <dd>出力機器が <a href="https://ja.wikipedia.org/wiki/SRGB">sRGB</a> 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。</dd>
+ <dt><code>p3</code></dt>
+ <dd>出力機器が <a href="https://en.wikipedia.org/wiki/DCI-P3">DCI P3 色空間</a>にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。</dd>
+ <dt><code>rec2020</code></dt>
+ <dd>出力機器がおよそ <a href="https://en.wikipedia.org/wiki/Rec._2020">ITU-R 勧告 BT.2020 色空間</a>にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a test.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.color-gamut")}}</p>
diff --git a/files/ja/web/css/@media/color-index/index.html b/files/ja/web/css/@media/color-index/index.html
new file mode 100644
index 0000000000..baeae1cd1b
--- /dev/null
+++ b/files/ja/web/css/@media/color-index/index.html
@@ -0,0 +1,86 @@
+---
+title: color-index
+slug: Web/CSS/@media/color-index
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/color-index
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>color-index</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末の色参照テーブルの項目数を調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p> <code>color-index</code> 特性は {{cssxref("&lt;integer&gt;")}} 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた <strong><code>min-color-index</code></strong> および <code><strong>max-color-index</strong></code> という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;これはテストです。&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Custom_stylesheet" name="Custom_stylesheet">独自スタイルシート</h3>
+
+<p>この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。</p>
+
+<pre class="brush: html notranslate"><code>&lt;link rel="stylesheet" href="http://foo.bar.com/base.css" /&gt;
+&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /&gt;</code></pre>
+
+<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('CSS4 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>値に負の数も取れるようになり、これは偽と計算されるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。値に負の数は指定不可。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.color-index")}}</p>
diff --git a/files/ja/web/css/@media/color/index.html b/files/ja/web/css/@media/color/index.html
new file mode 100644
index 0000000000..f04c2cde11
--- /dev/null
+++ b/files/ja/web/css/@media/color/index.html
@@ -0,0 +1,93 @@
+---
+title: color
+slug: Web/CSS/@media/color
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/color
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>color</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>color</code> 特性は {{cssxref("&lt;integer&gt;")}} 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-color</code></strong> 及び <code><strong>max-color</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に5ビット、緑に6ビット使用する場合は、機器は色成分当たり5ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。</p>
+</div>
+
+<p>CSS を使用して HTML に色を適用することについて、詳しくは <a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>をご覧ください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: black;
+}
+
+/* Any color device */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* 色成分当たり8ビット以上の色を持つ機器 */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>The value can now be negative, in which case it computes to false.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Initial definition. The value must be nonnegative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+ <li>The CSS {{cssxref("color")}} property</li>
+ <li>The CSS {{cssxref("&lt;color&gt;")}} data unit</li>
+</ul>
diff --git a/files/ja/web/css/@media/device-aspect-ratio/index.html b/files/ja/web/css/@media/device-aspect-ratio/index.html
new file mode 100644
index 0000000000..4b2f947935
--- /dev/null
+++ b/files/ja/web/css/@media/device-aspect-ratio/index.html
@@ -0,0 +1,62 @@
+---
+title: device-aspect-ratio
+slug: Web/CSS/@media/device-aspect-ratio
+tags:
+  - '@media'
+  - CSS
+  - ウェブ
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+  - 非推奨
+translation_of: Web/CSS/@media/device-aspect-ratio
+---
+<div>{{cssref}} {{deprecated_header}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-aspect-ratio</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の幅対高さのアスペクト比を調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>device-aspect-ratio</code> 特性は、 {{cssxref("&lt;ratio&gt;")}} で指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-aspect-ratio</code></strong> 及び <code><strong>max-device-aspect-ratio</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}</pre>
+
+<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('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>メディアクエリレベル４で非推奨になりました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p>
diff --git a/files/ja/web/css/@media/device-height/index.html b/files/ja/web/css/@media/device-height/index.html
new file mode 100644
index 0000000000..eb44c03918
--- /dev/null
+++ b/files/ja/web/css/@media/device-height/index.html
@@ -0,0 +1,55 @@
+---
+title: device-height
+slug: Web/CSS/@media/device-height
+tags:
+  - '@media'
+  - CSS
+  - Deprecated
+  - Reference
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/device-height
+---
+<div>{{cssref}} {{deprecated_header}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-height</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の描画面の高さを調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>device-height</code> 特性は、 {{cssxref("&lt;length&gt;")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-height</code></strong> 及び <code><strong>max-device-height</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この HTML は、800ピクセルより短い機器に特別のスタイルシートを適用します。</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /&gt;</pre>
+
+<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('CSS4 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>メディアクエリレベル４で非推奨になりました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.device-height")}}</p>
diff --git a/files/ja/web/css/@media/device-width/index.html b/files/ja/web/css/@media/device-width/index.html
new file mode 100644
index 0000000000..5b43b18229
--- /dev/null
+++ b/files/ja/web/css/@media/device-width/index.html
@@ -0,0 +1,55 @@
+---
+title: device-width
+slug: Web/CSS/@media/device-width
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+  - 非推奨
+translation_of: Web/CSS/@media/device-width
+---
+<div>{{cssref}} {{deprecated_header}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>device-width</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器の描画面の幅を調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>device-width</code> 特性は、 {{cssxref("&lt;length&gt;")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-device-width</code></strong> 及び <code><strong>max-device-width</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この HTML は、800ピクセルより狭い機器に特別のスタイルシートを適用します。</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /&gt;</pre>
+
+<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('CSS4 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>メディアクエリレベル４で非推奨になりました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.device-width")}}</p>
diff --git a/files/ja/web/css/@media/display-mode/index.html b/files/ja/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..ccbc387df1
--- /dev/null
+++ b/files/ja/web/css/@media/display-mode/index.html
@@ -0,0 +1,88 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+  - '@media'
+  - CSS
+  - display
+  - display-mode
+  - ウェブアプリマニフェスト
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>display-mode</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。</p>
+
+<p>この特性は、ウェブアプリマニフェストの <a href="/ja/docs/Web/Manifest#display"><code>display</code></a> メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリは、ウェブアプリマニフェストの有無にかかわらず適用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>display-mode</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">表示モード</th>
+   <th scope="col">説明</th>
+   <th scope="col">表示モードのフォールバック</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>利用可能な表示領域がすべて使用され、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されません。</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>アプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>アプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。</td>
+   <td>(なし)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<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('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>
diff --git a/files/ja/web/css/@media/grid/index.html b/files/ja/web/css/@media/grid/index.html
new file mode 100644
index 0000000000..20264e07d0
--- /dev/null
+++ b/files/ja/web/css/@media/grid/index.html
@@ -0,0 +1,91 @@
+---
+title: grid
+slug: Web/CSS/@media/grid
+tags:
+  - '@media'
+  - CSS
+  - grid
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/grid
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>grid</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。</p>
+
+<p>現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>grid</code> 特性は {{cssxref("&lt;mq-boolean&gt;")}} 値 (<code>0</code> 又は <code>1</code>) として指定し、出力機器がグリッドベースであるかどうかを表します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="unknown"&gt;I don't know if you're using a grid device. :-(&lt;/p&gt;
+&lt;p class="bitmap"&gt;You are using a bitmap device.&lt;/p&gt;
+&lt;p class="grid"&gt;You are using a grid device! Neato!&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#grid', 'grid')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.grid")}}</p>
diff --git a/files/ja/web/css/@media/height/index.html b/files/ja/web/css/@media/height/index.html
new file mode 100644
index 0000000000..c9154f7cd7
--- /dev/null
+++ b/files/ja/web/css/@media/height/index.html
@@ -0,0 +1,82 @@
+---
+title: height
+slug: Web/CSS/@media/height
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/height
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>height</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}の高さ (又は<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>のページボックスの高さ) に基づいてスタイルを適用するために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>height</code> 特性は、ビューポートの高さを表す {{cssxref("&lt;length&gt;")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-height</code></strong> 及び <code><strong>max-height</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;ビューポートの高さを変更しながら、この要素を見ていてください。&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 正確な高さ */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小高 */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大高 */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</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('CSS4 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>値に負の数を取ることができるようになり、この場合は false と計算されます。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。値は非負でなければなりませんでした。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.height")}}</p>
diff --git a/files/ja/web/css/@media/hover/index.html b/files/ja/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..7c6604d40c
--- /dev/null
+++ b/files/ja/web/css/@media/hover/index.html
@@ -0,0 +1,68 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/hover
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>hover</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、<em>第一の</em>入力機構が要素の上でホバーすることができるかどうかをテストするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>hover</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的にホバーを実現する)、又は第一の入力機構がない。</dd>
+ <dt><code>hover</code></dt>
+ <dd>第一の入力機構が、要素の上で差支えなくホバーすることができる。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Try hovering over me!&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#hover', 'hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html
new file mode 100644
index 0000000000..c513968094
--- /dev/null
+++ b/files/ja/web/css/@media/index.html
@@ -0,0 +1,157 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - '@-規則'
+  - '@media'
+  - CSS
+  - Reference
+  - 条件付き
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@media</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、一つまたは複数の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>の結果に基づいて、スタイルシートの一部を適用するために使用することができます。</span>これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> JavaScript では、 <code>@media</code> を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p>
+
+<pre class="brush: css no-line-numbers">/* コードの最上位 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 他の条件付き＠規則の中にネスト */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+</pre>
+
+<p>メディアクエリの文法について詳しくは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディアクエリの利用</a>を参照してください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Media_features" name="Media_features">メディア特性</h2>
+
+<p>{{page("/ja/docs/Web/CSS/Media_Queries/Using_media_queries","Media features")}}</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+</pre>
+
+<p>Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。</p>
+
+<pre class="brush: css">@media (height &gt; 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 700px) {
+    body { line-height: 1.4; }
+}
+</pre>
+
+<p>他の例については、<a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a>をご覧ください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>サイトの文字の大きさを調整する人のために、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>で {{cssxref("&lt;length&gt;")}} が必要な時には <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> を使用してください。</p>
+
+<p><code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> および <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">px</a></code> はどちらも有効な単位ですが、 <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。</p>
+
+<p>また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 <code>prefers-reduced-motion</code> は<a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します</a>。</p>
+
+<h2 id="Security" name="Security">セキュリティ</h2>
+
+<p>メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。</p>
+
+<p>この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。</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('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>Level 4 で除外された <code>light-level</code>, <code>inverted-colors</code> およびカスタムメディアクエリを復帰。<br>
+    <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, <code>prefers-color-scheme</code> の各メディア特性を追加。</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td><code>@media</code> 規則の基本的な構文を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>
+    <p>メディア特性 <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, <code>overflow-inline</code> を追加。<br>
+     <code>screen</code>, <code>print</code>, <code>speech</code>, <code>all</code> を除くすべてのメディアタイプを非推奨に指定。<br>
+     構文をもっと柔軟にし、他の事の間に <code>or</code> キーワードを追加。</p>
+   </td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>初回定義</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></li>
+ <li>JavaScript では <code>@media</code> は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。</li>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li>
+ <li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li>
+</ul>
diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html
new file mode 100644
index 0000000000..b8b8d56198
--- /dev/null
+++ b/files/ja/web/css/@media/index/index.html
@@ -0,0 +1,12 @@
+---
+title: 索引
+slug: Web/CSS/@media/Index
+tags:
+  - '@media'
+  - CSS
+  - 索引
+translation_of: Web/CSS/@media/Index
+---
+<p>{{CSSRef}}</p>
+
+<p>{{Index("/ja/docs/Web/CSS/@media")}}</p>
diff --git a/files/ja/web/css/@media/inverted-colors/index.html b/files/ja/web/css/@media/inverted-colors/index.html
new file mode 100644
index 0000000000..6b5353f258
--- /dev/null
+++ b/files/ja/web/css/@media/inverted-colors/index.html
@@ -0,0 +1,81 @@
+---
+title: inverted-colors
+slug: Web/CSS/@media/inverted-colors
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/inverted-colors
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>inverted-colors</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、{{glossary("user agent", "ユーザーエージェント")}}またはその下の OS が色を反転しているかどうかを調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>inverted-colors</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>色が通常通り表示されます。</dd>
+ <dt><code>inverted</code></dt>
+ <dd>表示領域内のすべてのピクセルが反転されています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;If you're using inverted colors, this text should be blue on white (the inverse of yellow on black). If you're not, it should be red on light gray.&lt;/p&gt;
+&lt;p&gt;If the text is gray, your browser doesn't support the `inverted-colors` media feature.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
diff --git a/files/ja/web/css/@media/monochrome/index.html b/files/ja/web/css/@media/monochrome/index.html
new file mode 100644
index 0000000000..82e5a0ece3
--- /dev/null
+++ b/files/ja/web/css/@media/monochrome/index.html
@@ -0,0 +1,81 @@
+---
+title: monochrome
+slug: Web/CSS/@media/monochrome
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/monochrome
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>light-level</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>monochrome</code> 特性は {{cssxref("&lt;integer&gt;")}} 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-monochrome</code></strong> 及び <code><strong>max-monochrome</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="mono"&gt;この機器はモノクロピクセルに対応しています。&lt;/p&gt;
+&lt;p class="no-mono"&gt;この機器はモノクロピクセルに対応していません。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  display: none;
+}
+
+/* 任意のモノクロ機器 */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* 任意のモノクロでない機器 */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>値に負の数が取れるようになり、この場合は false と計算される。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。負の値は使用不可。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.monochrome")}}</p>
diff --git a/files/ja/web/css/@media/orientation/index.html b/files/ja/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..3d10aab23a
--- /dev/null
+++ b/files/ja/web/css/@media/orientation/index.html
@@ -0,0 +1,96 @@
+---
+title: orientation
+slug: Web/CSS/@media/orientation
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、{{glossary("viewport", "ビューポート")}} (または<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>ではページボックス) の向きを調べるために使用することができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> この特性は<em>端末</em>の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>orientation</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<h3 id="Keyword_values" name="Keyword_values">キーワード値</h3>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。</dd>
+ <dt><code>landscape</code></dt>
+ <dd>ビューポートは横長です。つまり、幅が高さよりも大きい状態です。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Box 1&lt;/div&gt;
+&lt;div&gt;Box 2&lt;/div&gt;
+&lt;div&gt;Box 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.orientation")}}</p>
diff --git a/files/ja/web/css/@media/overflow-block/index.html b/files/ja/web/css/@media/overflow-block/index.html
new file mode 100644
index 0000000000..78205ff244
--- /dev/null
+++ b/files/ja/web/css/@media/overflow-block/index.html
@@ -0,0 +1,73 @@
+---
+title: overflow-block
+slug: Web/CSS/@media/overflow-block
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/overflow-block
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>overflow-block</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、初期<a href="/ja/docs/Web/CSS/All_about_the_containing_block">包含ブロック</a>をブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overflow-block</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>ブロック軸方向にあふれたコンテンツは表示されません。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。</dd>
+ <dt><code>optional-paged</code></dt>
+ <dd>ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で ({{cssxref("break-inside")}} などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。</dd>
+ <dt><code>paged</code></dt>
+ <dd>コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.overflow-block")}}</p>
diff --git a/files/ja/web/css/@media/overflow-inline/index.html b/files/ja/web/css/@media/overflow-inline/index.html
new file mode 100644
index 0000000000..2b0a2d67d4
--- /dev/null
+++ b/files/ja/web/css/@media/overflow-inline/index.html
@@ -0,0 +1,75 @@
+---
+title: overflow-inline
+slug: Web/CSS/@media/overflow-inline
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/overflow-inline
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>overflow-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、初期<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>をインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overflow-inline</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>インライン軸方向にあふれたコンテンツは表示されません。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  white-space: nowrap;
+}
+
+@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.at-rules.media.overflow-inline")}}</div>
diff --git a/files/ja/web/css/@media/pointer/index.html b/files/ja/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..c912376e81
--- /dev/null
+++ b/files/ja/web/css/@media/pointer/index.html
@@ -0,0 +1,103 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>pointer</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、<em>主要な</em>ポインティングデバイスにどれだけの正確性があるかを調べます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <em>すべての</em>ポインティングデバイスの正確性を調べたい場合は、代わりに <code><a href="/ja/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>pointer</code> 特性は、以下の一覧の中から一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>主要な入力メカニズムに、ポインティングデバイスがありません。</dd>
+ <dt><code>coarse</code></dt>
+ <dd>主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。</dd>
+ <dt><code>fine</code></dt>
+ <dd>主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Look at me!&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code> メディア特性</a></li>
+</ul>
diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.html b/files/ja/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..6a22ffbc04
--- /dev/null
+++ b/files/ja/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,108 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - Web
+  - prefers-color-scheme
+  - ウェブ
+  - メディア特性
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<div class="blockIndicator note">
+<p><code>privacy.resistFingerprinting</code> を <strong>true</strong> に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は <code>light</code> に上書きされます。<br>
+ あるいは、ユーザーは <code>ui.systemUsesDarkTheme</code> という数値設定を作成して既定の動作を上書きし、 <code>light</code> (値: 0)、 <code>dark</code> (値: 1)、 <code>no-preference</code> (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は <code>light</code> を返します。)</p>
+</div>
+
+<p><strong><code>prefers-color-scheme</code></strong> は <a href="/ja/docs/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a> では <code>false</code> と評価されます。</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="day"&gt;Day (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Day (changes in light scheme)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Day (changes in dark scheme)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Night (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Night (changes in light scheme)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Night (changes in dark scheme)&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
+ <li><a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a>, <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a> での色スキームの変更</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ja/web/css/@media/prefers-contrast/index.html b/files/ja/web/css/@media/prefers-contrast/index.html
new file mode 100644
index 0000000000..b055d572b4
--- /dev/null
+++ b/files/ja/web/css/@media/prefers-contrast/index.html
@@ -0,0 +1,95 @@
+---
+title: prefers-contrast
+slug: Web/CSS/@media/prefers-contrast
+tags:
+  - CSS
+  - Reference
+  - media feature
+  - メディア特性
+translation_of: Web/CSS/@media/prefers-contrast
+---
+<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong>この機能はどのユーザーエージェントも対応しておらず、仕様が変更されることがあります。</p>
+</div>
+
+<p><strong><code>prefers-contrast</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。</dd>
+ <dt><code>high</code></dt>
+ <dd>ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。</dd>
+ <dt><code><dfn>low</dfn></code></dt>
+ <dd>ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。</dd>
+</dl>
+
+<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2>
+
+<p>現在のところ、この機能を実装しているユーザエージェントはありませんが、様々なオペレーティングシステムがこのような設定をサポートしており、このメディアクエリが実装されると、ユーザエージェントはおそらくオペレーティングシステムによって提供される設定に依存することになるでしょう。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 現在、この機能を実装しているブラウザはないため、次の例は動作しません。</p>
+</div>
+
+<p>この例では、既定でいまいましい低いコントラストが与えられています。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="notranslate">&lt;div class="contrast"&gt;low contrast box&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="notranslate">.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.prefers-contrast")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>Microsoft <a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a> media feature</li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</p>
diff --git a/files/ja/web/css/@media/prefers-reduced-motion/index.html b/files/ja/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..b284267a69
--- /dev/null
+++ b/files/ja/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,133 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<p><strong><code>prefers-reduced-motion</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。</p>
+
+<div class="blockIndicator warning">
+<p><strong>重要:</strong> このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。</dd>
+</dl>
+
+<h2 id="User_preferences" name="User_preferences">ユーザー設定</h2>
+
+<p>Firefox では、 <code><dfn>reduce</dfn></code> の要求は以下の場合に尊重されます。</p>
+
+<ul>
+ <li>GTK/GNOME では、 GNOME Tweaks &gt; General タブ (バージョンによっては Appearance タブ) &gt; Animations がオフになっている場合。
+  <ul>
+   <li>他にも、 <code>gtk-enable-animations = false</code> を <a href="https://wiki.archlinux.org/index.php/GTK#Configuration">GTK 3 configuration file</a> の <code>[Settings]</code> に追加する方法もあります。</li>
+  </ul>
+ </li>
+ <li>Windows 10: 設定 &gt; 簡単操作 &gt; ディスプレイ &gt; アニメーションを表示する</li>
+ <li>Windows 7: コントロールパネル &gt; コンピューターの簡単操作センター &gt; コンピューターでの作業に集中しやすくします &gt; 必要のないアニメーションは無効にします (可能な場合)</li>
+ <li>macOS: システム設定 &gt; アクセシビリティ &gt; 表示 &gt; 動きの抑制</li>
+ <li>iOS: 設定 &gt; 一般 &gt; アクセシビリティ &gt; 視覚効果を減らす</li>
+ <li>Android 9 以上: 設定 &gt; ユーザー補助 &gt; アニメーションの削除</li>
+ <li>Firefox では <code>about:config</code>: 数値型の設定項目 <code>ui.prefersReducedMotion</code> を追加し、値を <code>1</code> とします。この設定の変更は直ちに効果が現れます。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.animation {
+  animation: pulse 1s linear infinite both;
+}
+
+/* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. */
+@media (prefers-reduced-motion) {
+  .animation {
+    animation-name: dissolve;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.animation {
+  background-color: #306;
+  color: #fff;
+  font: 1.2em sans-serif;
+  width: 10em;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  25% { transform: scale(.9); }
+  50% { transform: scale(1); }
+  75% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+@keyframes dissolve {
+  0% { opacity: 1; }
+  50% { opacity: 0.8; }
+  100% { opacity: 1; }
+}
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query (CSS Tricks)</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion (WebKit Blog)</a> includes vestibular motion trigger examples.</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ja/web/css/@media/resolution/index.html b/files/ja/web/css/@media/resolution/index.html
new file mode 100644
index 0000000000..b71f0311f8
--- /dev/null
+++ b/files/ja/web/css/@media/resolution/index.html
@@ -0,0 +1,85 @@
+---
+title: resolution
+slug: Web/CSS/@media/resolution
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/resolution
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>resolution</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末のピクセル解像度をテストするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>resolution</code> 特性は、出力端末のピクセル解像度を表す {{cssxref("&lt;resolution&gt;")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-resolution</code></strong> および <code><strong>max-resolution</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This is a test of your device's pixel density.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* 正確な解像度 */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* 最小解像度 */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* 最大解像度 */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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 Media Queries', '#resolution', 'resolution')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.resolution")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("window.devicePixelRatio")}}</li>
+</ul>
diff --git a/files/ja/web/css/@media/scan/index.html b/files/ja/web/css/@media/scan/index.html
new file mode 100644
index 0000000000..a67c63a5f9
--- /dev/null
+++ b/files/ja/web/css/@media/scan/index.html
@@ -0,0 +1,88 @@
+---
+title: scan
+slug: Web/CSS/@media/scan
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/scan
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>scan</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、 (もしあれば) 出力端末で使用されているスキャン方式を調べるために使用することができます。ここで使われる<em>スキャン</em>という言葉は、写真をディジタル化するためのイメージスキャナを指すものではありません。そうではなく、テレビ画面 (またはその他の端末) に画像を描画するプロセスを意味します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>scan</code> 特性は以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>interlace</code></dt>
+ <dd>その端末では奇数の走査線と偶数の走査線を別々に描きます。一部のテレビはインターレスのスキャン方式を採用しています。</dd>
+ <dt><code>progressive</code></dt>
+ <dd>その端末ではすべての走査線を順番に描きます。コンピューターの画面はすべてプログレッシブのスキャン方式を採用しています。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;この画面がインターレスで描画されていると、
+   文字列はサンセリフのフォントになります。プログレッシブのスキャン方式では、
+   セリフフォントで見えるでしょう。&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.scan")}}</p>
diff --git a/files/ja/web/css/@media/scripting/index.html b/files/ja/web/css/@media/scripting/index.html
new file mode 100644
index 0000000000..7b967b5148
--- /dev/null
+++ b/files/ja/web/css/@media/scripting/index.html
@@ -0,0 +1,91 @@
+---
+title: scripting
+slug: Web/CSS/@media/scripting
+tags:
+  - '@media'
+  - CSS
+  - Media Queries
+  - Reference
+  - media feature
+  - メディアクエリ
+  - メディア特性
+translation_of: Web/CSS/@media/scripting
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>scripting</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>scripting</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>スクリプトは現在の文書で全く利用できません。</dd>
+ <dt><code>initial-only</code></dt>
+ <dd>スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。</dd>
+ <dt><code>enabled</code></dt>
+ <dd>現在の文書がスクリプトに対応しており、有効です。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: htm notranslatel notranslate">&lt;p class="script-none"&gt;スクリプトは利用できません。 :-(&lt;/p&gt;
+&lt;p class="script-initial-only"&gt;スクリプトはページを読み込んでいる間だけ有効です。残念。&lt;/p&gt;
+&lt;p class="script-enabled"&gt;スクリプトは有効です。 :-)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS5 Media Queries', '#scripting', 'scripting')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.scripting")}}</p>
diff --git a/files/ja/web/css/@media/shape/index.html b/files/ja/web/css/@media/shape/index.html
new file mode 100644
index 0000000000..88a428d1c6
--- /dev/null
+++ b/files/ja/web/css/@media/shape/index.html
@@ -0,0 +1,94 @@
+---
+title: shape
+slug: Web/CSS/@media/shape
+tags:
+  - '@-規則'
+  - '@media'
+  - At-rule
+  - CSS
+  - Reference
+  - メディア特性
+translation_of: Web/CSS/@media/shape
+---
+<div>{{CSSRef}} {{ Non-standard_header }}</div>
+
+<p><code>shape</code> は <a href="/ja/docs/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>shape</code> は識別機能であり、四角い画面を表す <code>rect</code> または丸や楕円の画面を表す <code>round</code> の二つの文字列のうちの一つで指定します。</p>
+
+<dl>
+ <dt><code><dfn>rect</dfn></code></dt>
+ <dd>形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。</dd>
+ <dt><code><dfn>round</dfn></code></dt>
+ <dd>形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 現在この特性に対応しているブラウザーはありません。</p>
+</div>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Hello World!&lt;/h1&gt;
+</pre>
+
+<h4 id="CSS" name="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+</pre>
+
+<h3 id="Custom_stylesheet" name="Custom_stylesheet">カスタムスタイルシート</h3>
+
+<p>この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。</p>
+
+<pre class="brush: html notranslate"><code>&lt;head&gt;
+    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
+<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
+    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
+&lt;/head&gt;
+</code></pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></td>
+   <td>草稿</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.shape")}}</p>
diff --git a/files/ja/web/css/@media/update-frequency/index.html b/files/ja/web/css/@media/update-frequency/index.html
new file mode 100644
index 0000000000..ac3b99b545
--- /dev/null
+++ b/files/ja/web/css/@media/update-frequency/index.html
@@ -0,0 +1,81 @@
+---
+title: update
+slug: Web/CSS/@media/update-frequency
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/update-frequency
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>scripting</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p> <code>update</code> 特性は、以下の一覧のうち一つのキーワード値で指定します。</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。</dd>
+ <dt><code>slow</code></dt>
+ <dd>通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。</dd>
+ <dt><code>fast</code></dt>
+ <dd>レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>のような恒常的な更新を使用することができます。例: コンピューターの画面。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;このテキストが動いていれば、高速に更新できる端末を使用しています。&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS4 Media Queries', '#update', 'update')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.media.update")}}</p>
diff --git a/files/ja/web/css/@media/width/index.html b/files/ja/web/css/@media/width/index.html
new file mode 100644
index 0000000000..88f07e05bf
--- /dev/null
+++ b/files/ja/web/css/@media/width/index.html
@@ -0,0 +1,82 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - '@media'
+  - CSS
+  - メディアクエリ
+  - メディア特性
+  - リファレンス
+translation_of: Web/CSS/@media/width
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>width</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は、{{glossary("viewport", "ビューポート")}}の幅 (又は<a href="/ja/docs/Web/CSS/Paged_media">ページ付きメディア</a>のページボックスの幅) をテストするために使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>width</code> 特性は、ビューポートの幅を表す {{cssxref("&lt;length&gt;")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた <strong><code>min-width</code></strong> 及び <code><strong>max-width</strong></code> の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;ビューポートの幅を変更しながらこの要素を見ていてください。&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* 正確な幅 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小幅 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大幅 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example','90%')}}</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('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>値に負の数を取ることができるようになり、この場合は false と計算されます。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義。値は非負でなければなりませんでした。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.media.width")}}</p>
diff --git a/files/ja/web/css/@namespace/index.html b/files/ja/web/css/@namespace/index.html
new file mode 100644
index 0000000000..8e8fc4643f
--- /dev/null
+++ b/files/ja/web/css/@namespace/index.html
@@ -0,0 +1,80 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - '@-規則'
+  - CSS
+  - CSS 名前空間
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/@namespace
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@namespace</code></strong> は、<a href="/ja/docs/Glossary/CSS">CSS</a> <a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a> で使用する <a href="/ja/docs/Namespaces">XML 名前空間</a>を定義する <a href="/ja/docs/Web/CSS/At-rule" title="CSS at-rules">@-規則</a>です。定義済みの名前空間は、<a href="/ja/docs/Web/CSS/Universal_selectors">全称</a>、<a href="/ja/docs/Web/CSS/Type_selectors">要素型</a>、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性</a>の各<a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクター</a>で、その名前空間内の要素だけを選択するために使用することができます。 <code>@namespace</code> 規則は通常、複数の名前空間を含む文書 (インラインで SVG や MathML を含む HTML5 文書や、複数のボキャブラリが混在する XML 文書など) を扱う際に役立ちます。</span></p>
+
+<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての &lt;a&gt; 要素を選択します。 */
+a {}
+
+/* これはすべての SVG &lt;a&gt; 要素を選択します。 */
+svg|a {}
+
+/* This matches both XHTML and SVG &lt;a&gt; elements */
+*|a {}</pre>
+
+<p><code>@namespace</code> 規則は、スタイルシート内ですべての <a href="/ja/docs/Web/CSS/%40charset">@charset</a> および <a href="/ja/docs/Web/CSS/%40import">@import</a> 規則より後、また他の @-規則や<a href="/ja/docs/Web/API/CSSStyleDeclaration">スタイル宣言</a>より前に配置しなければなりません。</p>
+
+<p><code>@namespace</code> は、スタイルシートの<strong>既定の名前空間</strong>を定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター (属性セレクターは除く。後述の注記を参照) は、既定の名前空間内の要素にのみ適用されます。</p>
+
+<p>また、 <code>@namespace</code> 規則で<strong>名前空間の接頭辞</strong>を定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間<em>および</em>要素または属性に一致する場合のみ一致します。</p>
+
+<p><a href="/ja/docs/Glossary/HTML5">HTML5</a> では、既知の<a href="https://html.spec.whatwg.org/#foreign-elements">外来要素</a>へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に <code>xmlns</code> 属性が存在しなくても XHTML 名前空間 (<code>http://www.w3.org/1999/xhtml</code>) に含まれているかのように動作します。また <a href="/ja/docs/Web/SVG/Element/svg">&lt;svg&gt;</a> および <a href="/ja/docs/Web/MathML/Element/math">&lt;math&gt;</a> 要素は、適切な名前空間 (<code>http://www.w3.org/2000/svg</code> および <code>http://www.w3.org/1998/Math/MathML</code>) が割り当てられます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> XML では、属性に直接接頭辞を定義しない限り (<em>例</em>: <code>xlink:href</code>)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* 既定の名前空間 */
+@namespace url(<em>XML-namespace-URL</em>);
+@namespace "<em>XML-namespace-URL</em>";
+
+/* 接頭辞つき名前空間 */
+@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
+@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/ja/web/css/@page/bleed/index.html b/files/ja/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..83bc2b853c
--- /dev/null
+++ b/files/ja/web/css/@page/bleed/index.html
@@ -0,0 +1,81 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - CSS 記述子
+  - Experimental
+  - Reference
+  - bleed
+  - ウェブ
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>bleed</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>記述子は、 {{cssxref("@page")}} @-規則で使用し、ページボックスの外にあるページの裁ち落とし領域の大きさを指定します。このプロパティは、 {{cssxref("@page/marks", "marks")}} プロパティを使用して裁ち落とし記号を有効にしている場合のみ効果があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+bleed: auto;
+
+/* &lt;length&gt; 値 */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{cssxref("@page/marks", "marks")}} が <code>crop</code> の場合、 <code>6pt</code> に計算します。それ以外の場合はゼロに計算します。</dd>
+ <dt><code>{{cssxref("&lt;length&gt;")}}</code></dt>
+ <dd>ページボックスの外に裁ち落とし領域を、各方向に、どれだけ広げるかを指定します。値は負の数にすることができますが、実装に依存する制限があるかもしれません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+}
+</pre>
+
+<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 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("@page/marks", "marks")}}</li>
+ <li>{{Cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/ja/web/css/@page/index.html b/files/ja/web/css/@page/index.html
new file mode 100644
index 0000000000..a03ac2dff6
--- /dev/null
+++ b/files/ja/web/css/@page/index.html
@@ -0,0 +1,110 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - '@page'
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@page</code></strong> は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>クロップや登録マークを文書に追加します。</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>ページのレンダリングがクリップされた場合の、ページボックス間の距離を示します。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>@page</code> ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。</p>
+
+<p><code>@page</code> アット規則は、 CSS オブジェクトモデルインターフェイス {{domxref("CSSPageRule")}} からアクセスできます。</p>
+
+<div class="note"><strong>注:</strong> W3C は、ビューポートに関する {{cssxref("&lt;length&gt;")}} の単位、 <code>vh</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code> の取り扱い方について議論中です。差し当たっては、これらを <code>@page</code> アット規則の中で使わないでください。</div>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="page_pseudo-class_examples" name="page_pseudo-class_examples">@page 擬似クラスの例</h3>
+
+<p><code>@page</code> の さまざまな<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>のページにある例を参照してください。</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<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('CSS Logical Properties', '#page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>:recto</code> 及び <code>:verso</code> ページセレクターを追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>{{SpecName('CSS2.1')}} から変更はないが、 <code>@page</code> 内でより多くの＠規則が利用できるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.page")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> をご覧ください。</li>
+</ul>
diff --git a/files/ja/web/css/@page/marks/index.html b/files/ja/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..eaced148e4
--- /dev/null
+++ b/files/ja/web/css/@page/marks/index.html
@@ -0,0 +1,86 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - CSS 記述子
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>marks</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>記述子は、 {{cssxref("@page")}} @-規則で使用し、文書の表現に対して裁ち落とし記号や十字記号を追加します。<em>裁ち落とし記号</em>はページを切断するべき場所を示します。<em>十字記号</em>はシートの配置のために使用します。</p>
+
+<p>裁ち落とし記号や十字記号はページボックスの外側に印刷されます。裁ち落とし記号や十字記号を表示する余地を確保するため、最終的なページはページボックスよりいくらか大きくする必要があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>裁ち落とし記号を表示します。</dd>
+ <dt><code>cross</code></dt>
+ <dd>十字記号を表示します。</dd>
+ <dt><code>none</code></dt>
+ <dd>記号を表示しません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</pre>
+
+<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 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>この CSS プロパティは当初は CSS Level 2 で提案されましたが、 CSS Level 2 (Revision 1) で落とされました。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.page.marks")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{Cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/ja/web/css/@page/size/index.html b/files/ja/web/css/@page/size/index.html
new file mode 100644
index 0000000000..5193209c53
--- /dev/null
+++ b/files/ja/web/css/@page/size/index.html
@@ -0,0 +1,139 @@
+---
+title: size
+slug: Web/CSS/@page/size
+tags:
+  - '@page'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - Experimental
+  - NeedsBrowserCompatibility
+  - Reference
+  - Web
+translation_of: Web/CSS/@page/size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>size</code></strong> <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>記述子は、 {{cssxref("@page")}} アット規則で使用し、ページを表現するために使用するボックスの寸法と向きを定義します。多くの場合、この寸法は印刷ページの適用可能な対象の寸法に対応します。</p>
+
+<p>寸法は「拡縮可能な」キーワード (この場合、ページの有効な大きさ全体を使用します) 又は絶対的な長さのどちらかで定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* 拡縮可能な寸法のキーワード値 */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* &lt;length&gt; 値 */
+/* 1 値: 高さ = 幅 */
+size: 6in;
+
+/* 2 値: 幅の後に高さ*/
+size: 4in 6in;
+
+/* 絶対寸法のキーワード値 */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* 寸法と方向の混合 */
+size: A4 portrait;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントがページの寸法を決定します。多くの場合、対象となる用紙の寸法と向きが使用されます。</dd>
+ <dt><code>landscape</code></dt>
+ <dd>ページのコンテンツは横向きモード (ボックスの長辺が水平) で表示されます。</dd>
+ <dt><code>portrait</code></dt>
+ <dd>ページのコンテンツは縦向きモード (ボックスの長辺が垂直) で表示されます。これが既定の向きです。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>何らかの長さの値 ({{cssxref("&lt;length&gt;")}} を参照)。最初の値はページボックスの幅に対応し、二番目の値は高さに対応します。一つしか値が提供されない場合は、幅と高さの両方に使用されます。</dd>
+ <dt><code>&lt;page-size&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt>A5</dt>
+  <dd>これは標準の ISO の寸法 148mm x 210mm に一致します。</dd>
+  <dt>A4</dt>
+  <dd>これは標準の ISO の寸法 210mm x 297mm に一致します。 (個人の印刷では最もよく使われる寸法です。)</dd>
+  <dt>A3</dt>
+  <dd>これは標準の ISO の寸法 297mm x 420mm に一致します。</dd>
+  <dt>B5</dt>
+  <dd>これは標準の ISO の寸法 176mm x 250mm に一致します。</dd>
+  <dt>B4</dt>
+  <dd>これは標準の ISO の寸法 250mm x 353mm に一致します。</dd>
+  <dt>JIS-B5</dt>
+  <dd>これは JIS 標準の寸法 182mm x 257mm に対応します。</dd>
+  <dt>JIS-B4</dt>
+  <dd>これは JIS 標準の寸法 257mm x 364mm に対応します。</dd>
+  <dt>letter</dt>
+  <dd>このキーワードは北米のレター用紙の寸法、すなわち 8.5in x 11in と同等です。</dd>
+  <dt>legal</dt>
+  <dd>このキーワードは北米のリーガル用紙の寸法、すなわち 8.5in x 14in と同等です。</dd>
+  <dt>ledger</dt>
+  <dd>このキーワードは北米の ledger 用紙の寸法、すなわち 11in x 17in と同等です。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="寸法と向きの指定">寸法と向きの指定</h3>
+
+<pre class="brush: css notranslate">@page {
+  size: 4in 6in landscape;
+}
+</pre>
+
+<h3 id="media_規則内部の入れ子">@media 規則内部の入れ子</h3>
+
+<pre class="brush: css notranslate">@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}
+</pre>
+
+<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 Paged Media', '#page-size-prop', 'size')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.page.size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+</ul>
diff --git a/files/ja/web/css/@supports/index.html b/files/ja/web/css/@supports/index.html
new file mode 100644
index 0000000000..68aa4f4bc7
--- /dev/null
+++ b/files/ja/web/css/@supports/index.html
@@ -0,0 +1,201 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - supports
+translation_of: Web/CSS/@supports
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@supports</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは<em>機能クエリ</em>と呼ばれます。規則はコードの最上位または他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループアット規則</a>の中に配置することができます。</p>
+
+<pre class="brush: css; no-line-numbers notranslate">@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}</pre>
+
+<pre class="brush: css; no-line-numbers notranslate">@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}</pre>
+
+<p>JavaScript では <code>@supports</code> は CSS オブジェクトモデルインターフェイスの {{DOMxRef("CSSSupportsRule")}} からアクセスできます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>@supports</code> アット規則は、ステートメントのブロックを<em>対応条件</em>に関連付けます。対応条件は1つまたは複数の名前と値の組を結合条件 (<code>and</code>)、非結合条件(<code>or</code>)、否定 (<code>not</code>) で組み合わせたものです。演算子の結合順位は、括弧を使用して変更できます。</p>
+
+<h3 id="Declaration_syntax" name="Declaration_syntax">宣言の構文</h3>
+
+<p>もっとも基本的な対応条件は、単純な宣言 (プロパティ名に続けて、コロンで区切って値) です。宣言は括弧で囲む必要があります。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として <code>5% 5%</code> を有効とみなすのであれば true を返します。</p>
+
+<pre class="brush: css notranslate">@supports (transform-origin: 5% 5%) {}</pre>
+
+<h3 id="Function_syntax" name="Function_syntax">関数構文</h3>
+
+<p>第二の基本的な対応状況は関数の対応であり、これらの構文はすべてのブラウザーで対応されていますが、関数自体はまだ標準化の過程にあります。</p>
+
+<h4 id="selector" name="selector()"><code>selector()</code> {{Experimental_Inline}}</h4>
+
+<p>ブラウザーがテストされたセレクターの構文に対応しているかどうかを検査します。以下の例は、ブラウザーが<a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a>に対応していれば true を返します。</p>
+
+<pre class="brush: css notranslate">@supports selector(A &gt; B) {}</pre>
+
+<h3 id="The_not_operator" name="The_not_operator">not 演算子</h3>
+
+<p><code>not</code> 演算子は、新たな式を作成するために任意の式の前に置くことができ、元の式を否定します。以下の例は、ブラウザーが {{CSSxRef("transform-origin")}} プロパティの値として <code>10em 10em 10em</code> を有効と<strong>みなさない</strong>のであれば true を返します。</p>
+
+<pre class="brush: css notranslate">@supports not (transform-origin: 10em 10em 10em) {}</pre>
+
+<p>他の演算子と同様に、 <code>not</code> 演算子はどれだけ複雑な宣言にも適用できます。以下の例はすべて有効な式です。</p>
+
+<pre class="brush: css notranslate">@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}</pre>
+
+<div class="blockIndicator note style-wrap">
+<p><strong>注:</strong> <code>not</code> 演算子が最上位にある場合は、括弧でくくる必要はありません。 <code>and</code> や <code>or</code> といった他の演算子と組み合わせるときは、括弧が必須です。</p>
+</div>
+
+<h3 id="The_and_operator" name="The_and_operator">and 演算子</h3>
+
+<p><code>and</code> 演算子は 2 つの式から、元の式の論理積で構成される新たな式を作成します。元の式の両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式が同時に true になる場合に限り、全体の式も true になります。</p>
+
+<pre class="brush: css notranslate">@supports (display: table-cell) and (display: list-item) {}</pre>
+
+<p>括弧を増やすことなく、複数の論理積を並記することができます。以下の式はどちらも等価です。</p>
+
+<pre class="brush: css notranslate">@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}</pre>
+
+<h3 id="The_or_operator" name="The_or_operator">or 演算子</h3>
+
+<p><code>or</code> 演算子は 2 つの式から、元の式の論理和で構成される新たな式を作成します。元の式の一方または両方が true になる場合に限り、新たな式が true になります。以下の例では 2 つの式の少なくとも 1 つが true になる場合に限り、全体の式も true になります。</p>
+
+<pre class="brush: css notranslate">@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}</pre>
+
+<p>括弧を増やすことなく、複数の論理和を並記することができます。以下の式はどちらも等価です。</p>
+
+<pre class="brush: css notranslate">@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>and</code> 演算子と <code>or</code> 演算子を両方とも使用するときは、これらを適用する順序を定義するために括弧を使用しなければなりません。そうしなければ、アット規則全体を無視させる無効な条件になります。</p>
+</div>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Testing_for_the_support_of_a_given_CSS_property" name="Testing_for_the_support_of_a_given_CSS_property">指定した CSS プロパティの対応状況を確認する</h3>
+
+<pre class="brush: css notranslate">@supports (animation-name: test) {
+  … /* 接頭辞がないプロパティでアニメーションに対応する場合に適用する CSS */
+  @keyframes { /* 他のアット規則を含むことができる */
+    …
+  }
+}
+</pre>
+
+<h3 id="Testing_for_the_support_of_a_given_CSS_property_or_a_prefixed_version" name="Testing_for_the_support_of_a_given_CSS_property_or_a_prefixed_version">指定した CSS プロパティの対応状況を、接頭辞付きも含めて確認する</h3>
+
+<pre class="brush: css notranslate">@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+         (-ms-perspective: 10px) or (-o-perspective: 10px)) {
+  … /* 接頭辞つきを含めて 3D transforms を対応する場合に適用する CSS */
+}
+</pre>
+
+<h3 id="Testing_for_the_non-support_of_a_specific_CSS_property" name="Testing_for_the_non-support_of_a_specific_CSS_property">指定した CSS プロパティに対応していないことを確認する</h3>
+
+<pre class="brush: css notranslate">@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
+  … /* text-align-last:justify をシミュレートするために適用する CSS */
+}</pre>
+
+<h3 id="Testing_for_the_custom_properties" name="Testing_for_the_custom_properties">カスタムプロパティの対応状況を確認する</h3>
+
+<pre class="brush: css notranslate">@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}</pre>
+
+<h3 id="Testing_for_the_support_of_a_selector" name="Testing_for_the_support_of_a_selector">セレクターの対応の検査 (例: {{CSSxRef(":is", ":is()")}})</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<pre class="brush: css highlight[6, 14] notranslate">/* この規則は :is() に対応していないブラウザーでは適用されません */
+:is(ul, ol) &gt; li {
+  … /* :is(…) セレクターに対応している場合に CSS が適用される */
+}
+
+@supports not selector(:is(a, b)) {
+  /* :is() に対応していない場合の代替 */
+  ul &gt; li,
+  ol &gt; li {
+    … /* 上記のものは :is(…) に対応していないブラウザーのために展開しています */
+  }
+}
+
+/* Note: By far, there's no browser that supports the `of` argument of :nth-child(…) */
+@supports selector(:nth-child(1n of a, b)) {
+  /* This rule needs to be inside the @supports block, otherwise
+     it will be partially applied in browsers which don't support
+     the `of` argument of :nth-child(…) is supported */
+  :is(
+      :nth-child(1n of ul, ol) a,
+      details &gt; summary
+  ) {
+    … /* CSS applied when the :is(…) selector and
+         the `of` argument of :nth-child(…) are both supported */
+  }
+}
+</pre>
+
+<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("CSS4 Conditional", "#at-supports-ext", "@supports")}}</td>
+   <td>{{Spec2("CSS4 Conditional")}}</td>
+   <td><code>selector()</code> 関数を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.supports")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries">機能クエリの使用</a></li>
+ <li>JavaScript で同様のチェックを実行できる、CSSOM の {{DOMxRef("CSSSupportsRule")}} クラスおよび {{DOMxRef("CSS.supports()")}} メソッド</li>
+</ul>
diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..684d82b752
--- /dev/null
+++ b/files/ja/web/css/@viewport/height/index.html
@@ -0,0 +1,85 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p>
+
+<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 1つの値 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用値は他の CSS 記述子の値から計算されます。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>負の数ではない絶対的または相対的な長さです。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3>
+
+<pre class="brush: css notranslate">@viewport {
+  height: 500px;
+}</pre>
+
+<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 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.viewport.height")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
diff --git a/files/ja/web/css/@viewport/index.html b/files/ja/web/css/@viewport/index.html
new file mode 100644
index 0000000000..de6cfc815c
--- /dev/null
+++ b/files/ja/web/css/@viewport/index.html
@@ -0,0 +1,132 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - '@viewport'
+  - At-rule
+  - CSS
+  - Experimental
+  - Layout
+  - Mobile
+  - Reference
+  - Screen Layout
+  - viewport
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <a href="https://github.com/w3c/csswg-drafts/issues/4766">https://github.com/w3c/csswg-drafts/issues/4766</a> に @viewport を標準路線から除外することに関する議論があります。</p>
+</div>
+
+<p><strong><code>@viewport</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、文書を通して表示するための{{glossary("viewport", "ビューポート")}}を構成することができます。第一にモバイル端末のために使用されますが、 (Microsoft Edge などの) "snap to edge" のような機能に対応するデスクトップブラウザーでも使用されます。</p>
+
+<p>パーセント値で指定された長さは、<strong>初期ビューポート</strong>からの相対で計算されます。これはユーザーエージェントや記述されたスタイルがビューポートを調整する機会を持つ前のビューポートです。これはふつう、デスクトップブラウザーのウィンドウの寸法に基づくもので、全画面モードのものではありません。</p>
+
+<p>モバイル端末 (または全画面モードのデスクトップ端末) では、初期ビューポートはふつう端末の画面のうちアプリケーションが利用できる部分です。これは全画面の場合もあれば、全画面からオペレーティングシステムが制御する領域 (タスクバーなど) を引いた部分の場合、アプリケーションが利用できる画面領域 (全画面又は画面からオペレーティングシステムやその他のアプリケーションが所有する領域を引いた部分) の場合もあります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">@viewport {
+  width: 100vw; /*実際のビューポートの幅を端末の幅に設定*/
+}
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: <code>&lt;meta name="viewport"&gt;</code> タグを使用すると、 <code>@viewport</code> より優先します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>このアット規則は波括弧で囲まれた CSS ブロック内に、一連の入れ子になった{{glossary("descriptor (CSS)", "記述子")}}を含みます。</p>
+
+<p><code>1.0</code> または <code>100%</code> の<em>ズーム倍率</em>はズーム無しに相当します。より大きい値はズームイン、より小さい値はズームアウトになります。</p>
+
+<h3 id="Descriptors" name="Descriptors">記述子</h3>
+
+<p>現時点では <code>@viewport</code> のブラウザーの互換性は弱く、対応は Internet Explorer 及び Edge で広く行われています。これらのブラウザーでも、少数の記述子しか利用できません。 <code>@viewport</code> は対応していないブラウザーからは無視され、理解できない記述子は無視されるでしょう。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの幅を決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd><code>min-width</code> と <code>max-width</code> の両方を設定するための一括指定です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>文書が最初に表示されたときの、ビューポートの高さを決めるのに使われます。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd><code>min-height</code> と <code>max-height</code> の両方を設定するための一括指定です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>ズームの初期値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>ズームの最小値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>ズームの最大値を設定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>ユーザーがズーム倍率を変更できるか否かを制御します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>文書の向きを制御します。</dd>
+ <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt>
+ <dd>長方形ではないディスプレイでの文書の表示を制御します。</dd>
+</dl>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_viewport_size_zoom_and_orientation" name="Setting_viewport_size_zoom_and_orientation">ビューポートの大きさ、拡大率、向きの設定</h3>
+
+<pre class="brush: css notranslate">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<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("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>{{cssxref("@viewport/viewport-fit", "viewport-fit")}} 記述子を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}、特に <code>&lt;meta name="viewport"&gt;</code> の項目</li>
+ <li><a href="/ja/docs/Mobile/Viewport_meta_tag">モバイルブラウザーでのレイアウトを制御するために meta タグの viewport を使う</a></li>
+</ul>
diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html
new file mode 100644
index 0000000000..35b966dced
--- /dev/null
+++ b/files/ja/web/css/@viewport/max-height/index.html
@@ -0,0 +1,76 @@
+---
+title: max-height
+slug: Web/CSS/@viewport/max-height
+tags:
+  - '@viewport'
+  - CSS
+  - CSS Descriptor
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p>
+
+<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* Keyword value */
+max-height: auto;
+
+/* &lt;length&gt; values */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* &lt;percentage&gt; value */
+max-height: 75%;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用する値は他の CSS 記述子の値から計算されます。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>負ではない絶対値または相対値。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@viewport {
+  max-height: 600px;
+}</pre>
+
+<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 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.max-height")}}</p>
diff --git a/files/ja/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html
new file mode 100644
index 0000000000..e4938538fd
--- /dev/null
+++ b/files/ja/web/css/@viewport/max-zoom/index.html
@@ -0,0 +1,88 @@
+---
+title: max-zoom
+slug: Web/CSS/@viewport/max-zoom
+tags:
+  - '@viewport'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+max-zoom: auto;
+
+/* &lt;number&gt; 値 */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+max-zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>非負の数値で、表示倍率の上限です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>非負のパーセント値で、表示倍率の上限です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3>
+
+<pre class="notranslate"><code>@viewport {
+  max-zoom: 1.5;
+}</code>
+</pre>
+
+<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 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.viewport.max-zoom")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html
new file mode 100644
index 0000000000..7890bffa6b
--- /dev/null
+++ b/files/ja/web/css/@viewport/min-zoom/index.html
@@ -0,0 +1,70 @@
+---
+title: min-zoom
+slug: Web/CSS/@viewport/min-zoom
+tags:
+  - '@viewport'
+  - CSS
+  - CSS 記述子
+  - リファレンス
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+min-zoom: auto;
+
+/* &lt;number&gt; 値 */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+min-zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>非負の数値で、表示倍率の下限です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>非負のパーセント値で、表示倍率の下限です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p>
diff --git a/files/ja/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..8093487398
--- /dev/null
+++ b/files/ja/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,77 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+tags:
+  - '@viewport'
+  - CSS
+  - CSS 記述子
+  - Experimental
+  - Reference
+  - モバイル
+  - 画面レイアウト
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css; no-line-numbers">/* キーワード値 */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd>
+ <dt><code>contain</code></dt>
+ <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd>
+ <dt><code>cover</code></dt>
+ <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">auto | contain | cover
+</pre>
+
+<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</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("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..72405334b6
--- /dev/null
+++ b/files/ja/web/css/@viewport/zoom/index.html
@@ -0,0 +1,90 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - '@viewport'
+  - At-rule descriptor
+  - CSS
+  - CSS Descriptor
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p>
+
+<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+zoom: auto;
+
+/* &lt;number&gt; 値 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* &lt;percentage&gt; 値 */
+zoom: 150%;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>表示倍率として使われる非負の数値です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>表示倍率として使われる非負のパーセント値です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3>
+
+<pre class="notranslate"><code>@viewport {
+  zoom: 2.0;
+}</code></pre>
+
+<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 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.at-rules.viewport.zoom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-alt-text/index.html b/files/ja/web/css/_colon_-moz-alt-text/index.html
new file mode 100644
index 0000000000..be215a2997
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-alt-text/index.html
@@ -0,0 +1,19 @@
+---
+title: ':-moz-alt-text'
+slug: 'Web/CSS/:-moz-alt-text'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}</p>
+
+<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2>
+
+<p><code>:-moz-alt-text</code> は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。</p>
+
+<p>このセレクタは主にテーマ開発者によって使用されるものです。</p>
+
+<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2>
+
+<p>{{ Bug(11011) }}</p>
diff --git a/files/ja/web/css/_colon_-moz-broken/index.html b/files/ja/web/css/_colon_-moz-broken/index.html
new file mode 100644
index 0000000000..b1958e3ed3
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-broken/index.html
@@ -0,0 +1,58 @@
+---
+title: ':-moz-broken'
+slug: 'Web/CSS/:-moz-broken'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudo-class
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/:-moz-broken'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<p><strong><code>:-moz-broken</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a> であり、壊れた画像リンクを表している要素に一致します。</p>
+
+<div class="note">
+<p><strong>注:</strong> このセレクターは、主にテーマ開発者が使用することを意図しているものです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">:-moz-broken</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;img src="broken.jpg" alt="This image is broken. :-("&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">:-moz-broken {
+  background: bisque;
+  padding: 8px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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-broken")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+ <li>{{bug("11011")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-drag-over/index.html b/files/ja/web/css/_colon_-moz-drag-over/index.html
new file mode 100644
index 0000000000..f52d2475d1
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-drag-over/index.html
@@ -0,0 +1,41 @@
+---
+title: ':-moz-drag-over'
+slug: 'Web/CSS/:-moz-drag-over'
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+  - 疑似クラス
+translation_of: 'Web/CSS/:-moz-drag-over'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-drag-over</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{event("dragover")}} イベントが呼び出される時に要素に一致します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">:-moz-drag-over
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;td width="100px" height="100px"&gt;Drag Over&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">td:-moz-drag-over {
+  color: red;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
diff --git a/files/ja/web/css/_colon_-moz-first-node/index.html b/files/ja/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..fd98789b11
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>:-moz-first-node</code> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、ある要素の最初の子ノードの要素に一致します。最初の子要素の前に (スペースではない) テキストがあると一致しないため、{{Cssxref(":first-child")}} とは動作が異なります。</p>
+
+<p class="note">要素の先頭にある空白文字は <code>:-moz-first-node</code> の決定において無視されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>style プロパティ</em> }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-first-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html"><div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+</pre>
+
+<p>{{EmbedLiveSample("Example", "220", "20")}}</p>
+
+<h2 id="参照">参照</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-last-node")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-focusring/index.html b/files/ja/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..ca239be548
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,71 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - Non-standard
+  - Pseudo-class
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-focusring</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、 {{cssxref(":focus")}} 擬似クラスに似た <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>ですが、現在フォーカスが当たっていて、<em>かつ</em>フォーカスリングやその他のインジケーターがその周りに描かれる場合のみ一致します。</p>
+
+<div class="blockIndicator note">
+<p><strong>重要</strong>: このセレクターは CSS Selectors 4 仕様で {{cssxref(":focus-visible")}} に改名されました。</p>
+</div>
+
+<p><code>:-moz-focusring</code> に一致すると <code>:focus</code> にも一致しますが、逆は常に成り立つとは限りません。{{glossary("user agent", "ユーザーエージェント")}}がフォーカスリングの描画を有効にしているかどうか、どのようにして要素にフォーカスが当たったかによります。ユーザーエージェントがフォーカスリングの描画を有効にしているかどうかは、オペレーティングシステムの設定やその他の要因によりますので、この擬似クラスの詳細な動きはプラットフォームごとに異なります。</p>
+
+<p>作業グループは以前、<a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">この機能を CSS Selectors 4 または 5 で</a> <code>:focus-ring</code> として追加する意向を持っており、<a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0018.html">改名が決定され</a> {{cssxref(":focus-visible")}} となり、 CSS Selectors 4 に追加されました。</p>
+
+<div class="note">
+<p><strong>注</strong>: 開発者は <code>:-moz-focusring</code> を、 <code>focus</code> 状態がユーザーによる<strong>マウスのクリック</strong>と<strong>キーボードのタブ移動</strong>のどちらで行なわれたのかを区別するために使う傾向があります。これは<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素</a>を作成し、振る舞いに応じてスタイルを変更したい場合にも便利かもしれません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">:-moz-focusring</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input /&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input {
+  margin: 5px;
+}
+
+:-moz-focusring {
+  color: red;
+  outline: 2px dotted green;
+}
+</pre>
+
+<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-focusring")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":focus-visible")}}</li>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html
new file mode 100644
index 0000000000..13b68ab469
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-full-screen-ancestor/index.html
@@ -0,0 +1,39 @@
+---
+title: ':-moz-full-screen-ancestor'
+slug: 'Web/CSS/:-moz-full-screen-ancestor'
+tags:
+  - CSS
+  - CSS プロパティ
+  - 'CSS:Mozilla Extensions'
+  - Deprecated
+  - Non-standard
+  - Pseudo-class
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor'
+---
+<div>{{CSSRef}}{{non-standard_header}}{{deprecated_header}}</div>
+
+<p><strong><code>:-moz-full-screen-ancestor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、全画面要素のすべての祖先を表しますが、全画面化する要素を含む親文書の包含フレームは含みません。しかし、これらの要素の祖先は適用されるこの擬似クラスを持ちます。</p>
+
+<div class="warning">
+<p>この擬似クラスはThis Firefox 50 で削除されました。</p>
+</div>
+
+<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-full-screen-ancestor")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面モードの使用</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":full-screen")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-last-node/index.html b/files/ja/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..3613692e05
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>:-moz-last-node</code> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、ある要素の最後の子ノードの要素に一致します。最後の子要素の後に (スペースではない) テキストがあると一致しないため、{{ Cssxref(":last-child") }} とは動作が異なります。</p>
+
+<p class="note">要素の末尾にある空白文字は <code>:-moz-last-node</code> の決定において無視されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">span:-moz-last-node { <em>style プロパティ</em> }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-last-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "220", "20")}}</p>
+
+<h2 id="参照">参照</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-list-bullet/index.html b/files/ja/web/css/_colon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..a6629e3317
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-list-bullet/index.html
@@ -0,0 +1,41 @@
+---
+title: ':-moz-list-bullet'
+slug: 'Web/CSS/:-moz-list-bullet'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>非標準の <code>:-moz-list-bullet</code> Mozilla <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、リスト要素のマーカーを編集するために使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.list li::-moz-list-bullet {
+  font-size: 36px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="list"&gt;
+  &lt;li&gt;Number 1&lt;/li&gt;
+  &lt;li&gt;Number 2&lt;/li&gt;
+  &lt;li&gt;Number 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p><img alt="Image:liug3.jpg" class="internal" src="/@api/deki/files/745/=Liug3.jpg"></p>
diff --git a/files/ja/web/css/_colon_-moz-loading/index.html b/files/ja/web/css/_colon_-moz-loading/index.html
new file mode 100644
index 0000000000..ec446f7f98
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-loading/index.html
@@ -0,0 +1,41 @@
+---
+title: ':-moz-loading'
+slug: 'Web/CSS/:-moz-loading'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudo-class
+  - Reference
+  - Selector
+  - セレクター
+  - 擬似クラス
+  - 標準外
+translation_of: 'Web/CSS/:-moz-loading'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<p><strong><code>:-moz-loading</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、読み込みが開始されていないために表示できない要素、例えばまだ到着が開始されていない画像などに一致します。なお、読み込み<em>中</em>の画像は、この擬似クラスには一致<em>しません</em>。</p>
+
+<div class="note">
+<p><strong>注:</strong> このセレクターは主にテーマ開発者が使用するためのものです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">:-moz-loading</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css notranslate">:-moz-loading {
+  background-color: #aaa;
+  background-image: url(loading-animation.gif) center no-repeat;
+}</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html
new file mode 100644
index 0000000000..49543bf307
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-locale-dir(ltr)/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-locale-dir(ltr)'
+slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+  - ローカライズ
+  - 疑似クラス
+translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p> <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/ja/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが左から右へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "ltr" に設定されていることで特定されます。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致します。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;If you're using a left-to-right interface, this should be red.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(ltr) {
+  color: red;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":dir", ":dir(…)")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html
new file mode 100644
index 0000000000..e5c25e95ba
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-locale-dir(rtl)/index.html
@@ -0,0 +1,50 @@
+---
+title: ':-moz-locale-dir(rtl)'
+slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Right-to-left
+  - リファレンス
+  - ローカライズ
+  - 右書き
+  - 標準外
+  - 疑似クラス
+translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>:-moz-locale-dir(ltr)</code></strong> <a href="/en-US/docs/Web/CSS/pseudo-classes">疑似クラス</a>は <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、ユーザーインターフェイスが右から左へ向けて表示される要素に一致します。これは設定の <code>intl.uidirection.<em>locale</em></code> (<code><em>locale</em></code> は現在のロケール) が "rtl" に設定されていることで特定されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 擬似クラスは、主に拡張機能及びテーマをユーザーのロケールに基づいて適合させるために使用されます。 (これは、ウィンドウとウィンドウ、またタブとタブの間でも変えることができます。) また、拡張機能がユーザーの既定のロケールに対応しなくても動作させることができるため、ロケールの仕様を気にしなくても、左から右方向、右から左方向の両方のレイアウトに対応できます。</p>
+</div>
+
+<div class="warning">
+<p>このセレクターは HTML では正しく機能しません。ユーザーインターフェイスのロケールが右方向か左方向かに関わらず、常に一致しません。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;If you're using a right-to-left interface, this should be red.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(ltr) {
+  color: red;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="See also" name="See also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":dir",":dir(…)")}}</li>
+ <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li>
+ <li><a href="/ja/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">テーマが RTL のロケールで動作するようことを確認する</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-only-whitespace/index.html b/files/ja/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..95e836c637
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,77 @@
+---
+title: ':-moz-only-whitespace'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - ':-moz-only-whitespace'
+  - CSS
+  - Non-standard
+  - Pseudo-class
+  - Reference
+  - セレクター
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{CSSRef}}{{Non-standard_Header}}</div>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 {{CSSxRef(":empty")}} セレクターが <code style="white-space: nowrap;">:-moz-only-whitespace</code> のように動作するよう変更されましたが、まだこれに対応しているブラウザーはありません。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-only-whitespace</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、{{Glossary("whitespace", "ホワイトスペース")}}のみが入ったテキストノードのみを含む要素に一致します。 (これには空のテキストノードや子ノードを持たない要素も含みます)。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+div {
+  background-color: #ccc;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 16px;
+  min-height: 1rem;
+}</pre>
+</div>
+
+<pre class="brush: css">div {
+  border: 4px solid red;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", "50")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>短期間だけ <code>:blank</code> として {{SpecName("CSS4 Selectors", "#changes-2018-02")}} において定義されましたが、その後に機能的に {{CSSxRef(":empty")}} に統合され、 {{CSSxRef(":blank")}} は空欄の {{HTMLElement("input")}} を意味するように再定義されました。</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-only-whitespace")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-placeholder/index.html b/files/ja/web/css/_colon_-moz-placeholder/index.html
new file mode 100644
index 0000000000..02eb38eafd
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-placeholder/index.html
@@ -0,0 +1,58 @@
+---
+title: ':-moz-placeholder'
+slug: 'Web/CSS/:-moz-placeholder'
+tags:
+  - CSS
+  - CSS Reference
+  - Non-standard
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p>
+
+<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div>
+
+<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p>
+
+<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例はプレースホルダの文字色を緑色に変更しています。</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Placeholder demo&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    input:-moz-placeholder {
+      color: green;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;input id="test" placeholder="Placeholder text!"&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p>
+
+<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2>
+
+<p>{{ Bug(457801) }}</p>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div>
+
+<h3 id="SeeAlso" name="SeeAlso">参考</h3>
+
+<ul>
+ <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-moz-submit-invalid/index.html b/files/ja/web/css/_colon_-moz-submit-invalid/index.html
new file mode 100644
index 0000000000..e3c30af31a
--- /dev/null
+++ b/files/ja/web/css/_colon_-moz-submit-invalid/index.html
@@ -0,0 +1,40 @@
+---
+title: ':-moz-submit-invalid'
+slug: 'Web/CSS/:-moz-submit-invalid'
+tags:
+  - ':-moz-submit-invalid'
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - Non-standard
+  - Pseudo-class
+  - Reference
+  - Selector
+  - 擬似クラス
+  - 標準外
+translation_of: 'Web/CSS/:-moz-submit-invalid'
+---
+<div>{{CSSRef}}{{Non-standard_Header}}</div>
+
+<p><strong><code>:-moz-submit-invalid</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、フォームの送信 {{HTMLElement("button")}} のうち、内容が<a href="/ja/docs/Learn/Forms#Constraint_Validation">制約の検証</a>で妥当ではないものを表します。</p>
+
+<p>既定では、適用されているスタイルはありません。この擬似クラスを使用して、無効なフォーム欄があった場合の送信ボタンの外見をカスタマイズすることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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-submit-invalid")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_-webkit-autofill/index.html b/files/ja/web/css/_colon_-webkit-autofill/index.html
new file mode 100644
index 0000000000..2e8ba6c793
--- /dev/null
+++ b/files/ja/web/css/_colon_-webkit-autofill/index.html
@@ -0,0 +1,34 @@
+---
+title: ':-webkit-autofill'
+slug: 'Web/CSS/:-webkit-autofill'
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+  - 擬似クラス
+translation_of: 'Web/CSS/:-webkit-autofill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p>
+
+<p class="note"><strong>メモ:</strong> 多くのブラウザーのユーザーエージェントスタイルシートでは、 <code>:-webkit-autofill</code> スタイル定義に <code>!important</code> を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit bug 66032: Allow site authors to override autofilled fields' colors.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla bug 740979: implement <code>:-moz-autofill</code> pseudo-class on input elements with an autofilled value</a></li>
+ <li><a href="https://wiki.csswg.org/spec/css4-ui#more-selectors">new css4-ui features - more selectors</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_active/index.html b/files/ja/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..595e02a93e
--- /dev/null
+++ b/files/ja/web/css/_colon_active/index.html
@@ -0,0 +1,130 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - ウェブ
+  - セレクター
+  - リファレンス
+  - レイアウト
+  - 疑似クラス
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:active</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、ユーザーによってアクティブ化されている要素 (ボタンなど) を表します。</span>マウスを使用する場合は、「アクティブ化」とはふつう、第1ボタンを押し下げたときに始まります。</p>
+
+<pre class="brush: css no-line-numbers">/* アクティブ化されている &lt;a&gt; をすべて選択します */
+a:active {
+  color: red;
+}</pre>
+
+<p><code>:active</code> 疑似クラスは、 {{HTMLElement("a")}} 及び {{HTMLElement("button")}} 要素で使われます。この疑似クラスで他のよくあるターゲットとしては、アクティブ化される要素を<em>含む</em>要素や、関連付けられた {{HTMLElement("label")}} 要素を通してアクティブ化されるフォーム要素です。</p>
+
+<p><code>:active</code> 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":link")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 <em>LVHA 順</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> で定義されるように、他のすべてのリンク関連規則の後に <code>:active</code> 規則を置いてください。</p>
+
+<div class="note"><strong>メモ:</strong> 複数ボタンのマウスを使うシステムでは、 CSS 3 は <code>:active</code> 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Active_links" name="Active_links">アクティブなリンク</h3>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;この段落にはリンクが含まれています。
+  &lt;a href="#"&gt;このリンクはクリックすると赤色になります。&lt;/a&gt;
+  この段落は段落やリンクをクリックすると灰色になります。
+&lt;/p&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css">a:link { color: blue; }          /* 未訪問リンク */
+a:visited { color: purple; }     /* 訪問済みリンク */
+a:hover { background: yellow; }  /* ホバー時 */
+a:active { color: red; }         /* アクティブなリンク */
+
+p:active { background: #eee; }   /* アクティブな段落 */</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Active_links')}}</p>
+
+<h3 id="Active_form_elements" name="Active_form_elements">フォーム要素をアクティブ化</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="my-button"&gt;My button: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt;Try Clicking Me or My Label!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Active_form_elements')}}</p>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.active")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_any-link/index.html b/files/ja/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..045771ef23
--- /dev/null
+++ b/files/ja/web/css/_colon_any-link/index.html
@@ -0,0 +1,77 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - CSS
+  - CSS 疑似クラス
+  - Experimental
+  - Reference
+  - Web
+  - セレクター
+  - レイアウト
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:any-link</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>セレクターは、訪問の有無とは独立したソースアンカーとして振る舞う要素を表します。言い換えれば、 <code>href</code> 属性を持つすべての {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} の各要素を選択します。つまり、 {{cssxref(":link")}} または {{cssxref(":visited")}} に一致するすべての要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* :link または :visited に該当するすべての要素を選択 */
+:any-link {
+  color: green;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="https://example.com"&gt;External link&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Internal target link&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Placeholder link (won't get styled)&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
diff --git a/files/ja/web/css/_colon_blank/index.html b/files/ja/web/css/_colon_blank/index.html
new file mode 100644
index 0000000000..31b50869f2
--- /dev/null
+++ b/files/ja/web/css/_colon_blank/index.html
@@ -0,0 +1,78 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:blank'
+tags:
+  - ':blank'
+  - CSS
+  - CSS Selectors
+  - Draft
+  - Experimental
+  - NeedsContent
+  - NeedsExample
+  - Pseudo-class
+translation_of: 'Web/CSS/:blank'
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <code>:blank</code> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。</p>
+
+<p><a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a> を参照してください。</p>
+</div>
+
+<p><strong><code>:blank</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) に一致します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Simple_blank_example" name="Simple_blank_example">単純な :blank の例</h3>
+
+<p>最終的に対応しているブラウザーでは、 <code>:blank</code> 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;textarea&gt;&lt;/textarea&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">textarea:blank {
+  border: 3px solid red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}</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("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.blank")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_checked/index.html b/files/ja/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..f5be173f83
--- /dev/null
+++ b/files/ja/web/css/_colon_checked/index.html
@@ -0,0 +1,215 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - ':checked'
+  - CSS
+  - Checked
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Toggled
+  - Web
+  - button
+  - checkbox
+  - radio
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:checked</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>セレクターで、<strong>ラジオボタン</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>)、 <strong>チェックボックス</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>)、 <strong>オプションボタン</strong> ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり <code>on</code> の状態にあったりすることを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<p>ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> ブラウザ―は <code>&lt;option&gt;</code> を<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>として扱うことが多いので、 <code>:checked</code> 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;input type="radio" name="my-input" id="yes"&gt;
+  &lt;label for="yes"&gt;Yes&lt;/label&gt;
+
+  &lt;input type="radio" name="my-input" id="no"&gt;
+  &lt;label for="no"&gt;No&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="checkbox" name="my-checkbox" id="opt-in"&gt;
+  &lt;label for="opt-in"&gt;Check me!&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;select name="my-select" id="fruit"&gt;
+  &lt;option value="opt1"&gt;Apples&lt;/option&gt;
+  &lt;option value="opt2"&gt;Grapes&lt;/option&gt;
+  &lt;option value="opt3"&gt;Pears&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div,
+select {
+  margin: 8px;
+}
+
+/* チェックが入った入力のラベル */
+input:checked + label {
+  color: red;
+}
+
+/* チェックが入ったラジオボタン */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* チェックが入ったチェックボックス */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* 選択されたオプション */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Toggling_elements_with_a_hidden_checkbox" name="Toggling_elements_with_a_hidden_checkbox">非表示のチェックボックスの要素を切り替え</h3>
+
+<p>この例では、 <code>:checked</code> 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> はまったく使っていません。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;input type="checkbox" id="expand-toggle" /&gt;
+
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Column #1&lt;/th&gt;&lt;th&gt;Column #2&lt;/th&gt;&lt;th&gt;Column #3&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;label for="expand-toggle" id="expand-btn"&gt;Toggle hidden rows&lt;/label&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/* トグルチェックボックスを隠す */
+#expand-toggle {
+  display: none;
+}
+
+/* 開く要素は既定で隠す */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* ボタンにスタイルを適用 */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
+
+<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3>
+
+<p><code>:checked</code> 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>を参照してください。</p>
+
+<div class="note"><strong>メモ:</strong> 似たような効果で、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> 擬似クラスを使用して隠しラジオボタンを使わないものについては、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover">:hover</a> のリファレンスページからの<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</div>
+
+<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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>HTML に関する意味を定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.checked")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
+ <li>関連する HTML 要素: <code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, {{HTMLElement("select")}}, {{HTMLElement("option")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_default/index.html b/files/ja/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..528bbd7d80
--- /dev/null
+++ b/files/ja/web/css/_colon_default/index.html
@@ -0,0 +1,111 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - CSS 基本ユーザーインターフェイス
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:default</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。</p>
+
+<p>このセレクターが何に一致するかについては、 <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">HTML Standard §4.16.3 Pseudo-classes</a> で定義されています。 — {{htmlelement("button")}}、 <code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>、 <code><a href="/ja/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>、 {{htmlelement("option")}} 要素に一致させることができます。</p>
+
+<ul>
+ <li>既定の option 要素は <code>selected</code> 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。 <code>multiple</code> が付いた {{htmlelement("select")}} は、複数の <code>selected</code> がついた選択肢を持つことができますので、すべてが <code>:default</code> に一致します。</li>
+ <li><code>&lt;input type="checkbox"&gt;</code> と <code>&lt;input type="radio"&gt;</code> は <code>checked</code> 属性があるときに一致します。</li>
+ <li>{{htmlelement("button")}} は {{htmlelement("form")}} の <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission">既定の送信ボタン</a>である場合に一致します。フォームに所属する <code>&lt;button&gt;</code> のうち、 DOM 順で最初のものです。これはフォームを送信する {{htmlelement("input")}} 型、例えば <code>image</code> または <code>submit</code> にも適用されます。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Favorite season&lt;/legend&gt;
+
+  &lt;input type="radio" name="season" id="spring"&gt;
+  &lt;label for="spring"&gt;Spring&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="summer" checked&gt;
+  &lt;label for="summer"&gt;Summer&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="fall"&gt;
+  &lt;label for="fall"&gt;Fall&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="winter"&gt;
+  &lt;label for="winter"&gt;Winter&lt;/label&gt;
+&lt;/fieldset&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML に関する意味付けと制約検証を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.default")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームのスタイル付け</a></li>
+ <li>関連する HTML 要素: {{htmlelement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, {{htmlelement("option")}}</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_defined/index.html b/files/ja/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..814f136f82
--- /dev/null
+++ b/files/ja/web/css/_colon_defined/index.html
@@ -0,0 +1,125 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+tags:
+  - CSS
+  - HTML
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:defined</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。</span></p>
+
+<pre class="brush: css no-line-numbers">/* 定義されたすべての要素を選択 */
+:defined {
+  font-style: italic;
+}
+
+/* 特定の custom 要素のすべてのインスタンスを選択 */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この最初の例は <code>&lt;simple-custom&gt;</code> <a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素</a>を定義するスクリプトを含んでいます。</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>次に、 <code>&lt;simple-custom&gt;</code> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。</p>
+
+<pre class="brush: html">&lt;simple-custom text="Custom element example text"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Standard paragraph example text&lt;/p&gt;</pre>
+
+<p>それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 <code>:defined</code> セレクターを使用して定義された要素テキストをすべて斜体で表示します。</p>
+
+<pre class="brush: css">/* 2つの要素を背景で区別できるようにする */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+/* カスタム要素と組み込み要素を両方イタリック体にする */
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}</pre>
+
+<p>これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。</p>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>以上のコードを実行した結果は次の通りです。</p>
+
+<p>{{EmbedLiveSample('Examples')}}</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('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.defined")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_dir/index.html b/files/ja/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..5a97d10b89
--- /dev/null
+++ b/files/ja/web/css/_colon_dir/index.html
@@ -0,0 +1,112 @@
+---
+title: ':dir()'
+slug: 'Web/CSS/:dir'
+tags:
+  - BiDi
+  - CSS
+  - Experimental
+  - Pseudo-class
+  - Reference
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:dir()</code> は <a href="/ja/docs/Web/CSS">CSS</a> の</strong> <a href="/ja/docs/CSS/Web/Pseudo-classes">擬似クラス</a>で、中に含まれる文字列の方向に基づいて要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 右から左への文字列がある要素すべてを選択 */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p><code>:dir()</code> 擬似クラスは文字方向の意味的な値、つまり、文書自身に設定されているもののみを使用します。スタイルによる文字方向、つまり、 {{cssxref("direction")}} のような CSS プロパティで設定された文字方向には対応しません。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>:dir()</code> 擬似クラスは <code>[dir=…]</code> <a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a> とは等価でないことに注意してください。後者は HTML の {{htmlattrxref("dir")}} 属性を選択しますが、これがない要素は、文字方向が親から継承されていても無視します。（同様に、 <code>[dir=rtl]</code> と <code>[dir=ltr]</code> は <code>auto</code> の値を選択しません。）それに対して、 <code>:dir()</code> は継承の場合も含め、{{glossary("user agent", "ユーザーエージェント")}} が計算した値で選択します。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ:</strong> HTML では、文字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書タイプでは異なる方法があるかもしれません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>:dir()</code> 擬似クラスは1つの引数を取り、対象としたい文字方向を指定します。</p>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>文字方向が左から右の要素を対象とします。</dd>
+ <dt><code>rtl</code></dt>
+ <dd>文字方向が右から左の要素を対象とします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html; notranslate">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples') }}</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('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.dir")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>言語に関連する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_disabled/index.html b/files/ja/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..3931a973e2
--- /dev/null
+++ b/files/ja/web/css/_colon_disabled/index.html
@@ -0,0 +1,130 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:disabled</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 notranslate">/* 無効な &lt;input&gt; を選択 */
+input:disabled {
+  background: #ccc;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は基本的な送り先フォームを表示します。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form action="#"&gt;
+  &lt;fieldset id="shipping"&gt;
+    &lt;legend&gt;送り先&lt;/legend&gt;
+    &lt;input type="text" placeholder="名前"&gt;
+    &lt;input type="text" placeholder="住所"&gt;
+    &lt;input type="text" placeholder="郵便番号"&gt;
+  &lt;/fieldset&gt;
+  &lt;br&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;請求先&lt;/legend&gt;
+    &lt;label for="billing_is_shipping"&gt;送り先と同じ:&lt;/label&gt;
+    &lt;input type="checkbox" id="billing-checkbox" checked&gt;
+    &lt;br&gt;
+    &lt;input type="text" placeholder="名前" disabled&gt;
+    &lt;input type="text" placeholder="住所" disabled&gt;
+    &lt;input type="text" placeholder="郵便番号" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type="text"]:disabled {
+  background: #ccc;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
+document.addEventListener('DOMContentLoaded', function () {
+  // チェックボックスに 'change' イベントリスナーを追加
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // 請求先のテキストフィールドを選択
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // 請求先テキストフィールドを切り替え
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 300, 250)}}</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML に関する意味を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.disabled")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>
+  <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/ja/web/css/_colon_empty/index.html b/files/ja/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..6dbc6232af
--- /dev/null
+++ b/files/ja/web/css/_colon_empty/index.html
@@ -0,0 +1,116 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - Layout
+  - NeedsUpdate
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:empty'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:empty</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の {{cssxref("content")}} は要素が空であるかどうかの判断には影響しません。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 <code>:empty</code> 擬似クラスは <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span> のような動作に変更されましたが、現在これに対応しているブラウザーはありません。</p>
+</div>
+
+<pre class="brush: css no-line-numbers notranslate">/* 内容を含まない &lt;div&gt; 要素を選択 */
+div:empty {
+  background: lime;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;!-- I will be lime. --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;I will be pink.&lt;/div&gt;
+&lt;div class="box"&gt;
+	&lt;!-- I will be pink in older browsers because of the whitespace around this comment. --&gt;
+&lt;/div&gt;
+&lt;div class="box"&gt;
+	&lt;p&gt;&lt;!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  display: flex;
+  justify-content: space-around;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 300, 80)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (<a href="/ja/docs/Web/HTML/Element/a">アンカー</a>や<a href="/ja/docs/Web/HTML/Element/button">ボタン</a>など) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である <a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> で使用されます。</p>
+
+<p>対話型コントロールのアクセシブル名を提供する文字列は、<a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">プロパティの組み合わせ</a>を使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" rel="noopener">What is an accessible name? | The Paciello Group</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN "WCAG を理解する ― ガイドライン 2.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS4 Selectors", "#the-empty-pseudo", "<code>:empty</code> 擬似クラス")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>{{CSSxRef(":-moz-only-whitespace")}} のような動作に変更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#empty-pseudo", "<code>:empty</code> 擬似クラス")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.empty")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} – The {{glossary("prefix", "prefixed")}} implementation of the changes in {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_enabled/index.html b/files/ja/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..edba1d3d3a
--- /dev/null
+++ b/files/ja/web/css/_colon_enabled/index.html
@@ -0,0 +1,101 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:enabled</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 notranslate">/* 有効な &lt;input&gt; を選択 */
+input:enabled {
+  color: blue;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html notranslate">&lt;form action="url_of_form"&gt;
+  &lt;label for="FirstField"&gt;First field (enabled):&lt;/label&gt;
+  &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br&gt;
+
+  &lt;label for="SecondField"&gt;Second field (disabled):&lt;/label&gt;
+  &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br&gt;
+
+  &lt;input type="button" value="Submit"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; notranslate">input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 550, 95)}}</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML に関する意味を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>擬似クラスを定義。ただし意味の結びつけの定義はなし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.enabled")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_first-child/index.html b/files/ja/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..a0377e61a9
--- /dev/null
+++ b/files/ja/web/css/_colon_first-child/index.html
@@ -0,0 +1,135 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:first-child</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、兄弟要素のグループの中で最初の要素を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 兄弟要素の中で最初の &lt;p&gt; を
+   すべてを選択 */
+p:first-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>注:</strong> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p&gt;This text is selected!&lt;/p&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p>
+
+<h3 id="Styling_a_list" name="Styling_a_list">リストのスタイル付け</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3
+    &lt;ul&gt;
+      &lt;li&gt;Item 3.1&lt;/li&gt;
+      &lt;li&gt;Item 3.2&lt;/li&gt;
+      &lt;li&gt;Item 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Styling_a_list')}}</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('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.first-child")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_first-of-type/index.html b/files/ja/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..3d0fe724cd
--- /dev/null
+++ b/files/ja/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,115 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:first-of-type</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、兄弟要素のグループの中でその種類の最初の要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 兄弟要素の中で最初の &lt;p&gt; 要素をすべて選択 */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Styling_the_first_paragraph" name="Styling_the_first_paragraph">最初の段落の整形</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Heading&lt;/h2&gt;
+&lt;p&gt;Paragraph 1&lt;/p&gt;
+&lt;p&gt;Paragraph 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Styling_the_first_paragraph')}}</p>
+
+<h3 id="Nested_elements" name="Nested_elements">ネストした要素</h3>
+
+<p>この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、<a href="/ja/docs/Web/CSS/Universal_selectors">ユニバーサルセレクター</a> (<code>*</code>) が暗黙に含まれています。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;This `div` is first!&lt;/div&gt;
+  &lt;div&gt;This &lt;span&gt;nested `span` is first&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;This &lt;em&gt;nested `em` is first&lt;/em&gt;, but this &lt;em&gt;nested `em` is last&lt;/em&gt;!&lt;/div&gt;
+  &lt;div&gt;This &lt;span&gt;nested `span` gets styled&lt;/span&gt;!&lt;/div&gt;
+  &lt;b&gt;This `b` qualifies!&lt;/b&gt;
+  &lt;div&gt;This is the final `div`.&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :first-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Nested_elements', 500)}}</p>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.first-of-type")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_first/index.html b/files/ja/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..a15a595580
--- /dev/null
+++ b/files/ja/web/css/_colon_first/index.html
@@ -0,0 +1,102 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:first</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で使用され、印刷文書の最初のページを表します。</span> (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 印刷時に最初のページを選択 */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、 {{cssxref("widows")}}、 ページ区切りのみです。さらに、マージンを定義するときには<a href="/ja/docs/Web/CSS/length#Absolute_length_units">絶対的な長さ</a>の単位のみしか使用できません。他のすべてのプロパティは無視されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;最初のページです。&lt;/p&gt;
+&lt;p&gt;2枚目のページです。&lt;/p&gt;
+&lt;button&gt;印刷&lt;/button&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () =&gt; {
+  window.print();
+});
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。</p>
+
+<p>{{ EmbedLiveSample('Examples', '80%', '150px') }}</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 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.first")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_focus-visible/index.html b/files/ja/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..de61ad9b5c
--- /dev/null
+++ b/files/ja/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,138 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+tags:
+  - ':focus'
+  - ':focus-visible'
+  - CSS
+  - Experimental
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:focus-visible</code></strong> 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。</p>
+
+<p>このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。</p>
+
+<p>なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<p>この例では、 <code>:focus-visible</code> セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 <code>:focus</code> でスタイル付けされた要素との動作の違いに注意してください。</p>
+
+<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
+&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<pre class="brush: css highlight[9] notranslate">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+
+<h3 id="Selectively_showing_the_focus_indicator" name="Selectively_showing_the_focus_indicator">フォーカスインジケーターの選択的な表示</h3>
+
+<p>カスタムコントロール、例えば <a href="/ja/docs/User:Andreas_Wuest/Custom_Elements">カスタム要素</a>ボタンなどは、 <code>:focus-visible</code> を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。</p>
+
+<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
+
+<pre class="brush: css highlight[13, 19] notranslate">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p><a href="https://github.com/WICG/focus-visible">focus-visible.js</a> を使用して <code>:focus-visible</code> のポリフィルにすることができます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<h3 id="Low_vision" name="Low_vision">弱視</h3>
+
+<p>視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。</p>
+
+<ul>
+ <li>アクセシブルな視覚的フォーカスインジケーター: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="Cognition" name="Cognition">認知障碍</h3>
+
+<p>人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。</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("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.focus-visible")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..c5816dd2ca
--- /dev/null
+++ b/files/ja/web/css/_colon_focus-within/index.html
@@ -0,0 +1,98 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - 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>
+
+<pre class="brush: css no-line-numbers">/* 子孫要素の一つにフォーカスがある &lt;div&gt; を選択 */
+div:focus-within {
+  background: cyan;
+}</pre>
+
+<p>このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;このフォームに入力してみてください。&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="given_name"&gt;名前:&lt;/label&gt;
+  &lt;input id="given_name" type="text"&gt;
+  &lt;br&gt;
+  &lt;label for="family_name"&gt;苗字:&lt;/label&gt;
+  &lt;input id="family_name" type="text"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[7]">form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 500, 150)}}</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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.focus-within")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_focus/index.html b/files/ja/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..a363d17db2
--- /dev/null
+++ b/files/ja/web/css/_colon_focus/index.html
@@ -0,0 +1,119 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - セレクター
+  - レイアウト
+  - 擬似クラス
+  - 疑似クラス
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:focus</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* フォーカスを持つ &lt;input&gt; 要素を選択 */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を<em>含む</em>要素を選択したい場合は、 {{CSSxRef(":focus-within")}} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;input class="red-input" value="I'll be red when focused."&gt;&lt;br&gt;
+&lt;input class="blue-input" value="I'll be blue when focused."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Accessibility_Concerns" name="Accessibility_Concerns">アクセシビリティの考慮事項</h2>
+
+<p>視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。</p>
+
+<ul>
+ <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。</p>
+
+<ul>
+ <li>Quick Tip:  <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li>
+</ul>
+
+<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("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>HTML に依存した意味論を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.focus")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_fullscreen/index.html b/files/ja/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..82d5cb648c
--- /dev/null
+++ b/files/ja/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,97 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - Full-screen
+  - Full-screen API
+  - Fullscreen API
+  - Pseudo-class
+  - Reference
+  - Selector
+  - fullscreen
+  - screen
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:fullscreen</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/CSS/Pseudo-classes">擬似クラス</a>で、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
+
+<p><code>:fullscreen</code> 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>ページの HTML は次のようなものです。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p><code>"fs-toggle"</code> の ID を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは <code>:not(:fullscreen)</code> を使用していることで、 <code>:fullscreen</code> 擬似クラスが適用されない要素を探します。</p>
+
+<pre class="brush: css notranslate">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>文書が全画面モードで<em>ある</em>場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。</p>
+
+<pre class="brush: css notranslate">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</pre>
+
+<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('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.fullscreen")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">全画面 API のガイド</a></li>
+ <li>{{cssxref(":not")}}</li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性</li>
+</ul>
diff --git a/files/ja/web/css/_colon_has/index.html b/files/ja/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..4579b2c8f4
--- /dev/null
+++ b/files/ja/web/css/_colon_has/index.html
@@ -0,0 +1,61 @@
+---
+title: ':has()'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - セレクター
+  - リファレンス
+  - 擬似クラス
+translation_of: 'Web/CSS/:has'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:has()</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>で、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。</span></p>
+
+<p><code>:has()</code> 疑似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 <code>:has</code> はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;img&gt; 要素を直接中に含む &lt;a&gt; を選択する */
+/* なお、これはまだブラウザーが対応していません */
+var test = document.querySelector('a:has(&gt; img)');</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。</p>
+
+<pre>a:has(&gt; img)
+</pre>
+
+<p>次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。</p>
+
+<pre>h1:has(+ p)</pre>
+
+<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("CSS4 Selectors", "#relational", ":has()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.has")}}</p>
diff --git a/files/ja/web/css/_colon_host-context()/index.html b/files/ja/web/css/_colon_host-context()/index.html
new file mode 100644
index 0000000000..33cd84271f
--- /dev/null
+++ b/files/ja/web/css/_colon_host-context()/index.html
@@ -0,0 +1,112 @@
+---
+title: ':host-context()'
+slug: 'Web/CSS/:host-context()'
+tags:
+  - ':host-context()'
+  - CSS
+  - Experimental
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:host-context()'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:host-context()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、内部で使用される CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します (そのため、シャドウ DOM の中のカスタム要素を選択することができます)。 — しかし、関数の引数として与えられたセレクターがシャドウホストの祖先に一致した場合のみです。</span></p>
+
+<p><span class="seoSummary">言い換えれば、これによってカスタム要素やそのカスタム要素のシャドウ DOM 内のものは、外部 DOM 内の位置や、祖先要素に適用されたクラスや属性に基づいて、異なるスタイルを適用することができます。</span></p>
+
+<p>典型的な使い方としては、子孫のセレクター式 (例えば <code>h1</code>) を使って、 <code>&lt;h1&gt;</code> の中にあるカスタム要素のインスタンスのみを選択することができます。もう一つの典型的な使用法は、内部要素が任意の子孫要素のクラスや属性に反応するようにすることです。例えば、 <code>.dark-theme</code> クラスが <code>&lt;body&gt;</code> に適用されたときに、異なるテキスト色を適用することができます。</p>
+
+<div class="note">
+<p><strong>注</strong>: これはシャドウ DOM の外で使用した場合、効果がありません。</p>
+</div>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects a shadow root host, only if it is
+   a descendant of the selector argument given */
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+/* Changes paragraph text color from black to white when
+   a .dark-theme class is applied to the document body */
+p {
+  color: #000;
+}
+
+:host-context(body.dark-theme) p {
+  color: #fff;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Selectively_styling_shadow_hosts" name="Selectively_styling_shadow_hosts">シャドウホストの選択的なスタイル付け</h3>
+
+<p>以下のスニペットは <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host-selectors example</a> から取ったものです。 (<a href="https://mdn.github.io/web-components-examples/host-selectors/">ライブ版もあります</a>).</p>
+
+<p>この例には、単純なカスタム要素 — <code>&lt;context-span&gt;</code> — があり、テキストを囲むことができます。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>要素のコンストラクターの中で、 <code>style</code> および <code>span</code> 要素を生成し、 <code>span</code> の中をカスタム要素の内容で埋め、 <code>style</code> 要素をいくつかの CSS 規則で埋めます。</p>
+
+<pre class="brush: js notranslate">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p><code>:host-context(h1) { font-style: italic; }</code> および <code>:host-context(h1):after { content: " - no links in headers!" }</code> の規則は <code>&lt;h1&gt;</code> の中にある <code>&lt;context-span&gt;</code> 要素 (このインスタンスのシャドウホスト) のインスタンスをスタイル付けします。これは設計上、 <code>&lt;h1&gt;</code> 内部にカスタム要素が現れるべきではないことを明確にするために使用しています。</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('CSS Scope', '#host-selector', ':host-context()') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.host-context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_host/index.html b/files/ja/web/css/_colon_host/index.html
new file mode 100644
index 0000000000..14738d5ddf
--- /dev/null
+++ b/files/ja/web/css/_colon_host/index.html
@@ -0,0 +1,103 @@
+---
+title: ':host'
+slug: 'Web/CSS/:host'
+tags:
+  - ':host'
+  - CSS
+  - DOM
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+  - Web Components
+  - shadow
+  - shadow dom
+  - ウェブコンポーネント
+  - シャドウ DOM
+  - セレクター
+  - 擬似クラス
+translation_of: 'Web/CSS/:host'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary"><strong><code>:host</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、その CSS を含む<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。</span></p>
+
+<div class="note">
+<p><strong>注</strong>: これはシャドウ DOM の外で使われたときには効果がありません。</p>
+</div>
+
+<pre class="brush: css no-line-numbers notranslate">/* シャドウのルートホストを選択 */
+:host {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="notranslate">:host
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Styling_the_shadow_host" name="Styling_the_shadow_host">シャドウホストのスタイル付け</h3>
+
+<p>以下のスニペットは、 <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">host セレクターの例</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">ライブでも参照してください</a>) から取りました。</p>
+
+<p>この例では、テキストの周りを囲むことができる簡単なカスタム要素 — <code>&lt;context-span&gt;</code> — を使います。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>要素のコンストラクターの中で、 <code>style</code> および <code>span</code> 要素を作成し、 <code>span</code> の中をカスタム要素の中身で埋め、 <code>style</code> 要素をいくつかの CSS 規則で埋めます。</p>
+
+<pre class="brush: js notranslate">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p><code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> の規則は、文書中の <code>&lt;context-span&gt;</code> 要素 (このインスタンスのシャドウホスト) のすべてのインスタンスにスタイル付けします。</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('CSS Scope', '#host-selector', ':host') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.host")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_hover/index.html b/files/ja/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..ab48b04af2
--- /dev/null
+++ b/files/ja/web/css/_colon_hover/index.html
@@ -0,0 +1,105 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - 疑似クラス
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:hover</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインタ―）で要素の上をホバー（通過）させたときにこの状態になります。</p>
+
+<pre class="brush: css no-line-numbers">/* 「ホバー」状態の &lt;a&gt; 要素を選択します */
+a:hover {
+  color: orange;
+}</pre>
+
+<p><code>:hover</code> 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":link")}}、{{cssxref(":visited")}}、 {{cssxref(":active")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 <em>LVHA 順</em>: <code>:hover</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> で定義されるように、 <code>:link</code> と <code>:visited</code> の後、 <code>:active</code> の前に <code>:hover</code> の規則を置いてください。</p>
+
+<div class="note"><strong>メモ</strong>: <code>:hover</code> 疑似クラスはタッチスクリーンで問題になります。ブラウザ―によっては、 <code>:hover</code> 疑似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーがタッチをやめるても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;a href="#"&gt;このリンクの上を通過させてみてください。&lt;/a&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3>
+
+<p><code>:hover</code> 疑似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</p>
+
+<div class="note"><strong>メモ:</strong> <a class="internal" href="/ja/docs/Web/CSS/%3Achecked"><code>:checked</code></a> 疑似クラスを（隠れたラジオボタンに適用して）使用した同様の効果の例として、 <a class="internal" href="/ja/docs/Web/CSS/:checked">:checked</a> のリファレンスページから取った<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>も参照してください。</div>
+
+<h2 id="Specifications" name="Specifications"><span>仕様策定状況</span></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('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td><code>:hover</code> があらゆる疑似要素に適用できるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.hover")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_in-range/index.html b/files/ja/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..825e415327
--- /dev/null
+++ b/files/ja/web/css/_colon_in-range/index.html
@@ -0,0 +1,116 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:in-range</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 入力範囲が設定されていて、値がその範囲に該当する
+   &lt;input&gt; 要素をすべて選択 */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<div class="note"><strong>Note:</strong> この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;1から10の間の値が有効です。
+    &lt;li&gt;
+      &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+      &lt;label for="value1"&gt;あなたの値は&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+  content: '範囲外です！';
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+</div>
+
+<div>{{EmbedLiveSample('Example', 600, 140)}}</div>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>いつ HTML が <code>:in-range</code> に該当するかを定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.selectors.in-range")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_indeterminate/index.html b/files/ja/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..6a444e188a
--- /dev/null
+++ b/files/ja/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,142 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - ':indeterminate'
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+  - checkbox
+  - progress
+  - radio button
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:indeterminate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性が <code>true</code> に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある &lt;input&gt; をすべて選択 */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>このセレクターが対象とする要素は以下の通りです。</p>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code> 要素で、<a href="/ja/docs/Web/JavaScript">JavaScript</a> によって <code>indeterminate</code> プロパティが <code>true</code> に設定されている場合</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li>
+ <li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3>
+
+<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;背景が緑色になるはずです&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;背景が緑色になるはずです&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;progress&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</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('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML における意味論と制約検証の定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.indeterminate")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code> 要素の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性</li>
+ <li>{{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li>{{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_invalid/index.html b/files/ja/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..9eb7b9d655
--- /dev/null
+++ b/files/ja/web/css/_colon_invalid/index.html
@@ -0,0 +1,154 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+  - セレクター
+  - 擬似クラス
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:invalid</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に失敗したものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 無効な &lt;input&gt; を選択 */
+input:invalid {
+  background-color: pink;
+}</pre>
+
+<p>この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="field"&gt;
+    &lt;label for="url_input"&gt;URL を入力して下さい:&lt;/label&gt;
+    &lt;input type="url" id="url_input"&gt;
+  &lt;/div&gt;
+
+  &lt;div class="field"&gt;
+    &lt;label for="email_input"&gt;メールアドレスを入力して下さい:&lt;/label&gt;
+    &lt;input type="email" id="email_input" required&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Understanding Success Criterion 1.4.1 | W3C WCAG 2.0 の理解</a></li>
+</ul>
+
+<h2 id="Notes" name="Notes">注</h2>
+
+<h3 id="Radio_buttons" name="Radio_buttons">ラジオボタン</h3>
+
+<p>グループのラジオボタンの1つがs <code>required</code> の場合、 <code>:invalid</code> 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ <code>name</code> 属性を共有しています。）</p>
+
+<h3 id="Gecko_defaults" name="Gecko_defaults">Gecko の既定値</h3>
+
+<p>既定で Gecko は <code>:invalid</code> 擬似クラスのスタイルを適用しません。しかし、 <code>:invalid</code> の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。</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('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML の意味論と制約検証を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.invalid")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>検証に関する他の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
+ <li>関連する Mozilla の擬似クラス: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+ <li>JavaScript からの <a href="/ja/docs/Web/API/ValidityState">validity state</a> へのアクセス</li>
+</ul>
diff --git a/files/ja/web/css/_colon_is/index.html b/files/ja/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..9335378d3d
--- /dev/null
+++ b/files/ja/web/css/_colon_is/index.html
@@ -0,0 +1,265 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+tags:
+  - ':is'
+  - CSS
+  - Experimental
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Selectors
+  - Web
+translation_of: 'Web/CSS/:is'
+---
+<p>{{CSSRef}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <code>:matches()</code> は <code>:is()</code> に改名されました。 (<a href="https://github.com/w3c/csswg-drafts/issues/3258" style="white-space: nowrap;">CSSWG issue #3258</a>)</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:is()</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数は、セレクターのリストを引数に取り、リスト中のセレクターの何れか一つに当てはまる要素をすべて選択します。数多くのセレクターを小さくまとめて書くのに便利です。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* header, main, footer 要素の中の段落で
+   マウスポインタが通過中のものをすべて選択 */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* 上記のものは以下のものと同じ */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<p>なお、現在のところ、ブラウザーはこの機能を <code>:matches()</code> や、古いバージョンの Chrome, Firefox, Safari では、さらに古い接頭辞付きの擬似クラス — <code>:any()</code> で対応しています。 <code>:any()</code> は <code>:matches()</code>/<code>:is()</code> とまったく同じものとして動作しますが、ベンダー接頭辞が必要であり、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">複合セレクター</a>に対応していません。</p>
+
+<p>後方互換性のために古い擬似クラスを使用することができます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* -*-any() および :matches() と後方互換性のあるバージョン
+   (無効なセレクターがあるとルール全体が無効になるため、
+   セレクターを単一のルールにグループ化することはできません。) */
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h3 id="Forgiving_Selector_Parsing" name="Forgiving_Selector_Parsing">セレクターの解釈の許容</h3>
+
+<p>仕様では <code>:is()</code> と <code>:where()</code> が<a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">省略可能なセレクターリスト</a>を受け入れることを定義しています。</p>
+
+<p>CSS でセレクターリストを使用している場合、セレクターのどれかが無効な場合、リスト全体が無効とみなされます。 <code>:is()</code> や <code>:where()</code> を使用している場合、1 つでも解釈に失敗するとセレクターのリスト全体が無効とみなされるのではなく、不正なセレクターや対応していないセレクターは無視され、他のセレクターが使用されます。
+
+</p><pre class="brush: css notranslate">:is(:valid, :unsupported) {
+  ...
+}</pre>
+
+<p><code>:unsupported</code> をに対応していないブラウザーでも、正しく解釈して <code>:valid</code> にマッチします。</p>
+
+<pre class="brush: css notranslate">:valid, :unsupported {
+  ...
+}</pre>
+
+<p><code>:unupported</code> に対応していないブラウザーでは、 <code>:valid</code> に対応していても無視されます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Cross-browser_example" name="Cross-browser_example">クロスブラウザーの例</h3>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;p&gt;This is my header paragraph&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;This is my first&lt;/p&gt;&lt;p&gt;list item&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;This is my second&lt;/p&gt;&lt;p&gt;list item&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;This is my footer paragraph&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<pre class="brush: js notranslate">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+      }
+    }
+  }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample("Cross-browser_example", "100%", 300)}}</p>
+
+<h3 id="Simplifying_list_selectors" name="Simplifying_list_selectors">リストセレクターの簡略化</h3>
+
+<p><code>:is()</code> 擬似クラスは CSS セレクターをとても簡潔にすることができます。例えば以下の CSS の場合、</p>
+
+<pre class="brush: css notranslate">/* 3層（以上）の順序なしリストに四角形を使用 */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>... これを次のように置き換えることができます。</p>
+
+<pre class="brush: css notranslate">/* 3層（以上）の順序なしリストに四角形を使用 */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Simplifying_section_selectors" name="Simplifying_section_selectors">section セレクターの簡略化</h3>
+
+<p><code>:is()</code> 擬似クラスは、 HTML5 の<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">セクションと見出し</a>を扱うときに特に便利です。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} は互いによく入れ子になりますので、 <code>:is()</code> がないと、1つ1つを選択してスタイルを適用するのが難しくなります。</p>
+
+<p>例えば、 <code>:is()</code> を使わずに、異なる深さの {{HTMLElement("h1")}} 要素にスタイルを適用すると、とても複雑になります。</p>
+
+<pre class="brush: css notranslate">/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... 考えたくありません! */
+</pre>
+
+<p><code>:is()</code> を使用すると、ずっと簡単になります。</p>
+
+<pre class="brush: css notranslate">/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+</pre>
+
+<h3 id="Difference_between_is_and_where" name="Difference_between_is_and_where">:is() と :where() の違い</h3>
+
+<p>この2つの違いは、 <code>:is()</code> がセレクター全体の詳細度にカウントされるのに対し、 {{CSSxRef(":where", ":where()")}} は詳細度の値が 0 であることです。これは、 <code>:where()</code> のリファレンスページにある<a href="/ja/docs/Web/CSS/:where#Examples">例</a>で示されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<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("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.is")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} - <code>:is()</code> と同様ですが、<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が0です。</li>
+ <li><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a></li>
+ <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..85c6321ad1
--- /dev/null
+++ b/files/ja/web/css/_colon_lang/index.html
@@ -0,0 +1,104 @@
+---
+title: ':lang'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - ウェブ
+  - セレクター
+  - リファレンス
+  - レイアウト
+  - 疑似クラス
+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>
+
+<pre class="brush: css no-line-numbers">/* 英語 (en) の &lt;p&gt; をすべて選択 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<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>
+
+<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>
+</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>
+
+<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;
+&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'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 350)}}</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('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>有意な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<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>
+</ul>
diff --git a/files/ja/web/css/_colon_last-child/index.html b/files/ja/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..7c49e1ef58
--- /dev/null
+++ b/files/ja/web/css/_colon_last-child/index.html
@@ -0,0 +1,129 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:last-child</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 notranslate">/* 兄弟要素の中で最後の &lt;p&gt; を
+   すべてを選択 */
+p:last-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>注:</strong> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+  &lt;p&gt;This text is selected!&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p>
+
+<h3 id="Styling_a_list" name="Styling_a_list">リストのスタイル付け</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3
+    &lt;ul&gt;
+      &lt;li&gt;Item 3.1&lt;/li&gt;
+      &lt;li&gt;Item 3.2&lt;/li&gt;
+      &lt;li&gt;Item 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Styling_a_list')}}</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('CSS4 Selectors', '#the-last-child-pseudo', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child-pseudo', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.last-child")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":nth-child")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_last-of-type/index.html b/files/ja/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..e8be8ce196
--- /dev/null
+++ b/files/ja/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,113 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:last-of-type</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、兄弟要素のグループの中でその種類の最後の要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 兄弟要素の中で最後の &lt;p&gt; 要素をすべて選択 */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Styling_the_last_paragraph" name="Styling_the_last_paragraph">最後の段落の整形</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Heading&lt;/h2&gt;
+&lt;p&gt;Paragraph 1&lt;/p&gt;
+&lt;p&gt;Paragraph 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:last-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Styling_the_last_paragraph')}}</p>
+
+<h3 id="Nested_elements" name="Nested_elements">入れ子になった要素</h3>
+
+<p>この例は、どうやって入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、<a href="/ja/docs/Web/CSS/Universal_selectors">ユニバーサルセレクター</a> (<code>*</code>) が暗黙に含まれています。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div&gt;This `div` is first.&lt;/div&gt;
+  &lt;div&gt;This &lt;span&gt;nested `span` is last&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;This &lt;em&gt;nested `em` is first&lt;/em&gt;, but this &lt;em&gt;nested `em` is last&lt;/em&gt;!&lt;/div&gt;
+  &lt;b&gt;This `b` qualifies!&lt;/b&gt;
+  &lt;div&gt;This is the final `div`!&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">article :last-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Nested_elements', 500)}}</p>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_left/index.html b/files/ja/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..141cfe4573
--- /dev/null
+++ b/files/ja/web/css/_colon_left/index.html
@@ -0,0 +1,77 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - ウェブ
+  - 疑似クラス
+translation_of: 'Web/CSS/:left'
+---
+<div>{{ CSSRef() }}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の左側のページすべてを表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 印刷時に左側のページを選択 */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば <code>:left</code> ページになります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@page :left {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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 Paged Media', '#left-right-first', ':left') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_link/index.html b/files/ja/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..4a78a0d6e8
--- /dev/null
+++ b/files/ja/web/css/_colon_link/index.html
@@ -0,0 +1,105 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - CSS Reference
+  - Pseudo-class
+  - Reference
+  - 疑似クラス
+translation_of: 'Web/CSS/:link'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:link</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、まだ訪問されていない要素を表します。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} など、 <code>href</code> 属性を持つ未訪問のすべての要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* 未訪問の &lt;a&gt; をすべて選択します */
+a:link {
+  color: red;
+}</pre>
+
+<p><code>:link</code> 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":active")}}、{{cssxref(":hover")}}、 {{cssxref(":visited")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 <em>LVHA 順</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> で定義されるように、他のすべてのリンク関連規則の前に <code>:link</code> 規則を置いてください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 訪問済みかどうかにかかわらず要素を選択するには、 {{cssxref(":any-link")}} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>既定では、大半のブラウザーが訪問済みのリンクに特殊な {{cssxref("color")}} の値を適用しています。そのため、この例のリンクは訪問前でしか特殊な文字色にならないでしょう（よって、再度確認するにはブラウザーの履歴をクリアする必要があるでしょう）。しかし、 {{cssxref("background-color")}} の値は大半のブラウザーが既定で訪問済みのリンクに設定していないので残るでしょう。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#ordinary-target"&gt;これは普通のリンクです。&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;このリンクを訪問しました。&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;リンクのプレイスホルダー（スタイルの適用なし）&lt;/a&gt;
+</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css">a:link {
+  background-color: gold;
+  color: green;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.link")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_not/index.html b/files/ja/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..50707d6fc0
--- /dev/null
+++ b/files/ja/web/css/_colon_not/index.html
@@ -0,0 +1,133 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+tags:
+  - ':not()'
+  - CSS
+  - Layout
+  - Negation
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:not()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、列挙されたセレクターに一致しない要素を表します。特定の項目が選択されることを防ぐため、<em>否定擬似クラス (negation pseudo-class)</em> と呼ばれています。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 段落以外の要素を選択 */
+:not(p) {
+  color: blue;
+}</pre>
+
+<p><code>:not()</code> 擬似クラスには、使用する前に知っておいた方が良い<a href="/ja/docs/Web/CSS/:not#Description">クセやコツ、予想外の結果</a>がいくつかあります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>:not()</code> 擬似クラスは引数として、1つまたは複数のセレクターをカンマで区切ったものを要求します。リストには否定セレクターや<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を含めることはできません。</p>
+
+<div class="warning">
+<p>複数のセレクターを指定することは実験的な機能で、広くは対応されていません。</p>
+</div>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>:not()</code> を使用する際のふつうではない効果や結果がいくつかありますので、使用する際には気を付けてください。</p>
+
+<ul>
+ <li><code>:not</code> 擬似クラスは入れ子にすることができません。すなわち <code>:not(:not(...))</code> は無効です。</li>
+ <li>擬似要素は単純セレクターではありませんので、 <code>:not()</code> で有効な引数にはなりません。従って、 <code>:not(p::before)</code> のようなセレクターは動作しません。</li>
+ <li>この擬似クラスを使用して無意味なセレクターを書くことができます。例えば、 <code>:not(*)</code> は要素ではないすべての要素を選択するので、規則は適用されません。</li>
+ <li>この擬似クラスは規則の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>を上げることができます。例えば、 <code>#foo:not(#bar)</code> は単純な <code>#foo</code> と同じ要素を選択しますが、詳細度はより高くなります。</li>
+ <li><code>:not(.foo)</code> は <code>.foo</code> ではないすべての要素を選択するため、<em>{{HTMLElement("html")}} や {{HTMLElement("body")}} も選択します。</em></li>
+ <li>このセレクターは1つの要素のみに適用されます。先祖要素を除外することはできません。例えば、 <code>body :not(table) a</code> はテーブル内のリンクにも適用されます。 {{HTMLElement("tr")}} がセレクターの <code>:not()</code> の部分に該当するからです。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;I am a paragraph.&lt;/p&gt;
+&lt;p class="fancy"&gt;I am so very fancy!&lt;/p&gt;
+&lt;div&gt;I am NOT a paragraph.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* '.fancy' クラスの中にない &lt;p&gt; 要素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* &lt;p&gt; 要素ではない要素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* &lt;div&gt; または &lt;span&gt; 要素ではない要素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* '.crazy' または '.fancy' ではない要素 */
+/* なお、この文法は十分に対応されていません。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>引数で単純セレクター以外も許容数量に拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.not")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li>
+ <li>関連する CSS 擬似クラス:
+  <ul>
+   <li>{{cssxref(":has", ":has()")}}</li>
+   <li>{{cssxref(":is", ":is()")}}</li>
+   <li>{{cssxref(":where", ":where()")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_nth-child/index.html b/files/ja/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..43b4a9f49a
--- /dev/null
+++ b/files/ja/web/css/_colon_nth-child/index.html
@@ -0,0 +1,204 @@
+---
+title: ':nth-child()'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - Web
+  - セレクター
+  - 擬似クラス
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:nth-child()</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>は、兄弟要素のグループの中での位置に基づいて選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* リスト中の2番目の &lt;li&gt; 要素を選択 */
+li:nth-child(2) {
+  color: lime;
+}
+
+/* 兄弟要素の中で3つおきに
+   要素を選択 */
+:nth-child(4n) {
+  color: lime;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>nth-child</code> 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。</p>
+
+<h3 id="Keyword_values" name="Keyword_values">キーワード値</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。</dd>
+ <dt><code>even</code></dt>
+ <dd>一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。</dd>
+</dl>
+
+<h3 id="Functional_notation" name="Functional_notation">関数表記</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>リスト中の位置が、 <code>An+B</code> で定義された数値のパターンと一致する要素を表します。<br>
+ <code>A</code> は整数の刻み値です。<br>
+ <code>B</code> は整数の加算値です。<br>
+ <code>n</code> はすべての正の整数で、0から始まります。</dd>
+ <dd>リスト中の <em>An+B</em> 番目の要素として読むことができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">セレクターの例</h3>
+
+<dl>
+ <dt><code>tr:nth-child(odd)</code> 又は <code>tr:nth-child(2n+1)</code></dt>
+ <dd>HTML テーブルの奇数行 (1, 3, 5, など) を表します。</dd>
+ <dt><code>tr:nth-child(even)</code> または <code>tr:nth-child(2n)</code></dt>
+ <dd>HTML テーブルの偶数行 (2, 4, 6, など) を表します。</dd>
+ <dt><code>:nth-child(7)</code></dt>
+ <dd>7番目の要素を表します。</dd>
+ <dt><code>:nth-child(5n)</code></dt>
+ <dd><strong>5</strong>番目 [=5×1], <strong>10</strong>番目 [=5×2], <strong>15</strong>番目 [=5×3], <strong>等</strong>の要素を表します。最初のものは <strong>0</strong>番目 [=5x0] が式の結果として返りますが、 <code>n</code> が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように <code>B</code> の部分が <code>&gt;0</code> となる場合にもっとよく分かるでしょう。</dd>
+ <dt><code>:nth-child(n+7)</code></dt>
+ <dd>7番目とそれ以降のすべての要素を表します。 <strong>7</strong>番目 [=0+7], <strong>8</strong>番目 [=1+7], <strong>9</strong>番目 [=2+7], <strong>等</strong>です。</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd><strong>4</strong>番目 [=(3×0)+4], <strong>7</strong>番目 [=(3×1)+4], <strong>10</strong>番目 [=(3×2)+4], <strong>13</strong>番目 [=(3×3)+4], <strong>等</strong>の要素を表します。</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>兄弟要素のグループの中ですべての <code>&lt;p&gt;</code> 要素を表します。これは単純な <code>p</code> セレクターと同じ要素を選択します (但し、具体度はより高くなります)。</dd>
+ <dt><code>p:nth-child(1)</code> または <code>p:nth-child(0n+1)</code></dt>
+ <dd>兄弟要素のグループの中で最初の <code>&lt;p&gt;</code> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。</dd>
+</dl>
+
+<dl>
+ <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
+ <dd>兄弟要素のグループの中で8～15番目の <code>&lt;p&gt;</code> 要素を表します。</dd>
+</dl>
+
+<h3 id="Detailed_example" name="Detailed_example">詳細な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITHOUT an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 3, 5, and 7 are selected.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITH an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 5, and 7 are selected.&lt;br&gt;
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;This is an `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, WITH an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 4, 6, and 8 are selected.&lt;br&gt;
+   3 isn't used in the counting or selected because it is an &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   not a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, and &lt;code&gt;nth-of-type&lt;/code&gt; only selects
+   children of that type. The &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; is completely skipped
+   over and ignored.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;This is an `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Detailed_example', 550, 550)}}</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('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td><code>&lt;selector&gt;</code> の構文と仕様書に、親を持たない要素も一致するよう追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_nth-last-child/index.html b/files/ja/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..997902b16f
--- /dev/null
+++ b/files/ja/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,196 @@
+---
+title: ':nth-last-child()'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - CSS
+  - ウェブ
+  - セレクター
+  - リファレンス
+  - レイアウト
+  - 疑似クラス
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:nth-last-child()</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、兄弟要素のグループの中での位置に基づいて選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* 兄弟要素の中で、後ろから数えて
+   3つおきに要素を選択 */
+:nth-last-child(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> この疑似クラスは、最初から後に向けてではなく<em>最後</em>から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>nth-last-child</code> 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。</p>
+
+<h3 id="Keyword_values" name="Keyword_values">キーワード値</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。</dd>
+ <dt><code>even</code></dt>
+ <dd>一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。</dd>
+</dl>
+
+<h3 id="Functional_notation" name="Functional_notation">関数表記</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>一連の兄弟要素の中で、 <code>n</code> に正の整数か0が入るとき、 <code>An+B</code> のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は <code>1</code> です。 <code>A</code> と <code>B</code> の値は両方とも {{cssxref("&lt;integer&gt;")}} です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">セレクターの例</h3>
+
+<dl>
+ <dt><code>tr:nth-last-child(odd)</code> または <code>tr:nth-last-child(2n+1)</code></dt>
+ <dd>HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。</dd>
+ <dt><code>tr:nth-last-child(even)</code> または <code>tr:nth-last-child(2n)</code></dt>
+ <dd>HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。</dd>
+ <dt><code>:nth-last-child(7)</code></dt>
+ <dd>最後から数えて 7 番目の要素を表します。</dd>
+ <dt><code>:nth-last-child(5n)</code></dt>
+ <dd>最後から数えて 5, 10, 15 番目などの要素を表します。</dd>
+ <dt><code>:nth-last-child(3n+4)</code></dt>
+ <dd>最後から数えて 4, 7, 10, 13 番目などの要素を表します。</dd>
+ <dt><code>:nth-last-child(-n+3)</code></dt>
+ <dd>兄弟要素のグループの中で最後の3つの要素を表します。</dd>
+ <dt><code>p:nth-last-child(n)</code> 又は <code>p:nth-last-child(n+1)</code></dt>
+ <dd>兄弟要素のグループの中ですべての <code>&lt;p&gt;</code> 要素を表します。これは単純な <code>p</code> セレクターと同じです。 (<code>n</code> はゼロから始まるので、最後の要素が1で始まり、 <code>n</code> 及び <code>n+1</code> が共に同じ要素を選択します。)</dd>
+ <dt><code>p:nth-last-child(1)</code> または <code>p:nth-last-child(0n+1)</code></dt>
+ <dd>兄弟要素のグループの中で最初の <code>&lt;p&gt;</code> 要素すべてを表します。これは {{cssxref(":last-child")}} セレクターと同じです。</dd>
+</dl>
+
+<h3 id="Detailed_example" name="Detailed_example">詳細な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;First line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Second line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Third line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Fourth line&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Fifth line&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  border: 1px solid blue;
+}
+
+/* 最後から3つの要素を選択 */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* 後ろから2番目から最初までの要素を選択 */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* 後ろから2番目の要素のみを選択 */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Table_example', 300, 150)}}</p>
+
+<h3 id="Quantity_query" name="Quantity_query">数量クエリ</h3>
+
+<p><em>数量クエリ</em>は、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは <code>nth-last-child</code> 疑似クラスと <a href="/ja/docs/Web/CSS/General_sibling_selectors">一般兄弟結合子</a>の機能を組み合わせることで実現できます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h4&gt;4項目のリスト (スタイル付き):&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+  &lt;li&gt;Four&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h4&gt;2項目のリスト (スタイルなし):&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* 3つ以上のリスト項目がある場合、
+   すべてにスタイル付けする */
+li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Edge_case_example')}}</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('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>親を持たない要素も一致するよう追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.nth-last-child")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+ <li><a href="https://alistapart.com/article/quantity-queries-for-css">CSS の数量クエリ</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.html b/files/ja/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..302644c802
--- /dev/null
+++ b/files/ja/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,97 @@
+---
+title: ':nth-last-of-type()'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - ウェブ
+  - セレクター
+  - リファレンス
+  - レイアウト
+  - 疑似クラス
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:nth-last-of-type()</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* 兄弟の &lt;p&gt; 要素の中で、
+   後ろから数えて3つおきに選択 */
+p:nth-last-of-type(4n) {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> この疑似クラスは、最初から後に向けてではなく<em>最後</em>から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>nth-last-of-type</code> 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。</p>
+
+<p>構文の詳しい説明は {{Cssxref(":nth-last-child")}} を参照してください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;This is a span.&lt;/span&gt;
+  &lt;span&gt;This is another span.&lt;/span&gt;
+  &lt;em&gt;This is emphasized.&lt;/em&gt;
+  &lt;span&gt;Wow, this span gets limed!!!&lt;/span&gt;
+  &lt;strike&gt;This is struck through.&lt;/strike&gt;
+  &lt;span&gt;Here is one last span.&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>親を持たない要素も該当するよう追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_nth-of-type/index.html b/files/ja/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..9cc99efb72
--- /dev/null
+++ b/files/ja/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,113 @@
+---
+title: ':nth-of-type()'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 擬似クラス
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:nth-of-type()</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  language-css notranslate">/* 兄弟の &lt;p&gt; 要素の中で、
+   3つおきに選択 */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>nth-of-type</code> 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。</p>
+
+<p>構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div&gt;This element isn't counted.&lt;/div&gt;
+  &lt;p&gt;1st paragraph.&lt;/p&gt;
+  &lt;p&gt;2nd paragraph.&lt;/p&gt;
+  &lt;div&gt;This element isn't counted.&lt;/div&gt;
+  &lt;p&gt;3rd paragraph.&lt;/p&gt;
+  &lt;p class="fancy"&gt;4th paragraph.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* 奇数の段落 */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* 偶数の段落 */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* 最初の段落 */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
+p.fancy:nth-of-type(1) {
+  text-decoration: underline;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Basic_example', 250, 200)}}</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('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>親を持たない要素も該当するよう追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_only-child/index.html b/files/ja/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..89ce4eb5fd
--- /dev/null
+++ b/files/ja/web/css/_colon_only-child/index.html
@@ -0,0 +1,141 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - CSS
+  - ウェブ
+  - セレクター
+  - リファレンス
+  - レイアウト
+  - 擬似クラス
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:only-child</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、兄弟要素がない要素を表します。 <code>:first-child:last-child</code> または <code>:nth-child(1):nth-last-child(1)</code> と同じですが、詳細度はより低くなります。</p>
+
+<pre class="brush: css no-line-numbers">/* 親の唯一の子である &lt;p&gt; 要素をすべて選択 */
+p:only-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div&gt;I am an only child.&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;div&gt;I am the 1st sibling.&lt;/div&gt;
+  &lt;div&gt;I am the 2nd sibling.&lt;/div&gt;
+  &lt;div&gt;I am the 3rd sibling, &lt;div&gt;but this is an only child.&lt;/div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div:only-child {
+  color: red;
+}
+
+div {
+  display: inline-block;
+  margin: 6px;
+  outline: 1px solid;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Basic_example','100%',180)}}</p>
+
+<h3 id="A_list_example" name="A_list_example">リストの例</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;First
+    &lt;ul&gt;
+      &lt;li&gt;This list has just one element.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Second
+    &lt;ul&gt;
+      &lt;li&gt;This list has three elements.&lt;/li&gt;
+      &lt;li&gt;This list has three elements.&lt;/li&gt;
+      &lt;li&gt;This list has three elements.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">li li {
+  list-style-type: disc;
+}
+
+li:only-child {
+  color: red;
+  list-style-type: square;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('A_list_example', '100%', 210)}}</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('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<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.only-child")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{Cssxref(":only-of-type")}}</li>
+ <li>{{Cssxref(":first-child")}}</li>
+ <li>{{Cssxref(":last-child")}}</li>
+ <li>{{Cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_only-of-type/index.html b/files/ja/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..bf2d2b4df9
--- /dev/null
+++ b/files/ja/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,98 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:only-of-type</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、同じ型の兄弟要素がない要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 親の唯一の子の &lt;p&gt; である &lt;p&gt; 要素をすべて選択 */
+p:only-of-type {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;main&gt;
+  &lt;div&gt;I am `div` #1.&lt;/div&gt;
+  &lt;p&gt;I am the only `p` among my siblings.&lt;/p&gt;
+  &lt;div&gt;I am `div` #2.&lt;/div&gt;
+  &lt;div&gt;I am `div` #3.
+    &lt;i&gt;I am the only `i` child.&lt;/i&gt;
+    &lt;em&gt;I am `em` #1.&lt;/em&gt;
+    &lt;em&gt;I am `em` #2.&lt;/em&gt;
+  &lt;/div&gt;
+&lt;/main&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">main :only-of-type {
+  color: red;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Example','100%',180)}}</p>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>選択する要素に親を必要としないようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{Cssxref(":only-child")}}</li>
+ <li>{{Cssxref(":first-of-type")}}</li>
+ <li>{{Cssxref(":last-of-type")}}</li>
+ <li>{{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_optional/index.html b/files/ja/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..cdce764fdb
--- /dev/null
+++ b/files/ja/web/css/_colon_optional/index.html
@@ -0,0 +1,124 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:optional</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 任意の &lt;input&gt; をすべて選択 */
+input:optional {
+  border: 1px dashed black;
+}</pre>
+
+<p>この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref(":required")}} 擬似クラスは<em>必須</em>のフォーム欄を選択します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="The_optional_field_has_a_purple_border" name="The_optional_field_has_a_purple_border">オプションのフィールドの枠を紫にする</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="field"&gt;
+    &lt;label for="url_input"&gt;Enter a URL:&lt;/label&gt;
+    &lt;input type="url" id="url_input"&gt;
+  &lt;/div&gt;
+
+  &lt;div class="field"&gt;
+    &lt;label for="email_input"&gt;Enter an email address:&lt;/label&gt;
+    &lt;input type="email" id="email_input" required&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:optional {
+  border-color: rebeccapurple;
+  border-width: 3px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><a href="/ja/docs/Web/HTML/Element/form">フォーム</a>に必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
+
+<p>必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>HTML の意味論と制約検証を定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.optional")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_out-of-range/index.html b/files/ja/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..7afe975a9e
--- /dev/null
+++ b/files/ja/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,117 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Selectors
+  - UI Selector
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:out-of-range</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 入力範囲が設定されていて、値がその範囲外である
+   &lt;input&gt; 要素をすべて選択 */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}</pre>
+
+<p>この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<div class="note"><strong>注:</strong> この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form action="" id="form1"&gt;
+ &lt;p&gt;1から10の間の値が有効です。&lt;/p&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;
+      &lt;label for="value1"&gt;あなたの値は&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; notranslate">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+  content: '範囲外です！';
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+</div>
+
+<div>{{EmbedLiveSample('Examples', 600, 140)}}</div>
+
+<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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>いつ HTML が <code>:out-of-range</code> に該当するかを定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.out-of-range")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検査</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..ff139e88fc
--- /dev/null
+++ b/files/ja/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,200 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:placeholder-shown</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、<a href="/ja/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">プレイスホルダー文字列</a>が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* プレイスホルダーが有効な要素を選択 */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="何か入力してください！"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  border-color: silver;
+}
+
+input:-moz-placeholder {
+  border-color: silver;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example", 200, 60)}}</p>
+
+<h3 id="Overflowing_text" name="Overflowing_text">文字列があふれる場合</h3>
+
+<p>スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="宜しければ、この入力欄に何か入力してください！"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input:-moz-placeholder {
+  text-overflow: ellipsis;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Overflowing_text", 200, 60)}}</p>
+
+<h3 id="Colored_text" name="Colored_text">色付きのテキスト</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Type something here!"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  color: red;
+  font-style: italic;
+}
+
+input:-moz-placeholder {
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample("Colored_text", 200, 60)}}</p>
+
+<h3 id="Customized_input_field" name="Customized_input_field">カスタマイズした入力欄</h3>
+
+<p>以下の例では部署名と ID コード欄をカスタムスタイルで強調します。</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;
+    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
+    &lt;input id="name" placeholder="Student Name"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
+    &lt;input id="branch" placeholder="Student Branch"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
+    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
+  &lt;/p&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input.studentid:-ms-input-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+
+input.studentid:-moz-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result_4" name="Result_4">結果</h4>
+
+<p>{{EmbedLiveSample("Customized_input_field", 200, 180)}}</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("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("::placeholder")}} 疑似要素はプレイスホルダー<em>自身</em>にスタイルを適用します。</li>
+ <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_read-only/index.html b/files/ja/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..297b45a46e
--- /dev/null
+++ b/files/ja/web/css/_colon_read-only/index.html
@@ -0,0 +1,121 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:read-only</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、ユーザーが編集できない要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">input:read-only, textarea:read-only {
+  background-color: #ccc;
+}
+
+p:read-only {
+  background-color: #ccc;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
+
+<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
+
+<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code>&lt;textarea&gt;</code> により良いスタイル付けを行うために使用されています。</p>
+
+<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+  border: 0;
+  box-shadow: none;
+  background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}</pre>
+
+<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+
+<h3 id="Styling_read-only_non-form_controls" name="Styling_read-only_non-form_controls">フォーム以外の読み取り専用コントロールのスタイル付け</h3>
+
+<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない<em>あらゆる</em>要素を選択します。</p>
+
+<pre class="brush: html notranslate">&lt;p contenteditable&gt;この段落は編集可能です。読み書き可です。&lt;/p&gt;
+
+&lt;p&gt;この段落は編集できません。読み取り専用です。&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>HTML および制約検証に関する意味を定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.read-only")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":read-write")}}</li>
+ <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
+</ul>
diff --git a/files/ja/web/css/_colon_read-write/index.html b/files/ja/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..64552f03de
--- /dev/null
+++ b/files/ja/web/css/_colon_read-write/index.html
@@ -0,0 +1,121 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:read-write</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、ユーザーが編集できる要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">input:read-write, textarea:read-write {
+  background-color: #bbf;
+}
+
+p:read-write {
+  background-color: #bbf;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
+
+<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
+
+<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code>&lt;textarea&gt;</code> により良いスタイル付けを行うために使用されています。</p>
+
+<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+  border: 0;
+  box-shadow: none;
+  background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}</pre>
+
+<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+
+<h3 id="Styling_read-write_non-form_controls" name="Styling_read-write_non-form_controls">フォーム以外の読み書き用コントロールのスタイル付け</h3>
+
+<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できる<em>あらゆる</em>要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。</p>
+
+<pre class="brush: html notranslate">&lt;p contenteditable&gt;この段落は編集可能です。読み書き可です。&lt;/p&gt;
+
+&lt;p&gt;この段落は編集できません。読み取り専用です。&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>HTML および制約検証に関する意味を定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
+</ul>
diff --git a/files/ja/web/css/_colon_required/index.html b/files/ja/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..b69b29f628
--- /dev/null
+++ b/files/ja/web/css/_colon_required/index.html
@@ -0,0 +1,128 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:required'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:required</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 必須の &lt;input&gt; をすべて選択 */
+input:required {
+  border: 1px dashed red;
+}</pre>
+
+<p>この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref(":optional")}} 擬似クラスは<em>任意</em>のフォーム欄を選択します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="The_required_field_has_a_red_border" name="The_required_field_has_a_red_border">必須フィールドの枠を赤にする</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="field"&gt;
+    &lt;label for="url_input"&gt;Enter a URL:&lt;/label&gt;
+    &lt;input type="url" id="url_input"&gt;
+  &lt;/div&gt;
+
+  &lt;div class="field"&gt;
+    &lt;label for="email_input"&gt;Enter an email address:&lt;/label&gt;
+    &lt;input type="email" id="email_input" required&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
+
+<p>フォームに<a href="/ja/docs/Web/CSS/:optional">任意</a>の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>HTML の意味論と制約検証を定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.required")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の検証関連の擬似クラス: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_right/index.html b/files/ja/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..1b6b7e2505
--- /dev/null
+++ b/files/ja/web/css/_colon_right/index.html
@@ -0,0 +1,77 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+tags:
+  - '@page'
+  - CSS
+  - CSS ページ化メディア
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - ウェブ
+  - 疑似クラス
+translation_of: 'Web/CSS/:right'
+---
+<div>{{ CSSRef() }}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:left</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">疑似クラス</a>は {{cssxref("@page")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> で使われ、印刷文書の右側のページすべてを表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 印刷時に右側のページを選択 */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば <code>:right</code> ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2in 3in;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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 Paged Media', '#left-right-first', ':right') }}</td>
+   <td>{{ Spec2('CSS3 Paged Media') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.right")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ Cssxref("@page") }}</li>
+ <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_root/index.html b/files/ja/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..7b91951406
--- /dev/null
+++ b/files/ja/web/css/_colon_root/index.html
@@ -0,0 +1,65 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:root</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、文書を表すツリーのルート要素を選択します。 HTML では、 <code>:root</code> は {{HTMLElement("html")}} 要素を表し、<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が高いことを除けば <code>html</code> セレクターと同等です。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 文書のルート要素（HTML の場合は &lt;html&gt;）を選択 */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><code>:root</code> はグローバルの <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a>を宣言するのに便利です。</p>
+
+<pre class="brush: css notranslate">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<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('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.selectors.root")}}</p>
diff --git a/files/ja/web/css/_colon_scope/index.html b/files/ja/web/css/_colon_scope/index.html
new file mode 100644
index 0000000000..888c9a876e
--- /dev/null
+++ b/files/ja/web/css/_colon_scope/index.html
@@ -0,0 +1,125 @@
+---
+title: ':scope'
+slug: 'Web/CSS/:scope'
+tags:
+  - CSS
+  - Layout
+  - Reference
+  - Web
+  - スコープ付き要素
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:scope'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:scope</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>で、セレクターが選択する対象の参照点である要素を表します。</p>
+
+<pre class="brush: css">/* スコープとなる要素を選択 */
+:scope {
+  background-color: lime;
+}</pre>
+
+<p>現在、スタイルシートで使用したときは、現時点ではスコープ付きの要素を明確に確立する方法がないため、 <code>:scope</code> は {{cssxref(":root")}} と同じです。 DOM API ({{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, {{domxref("Element.closest()")}} など) で使用したときは、 <code>:scope</code> はメソッドを呼び出した要素を選択します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox language-html">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Identity_match" name="Identity_match">ID の一致</h3>
+
+<p>この例では、 {{domxref("Element.matches()")}} メソッドから <code>:scope</code> を使用して呼び出される要素を選択する方法を紹介します。</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "はい、この要素は自分自身のスコープ内にあります！";
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p id="para"&gt;
+  これは段落です。面白い段落ではありません。すみません。
+&lt;/p&gt;
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<div>{{ EmbedLiveSample('Identity_match') }}</div>
+
+<h3 id="Direct_children" name="Direct_children">直接の子</h3>
+
+<p><code>:scope</code> 疑似クラスが有用だと示されるのは、すでに受け取っている {{domxref("Element")}} の直接の子を取得する必要がある場合です。</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var context = document.getElementById('context');
+var selected = context.querySelectorAll(':scope &gt; div');
+
+document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
+    return '#' + element.getAttribute('id');
+}).join(', ');</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="context"&gt;
+    &lt;div id="element-1"&gt;
+        &lt;div id="element-1.1"&gt;&lt;/div&gt;
+        &lt;div id="element-1.2"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="element-2"&gt;
+        &lt;div id="element-2.1"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;p&gt;
+    Selected elements ids :
+    &lt;span id="results"&gt;&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('Direct_children') }}</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('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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> をチェックアウトしてプルリクエストを送信してください。
+
+
+
+<p>{{Compat("css.selectors.scope")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":root")}} <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a></li>
+ <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使った DOM の配置</a></li>
+ <li>{{domxref("Element.querySelector()")}} 及び {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} 及び {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} 及び {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} 及び {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_target/index.html b/files/ja/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..bb9a9c40d7
--- /dev/null
+++ b/files/ja/web/css/_colon_target/index.html
@@ -0,0 +1,216 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:target</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、 URL のフラグメントに一致する {{htmlattrxref("id")}} を持つ固有の要素 (<em>対象要素</em>) を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>例えば、以下の URL には <code>section2</code> と呼ばれる要素を指すフラグメント (<em>#</em> 記号で記述) があります。</p>
+
+<pre class="notranslate">http://www.example.com/index.html#section2</pre>
+
+<p>現在の URL が上記の通りの場合、以下の要素が <code>:target</code> セレクターで選択されます。</p>
+
+<pre class="brush: html notranslate">&lt;section id="section2"&gt;Example&lt;/section&gt;</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_table_of_contents" name="A_table_of_contents">目次</h3>
+
+<p><code>:target</code> 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h3&gt;目次&lt;/h3&gt;
+&lt;ol&gt;
+ &lt;li&gt;&lt;a href="#p1"&gt;第1段落にジャンプ！&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#p2"&gt;第2段落にジャンプ！&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="#nowhere"&gt;このリンクは対象がないので、
+   どこにも行きません。&lt;/a&gt;&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h3&gt;My Fun Article&lt;/h3&gt;
+&lt;p id="p1"&gt;You can target &lt;i&gt;this paragraph&lt;/i&gt; using a
+  URL fragment. Click on the link above to try out!&lt;/p&gt;
+&lt;p id="p2"&gt;This is &lt;i&gt;another paragraph&lt;/i&gt;, also accessible
+  from the links above. Isn't that delightful?&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p:target {
+  background-color: gold;
+}
+
+/* 対象要素に擬似要素を追加 */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* 対象要素の中の i 要素にスタイルを適用 */
+p:target i {
+  color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<div>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</div>
+
+<h3 id="Pure-CSS_lightbox" name="Pure-CSS_lightbox">純粋な CSS のライトボックス</h3>
+
+<p><code>:target</code> 擬似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で <code>display</code> を変更して表示させます。</p>
+
+<div class="note"><strong>注:</strong> <code>:target</code> 擬似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 <a href="https://github.com/madmurphy/takefive.css/">GitHub で利用できます</a> (<a href="https://madmurphy.github.io/takefive.css/">デモ</a>)。</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#example1"&gt;例1を開く&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#example2"&gt;例2を開く&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;div class="lightbox" id="example1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="example2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="close"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/* 開いていないライトボックス */
+.lightbox {
+  display: none;
+}
+
+/* 開いたライトボックス */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ライトボックスの中身 */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* 閉じるボタン */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* ライトボックスのオーバーレイ */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<div>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</div>
+
+<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("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>HTML 特有の意味論を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.selectors.target")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">セレクターでの :target 擬似クラスの利用</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_valid/index.html b/files/ja/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..eeb229b80d
--- /dev/null
+++ b/files/ja/web/css/_colon_valid/index.html
@@ -0,0 +1,130 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - CSS
+  - CSS 基本ユーザーインターフェイス
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:valid'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:valid</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>は、内容の<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 有効な &lt;input&gt; をすべて選択 */
+input:valid {
+  background-color: powderblue;
+}</pre>
+
+<p>この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の <span> が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。</span></p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;label for="fname"&gt;First name *: &lt;/label&gt;
+  &lt;input id="fname" name="fname" type="text" required&gt;
+  &lt;span&gt;&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<p>これらの表示を提供するために、以下の CSS を使用します。</p>
+
+<pre class="brush: css notranslate">input + span {
+  position: relative;
+}
+
+input + span::before {
+  position: absolute;
+  right: -20px;
+  top: 5px;
+}
+
+input:invalid {
+  border: 2px solid red;
+}
+
+input:invalid + span::before {
+  content: '✖';
+  color: red;
+}
+
+input:valid + span::before {
+  content: '✓';
+  color: green;
+}</pre>
+
+<p>生成されたコンテンツを相対的に配置できるように <code>&lt;span&gt;</code> を <code>position: relative</code> に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: We've used <code>::before</code> to add these labels, as we were already using <code>::after</code> for the "required" labels.</p>
+</div>
+
+<p>You can try it below:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}</p>
+
+<p>Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Understanding Success Criterion 1.4.1 | W3C WCAG 2.0 の理解</a></li>
+</ul>
+
+<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('HTML WHATWG', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>HTML の意味論と制約検証を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.valid")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+ <li>JavaScript からの <a href="/ja/docs/Web/API/ValidityState">validity state</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_visited/index.html b/files/ja/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..38fbc1e1a5
--- /dev/null
+++ b/files/ja/web/css/_colon_visited/index.html
@@ -0,0 +1,120 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - セレクター
+  - 疑似クラス
+translation_of: 'Web/CSS/:visited'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:visited</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">/* 訪問済みの &lt;a&gt; をすべて選択 */
+a:visited {
+  color: green;
+}</pre>
+
+<p><code>:visited</code> 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}}) によって上書きされます。適切にリンクにスタイルを適用するには、 <code>:visited</code> ルールを <code>:link</code> ルールの後、 <code>:hover</code> および <code>:active</code> ルールの前に置いてください。 <em>LVHA 順</em>、 <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> と定義されています。</p>
+
+<h2 id="Styling_restrictions" name="Styling_restrictions">スタイル適用の制約</h2>
+
+<p>プライバシー上の理由から、ブラウザ―はこの擬似クラスを使って適用できるスタイルに厳しい制限をかけています。使い方は以下の通りです。</p>
+
+<ul>
+ <li>利用できる CSS プロパティは、 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("text-decoration-color") }}, {{ cssxref("text-emphasis-color") }} です。</li>
+ <li>利用できる SVG 属性は {{SVGAttr("fill")}} と {{SVGAttr("stroke")}} です。</li>
+ <li>利用できるスタイルでもアルファチャンネルは無視されます。アルファチャンネルは要素の <code>:visited</code> 状態ではないものが代わりに使用されますが、アルファチャンネルが <code>0</code> であった場合は、 <code>:visited</code> で設定されたスタイルセットは完全に無視されます。</li>
+ <li>これらのスタイルはエンドユーザーに対する表示色を変更できるようになっていますが、 {{domxref("window.getComputedStyle")}} メソッドは嘘をつき、 <code>:visited</code> 状態ではない色の値を返します。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> これらの制限とその理由については、<a href="/ja/docs/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a>を参照してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>色を持っていないか透過のプロパティは、 <code>:visited</code> で変更することができません。この擬似クラスで設定するプロパティについては、ブラウザーが持っている既定値は <code>color</code> と <code>column-rule-color</code> だけでしょう。そのため、他のプロパティを変更したい場合は、 <code>:visited</code> セレクターの外で基本的な値を設定する必要があります。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#test-visited-link"&gt;このリンクを訪問しましたか？&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;このリンクはすでに訪問済みです。&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  /* 該当するプロパティに不透過の既定値を設定することで、
+     :visited 状態のスタイルを定義できるようにします */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>{{ HTMLElement("a") }} 要素に適用する場合のみ制約を緩和。プライバシーを理由とするブラウザーの振る舞いの制限をかけた。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.visited")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a></li>
+ <li>リンク関連の擬似クラス: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_where/index.html b/files/ja/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..4516b847d0
--- /dev/null
+++ b/files/ja/web/css/_colon_where/index.html
@@ -0,0 +1,134 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - ':where'
+  - CSS
+  - Experimental
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - NeedsExample
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Selectors
+  - Web
+  - セレクター
+  - 擬似クラス
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>:where()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>関数で、選択肢列挙を引数として取り、列挙されたセレクターのうちの何れかに当てはまるすべての要素を選択します。</p>
+
+<p><code>:where()</code> と {{CSSxRef(":is", ":is()")}} の違いは、 <code>:where()</code> は<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が常に 0 であるのに対して、 <code>:is()</code> は引数内で最も詳細度の高いセレクターの詳細度を取ります。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Comparing_where_and_is" name="Comparing_where_and_is">:where() と :is() の比較</h3>
+
+<p>この例では <code>:where()</code> がどのように作用するのかを示し、 <code>:where()</code> と <code>:is()</code> の違いも説明しています。</p>
+
+<p>以下のような HTML を想定してください。</p>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h2&gt;:is()-styled links&lt;/h2&gt;
+  &lt;section class="is-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="is-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="is-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  &lt;h2&gt;:where()-styled links&lt;/h2&gt;
+  &lt;section class="where-styling"&gt;
+    &lt;p&gt;Here is my main content. This &lt;a href="https://mozilla.org"&gt;contains a link&lt;/a&gt;.
+  &lt;/section&gt;
+
+  &lt;aside class="where-styling"&gt;
+    &lt;p&gt;Here is my aside content. This &lt;a href="https://developer.mozilla.org"&gt;also contains a link&lt;/a&gt;.
+  &lt;/aside&gt;
+
+  &lt;footer class="where-styling"&gt;
+    &lt;p&gt;This is my footer, also containing &lt;a href="https://github.com/mdn"&gt;a link&lt;/a&gt;.
+  &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+<p>このやや矛盾した例では、2つの記事があり、それぞれがセクション、脇、フッターを含んでいます。これらの記事は、子要素をマークするために使われるクラスによって異なります。</p>
+
+<p>中のリンクの選択をより簡単にして、しかし区別できるようにするために、次のように <code>:is()</code> や <code>:where()</code> を使うことが<em>できます</em>。</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+  color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+  color: orange;
+}</pre>
+
+<p>しかし、後からシンプルなセレクターを使ってフッターのリンクの色を上書きしたい場合はどうすればいいのでしょうか？</p>
+
+<pre class="brush: css notranslate">footer a {
+  color: blue;
+}</pre>
+
+<p>これは赤いリンクに作用しません。 <code>:is()</code> の中のセレクターは全体のセレクターの詳細度で算出され、クラスセレクターは要素セレクターよりも高い詳細度を持っているからです。</p>
+
+<p>しかし、 <code>:where()</code> 内のセレクターは詳細度が 0 なので、オレンジ色のフッターリンクは単純セレクターによって上書きされてしまいます。
+
+</p><p>結果は以下で見ることができます (ただし、現在のところ <code>:is()</code> と <code>:where()</code> は既定では Firefox Nightly のバージョン 77 以降では有効になっているだけで、他のバージョンの Firefox では <code>layout.css.is-where-selectors.enabled</code> の設定で隠されています)。</p>
+
+<p><strong>注</strong>: この例は GitHub からも見ることができます。 <a href="https://mdn.github.io/css-examples/is-where/">is-where</a> を参照してください。</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<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("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.where")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li><a href="/ja/docs/Web/CSS/Selector_list">選択子列挙</a></li>
+ <li><a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html
new file mode 100644
index 0000000000..e393f9cceb
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html
@@ -0,0 +1,65 @@
+---
+title: '::-moz-color-swatch'
+slug: 'Web/CSS/::-moz-color-swatch'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - 標準外
+  - 疑似要素
+translation_of: 'Web/CSS/::-moz-color-swatch'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>::-moz-color-swatch</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>であり、 <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>で、 {{HTMLElement("input")}} の <code>type="color"</code> で選択された色を表します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>::-moz-color-swatch</code> を <code>&lt;input type="color"&gt;</code> 以外に何も一致せず、何も効果がありません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="color" value="#de2020" /&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。これは Gecko に固有の専用の疑似要素です。</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-color-swatch")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他のブラウザーで使われる同様の疑似要素:
+  <ul>
+   <li>{{cssxref("::-webkit-color-swatch")}} WebKit および Blink (Safari, Chrome, Opera) で対応している疑似要素</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..8b1bff631c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,60 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - 'CSS:Mozilla 拡張'
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - 擬似要素
+  - 標準外
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>::-moz-progress-bar</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>であり、 {{HTMLElement("progress")}} 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)</p>
+
+<p>{{HTMLElement("progress")}} のまだ終了していない部分を Mozilla で選択したい場合は、 {{HTMLElement("progress")}} で直接選択してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html; notranslate">&lt;progress value="30" max="100"&gt;30%&lt;/progress&gt;
+&lt;progress max="100"&gt;Indeterminate&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">::-moz-progress-bar {
+  background-color: red;
+}
+
+/* 不確実なバーは強制的に幅をゼロにする */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<p>上記の最初のバーは次のようになります。</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.html b/files/ja/web/css/_doublecolon_-moz-range-track/index.html
new file mode 100644
index 0000000000..a8e2b5b044
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.html
@@ -0,0 +1,74 @@
+---
+title: '::-moz-range-track'
+slug: 'Web/CSS/::-moz-range-track'
+tags:
+  - CSS
+  - 'CSS:Mozilla Extensions'
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::-moz-range-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>::-moz-range-track</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">疑似要素</a>は、 <code>type="range"</code> の {{HTMLElement("input")}} でインジケーターがスライドする <em>track</em> (例, 溝) を表す <a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張機能</a> です。</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>::-moz-range-track</code> を <code>&lt;input type="range"&gt;</code> 以外で使用すると、何にも一致せず、効果がありません。</p>
+</div>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="例">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type=range]::-moz-range-track {
+  background-color: green;
+}
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>このスタイルを使用するプログレスバーは、次のようになります:</p>
+
+<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+
+<h2 id="仕様">仕様</h2>
+
+<p>標準の一部ではありません。</p>
+
+<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("css.selectors.-moz-range-track")}}</p>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>The pseudo-elements used by Gecko to style other parts of a range input:
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}} represents the indicator that slides in the groove.</li>
+   <li>{{cssxref("::-moz-range-progress")}} represents the lower portion of the track.</li>
+  </ul>
+ </li>
+ <li>Similar pseudo-elements used by other browsers:
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}}, pseudo-element supported by WebKit and Blink (Safari, Chrome, and Opera)</li>
+   <li>{{cssxref("::-ms-track")}}, pseudo-element supported by Internet Explorer and Edge</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-ms-browse/index.html b/files/ja/web/css/_doublecolon_-ms-browse/index.html
new file mode 100644
index 0000000000..5bb2d2abd6
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-ms-browse/index.html
@@ -0,0 +1,112 @@
+---
+title: '::-ms-browse'
+slug: 'Web/CSS/::-ms-browse'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Selector
+  - セレクター
+  - 標準外
+translation_of: 'Archive/Web/CSS/::-ms-browse'
+---
+<div>{{CSSRef}}{{Non-standard_Header}}</div>
+
+<p>CSS の <strong><code>::-ms-browse</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>であり、 {{HTMLElement("input/file", '<code>&lt;input type="file"&gt;</code>')}} のファイル選択ダイアログを開くボタンを表します。</p>
+
+<h2 id="Permitted_properties" name="Permitted_properties">許可されているプロパティ</h2>
+
+<p>以下の CSS プロパティのみが <code>::-ms-browse</code> がセレクターにある場合に利用できます。その他のプロパティは無視されます。</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (<code>block</code>, <code>inline-block</code>, <code>none</code> の値)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;label&gt;Select image: &lt;input type="file"&gt;&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type="file"]::-ms-browse {
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h4 id="Output_example" name="Output_example">出力例</h4>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12744/bandicam%202016-03-11%2017-19-55-369.jpg" style="border-style: solid; border-width: 1px; height: 188px; width: 680px;"></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.-ms-browse")}}</p>
diff --git a/files/ja/web/css/_doublecolon_-ms-expand/index.html b/files/ja/web/css/_doublecolon_-ms-expand/index.html
new file mode 100644
index 0000000000..e55bbb962c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-ms-expand/index.html
@@ -0,0 +1,92 @@
+---
+title: '::-ms-expand'
+slug: 'Web/CSS/::-ms-expand'
+tags:
+  - CSS
+  - 'CSS:Microsoft Extensions'
+  - 'CSS:Microsoft 拡張'
+  - NeedsCompatTable
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - 標準外
+  - 疑似要素
+translation_of: 'Archive/Web/CSS/::-ms-expand'
+---
+<div>{{CSSRef}}{{Non-standard_Header}}</div>
+
+<p><strong><code>::-ms-expand</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>で、 <a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft 拡張</a>であり、 {{HTMLElement("select")}} メニューコントロールでドロップダウンメニューを開いたり閉じたりするボタンを表します。通常、これは下を向いた三角形です。</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">許可されているプロパティ</h2>
+
+<p>以下の CSS プロパティのみが、 <code>::-ms-expand</code> をセレクターに含む規則で使用することができます。他のプロパティは無視されます。</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-position-x")}}</li>
+ <li>{{CSSxRef("background-position-y")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (<code>block</code>, <code>inline-block</code>, <code>none</code> の値)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<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.-ms-expand")}}</p>
diff --git a/files/ja/web/css/_doublecolon_-ms-fill/index.html b/files/ja/web/css/_doublecolon_-ms-fill/index.html
new file mode 100644
index 0000000000..197848e00c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-ms-fill/index.html
@@ -0,0 +1,112 @@
+---
+title: '::-ms-fill'
+slug: 'Web/CSS/::-ms-fill'
+tags:
+  - CSS
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+  - 標準外
+  - 疑似要素
+translation_of: 'Archive/Web/CSS/::-ms-fill'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>::-ms-fill</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>は <a href="/ja/docs/Web/CSS/Microsoft_extensions">Microsoft 拡張</a>で、 {{HTMLElement("progress")}} で表示される進捗バーを表します。</span>この疑似要素は Internet Explorer 10, Internet Explorer 11, Microsoft Edge のみで利用できます。</p>
+
+<p>確定的な進捗バーには {{cssxref("animation-name")}} 以外の許容されているすべてのプロパティを適用します。 <code>animation-name</code> だけは不確定なものに適用されます。 (進捗バーは {{htmlattrxref("value","progress")}} 属性が設定されていれば確定的で、そうでなければ不確定です。不確定な進捗バーは {{cssxref(":indeterminate")}} 疑似クラスで選択することができます。)</p>
+
+<p>既定では、 Internet Explorer および Edge は不確定な進捗バーに点が動くアニメーションを表示します。 <code>::-ms-fill</code> に <code>animation-name</code> を設定することで、アニメーションをこの表にあるように変更することができます。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>値</th>
+   <th>説明</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>アニメーションを無効にし、点は表示されません。</td>
+  </tr>
+  <tr>
+   <td><code>-ms-bar</code></td>
+   <td>バーのパターンを流れる動く点を表示します。</td>
+  </tr>
+  <tr>
+   <td><code>-ms-ring</code></td>
+   <td>環状のパターンを流れる動く点を表示します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Allowable_Properties" name="Allowable_Properties">許容されているプロパティ</h2>
+
+<p>以下の CSS プロパティのみがセレクターに <code>::-ms-fill</code> を含む規則で使用することができます。その他のプロパティは無視されます。</p>
+
+<ul>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (<code>block</code>, <code>inline-block</code>, <code>none</code> の値)</li>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("transform")}} および {{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;&lt;/progress&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress::-ms-fill {
+  background-color: orange;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 300, 50)}}</p>
+
+<p>このスタイルを使用した進捗バーは、次のように見えるかもしれません。</p>
+
+<p><img alt="A progress bar with its progress indicator colored orange." src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></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.-ms-fill")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>何れの仕様書の一部でもありません。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-ms-value/index.html b/files/ja/web/css/_doublecolon_-ms-value/index.html
new file mode 100644
index 0000000000..1731f89f86
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-ms-value/index.html
@@ -0,0 +1,103 @@
+---
+title: '::-ms-value'
+slug: 'Web/CSS/::-ms-value'
+tags:
+  - CSS
+  - Microsoft 拡張
+  - Reference
+  - 標準外
+  - 疑似要素
+translation_of: 'Archive/Web/CSS/::-ms-value'
+---
+<div>{{non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>::-ms-value</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>は <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>で、テキストまたはパスワードの {{HTMLElement("input")}} コントロールの値、または {{HTMLElement("select")}} コントロールの中身に規則を適用します。</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">許可されているプロパティ</h2>
+
+<p>以下の CSS プロパティのみが <code>::-ms-value</code> をセレクターに含む規則で使用することができます。</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (<code>block</code>, <code>inline-block</code>, <code>none</code> の値)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css">input::-ms-value {
+  color: lime;
+  font-style: italic;
+}</pre>
+
+<p>既定のスタイルを無効にするには、以下のようにします。</p>
+
+<pre class="brush: css">select::-ms-value {
+  background-color: transparent;
+  color: inherit;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.-ms-value")}}</p>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html
new file mode 100644
index 0000000000..b74c075dd6
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html
@@ -0,0 +1,66 @@
+---
+title: '::-webkit-progress-value'
+slug: 'Web/CSS/::-webkit-progress-value'
+tags:
+  - CSS
+  - Reference
+  - Selector
+  - 疑似要素
+  - 非標準
+translation_of: 'Web/CSS/::-webkit-progress-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>::-webkit-progress-value</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a> は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>::-webkit-progress-value</code> を有効にするには {{cssxref("-webkit-appearance")}} を <code>&lt;progress&gt;</code> 要素で <code>none</code> に設定する必要があります。</p>
+</div>
+
+<h2 id="仕様">仕様</h2>
+
+<p>仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。</p>
+
+<h2 id="例">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 200, 50)}}</p>
+
+<p>上記のスタイルを使用したプログレスバーは次のようになります:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p>
+
+<h2 id="ブラウザーの実装状況">ブラウザーの実装状況</h2>
+
+
+
+<p>{{Compat("css.selectors.-webkit-progress-value")}}</p>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>WebKit/Blink が {{HTMLElement("progress")}} 要素のその他の部分をスタイルするために使用する疑似要素:
+  <ul>
+   <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+   <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+  </ul>
+ </li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
new file mode 100644
index 0000000000..7eb877eb17
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
@@ -0,0 +1,47 @@
+---
+title: '::-webkit-slider-runnable-track'
+slug: 'Web/CSS/::-webkit-slider-runnable-track'
+tags:
+  - CSS
+  - 'CSS:WebKit Extensions'
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<p><strong><code>::-webkit-slider-runnable-track</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で <code style="white-space: nowrap;">{{HTMLElement("input/range", '&lt;input type="range"&gt;')}}</code> "track" (インジケータがスライドする溝) を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">::-webkit-slider-runnable-track</pre>
+
+<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.-webkit-slider-runnable-track")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("::-webkit-slider-thumb")}}</li>
+ <li>他のブラウザーで使われている類似の擬似要素:
+  <ul>
+   <li>{{CSSxRef("::-ms-track")}}</li>
+   <li>{{CSSxRef("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..a897d26205
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,44 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMobileBrowserCompatibility
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - 擬似要素
+  - 標準外
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>::-webkit-slider-thumb</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、数値の値を変更する {{HTMLElement("input")}} の <code>type="range"</code> でユーザーが「溝」の中を動かすことができる「つまみ」を表します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。</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.-webkit-slider-thumb")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>他のブラウザーで使われている類似の擬似要素:
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS</a></li>
+ <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Styling and scripting sliders</a></li>
+ <li><a href="https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html">Couple of Gotchas to Watch-out For</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..a7ba688a7b
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_after/index.html
@@ -0,0 +1,177 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - ウェブ
+  - リファレンス
+  - レイアウト
+  - 疑似要素
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS において <strong><code>::after</code></strong> は、選択した要素の最後の子要素として<a href="/ja/docs/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* リンクの後に矢印を追加 */</span>
+<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
+  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>::before</code> 及び <code>::after</code> によって作成される疑似要素は<a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">要素の整形ボックスに含まれるため</a>、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>には適用されません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> CSS3 では<a href="/en-US/docs/Web/CSS/Pseudo-classes">疑似クラス</a>と<a href="/en-US/docs/Web/CSS/Pseudo-elements">疑似要素</a>を見分けやすくするために、 <code>::after</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:after</code> も使用できます。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_usage" name="Simple_usage">シンプルな使い方</h3>
+
+<p>2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="boring-text"&gt;古くつまらないテキストです。&lt;/p&gt;
+&lt;p&gt;つまらなくも楽しくもないふつうのテキストです。&lt;/p&gt;
+&lt;p class="exciting-text"&gt;MDN への協力は簡単で楽しいものです。&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exciting-text::after {
+  content: " &lt;- 楽しい！";
+  color: green;
+}
+
+.boring-text::after {
+  content: " &lt;- ツマラナイ！";
+  color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Simple_usage', 500, 150)}}</p>
+
+<h3 id="Decorative_example" name="Decorative_example">装飾の例</h3>
+
+<p>{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;このテキストの後のオレンジのボックスを見てください。&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "かわいいオレンジのボックスです。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Decorative_example', 450, 20)}}</p>
+
+<h3 id="Tooltips" name="Tooltips">ツールチップ</h3>
+
+<p>この例は、 <code>::after</code> を CSS の <a href="/ja/docs/Web/CSS/attr"><code>attr()</code></a> 関数と <code>data-descr</code> <a href="/ja/docs/Web/HTML/Global_attributes/data-*">カスタムデータ属性</a>との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Here we have some
+  &lt;span data-descr="collection of words and punctuation"&gt;text&lt;/span&gt; with a few
+  &lt;span data-descr="small popups that appear when hovering"&gt;tooltips&lt;/span&gt;.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</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('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>前回の版から重要な変更はなし</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>擬似要素で定義されたプロパティのトランジションを許可</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>擬似要素で定義されたプロパティのアニメーションを許可</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>2重コロンの構文を導入</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。コロン1つの構文のみ</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.after")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("::before")}}, {{cssxref("content")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_backdrop/index.html b/files/ja/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..401fbd040c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,82 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - CSS
+  - Full-screen
+  - Layout
+  - NeedsContent
+  - Pseudo-element
+  - Reference
+  - 全画面
+  - 疑似要素
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>::backdrop</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>は、何らかの要素が全画面モードで表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。</span>これは <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> を使用した全画面モードに配置される要素、および {{HTMLElement("dialog")}} 要素の両方を含みます。</p>
+
+<p>全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。</p>
+
+<pre class="brush: css no-line-numbers">/* Backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}</pre>
+
+<p>すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。 <code>::backdrop</code> 疑似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。</p>
+
+<p><code>::backdrop</code> 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。</p>
+
+<pre class="brush: css">video::backdrop {
+  background-color: #448;
+}
+</pre>
+
+<p>結果の画面は以下のようになります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>
+
+<p>なお、 backdrop である暗い青灰色の上下のレターボックス効果の場所は可視です。ふつうその領域は黒ですが、上記の CSS によって表示方法が変更されています。</p>
+
+<p><a href="http://glitch.com/">Glitch</a> で<a href="https://fullscreen-requestfullscreen-demo.glitch.me/">すぐに例を見る</a>または<a href="https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo">コードを閲覧またはリミックス</a>することができます。</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('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.backdrop")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":fullscreen")}} 疑似クラス</li>
+ <li>{{HTMLElement("dialog")}} HTML 要素</li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_before/index.html b/files/ja/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..65596a63d7
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_before/index.html
@@ -0,0 +1,231 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS における <strong><code>::before</code></strong> は、選択した要素の最初の子要素として<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。</span>この要素は既定でインラインです。</p>
+
+<pre class="brush: css notranslate">/* リンクの前にハートを追加 */
+a::before {
+  content: "♥";
+}</pre>
+
+<div class="note">
+<p><strong>注:</strong> <code>::before</code> および <code>::after</code> によって生成される擬似要素は<a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">要素の整形ボックスに含まれるため</a>、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>には適用されません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>注:</strong> CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を見分けやすくするために、 <code>::before</code> の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された <code>:before</code> も使用できます。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Adding_quotation_marks" name="Adding_quotation_marks">引用符の追加</h3>
+
+<p><code>::before</code> 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために <code>::before</code> および <code>{{Cssxref("::after")}}</code> の両方を使用しています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html notranslate">&lt;q&gt;引用があることは、&lt;/q&gt;彼は言った、&lt;q&gt;ないよりも良い。&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}</p>
+
+<h3 id="Decorative_example" name="Decorative_example">装飾の例</h3>
+
+<p>{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;オレンジのボックスがどこにあるか注意してください。&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "このオレンジのボックスを見てください。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Decorative_example', 450, 60)}}</p>
+
+<h3 id="To-do_list" name="To-do_list">やることリスト</h3>
+
+<p>この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;牛乳を買う&lt;/li&gt;
+  &lt;li&gt;犬の散歩をする&lt;/li&gt;
+  &lt;li&gt;エクササイズ&lt;/li&gt;
+  &lt;li&gt;コードを書く&lt;/li&gt;
+  &lt;li&gt;音楽を演奏する&lt;/li&gt;
+  &lt;li&gt;リラックスする&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の <code>::before</code> で整形したものです。先に進んでやってみてください。</p>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample('To-do_list', 400, 300)}}</p>
+
+<h3 id="Special_characters" name="Special_characters">特殊文字</h3>
+
+<p>これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することは<strong>できません</strong>。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Crack Eggs into bowl&lt;/li&gt;
+  &lt;li&gt;Add Milk&lt;/li&gt;
+  &lt;li&gt;Add Flour&lt;/li&gt;
+  &lt;li aria-current='step'&gt;Mix thoroughly into a smooth batter&lt;/li&gt;
+  &lt;li&gt;Pour a ladleful of batter onto a hot, greased, flat frying pan&lt;/li&gt;
+  &lt;li&gt;Fry until the top of the pancake loses its gloss&lt;/li&gt;
+  &lt;li&gt;Flip it over and fry for a couple more minutes&lt;/li&gt;
+  &lt;li&gt;serve with your favorite topping&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+</pre>
+
+<h4 id="Result_4">Result</h4>
+
+<p>{{EmbedLiveSample('Special_characters', 400, 200)}}</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('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>前回の版から重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>擬似要素で定義されたプロパティのアニメーションを許可。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>2重コロンの構文を導入。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。コロン1つの構文のみ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.before")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_cue/index.html b/files/ja/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..7422b52d8c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,93 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+tags:
+  - '::cue'
+  - CSS
+  - Media
+  - Pseudo-element
+  - Reference
+  - Selector
+  - WebVTT
+  - Webビデオテキストトラック
+  - cue
+  - ウェブ動画テキストトラック
+  - セレクター
+  - メディア
+  - 擬似要素
+translation_of: 'Web/CSS/::cue'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>::cue</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、選択された要素内の <a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a> キューに一致します。これにより、 VTT トラック付きのメディアで<a href="/ja/docs/Web/API/WebVTT_API#Styling_WebTT_cues">キャプションや他のキューをスタイル付けする</a>ことができます。</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Permitted_properties" name="Permitted_properties">利用可能なプロパティ</h2>
+
+<p>セレクターにこの要素を含む規則では、以下の CSS プロパティしか使用することができません。</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} およびその個別指定プロパティ</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} およびその個別指定プロパティ</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} およびその個別指定プロパティ</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} およびその個別指定プロパティ</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>プロパティは、あたかも1つの部品であるかのように、一連のキュー全体に適用されます。 <code>background</code> とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。</p>
+
+<pre class="brush: css notranslate">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<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("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.cue")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+ <li>{{HTMLElement("track")}}, {{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_first-letter/index.html b/files/ja/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..8d9d2235fe
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,166 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>::first-letter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">ブロックレベル要素</a>の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;p&gt; の最初の文字を選択します */
+p::first-letter {
+  font-size: 130%;
+}</pre>
+
+<p>要素の最初の文字は、常に単純に識別できるとは限りません。</p>
+
+<ul>
+ <li>最初の文字のすぐ前後にある区切り文字 (punctuation) も範囲に含まれます。区切り文字とは、 Unicode の <em>open</em> (Ps)、<em>close</em> (Pe)、<em>initial quote</em> (Pi)、 <em>final quote</em> (Pf)<em>、 other punctuation</em> (Po) の各クラスで定義されているすべての文字です。</li>
+ <li>言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の <code>IJ</code> などです。この場合、連字の両方の文字が <code>::first-letter</code> 擬似要素で選択されます (これについてのブラウザーの互換性はあまりありません。<a href="/ja/docs/Web/CSS/::first-letter#Browser_compatibility">ブラウザーの互換性</a>をご覧ください)。</li>
+ <li>{{ cssxref("::before") }} 擬似要素及び {{ cssxref("content") }} プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 <code>::first-letter</code> は生成されたこのコンテンツの最初の文字に一致します。</li>
+</ul>
+
+<div class="note">
+<p>CSS3 では<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を見分けやすくするために、 <code>::first-letter</code> の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された <code>:first-letter</code> も使用できます。</p>
+</div>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用可能なプロパティ</h2>
+
+<p><code>::first-letter</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>フォントの全プロパティ : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li>
+ <li>背景の全プロパティ : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}</li>
+ <li>マージンの全プロパティ: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
+ <li>パディングの全プロパティ: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
+ <li>境界線の全プロパティ: 一括指定プロパティである {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, および個別指定プロパティ</li>
+ <li>{{ cssxref("color") }} プロパティ</li>
+ <li>The {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} （<code>float</code> が <code>none</code> の場合のみ） の CSS プロパティ</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_drop_cap" name="Simple_drop_cap">単純なドロップキャップ</h3>
+
+<p>この例では、 <code>::first-letter</code> 疑似要素を使用して、 <code>&lt;h2&gt;</code> の直後の段落の最初の文字にドロップキャップ効果を作成します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h2&gt;My heading&lt;/h2&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 500px;
+  line-height: 1.5;
+}
+
+h2 + p::first-letter {
+  color: white;
+  background-color: black;
+  border-radius: 2px;
+  box-shadow: 3px 3px 0 red;
+  font-size: 250%;
+  padding: 6px 3px;
+  margin-right: 6px;
+  float: left;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p>
+
+<h3 id="Effect_on_special_punctuation_and_non-Latin_characters" name="Effect_on_special_punctuation_and_non-Latin_characters">特殊な区切り文字と非ラテン文字への効果</h3>
+
+<p>この例では、特殊な区切り文字や非ラテン文字に対する <code>::first-letter</code> の効果を説明しています。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「先頭の特殊区切り記号です。&lt;/p&gt;
+&lt;p&gt;《先頭の特殊区切り記号です。&lt;/p&gt;
+&lt;p&gt;“先頭の特殊区切り記号です。&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p::first-letter {
+  color: red;
+  font-size: 150%;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</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('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td><code>::first-letter</code> で {{cssxref("text-shadow")}} が使用できるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 <code>IJ</code>）など、特殊な場合の挙動の定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義、単一コロン構文を使用。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.first-letter")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_first-line/index.html b/files/ja/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..ca36c8b9a0
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,121 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>::first-line</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">ブロックレベル要素</a>の最初の行にスタイルを適用します。</span>なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;p&gt; の最初の行を選択 */
+p::first-line {
+  color: red;
+}</pre>
+
+<div class="note">
+<p>CSS3 では <code>::first-line</code> という (二重コロン付き) 表記が、 <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>と<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された <code>:first-line</code> も使用できます。</p>
+</div>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用可能なプロパティ</h2>
+
+<p><code>::first-line</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>フォントに関する全プロパティ: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, {{Cssxref("font-family")}}</li>
+ <li>背景に関する全プロパティ: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("color")}} プロパティ</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;スタイルはこの段落の最初の行にのみ適用されます。
+その後のすべての文字列は普通のスタイルになります。分かりますか？&lt;/p&gt;
+
+&lt;span&gt;ブロックレベル要素ではないので、この文字列の最初の行は、
+特殊なスタイルになりません。&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* 警告: これらを使用しないでください */
+  /* ::first-line 擬似要素では多くのプロパティが無効になります */
+  margin-left: 20px;
+  text-indent: 20px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 350, 160)}}</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('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td><code>::first-letter</code> を利用できる場所をもっと厳密に定義。<br>
+    利用できるプロパティを組版、文字装飾、インライン配置、 {{cssxref("opacity")}} に一般化。<br>
+    <code>::first-letter</code> の継承を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td><code>::first-letter</code> で {{cssxref("text-shadow")}} が使用できるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>擬似要素用の二重コロン構文の導入。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義、単一コロン構文を使用。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.first-line")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_grammar-error/index.html b/files/ja/web/css/_doublecolon_grammar-error/index.html
new file mode 100644
index 0000000000..af6317055e
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_grammar-error/index.html
@@ -0,0 +1,87 @@
+---
+title: '::grammar-error'
+slug: 'Web/CSS/::grammar-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+  - Selector
+translation_of: 'Web/CSS/::grammar-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>::grammar-error</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、{{glossary("user agent", "ユーザーエージェント")}}が文法的に正しくないとしたテキストの区間を示します。</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用できるプロパティ</h2>
+
+<p><code>::grammar-error</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} およびその個別指定プロパティ</li>
+ <li>{{cssxref("text-decoration")}} および関連プロパティ</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">::grammar-error</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_document_grammar_check" name="Simple_document_grammar_check">単純な文書の構文チェック</h3>
+
+<p>この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;My friends is coming to the party tonight.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}</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('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.grammar-error")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::spelling-error")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_marker/index.html b/files/ja/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..456202817e
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,102 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+tags:
+  - CSS
+  - CSS Lists
+  - CSS リスト
+  - Experimental
+  - Layout
+  - Pseudo-element
+  - Reference
+  - 疑似要素
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>::marker</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。</span>これは <code><a href="/ja/docs/Web/CSS/display">display: list-item</a></code> が設定された要素や擬似要素、例えば {{HTMLElement("li")}} 要素や {{HTMLElement("summary")}} 要素で利用できます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">::marker {
+  color: blue;
+  font-size: 1.2em;
+}</pre>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用できるプロパティ</h2>
+
+<p><code>::marker</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>すべての<a href="/ja/docs/Web/CSS/CSS_Fonts">フォントプロパティ</a></li>
+ <li>{{CSSxRef("white-space")}} プロパティ</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}}, {{CSSxRef("direction")}} の各プロパティ</li>
+ <li>{{CSSxRef("content")}} プロパティ</li>
+ <li>すべての<a href="/ja/docs/Web/CSS/CSS_Animations#CSS_Properties">アニメーション</a>および<a href="/ja/docs/Web/CSS/CSS_Transitions#Properties">トランジション</a>プロパティ</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Peaches&lt;/li&gt;
+  &lt;li&gt;Apples&lt;/li&gt;
+  &lt;li&gt;Plums&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.marker")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>既定で箇条書き記号ボックスがある HTML 要素: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_part/index.html b/files/ja/web/css/_doublecolon_part/index.html
new file mode 100644
index 0000000000..f4af2fa823
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_part/index.html
@@ -0,0 +1,128 @@
+---
+title: '::part()'
+slug: 'Web/CSS/::part'
+tags:
+  - '::part'
+  - CSS
+  - Draft
+  - Experimental
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Pseudo-element
+  - Reference
+  - Selector
+  - セレクター
+  - 擬似要素
+translation_of: 'Web/CSS/::part'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>::part</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で、一致する {{HTMLAttrxRef("part")}} 属性を持つ<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウツリー</a>内の要素を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">custom-element::part(foo) {
+  /* Styles to apply to the `foo` part */
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;template id="tabbed-custom-element"&gt;
+&lt;style type="text/css"&gt;
+*, ::before, ::after {
+  box-sizing: border-box;
+  padding: 1rem;
+}
+:host {
+  display: flex;
+}
+&lt;/style&gt;
+&lt;div part="tab active"&gt;Tab 1&lt;/div&gt;
+&lt;div part="tab"&gt;Tab 2&lt;/div&gt;
+&lt;div part="tab"&gt;Tab 3&lt;/div&gt;
+&lt;/template&gt;
+
+&lt;tabbed-custom-element&gt;&lt;/tabbed-custom-element&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">let template = document.querySelector("#tabbed-custom-element");
+globalThis.customElements.define(template.id, class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content);
+  }
+});
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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("CSS Shadow Parts", "#part", "::part")}}</td>
+   <td>{{Spec2("CSS Shadow Parts")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.part")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLAttrxRef("part")}} 属性 - <code>::part()</code> セレクタで選択できるパーツを定義するために使用されます</li>
+ <li>{{HTMLAttrxRef("exportparts")}} 属性 - ネストされたシャドウツリーにシャドウパーツを推移的にエクスポートするために使用されます。</li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Explainer: CSS Shadow ::part and ::theme</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_placeholder/index.html b/files/ja/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..114448ae34
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,153 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - フォーム
+  - 疑似要素
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>::placeholder</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>で、 {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素の<a href="/ja/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">プレイスホルダー文字列</a>を表します。</p>
+
+<pre class="brush: css no-line-numbers">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>セレクターに <code>::placeholder</code> を使ったルールを使用できるのは、{{cssxref("::first-line")}} 疑似要素に適用できる CSS プロパティだけです。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Red_text" name="Red_text">赤い文字</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="何か入力してください！"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
+
+<h3 id="Green_text" name="Green_text">緑のテキスト</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html">&lt;input placeholder="何か入力してください..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<h3 id="Color_contrast" name="Color_contrast">色のコントラスト</h3>
+
+<h4 id="Contrast_Ratio" name="Contrast_Ratio">コントラスト比</h4>
+
+<p>プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。</p>
+
+<p>プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。</p>
+
+<p>色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Usability" name="Usability">使用性</h4>
+
+<p>プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。</p>
+
+<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p>
+
+<p>この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は <code>aria-describedby</code> を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。</p>
+
+<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Example: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Windows_High_Contrast_Mode" name="Windows_High_Contrast_Mode">Windows 高コントラストモード</h3>
+
+<p>プレイスホルダー文字列は、 <a href="/ja/docs/Web/CSS/-ms-high-contrast">Windows 高コントラストモード</a>ではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
+</ul>
+
+<h3 id="Labels" name="Labels">ラベル</h3>
+
+<p>プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<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('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":placeholder-shown")}} 疑似クラスは、アクティブなプレイスホルダーを<em>持つ</em>要素にスタイルを適用できます。</li>
+ <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_selection/index.html b/files/ja/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..33bffb3a5c
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,133 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Experimental
+  - リファレンス
+  - レイアウト
+  - 疑似要素
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>::selection</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">::selection {
+  background-color: cyan;
+}</pre>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用できるプロパティ</h2>
+
+<p><code>::selection</code> 擬似要素では、特定の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("caret-color")}}</li>
+ <li>{{CSSxRef("outline")}} およびその個別指定プロパティ</li>
+ <li>{{CSSxRef("text-decoration")}} および関連プロパティ</li>
+ <li>{{CSSxRef("text-emphasis-color")}}</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+</ul>
+
+<div class="warning">
+<p>特に、 {{CSSxRef("background-image")}} は無視されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">/* 従来の Firefox の構文 (バージョン 61 以前) */
+::-moz-selection
+
+{{CSSSyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">この文字列は選択すると特殊なスタイルになります。
+&lt;p&gt;こちらの段落も文字列を選択してみてください。&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+p::-moz-selection {
+  color: white;
+  background-color: blue;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">/* 選択されたテキストを赤の背景に金色とする */
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* 選択されたテキストを青の背景に白とする */
+p::selection {
+  color: white;
+  background-color: blue;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><strong>純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。</strong> — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。</p>
+
+<p>上書きする場合は、選択部分のテキストと背景の色の<strong>コントラスト比</strong>が、弱視の人でも読める程度に高いことを確認することが重要です。</p>
+
+<p>色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで <strong>4.5:1</strong> 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、<a href="/en-US/docs/Web/CSS/font-weight">太字</a>ならば <code>18.66px</code> 以上、または <code>24px</code> 以上と定義しています。)</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>注:</strong> <code>::selection</code> は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(W3C Style mailing list での議論に基づく)</a> から、勧告の過程で削除されました。これは <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a> で再導入されています。</p>
+</div>
+
+<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.selection")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>
+  <p>{{cssxref("pointer-events")}} - 要素でどのイベントが有効かを制御する</p>
+ </li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_slotted/index.html b/files/ja/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..e02c142be6
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,113 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+tags:
+  - '::slotted'
+  - CSS
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 疑似要素
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>::slotted()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくは<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの利用</a>をご覧ください)。</p>
+
+<p>これは <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。</p>
+
+<pre class="brush: css no-line-numbers">/* スロット内に配置された任意の要素を選択 */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* スロット内に配置された &lt;span&gt; 要素を選択 */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下のコードの断片は <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a> デモから取られたものです (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">ライブでもご覧ください</a>)。</p>
+
+<p>このデモでは、３つのスロットを持つ単純なテンプレートを使用します。</p>
+
+<pre class="brush: html">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Personal ID Card&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NAME MISSING&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE MISSING&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;OCCUPATION MISSING&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>カスタム要素 — <code>&lt;person-details&gt;</code> — は以下のように定義されています。</p>
+
+<pre class="brush: js">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p><code>style</code> 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (<code>::slotted(*)</code>)、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。</p>
+
+<p>この要素がページに挿入されると、以下のように見えます。</p>
+
+<pre class="brush: html">&lt;person-details&gt;
+  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
+  &lt;span slot="person-age"&gt;Immortal&lt;/span&gt;
+  &lt;span slot="person-occupation"&gt;Superhero&lt;/span&gt;
+&lt;/person-details&gt;</pre>
+
+<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('CSS Scope', '#slotted-pseudo', '::slotted') }}</td>
+   <td>{{ Spec2('CSS Scope') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.slotted")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Web_Components">Web components</a></li>
+</ul>
diff --git a/files/ja/web/css/_doublecolon_spelling-error/index.html b/files/ja/web/css/_doublecolon_spelling-error/index.html
new file mode 100644
index 0000000000..cba9fd4266
--- /dev/null
+++ b/files/ja/web/css/_doublecolon_spelling-error/index.html
@@ -0,0 +1,72 @@
+---
+title: '::spelling-error'
+slug: 'Web/CSS/::spelling-error'
+tags:
+  - CSS
+  - Experimental
+  - NeedsExample
+  - Pseudo-element
+  - Reference
+  - Web
+  - 疑似要素
+translation_of: 'Web/CSS/::spelling-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>::spelling-error</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>は、綴りが正しくないと{{glossary("user agent", "ユーザーエージェント")}}が判断したテキスト区間を示します。</p>
+
+<pre class="brush: css no-line-numbers">::spelling-error {
+  color: red;
+}</pre>
+
+<h2 id="Allowable_properties" name="Allowable_properties">利用できるプロパティ</h2>
+
+<p><code>::spelling-error</code> 擬似要素では、一部の CSS プロパティのみが利用できます。</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} およびその個別指定プロパティ</li>
+ <li>{{cssxref("text-decoration")}} および関連プロパティ</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">::spelling-error</pre>
+
+<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('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<p>{{Compat("css.selectors.spelling-error")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("::grammar-error")}}</li>
+</ul>
diff --git a/files/ja/web/css/actual_value/index.html b/files/ja/web/css/actual_value/index.html
new file mode 100644
index 0000000000..563219f3a2
--- /dev/null
+++ b/files/ja/web/css/actual_value/index.html
@@ -0,0 +1,49 @@
+---
+title: 実効値
+slug: Web/CSS/actual_value
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - ガイド
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> プロパティの<ruby><strong>実効値</strong><rp> (</rp><rt>actual value</rt><rp>) </rp></ruby>は、すべての必要な推定が適用された後の<ruby><a href="/ja/docs/Web/CSS/used_value">使用値</a><rp> (</rp><rt>used value</rt><rp>) </rp></ruby>です。例えば、境界を整数値のピクセル幅でしか描けない{{glossary("user agent", "ユーザーエージェント")}}は、境界の太さを近似値の整数に丸めるかもしれません。</p>
+
+<h2 id="Calculating_a_propertys_actual_value" name="Calculating_a_propertys_actual_value">プロパティの実効値の計算</h2>
+
+<p>{{glossary("user agent", "ユーザーエージェント")}}はプロパティの実効値 (最終値) を4段階で計算します。</p>
+
+<ol>
+ <li>最初に<ruby><a href="/ja/docs/Web/CSS/specified_value">指定値</a><rp> (</rp><rt>specified value</rt><rp>) </rp></ruby>が、<a href="/ja/docs/Web/CSS/Cascade">カスケード</a>、<a href="/ja/docs/Web/CSS/inheritance">継承</a>、<a href="/ja/docs/Web/CSS/initial_value">初期値</a>の使用の何れかによって決定されます。</li>
+ <li>次に、仕様に従って<ruby><a href="/ja/docs/Web/CSS/computed_value">計算値</a><rp> (</rp><rt>computed value</rt><rp>) </rp></ruby>が計算されます (例えば、 <code>position: absolute</code> の付いた <code>span</code> は、計算で <code>display</code> が <code>block</code> に変わります)。</li>
+ <li>最後に、レイアウトが計算され、結果として<a href="/ja/docs/Web/CSS/used_value">使用値</a>になります。</li>
+ <li>最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。</li>
+</ol>
+
+<h2 id="仕様書">仕様書</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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.html b/files/ja/web/css/adjacent_sibling_combinator/index.html
new file mode 100644
index 0000000000..f962949f35
--- /dev/null
+++ b/files/ja/web/css/adjacent_sibling_combinator/index.html
@@ -0,0 +1,85 @@
+---
+title: 隣接兄弟結合子
+slug: Web/CSS/Adjacent_sibling_combinator
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - セレクター
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><ruby><strong>隣接兄弟結合子</strong><rp> (</rp><rt>adjacent sibling combinator</rt><rp>)</rp></ruby> (<code>+</code>) は2つのセレクターを接続し、同じ親{{DOMxRef("element", "要素")}}の子同士であって、1つ目の要素の<em>直後</em>にある2つ目の要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* 画像の直後に来る段落 */
+img + p {
+  font-style: bold;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">直前の要素 + 対象の要素 { <em>スタイルプロパティ</em> }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two!&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</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("CSS4 Selectors", "#adjacent-sibling-combinators", "next-sibling combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>名前を「次の兄弟」結合子に変更。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#adjacent-sibling-combinators", "Adjacent sibling combinator")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#adjacent-selectors", "Adjacent sibling selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.adjacent_sibling")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></li>
+</ul>
diff --git a/files/ja/web/css/align-content/index.html b/files/ja/web/css/align-content/index.html
new file mode 100644
index 0000000000..7c2530a7d2
--- /dev/null
+++ b/files/ja/web/css/align-content/index.html
@@ -0,0 +1,297 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+  - place-content
+translation_of: Web/CSS/align-content
+---
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>align-content</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>の交差軸または<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>のブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。</p>
+
+<p>下記の対話型のデモでは、グリッドレイアウトを使用してこのプロパティの値のいくつかを説明しています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>単一行のフレックスコンテナー (つまり、 <code>flex-wrap: nowrap</code> のもの) では、このプロパティは効果がありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 基本的な位置による配 */
+/* align-content は left および right の値を取りません */
+align-content: center;     /* アイテムを中央に寄せる */
+align-content: start;      /* アイテムを先頭に寄せる */
+align-content: end;        /* アイテムを末尾に寄せる */
+align-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+align-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+
+/* 通常の配置 */
+align-content: normal;
+
+/* ベースラインの配置 */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* 均等配置 */
+align-content: space-between; /* アイテムを均等に配置し
+                                 最初のアイテムは先頭に寄せ、
+                                 最後のアイテムは末尾に寄せる */
+align-content: space-around;  /* アイテムを均等に配置し
+                                 各アイテムの両側に半分の大きさの
+                                 間隔を置く */
+align-content: space-evenly;  /* アイテムを均等に配置し
+                                 各アイテムの周りに同じ大きさの間隔を置く */
+align-content: stretch;       /* アイテムを均等に配置し
+                                 コンテナーに合うようにサイズ「自動」の
+                                 アイテムを引き伸ばす */
+
+/* あふれた場合の配置 */
+align-content: safe center;
+align-content: unsafe center;
+
+/* グローバル値 */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <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>center</code></dt>
+ <dd>各アイテムは、交差軸方向で配置コンテナーの中央に互いに寄せて配置されます。</dd>
+ <dt><code>normal</code></dt>
+ <dd>各アイテムは <code>align-content</code> の値が設定されていないかのように、既定の位置に寄せて配置されます。</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
+ <dd>first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。<br>
+ <code>first baseline</code> の代替配置は <code>start</code>、<code>last baseline</code> の代替配置は <code>end</code> です。</dd>
+ <dt><code>space-between</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは配置コンテナーの交差軸の先頭側に寄せられ、最後のアイテムは配置コンテナーの交差軸の末尾側に寄せられます。</dd>
+ <dt><code>space-around</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で交差軸方向に均等に配置されます。隣接するアイテム同士の間隔、先頭側の端と最初のアイテムの間のの余白、末尾側の端と最後のアイテムの間の余白は、まったく同じ幅になります。</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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; 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;
+}
+
+#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;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.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;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&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="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 260, 290)}}</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 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>[ first | last ]? baseline, start, end, left, right, unsafe | safe の値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#align-content-property", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+</div>
+
+<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>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ja/web/css/align-items/index.html b/files/ja/web/css/align-items/index.html
new file mode 100644
index 0000000000..c93aa16148
--- /dev/null
+++ b/files/ja/web/css/align-items/index.html
@@ -0,0 +1,286 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+translation_of: Web/CSS/align-items
+---
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>align-items</code></strong> プロパティは、すべての直接の子要素に集合として {{cssxref("align-self")}} の値を設定します。</span>フレックスボックスでは{{glossary("Cross Axis", "交差軸")}}方向のアイテムの配置を制御します。グリッドレイアウトでは、{{glossary("Grid Areas", "グリッド領域")}}におけるアイテムのブロック軸方向の配置を制御します。</p>
+
+<p>以下のデモは、グリッドレイアウトを使用して <code>align-items</code> のいくつかの値の動作を示しています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* 基本キーワード */
+align-items: normal;
+align-items: stretch;
+
+/* 位置による配置 */
+/* align-items は左と右の値を取らない */
+align-items: center; /* アイテムを中央付近にまとめる */
+align-items: start; /* アイテムを先頭にまとめる */
+align-items: end; /* アイテムを末尾にまとめる */
+align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
+align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
+
+/* ベースラインに配置する */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* オーバーフロー配置 (位置指定要素のみ) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* グローバル値 */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>キーワードの効果は現在のレイアウトモードに依存します。
+ <ul>
+  <li>絶対配置のレイアウトでは、このキーワードは<em>置換</em>絶対配置ボックスにおける <code>start</code> のように動作し、<em>他のすべての</em>絶対配置ボックスでは <code>stretch</code> として動作します。</li>
+  <li>絶対配置レイアウトの静的位置では、キーワードは <code>stretch</code> として動作します。</li>
+  <li>フレックスアイテムについては、このキーワードは <code>stretch</code> として動作します。</li>
+  <li>グリッドアイテムについては、このキーワードは <code>stretch</code> の一つと似た動作をしますが、ボックスにアスペクト比や内部寸法がある場合は <code>start</code> のように動作します。</li>
+  <li>このプロパティはブロックレベルボックスや、表のセルには適用されません。</li>
+ </ul>
+ </dd>
+ <dt><code>flex-start</code></dt>
+ <dd>フレックスアイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>フレックスアイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。</dd>
+ <dt><code>center</code></dt>
+ <dd>フレックスアイテムのマージンボックスは、交差軸上の中央に配置されます。アイテムの cross-size がフレックスコンテナより大きい場合は、両方向へ均等にはみ出します。</dd>
+ <dt><code>start</code></dt>
+ <dd>そのアイテムは、互いにその軸の配置コンテナーの始点側の端に寄せられます。</dd>
+ <dt><code>end</code></dt>
+ <dd>そのアイテムは、互いにその軸の配置コンテナーの終点側の端に寄せられます。</dd>
+ <dt><code>self-start</code></dt>
+ <dd>そのアイテムは、その軸の配置コンテナーで、そのアイテムの始点側の端に寄せられます。</dd>
+ <dt><code>self-end</code></dt>
+ <dd>そのアイテムは、その軸の配置コンテナーで、そのアイテムの終点側の端に寄せられます。</dd>
+</dl>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dt><code>first baseline</code></dt>
+ <dt><code>last baseline</code></dt>
+ <dd>すべてのフレックスアイテムは、ベースラインが一直線になるように配置されます。 cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。</dd>
+ <dt><code>stretch</code></dt>
+ <dd>アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。</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>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; 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;
+}
+
+#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;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.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;align-items: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="self-start"&gt;self-start&lt;/option&gt;
+    &lt;option value="self-end"&gt;self-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="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe self-end"&gt;safe self-end&lt;/option&gt;
+    &lt;option value="unsafe self-end"&gt;unsafe self-end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignItems = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "260px", "290px")}}</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 Box Alignment", "#propdef-align-items", "align-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>最新の構文定義に更新。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-items.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-items.grid_context")}}</p>
+
+<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-self")}} プロパティ</li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ja/web/css/align-self/index.html b/files/ja/web/css/align-self/index.html
new file mode 100644
index 0000000000..ff0dcae67a
--- /dev/null
+++ b/files/ja/web/css/align-self/index.html
@@ -0,0 +1,176 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - CSS ボックス配置
+  - place-self
+  - リファレンス
+translation_of: Web/CSS/align-self
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>align-self</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、グリッドやフレックスのアイテムの {{cssxref("align-items")}} の値を上書きします。グリッドでは、アイテムは{{glossary("Grid Areas", "グリッド領域")}}内に配置されます。フレックスボックスでは、アイテムは{{glossary("cross axis", "交差軸")}}上に配置されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが <code>auto</code> の場合、 <code> align-self</code> は無視されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+align-self: auto;
+align-self: normal;
+
+/* 位置による配置 */
+/* align-self は left および right の値をとりません */
+align-self: center; /* アイテムを中央付近に配置 */
+align-self: start; /* アイテムを起点に配置 */
+align-self: end; /* アイテムを末端に配置 */
+align-self: self-start; /* アイテムを起点に詰めて配置 */
+align-self: self-end; /* アイテムを末端に詰めて配置 */
+align-self: flex-start; /* フレックスアイテムを起点に配置 */
+align-self: flex-end; /* フレックスアイテムを末端に配置 */
+
+/* ベースラインによる配置 */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
+
+/* あふれたときの配置 */
+align-self: safe center;
+align-self: unsafe center;
+
+/* グローバル値 */
+align-self: inherit;
+align-self: initial;
+align-self: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>親の {{cssxref("align-items")}} の値で計算します。</dd>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードの効果は、現在のレイアウトモードに依存します。
+ <ul>
+  <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように動作し、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように動作します。</li>
+  <li>絶対位置指定レイアウトの固定位置指定時は、このキーワードは <code>stretch</code> と同様に動作します。</li>
+  <li>フレックスアイテムでは、このキーワードは <code>stretch</code> と同様に動作します。</li>
+  <li>グリッドアイテムでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように動作します。</li>
+  <li>ブロックレベルボックスと表のセルでは、プロパティは適用されません。</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。</dd>
+ <dt><code>self-end</code></dt>
+ <dd>アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。</dd>
+ <dt><code>center</code></dt>
+ <dd>このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。</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")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 <code>auto</code> が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。</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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;div&gt;Item #1&lt;/div&gt;
+  &lt;div&gt;Item #2&lt;/div&gt;
+  &lt;div&gt;Item #3&lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  background: beige;
+}
+
+div {
+  height: 60px;
+  background: cyan;
+  margin: 5px;
+}
+
+div:nth-child(3) {
+  align-self: flex-end;
+  background: pink;
+}</pre>
+
+<h3 id="Result" name="Result">表示結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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 Box Alignment", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>最新の構文定義に更新。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<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>
+</ul>
diff --git a/files/ja/web/css/all/index.html b/files/ja/web/css/all/index.html
new file mode 100644
index 0000000000..a65d37fcf5
--- /dev/null
+++ b/files/ja/web/css/all/index.html
@@ -0,0 +1,169 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - CSS プロパティ
+  - Reference
+  - all
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>all</strong></code> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>は、要素のすべてのプロパティを ({{cssxref("unicode-bidi")}} および {{cssxref("direction")}} を除いて) 初期化します。</span>プロパティは初期値または継承値、または他のスタイルシートに由来して指定した値に設定される可能性があります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* グローバル値 */
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS カスケードと継承 Level 4 */
+all: revert;
+</pre>
+
+<p><code>all</code> プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は {{cssxref("unicode-bidi")}} および {{cssxref("direction")}} プロパティには影響しません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>その要素のすべてのプロパティを<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に変更するべきであることを指定します。</dd>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>その要素のすべてのプロパティを<a href="/ja/docs/Web/CSS/inheritance">継承値</a>に変更するべきであることを指定します。</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。</dd>
+ <dt>{{cssxref("revert")}}</dt>
+ <dd>宣言が所属するスタイルシートの出所に応じて動作を指定します。
+ <dl>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#User-agent_stylesheets">ユーザーエージェントのスタイルシート</a></dt>
+  <dd><code>unset</code> と同等です。</dd>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#User_stylesheets">ユーザーのスタイル</a></dt>
+  <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーエージェントレベルまでロールバックし、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が、その要素に対して作者レベルまたはユーザーレベルの規則が指定されていないかのように計算されるようにします。</dd>
+  <dt><a href="/ja/docs/Web/CSS/Cascade#Author_stylesheets">作者のスタイル</a></dt>
+  <dd><a href="/ja/docs/Web/CSS/Cascade">カスケード</a>をユーザーのレベルまでロールバックし、作者レベルの規則が要素に指定されていない場合は、<a href="/ja/docs/Web/CSS/specified_value">指定値</a>が計算されます。 <code>revert</code> の用途では、作者のオリジンはオーバーライドおよびアニメーションのオリジンが含まれます。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;/blockquote&gt;
+Phasellus eget velit sagittis.</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="all_プロパティなし"><code>all</code> プロパティなし</h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} は、特定の背景色と文字色と一緒に、ブラウザーの標準スタイルを使用します。blockquoteは<em>ブロック</em>要素のようにふるまいます。これに続くテキストはその下にあります。</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote は<em>インライン</em>要素 (初期値) であり、 {{cssxref("background-color")}} は <code>transparent</code> (初期値) ですが、 {{cssxref("font-size")}} は <code>small</code> (継承された値) のままで、かつ {{cssxref("color")}}は<code>blue</code> (継承された値) です。</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。 blockquote は<em>インライン</em>要素 (初期値) であり、{{cssxref("background-color")}}<code>はtransparent</code> (初期値)、{{cssxref("font-size")}}<code>はnormal</code> (初期値)、且つ{{cssxref("color")}}は <code>black</code> (初期値)です。</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}} はブラウザーの標準スタイルを使用しません。blockquoteは<em>ブロック</em>要素 (blockquoteを含んでいる{{HTMLElement("div")}}から継承された値)であり、{{cssxref("background-color")}}<code>はtransparent</code>(初期値)、{{cssxref("font-size")}}<code>はsmall</code> (継承された値)、且つ {{cssxref("color")}}は<code>blue</code> (継承された値)です。</p>
+</div>
+
+<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('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td><code>revert</code> の値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.all")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>CSS のグローバルキーワード値: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p>
diff --git a/files/ja/web/css/alpha-value/index.html b/files/ja/web/css/alpha-value/index.html
new file mode 100644
index 0000000000..43f07fb8d7
--- /dev/null
+++ b/files/ja/web/css/alpha-value/index.html
@@ -0,0 +1,64 @@
+---
+title: <alpha-value>
+slug: Web/CSS/alpha-value
+tags:
+  - Alpha-value
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Data Type
+  - Draft
+  - Example
+  - アルファ値
+  - データ型
+translation_of: Web/CSS/alpha-value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;alpha-value&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>であり、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} によって色の<strong>{{Glossary("alpha", "アルファチャネル")}}</strong>または<strong>透過性</strong>を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>数値で指定された場合、利用可能な範囲は '0' (完全透過) から '1' (完全不透過) までの小数値です。 0 から 1 の範囲を超える数も有効ですが、 0 から 1 の範囲に<a href="https://en.wikipedia.org/wiki/Clamping_(graphics)">クランプ</a>されます。</p>
+
+<p>パーセント値で指定された場合、 '0%' は完全に透明、 '100%' は完全に不透明に対応します。</p>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーションの際、 CSS の <code>&lt;alpha-value&gt;</code> データ型の値は実数の浮動小数点値として補間されます。補間の速度はアニメーションと関連づけられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって決められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>&lt;alpha-value&gt;</code> 値を使用する CSS 機能には、 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">rgba() や hsla() などの色関数</a>や、シェイプを抽出する目的で画像の一部とみなされるピクセルを決定する {{cssxref("shape-image-threshold")}} などがあります。</p>
+
+<pre class="brush: css no-line-numbers language-css notranslate">/* &lt;rgba()&gt; */
+color: rgba(34, 12, 64, 0.6);
+color: rgba(34.0 12 64 / 60%);
+
+/* shape-image-threshold */
+shape-image-threshold: 70%;
+shape-image-threshold: 0.7;</pre>
+
+<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('CSS4 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td><code>&lt;alpha-value&gt;</code> を <code>rgba()</code> および <code>hsla()</code> 関数表記のために導入した。</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/alternative_style_sheets/index.html b/files/ja/web/css/alternative_style_sheets/index.html
new file mode 100644
index 0000000000..805b130005
--- /dev/null
+++ b/files/ja/web/css/alternative_style_sheets/index.html
@@ -0,0 +1,102 @@
+---
+title: 代替スタイルシート
+slug: Web/CSS/Alternative_style_sheets
+tags:
+  - CSS
+  - Guide
+  - HTML
+  - NeedsCompatTable
+  - NeedsUpdate
+  - Reference
+  - ガイド
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<div>{{cssref}}</div>
+
+<p>ウェブページに<strong>代替スタイルシート</strong>を指定すると、ユーザーのニーズや設定に応じて複数のバージョンのページを見る方法を提供します。</p>
+
+<p>Firefox では、<em>表示</em> &gt;<em>スタイルシート</em>のサブメニューを使用して、ユーザーがスタイルシートを選択することができます。 Internet Explorer でも (IE 8 から) この機能に対応しており、<em>表示</em> &gt;<em>スタイル</em>から利用できます。 Chrome では (バージョン48時点で) この機能を使用するのに拡張機能が必要です。ウェブページがユーザーからスタイルの切り替えができるユーザーインターフェイスを提供することもできます。</p>
+
+<h2 id="An_example_specifying_the_alternative_stylesheets" name="An_example_specifying_the_alternative_stylesheets">例: 代替スタイルシートの指定</h2>
+
+<p>代替スタイルシートはふつう、次のように {{HTMLElement("link")}} 要素に <code>rel="alternate stylesheet"</code> およびび <code>title="..."</code> 属性を使用することで指定されます。</p>
+
+<pre class="brush: html notranslate">&lt;link href="reset.css" rel="stylesheet" type="text/css"&gt;
+
+&lt;link href="default.css" rel="stylesheet" type="text/css" title="既定のスタイル"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="ファンシー"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="基本"&gt;
+</pre>
+
+<p>この例では、<em>スタイルシート</em>のサブメニューに「既定のスタイル」「ファンシー」「基本」という項目が追加され、「既定のスタイル」が選択されています。ユーザーがスタイルを選択すると、ページはそのスタイルシートを使って即座に再描画されます。</p>
+
+<p>どのスタイルが選択されても、 reset.css の規則が常に適用されます。</p>
+
+<h3 id="Try_it_out" name="Try_it_out">やってみましょう</h3>
+
+<p><a href="/samples/cssref/altstyles/index.html">ここをクリック</a>すると、やってみることができる例を見ることができます。</p>
+
+<h2 id="Details" name="Details">詳細</h2>
+
+<p>文書内のスタイルシートはどれも、以下のカテゴリのうち一つに当てはまります。</p>
+
+<ul>
+ <li><strong>常設</strong> (<code>rel="alternate"</code> も <code>title=""</code> もないもの): 常に文書に適用されます。</li>
+ <li><strong>推奨</strong> (<code>rel="alternate"</code> がなく、 <code>title="..."</code> があるもの): 既定で適用されますが、代替スタイルシートが選択されると{{domxref("StyleSheet.disabled", "無効化", "", 1)}}されます。<strong>推奨スタイルシートは一つしか存在できません</strong>ので、異なる title 属性を持つスタイルシートを複数指定すると、いくつかが無視されます。より詳細な説明は<a href="/ja/docs/Correctly_Using_Titles_With_External_Stylesheets">外部スタイルシートにおける正しいタイトルの使用</a>をご覧ください。</li>
+ <li><strong>代替</strong> (<code>rel="alternate stylesheet"</code> および <code>title="..."</code> の指定が必要): 既定では無効で、選択することができます。</li>
+</ul>
+
+<p>{{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} 又は {{HTMLElement("style")}} 要素で、スタイルシートが <code>title</code> 属性とともに参照された場合、そのタイトルがユーザに与えられる選択肢のひとつとなります。同じタイトルでリンクされた別のスタイルシートも、同じ選択肢の一部として扱われます。 <code>title</code> 属性を付けずにリンクされたスタイルシートは常に適用されます。</p>
+
+<p>標準スタイルシートへリンクするには <code>rel="stylesheet"</code> を、代替スタイルシートへリンクするには <code>rel="alternate stylesheet"</code> を使用します。これにより、どのスタイルシートのタイトルを標準で選択すべきかがブラウザーに伝わり、代替スタイルシートに対応していないブラウザーでは標準の選択肢が適用されます。</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('HTML WHATWG', '#rel-alternate', 'link type "alternate"')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#the-link-is-an-alternative-stylesheet', 'alternative stylesheet')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#attr-style-title', 'the "title" attribute for the style element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#attr-meta-http-equiv-default-style', 'meta http-equiv="default-style")')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>CSS OM 仕様書は、<strong>スタイルシートセット名</strong>と、その<strong>無効フラグ</strong>、<strong>推奨される CSS スタイルシートセット名</strong> の概念を定義しています。<br>
+    これらがどのように指定されるのかを定義し、 HTML 仕様書が <strong><dfn>CSS スタイルシートの作成時</dfn></strong>に定義する必要がある HTML に依存した動作を定義できるようにしています。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>以前は、 HTML 仕様書自体で推奨及び代替スタイルシートの概念を定義していました。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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("html.elements.link.rel.alternate_stylesheet")}}</p>
diff --git a/files/ja/web/css/angle-percentage/index.html b/files/ja/web/css/angle-percentage/index.html
new file mode 100644
index 0000000000..adbd7d5f66
--- /dev/null
+++ b/files/ja/web/css/angle-percentage/index.html
@@ -0,0 +1,62 @@
+---
+title: <angle-percentage>
+slug: Web/CSS/angle-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - angle-percentage
+  - units
+  - values
+translation_of: Web/CSS/angle-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;angle-percentage&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("angle")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("angle")}} および {{Cssxref("percentage")}} の文書を参照してください。</p>
+
+<h2 id="Use_in_calc" name="Use_in_calc">calc() での使用</h2>
+
+<p>許可されている型として <code>&lt;angle-percentage&gt;</code> が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。</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('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;angle-percentage&gt;</code> を定義。 <code>calc()</code> を追加</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.angle-percentage")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS データ型</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>{{cssxref("conic-gradient", "conic-gradient()")}} および {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+</ul>
diff --git a/files/ja/web/css/angle/index.html b/files/ja/web/css/angle/index.html
new file mode 100644
index 0000000000..c7989858b1
--- /dev/null
+++ b/files/ja/web/css/angle/index.html
@@ -0,0 +1,94 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - CSS 値と単位
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/angle
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;angle&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、度、グラード、ラジアン、回転の値で表される角度の値を表します。例えば、 {{cssxref("&lt;gradient&gt;")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
+
+<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>
+
+<p><code>&lt;angle&gt;</code> データ型は、一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 <code>0</code> の後は、角度の単位は任意です。</p>
+
+<p>任意で、先行して単一の符号 (<code>+</code> または <code>-</code>) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 <code>90deg</code> は <code>-270deg</code> と等価で、 <code>1turn</code> は <code>4turn</code> と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。</p>
+
+<h3 id="Units" name="Units">単位</h3>
+
+<dl>
+ <dt><code><a id="deg" name="deg">deg</a></code></dt>
+ <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E5%BA%A6_(%E8%A7%92%E5%BA%A6)">度数法 (度)</a> で表します。円一周は <code>360deg</code> です。例: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code></dd>
+ <dt id="grad"><code><a id="grad" name="grad">grad</a></code></dt>
+ <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%BC%E3%83%89_(%E5%8D%98%E4%BD%8D)">グラード</a>で表します。円一周は <code>400grad</code> です。例: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code></dd>
+ <dt id="rad"><code><a id="rad" name="rad">rad</a></code></dt>
+ <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B8%E3%82%A2%E3%83%B3">弧度法 (ラジアン)</a> で表します。円一周は 2π ラジアンで、およそ <code>6.2832rad</code> です。 <code>1rad</code> は 180/π 度です。例: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code></dd>
+ <dt id="turn"><code><a id="turn" name="turn">turn</a></code></dt>
+ <dd>角度を回転数で表します。円一周は <code>1turn</code> です。例: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code></dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>直角: <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>平角: <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>直角 (反時計回り): <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>角度なし: <code>0 = 0deg = 0grad = 0turn = 0rad</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS4 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.angle")}}</p>
diff --git a/files/ja/web/css/animation-delay/index.html b/files/ja/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..2535908e60
--- /dev/null
+++ b/files/ja/web/css/animation-delay/index.html
@@ -0,0 +1,90 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - Animation
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+  - animation-delay
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>animation-delay</code></strong> プロパティは、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一のアニメーション */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* 複数のアニメーション */
+animation-delay: 2.1s, 480ms;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>{{cssxref("&lt;time&gt;")}}</code></dt>
+ <dd>アニメーションが要素に適用され、アニメーションが始まる瞬間からのオフセット時間。これは秒 (<code>s</code>) またはミリ秒 (<code>ms</code>) のどちらかで指定できます。単位は必須です。</dd>
+ <dd>正の数が指定された場合は、アニメーションが始まる経過時間を示します。 <code>0s</code> （既定値）の場合は、アニメーションは適用されたらすぐに始まります。</dd>
+ <dd>
+ <p>負の数が指定された場合は、アニメーションは直ちに始まりますが、アニメーション周期の途中からになります。例えば、 <code>-1s</code> を遅延時間に指定すると、アニメーションは直ちに始まりますが、アニメーションが始まって1秒の時点から始まります。アニメーションの遅延時間に負の値を指定しても、暗黙的に開始値が指定されている場合、開始値はアニメーションが要素に適用された瞬間から取得されます。</p>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.animation-delay")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-direction/index.html b/files/ja/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..a3ecf9e9ac
--- /dev/null
+++ b/files/ja/web/css/animation-direction/index.html
@@ -0,0 +1,98 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>animation-direction</code></strong> プロパティは、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* 単一のアニメーション */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* 複数のアニメーション */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* グローバル値 */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>アニメーションを毎回<em>順方向</em>に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最初の状態にリセットしてそこからまた始めます。これが既定値です。</dd>
+ <dt><code>reverse</code></dt>
+ <dd>アニメーションを毎回<em>逆方向</em>に再生します。言い換えれば、アニメーション周期ごとに、アニメーションを最後の状態にリセットしてそこからまた始めます。アニメーションを逆方向に実行し、タイミング関数も逆になります。例えば、タイミング関数の <code>ease-in</code> が <code>ease-out</code> になります。</dd>
+ <dt><code>alternate</code></dt>
+ <dd>アニメーションを毎回反転させ、初回は<em>順方向</em>になります。周期が偶数か奇数かを特定する回数は1から始まります。</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>アニメーションを毎回反転させ、初回は<em>逆方向</em>になります。周期が偶数か奇数かを特定する回数は1から始まります。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>{{cssinfo}}</p>
+
+<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 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.animation-direction")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-duration/index.html b/files/ja/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..becc1fd743
--- /dev/null
+++ b/files/ja/web/css/animation-duration/index.html
@@ -0,0 +1,91 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - Animation
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+  - animation-duration
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>animation-duration</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、1回のアニメーション周期が完了するまでの所要時間を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 単一のアニメーション */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* 複数のアニメーション */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>{{cssxref("&lt;time&gt;")}}</code></dt>
+ <dd>1回のアニメーションの周期にかかる時間。この値は、秒 (<code>s</code>) またはミリ秒 (<code>ms</code>) で指定することができます。値は正の数か0でなければならず、単位は必須です。 <code>0s</code> の値は、既定値ですが、アニメーションを実行しないことを意味します。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注:</strong> 負の数は無効であり、宣言が無視されます。一部、初期の接頭辞付きの実装は <code>0s</code> と等価に解釈するかもしれません。</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: <code>animation-*</code> プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-duration', 'animation-duration')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.animation-duration")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-fill-mode/index.html b/files/ja/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..d2752a3009
--- /dev/null
+++ b/files/ja/web/css/animation-fill-mode/index.html
@@ -0,0 +1,187 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - リファレンス
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>animation-fill-mode</code></strong> プロパティは、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} を使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* 単一のアニメーション */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* 複数のアニメーション */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>アニメーションが実行されていない時は、対象にスタイルを適用しません。要素は適用されているその他の CSS 規則を使用して表示されます。これが既定値です。</dd>
+ <dt><code>forwards</code></dt>
+ <dd>対象は実行の最後の<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で設定された計算値を保持します。最後のキーフレームは {{cssxref("animation-direction")}} と {{cssxref("animation-iteration-count")}} の値によって変わります。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">最後のキーフレーム</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>偶数または奇数</td>
+    <td><code>100%</code> または <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>偶数または奇数</td>
+    <td><code>0%</code> または <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>偶数</td>
+    <td><code>0%</code> または <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>奇数</td>
+    <td><code>100%</code> または <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>偶数</td>
+    <td><code>100%</code> または <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>奇数</td>
+    <td><code>0%</code> または <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>アニメーションは最初の適切な<a href="/en-US/docs/Web/CSS/@keyframes">キーフレーム</a>で定義された値を対象に適用されると同時に適用し、 {{cssxref("animation-delay")}} の期間これを保持します。最初の適切なキーフレームは、 {{cssxref("animation-direction")}} の値によって変わります。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">最初の適切なキーフレーム</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> または <code>alternate</code></td>
+    <td><code>0%</code> または <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> または <code>alternate-reverse</code></td>
+    <td><code>100%</code> または <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>アニメーションは forwards と backwards の両方の既定に従います。よって、アニメーションの設定は実行前と実行後の両方に適用されます。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例で <code>animation-fill-mode</code> の効果を見ることができます。これは無限に繰り返されるアニメーションが、元の状態に戻るのではなく最後の状態を維持するようにすることができます（既定の状態）。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;マウスを灰色のボックスの上に乗せてください！&lt;/p&gt;
+&lt;div class="demo"&gt;
+ &lt;div class="growsandstays"&gt;これは大きくなって大きいままになります。&lt;/div&gt;
+  &lt;div class="grows"&gt;これは大きくなるだけです。&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}</pre>
+
+<p>{{EmbedLiveSample('Example',700,300)}}</p>
+
+<p>これ以外の例は <a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.animation-fill-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-iteration-count/index.html b/files/ja/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..a7e74e4f23
--- /dev/null
+++ b/files/ja/web/css/animation-iteration-count/index.html
@@ -0,0 +1,91 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - CSS プロパティアニメーション
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>animation-iteration-count</code></strong> プロパティは、停止するまでにアニメーション周期が再生される回数を指定します。</p>
+
+<p>複数の値が指定された場合、アニメーションが再生されるたびにリスト中の次の値が使用され、最後の1つが使用されたら最初に戻ります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+animation-iteration-count: infinite;
+
+/* &lt;number&gt; 値 */
+animation-iteration-count: 3;
+animation-iteration-count: 2.4;
+
+/* 複数の値 */
+animation-iteration-count: 2, 0, infinite;</pre>
+
+<p><strong><code>animation-iteration-count</code></strong> プロパティは1つ以上のコンマで区切られた値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>アニメーションは無制限に繰り返されます。</dd>
+ <dt><code>{{cssxref("&lt;number&gt;")}}</code></dt>
+ <dd>アニメーションが繰り返される回数です。既定値は <code>1</code> です。アニメーション周期の一部を再生したい場合は、非整数の値を指定できます。例えば、 <code>0.5</code> はアニメーション周期の半分を再生します。負の数は無効です。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.animation-iteration-count")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-name/index.html b/files/ja/web/css/animation-name/index.html
new file mode 100644
index 0000000000..885cba4529
--- /dev/null
+++ b/files/ja/web/css/animation-name/index.html
@@ -0,0 +1,93 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>animation-name</code></strong> プロパティは、要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する {{cssxref("@keyframes")}} @-規則を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一のアニメーション */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* 複数のアニメーション */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* グローバル値 */
+animation-name: <a href="/ja/docs/Web/CSS/initial">initial</a>
+animation-name: <a href="/ja/docs/Web/CSS/inherit">inherit</a>
+animation-name: <a href="/ja/docs/Web/CSS/unset">unset</a></pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>キーフレームがないことを示す特別なキーワード。他の識別子の順序を変更せずにアニメーションを非アクティブにする、またはカスケードからのアニメーションを非アクティブにするために使用できます。</dd>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>アニメーションを識別する名前です。識別子は大文字小文字の区別がない英文字 <code>a</code> から <code>z</code>、 数字 <code>0</code> から <code>9</code>、 アンダースコア (<code>_</code>)、 ダッシュ (<code>-</code>) から成ります。最初のダッシュ以外の文字は英文字でなければなりません。また、二重ダッシュは識別子の先頭では禁止されています。さらに、識別子は <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code> であってはなりません。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a>を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<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.properties.animation-name")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-play-state/index.html b/files/ja/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..7d0ce0296d
--- /dev/null
+++ b/files/ja/web/css/animation-play-state/index.html
@@ -0,0 +1,90 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>animation-play-state</code></strong> プロパティは、<strong>アニメーションが実行中か停止中か</strong>を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>停止したアニメーションを再開すると、アニメーションの流れの最初からではなく、停止した位置からアニメーションが始まります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一のアニメーション */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* 複数のアニメーション */
+animation-play-state: paused, running, running;
+
+/* グローバル値 */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd><strong>アニメーション</strong>が現在<strong>実行中</strong>です。</dd>
+ <dt><code>paused</code></dt>
+ <dd><strong>アニメーション</strong>が現在<strong>停止中</strong>です。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにコンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a> を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code>
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>例は <a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</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 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.animation-play-state")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/animation-timing-function/index.html b/files/ja/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..b2e5cbb10d
--- /dev/null
+++ b/files/ja/web/css/animation-timing-function/index.html
@@ -0,0 +1,275 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+tags:
+  - Animation
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+  - animation-timing-function
+translation_of: Web/CSS/animation-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>animation-timing-function</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである {{cssxref("animation")}} プロパティを使用すると便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* 関数値 */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* 段階関数のキーワード */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* 複数のアニメーション */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* グローバル値 */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<p>タイミング関数は <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> 規則内にあるそれぞれのキーフレームに指定されることがあります。キーフレームに <code><strong>animation-timing-function</strong></code> が指定されていない場合、そのキーフレームにはアニメーションが適用された要素から <code><strong>animation-timing-function</strong></code> の適切な値が使用されます。</p>
+
+<p>キーフレームのタイミング関数は、指定されたキーフレームからそのプロパティを指定する次のキーフレームまで、またはそのプロパティを指定する後続のキーフレームがない場合はアニメーションの終わりまで、プロパティごとに適用されます。結果的に、 <code><strong>animation-timing-function</strong></code> のうち <code><strong>100%</strong></code> または <code><strong>to</strong></code> に指定したものは使用されません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;timing-function&gt;")}}</dt>
+ <dd>
+ <p>{{cssxref("animation-name")}} で定められた、アニメーションに対応するタイミング関数です。</p>
+
+ <p>ステップではないキーワード値 (easy, linear, ease-in-out など) は、それぞれ固定の 4 点値を持つ 3 次ベジェ曲線を表し、 cubic-bezier() 関数の値で非定義値を指定することができます。ステップタイミング関数は、入力時間を長さが等しい指定された数の間隔に分割します。これは、ステップ数とステップ位置によって定義されます。</p>
+ </dd>
+ <dt><code>ease</code></dt>
+ <dd><code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。</dd>
+ <dt><code>linear</code></dt>
+ <dd><code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> と同じで、等しい速度でアニメーションします。</dd>
+ <dt><code>ease-in</code></dt>
+ <dd><code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> と同じで、プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。</dd>
+ <dt><code>ease-out</code></dt>
+ <dd><code>cubic-bezier(0, 0, 0.58, 1.0)</code> と同じで、アニメーションは速く始まり、速度を落としながら続きます。</dd>
+ <dt><code>ease-in-out</code></dt>
+ <dd><code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。</dd>
+ <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+ <dd>ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。</dd>
+ <dt><code>steps(n, &lt;jumpterm&gt;)</code></dt>
+ <dd>遷移に沿った <em>n</em> 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。例えば、 <em>n</em> が 5 の場合、5つの段階があります。アニメーションが停止する点は、以下の jumpterm によって、アメーションに沿って 0%, 20%, 40%, 60%, 80% となるか、 20%, 40%, 60%, 80%, 100% となるか、アニメーションの 0% と 100% の間で5つの停止点を設定するか、 0% と 100% を含む5つの停止点を設定するか (すなわち 0%, 25%, 50%, 75%, 100%)、の何れかを使用します。
+ <dl>
+  <dt><code>jump-start</code></dt>
+  <dd>アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。</dd>
+  <dt><code>jump-end</code></dt>
+  <dd>アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。</dd>
+  <dt><code>jump-none</code></dt>
+  <dd>どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。</dd>
+  <dt><code>jump-both</code></dt>
+  <dd>0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。</dd>
+  <dt><code>start</code></dt>
+  <dd><code>jump-start</code> と同じです。</dd>
+  <dt><code>end</code></dt>
+  <dd><code>jump-end</code> と同じです。</dd>
+ </dl>
+ </dd>
+ <dt><code>step-start</code></dt>
+ <dd><code>steps(1, jump-start)</code> と同じです。</dd>
+ <dt><code>step-end</code></dt>
+ <dd><code>steps(1, jump-end)</code> と同じです。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>animation-*</code> プロパティにカンマ区切りで複数の値を指定した場合、 {{cssxref("animation-name")}} プロパティで指定したアニメーションに割り当てられますが、いくつあるかによって異なる方法で割り当てられます。詳しくは、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</a>を参照してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>
+<h3 id="Cubic-Bezier_examples" name="Cubic-Bezier_examples">二次元ベジェの例</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Cubic-Bezier_examples", 600, 200)}}</div>
+</div>
+
+<div>
+<h3 id="Step_examples" name="Step_examples">段階の例</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="start"&gt;start&lt;/div&gt;
+  &lt;div class="end"&gt;end&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Step_examples", 600, 200)}}</div>
+</div>
+
+<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 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.animation-timing-function")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS アニメーションに関する CSS 開発者ガイド">CSS アニメーションの使用</a></li>
+ <li>{{cssxref('timing-function')}}</li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+ <li><a href="http://cubic-bezier.com">cubic-bezier.com</a></li>
+</ul>
diff --git a/files/ja/web/css/animation/index.html b/files/ja/web/css/animation/index.html
new file mode 100644
index 0000000000..2d3fc60770
--- /dev/null
+++ b/files/ja/web/css/animation/index.html
@@ -0,0 +1,358 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - Animation
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - Reference
+  - animation-delay
+  - animation-direction
+  - animation-duration
+  - animation-fill-mode
+  - animation-iteration-count
+  - animation-name
+  - animation-play-state
+  - animation-timing-function
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/CSS">CSS</a> の <strong><code>animation</code></strong> <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティは、スタイル間のアニメーションを適用します。</span>これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+</pre>
+
+<div class="hidden" id="animation">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;
+      Given the following animation:
+      &lt;pre&gt;@keyframes slidein {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="play" title="PLAY"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
+        &lt;div class="animation a1"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
+        &lt;div class="animation a2"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
+        &lt;div class="animation a3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+svg { width: 1.5em; height: 1.5em; }
+
+button {
+  width: 27px;
+  height: 27px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
+}
+
+button.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
+}
+
+button.restart {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+}
+
+.flx {
+  flex: 1 0;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+.overlay { padding: .5em; }
+
+@keyframes slidein {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
+.a2 { animation: 3s linear 1s slidein; }
+.a3 { animation: 3s slidein; }
+
+.animation {
+  background: #3F87A6;
+  width: 100%;
+  height: calc(100% - 1.5em);
+  transform-origin: left center;
+}</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
+  var BUTTON    = Array.from(document.querySelectorAll('button'));
+
+  function toggleButton (btn, type) {
+    btn.classList.remove('play', 'pause', 'restart');
+    btn.classList.add(type);
+    btn.title = type.toUpperCase(type);
+  }
+
+  function playPause (i) {
+    var btn  = BUTTON[i];
+    var anim = ANIMATION[i];
+
+    if (btn.classList.contains('play')) {
+      anim.style.animationPlayState = 'running';
+      toggleButton(btn, 'pause');
+    } else if (btn.classList.contains('pause')) {
+      anim.style.animationPlayState = 'paused';
+      toggleButton(btn, 'play');
+    } else {
+      anim.classList.remove('a' + (i + 1));
+      setTimeout(function () {
+        toggleButton(btn, i === 0 ? 'play' : 'pause');
+        anim.style.animationPlayState = '';
+        anim.classList.add('a' + (i + 1));
+      }, 100)
+    }
+  }
+
+  ANIMATION.forEach(function (node, index) {
+    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
+    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
+  });
+
+  BUTTON.forEach(function (btn, index) {
+    btn.addEventListener('click', function () { playPause(index); });
+  });
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+
+<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable">アニメーションできるプロパティの説明</a>があります。この説明は言うまでもなく <a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジション</a>にも有効です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>animation</code> プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。</p>
+
+<p>それぞれ個別のアニメーションは以下のように定義されます。</p>
+
+<ul>
+ <li>以下の値は0～1回出現します。
+  <ul>
+   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}}</li>
+  </ul>
+ </li>
+ <li>アニメーションの名前は任意で、 <code>none</code>, {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}} のいずれかになります。</li>
+ <li>0～2回の {{cssxref("&lt;time&gt;")}} の値</li>
+</ul>
+
+<p>各アニメーションの定義の中での順序は重要です。{{cssxref("&lt;time&gt;")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。</p>
+
+<p>順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="&lt;single-animation-iteration-count>">&lt;single-animation-iteration-count&gt;</code></dt>
+ <dd>アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。</dd>
+ <dt><code id="&lt;single-animation-direction>">&lt;single-animation-direction&gt;</code></dt>
+ <dd>アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。</dd>
+ <dt><code id="&lt;single-animation-fill-mode>">&lt;single-animation-fill-mode&gt;</code></dt>
+ <dd>アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。</dd>
+ <dt><code id="&lt;single-animation-play-state>">&lt;single-animation-play-state&gt;</code></dt>
+ <dd>アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Cylon_Eye" name="Cylon_Eye">台風の目</h3>
+
+<pre class="brush: html">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    Listening for dispatches
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+</pre>
+
+<p>{{EmbedLiveSample('Cylon_Eye')}}</p>
+
+<p>これ以外の例は <a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS animations">CSS アニメーション</a>を参照してください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。</p>
+
+<p>アニメーションを停止したり無効にしたりする仕組みを、できれば <a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.animation")}}</p>
+
+<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+
+<ul>
+ <li>Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります ({{bug(1383239)}})。これは Firefox の新しい並列 CSS エンジン（<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> と呼ばれており、 Firefox 57 でリリースする計画です）で修正されています。</li>
+ <li>他の Gecko のバグとして、 {{htmlelement("details")}} 要素が <code>open</code> 属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります ({{bug(1382124)}})。 Quantum CSS では修正されています。</li>
+ <li>さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の {{cssxref("font-size")}} を変更しても影響されないというものがあります ({{bug(1254424)}})。 Quantum CSS では修正されています。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ja/web/css/appearance/index.html b/files/ja/web/css/appearance/index.html
new file mode 100644
index 0000000000..c3bcde3b53
--- /dev/null
+++ b/files/ja/web/css/appearance/index.html
@@ -0,0 +1,2673 @@
+---
+title: 'appearance (-moz-appearance, -webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - '-moz-appearance'
+  - '-webkit-appearance'
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+  - appearance
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS の <strong><code>-moz-appearance</code></strong> プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。</p>
+
+<p><strong><code>-webkit-appearance</code></strong> プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から <code>-webkit-appearance</code> に対応しています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは <a href="/ja/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの <a href="/ja/docs/XBL">XBL</a> 実装でも使用されます。</p>
+
+<div class="note">
+<p><strong>互換性メモ</strong>: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 <code>none</code> キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* CSS 基本ユーザーインターフェイス Level 4 の値 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Gecko で使用できる値の一部 */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+</pre>
+
+<p><code>-moz-appearance</code> プロパティは、以下の一覧から一つの値を選択して指定することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>&lt;appearance&gt;</code> は以下のキーワードのうちの一つです。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>値</th>
+   <th>デモ</th>
+   <th>ブラウザー</th>
+   <th>説明</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div class="hidden" id="sampleNone">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance:none;
+-webkit-appearance:none;
+appearance:none; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>特別なスタイルは適用されません。これが既定です。</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> {{Experimental_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAuto">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: auto;
+-webkit-appearance: auto;
+appearance:auto; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td>
+   <td>なし</td>
+   <td>ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では <code>none</code> として動作します。</td>
+  </tr>
+  <tr>
+   <td><code>attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAttachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: attachment;
+-webkit-appearance: attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-borderless-attachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: borderless-attachment;
+-webkit-appearance: borderless-attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button;
+-webkit-appearance: button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>要素がボタンのように描画されます。</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-down;
+-webkit-appearance: button-arrow-down; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowNext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-next;
+-webkit-appearance: button-arrow-next; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowPrevious">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-previous;
+-webkit-appearance: button-arrow-previous; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-up;
+-webkit-appearance: button-arrow-up; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonBevel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-bevel;
+-webkit-appearance: button-bevel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonFocus">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-focus;
+-webkit-appearance: button-focus; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-caps-lock-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: caps-lock-indicator;
+-webkit-appearance: caps-lock-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>caret</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCaret">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: caret;
+-webkit-appearance: caret; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox;
+-webkit-appearance: checkbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-container;
+-webkit-appearance: checkbox-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-label;
+-webkit-appearance: checkbox-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckmenuitem">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: checkmenuitem;
+-webkit-appearance: checkmenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>color-well</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-color-well">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: color-well;
+-webkit-appearance: color-well; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-continuous-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: continuous-capacity-level-indicator;
+-webkit-appearance: continuous-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>default-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-default-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: default-button;
+-webkit-appearance: default-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-discrete-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: discrete-capacity-level-indicator;
+-webkit-appearance: discrete-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleDualButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: dualbutton;
+-webkit-appearance: dualbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleGroupbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: groupbox;
+-webkit-appearance: groupbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleInnerSpinButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: inner-spin-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>image-controls-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-image-controls-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: image-controls-button;
+-webkit-appearance: image-controls-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>list-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-list-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: list-button;
+-webkit-appearance: list-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td>datalist</td>
+  </tr>
+  <tr>
+   <td><code>listbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListBox">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: listbox;
+-webkit-appearance: listbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>listitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: listitem;
+-webkit-appearance: listitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaEnterFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-enter-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaExitFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-exit-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider;
+-webkit-appearance: media-fullscreen-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider-thumb;
+-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaMuteButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaOverlayPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-overlay-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-return-to-realtime-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-return-to-realtime-button;
+-webkit-appearance: media-return-to-realtime-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-rewind-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-rewind-button;
+-webkit-appearance: media-rewind-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-back-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-back-button;
+-webkit-appearance: media-seek-back-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-forward-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-forward-button;
+-webkit-appearance: media-seek-forward-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaToggleClosedCaptionsButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-toggle-closed-captions-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-sliderthumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderContainer">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-volume-slider-mute-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-volume-slider-mute-button;
+-webkit-appearance: media-volume-slider-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-dark-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-dark-bar-background;
+-webkit-appearance: media-controls-dark-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsFullscreenBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-fullscreen-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-light-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-light-bar-background;
+-webkit-appearance: media-controls-light-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaCurrentTimeDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-current-time-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaTimeRemainingDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-time-remaining-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuarrow;
+-webkit-appearance: menuarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menubar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenubar">
+    <pre class="brush: css">
+div { color: balck;
+-moz-appearance: menubar;
+-webkit-appearance: menubar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menucheckbox;
+-webkit-appearance: menucheckbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuImage">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuimage;
+-webkit-appearance: menuimage; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitem;
+-webkit-appearance: menuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItemText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitemtext;
+-webkit-appearance: menuitemtext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menulist</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuList">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist;
+-webkit-appearance: menulist; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-button;
+-webkit-appearance: menulist-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-text;
+-webkit-appearance: menulist-text; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-textfield;
+-webkit-appearance: menulist-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuPopup">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menupopup;
+-webkit-appearance: menupopup; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuradio;
+-webkit-appearance: menuradio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: menuseparator;
+-webkit-appearance: menuseparator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>meter</code></td>
+   <td>
+    <div class="hidden" id="sampleMeter">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: meter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>Firefox 64 で追加</td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterbar;
+-webkit-appearance: meterbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 16 の新機能。代わりに <code>meter</code> を使用のこと</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterchunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterchunk;
+-webkit-appearance: meterchunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 16 で追加。 Firefox 64 で削除。</td>
+  </tr>
+  <tr>
+   <td><code>number-input</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleNumberinput">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: number-input;
+-webkit-appearance: number-input; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progress-bar</code></td>
+   <td>
+    <div class="hidden" id="sampleProgressBarWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Firefox</td>
+   <td>Firefox 64 で追加</td>
+  </tr>
+  <tr>
+   <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarValueWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar-value; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progressbar;
+-webkit-appearance: progressbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>要素が進捗バーのようにスタイル付けられます。代わりに <code>progress-bar</code> を使用のこと</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: progressbar-vertical;
+-webkit-appearance: preogressbar-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk;
+-webkit-appearance: progresschunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunkVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk-vertical;
+-webkit-appearance: progresschunk-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>push-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="samplePushButton">
+    <pre class="brush: css">
+div{ color: black; -webkit-appearance: push-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>radio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio;
+-webkit-appearance: radio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-container;
+-webkit-appearance: radio-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-label;
+-webkit-appearance: radio-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radiomenuitem;
+-webkit-appearance: radiomenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>range</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRange">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range;
+-webkit-appearance: range; }</pre>
+    range
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>range-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRangeThumb">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range-thumb;
+-webkit-appearance: range-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-rating-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: rating-level-indicator;
+-webkit-appearance: rating-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>resizer</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizer">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: resizer;
+-webkit-appearance: resizer; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizerPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: resizerpanel;
+-webkit-appearance: resizerpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-horizontal;
+-webkit-appearance: scale-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleThumbEnd">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbend;
+-webkit-appearance: scalethumbend; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scalethumb-horizontal;
+-webkit-appearance: scalethumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbStart">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbstart;
+-webkit-appearance: scalethumbstart; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbTick">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbtick;
+-webkit-appearance: scalethumbtick; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumb-vertical;
+-webkit-appearance: scalethumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-vertical;
+-webkit-appearance: scale-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-down;
+-webkit-appearance: scrollbarbutton-down; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-left;
+-webkit-appearance: scrollbarbutton-left; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-right;
+-webkit-appearance: scrollbarbutton-right; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-up;
+-webkit-appearance: scrollbarbutton-up; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 63 で削除</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-horizontal;
+-webkit-appearance: scrollbarthumb-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-vertical;
+-webkit-appearance: scrollbarthumb-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-horizontal;
+-webkit-appearance: scrollbartrack-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-vertical;
+-webkit-appearance: scrollbarbartrack-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: searchfield;
+-webkit-appearance: searchfield; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-decoration;
+-webkit-appearance: searchfield-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-decoration;
+-webkit-appearance: searchfield-results-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-button;
+-webkit-appearance: searchfield-results-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchFieldCancelButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: searchfield-cancel-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-snapshotted-plugin-overlay">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: snapshotted-plugin-overlay;
+-webkit-appearance: snapshotted-plugin-overlay; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>separator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: separator;
+-webkit-appearance: separator; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>sheet</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSheet">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: sheet;
+-webkit-appearance: sheet; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spinner</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinner">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: spinner;
+-webkit-appearance: spinner; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerDownbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-downbutton;
+-webkit-appearance: spinner-downbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-textfield;
+-webkit-appearance: spinner-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerUpbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-upbutton;
+-webkit-appearance: spinner-upbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>splitter</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSplitter">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: splitter;
+-webkit-appearance: splitter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>square-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSquareButton">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: square-button;
+-webkit-appearance: square-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbar;
+-webkit-appearance: statusbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBarPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbarpanel;
+-webkit-appearance: statusbarpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tab</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTab">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: tab;
+-webkit-appearance: tab; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanel;
+-webkit-appearance: tabpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanels">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanels;
+-webkit-appearance: tabpanels; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowBack">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-back;
+-webkit-appearance: tab-scroll-arrow-back; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowForward">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-forward;
+-webkit-appearance: tab-scroll-arrow-forward; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>textarea</code></td>
+   <td>
+    <div class="hidden" id="sampleTextArea">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: textarea; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield;
+-webkit-appearance: textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextfieldMultiline">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield-multiline;
+-webkit-appearance: textfield-multiline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>代わりに <code>textarea</code> を使用のこと</td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbar;
+-webkit-appearance: toolbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton;
+-webkit-appearance: toolbarbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButtonDropdown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton-dropdown;
+-webkit-appearance: toolbarbutton-dropdown; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarGripper">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbargripper;
+-webkit-appearance: toolbargripper; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbox;
+-webkit-appearance: toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTooltip">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tooltip;
+-webkit-appearance: tooltip; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeader">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheader;
+-webkit-appearance: treeheader; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderCell">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: treeheadercell;
+-webkit-appearance: treeheadercell; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderSortArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheadersortarrow;
+-webkit-appearance: treeheadersortarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeitem;
+-webkit-appearance: treeitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeLine">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeline;
+-webkit-appearance: treeline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwisty">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwisty;
+-webkit-appearance: treetwisty; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwistyOpen">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwistyopen;
+-webkit-appearance: treetwistyopen; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>treeview</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeView">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeview;
+-webkit-appearance: treeview; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-relevancy-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: relevancy-level-indicator;
+-webkit-appearance: relevancy-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBorderlessGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-borderless-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBrowsertabbarToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationstext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communicationstext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationsToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communications-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は <code>-moz-win-communicationstext</code> です。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinExcludeGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-exclude-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinMediaToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-media-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は <code>-moz-win-mediatext</code> です。</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBoxMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonClose">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-close; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMaximize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-maximize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMinimize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-minimize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonRestore">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-restore; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameBottom">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-bottom; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-left; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-right; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebarMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Firefox 64 で削除</td>
+  </tr>
+  <tr>
+   <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleApplePayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: -apple-pay-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>次のようにすると、要素を Firefox のツールバーボタンのように見せます。</p>
+
+<pre class="brush: css">.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+</pre>
+
+<p>カスタムスタイリングをラジオボタンとチェックボックス適用するための <code>appearance:none</code> の使用例を示す例は、<a href="http://jsfiddle.net/go392m5s/">このJSFiddle</a>も参照してください。</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("CSS4 Basic UI", "#appearance-switching", "appearance")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.appearance")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">CSS 3 Basic User Interface での <code>appearance</code> の定義</a> (2004-05-11より Candidate Recommendation)。</li>
+ <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">UI 仕様 4 から削除された CSS3 機能</a></li>
+</ul>
diff --git a/files/ja/web/css/at-rule/index.html b/files/ja/web/css/at-rule/index.html
new file mode 100644
index 0000000000..6d4fdbcd1d
--- /dev/null
+++ b/files/ja/web/css/at-rule/index.html
@@ -0,0 +1,85 @@
+---
+title: '@-規則'
+slug: Web/CSS/At-rule
+tags:
+  - '@-規則'
+  - '@規則'
+  - CSS
+  - CSS リファレンス
+  - Reference
+  - アット規則
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>@-規則</strong> は <a href="/ja/docs/Web/CSS/Syntax#CSS_statements">CSS 文</a> の一つで、 CSS の振舞いを規定します。 @-規則は、アットマーク、 '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、それに続く識別子から、次のセミコロン、 ';' (<code>U+003B SEMICOLON</code>) もしくは次の <a href="/ja/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS ブロック</a>のどちらかが現れるまでの部分からなります。</span></p>
+
+<pre class="brush: css notranslate">/* 一般的な構造 */
+@IDENTIFIER (RULE);
+
+/* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */
+@charset "utf-8";</pre>
+
+<p>@-規則は何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。</li>
+ <li>{{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。</li>
+ <li>{{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。</li>
+ <li><strong><em>入れ子状の @-規則</em></strong> — 入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループ規則の内部で使用されます:
+  <ul>
+   <li>{{cssxref("@media")}} — <em>メディアクエリ</em>の条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。</li>
+   <li>{{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループ規則です。<em>(CSS Level 4 仕様に先送り)</em></li>
+   <li>{{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。</li>
+   <li>{{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。</li>
+   <li>{{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間ステップに関する指定を記述します。</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — 小さな画面のデバイス用に、ビューポートに関する指定を記述します。<em>(現在は Working Draft 段階)</em></li>
+   <li>{{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li>
+   <li>{{cssxref("@font-feature-values")}} (および <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code>, <code>@character-variant</code>)<br>
+    — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Conditional_group_rules" name="Conditional_group_rules">条件付きグループ規則</h2>
+
+<p>プロパティの値のように、各 @-規則は異なる構文を持ちます。しかし、いくつかの @-規則は <strong>条件付きグループ規則</strong>という特別なカテゴリに分類されます。条件付きグループ規則の文は、構文が共通していて、どれも入れ子の文を持つことができ、ここには普通のルールセットはもちろん、さらに入れ子の @-規則を含める事ができます。さらに言えば、それらはすべて共通の意味あいがあります。 — 全ては常に<strong>真</strong>か<strong>偽</strong>と判定される何らかの条件と結びついています。条件が<strong>真</strong>であれば、条件付きグループ規則内の文全部が適用されます。</p>
+
+<p>条件付きグループ規則は <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> で定義されており、以下の規則があります。</p>
+
+<ul>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("@document")}} <em>(CSS Level 4 仕様に先送り)</em></li>
+</ul>
+
+<p>条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td><code>@-webkit-keyframes</code> を標準化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/attr()/index.html b/files/ja/web/css/attr()/index.html
new file mode 100644
index 0000000000..12fe274750
--- /dev/null
+++ b/files/ja/web/css/attr()/index.html
@@ -0,0 +1,257 @@
+---
+title: attr()
+slug: Web/CSS/attr()
+tags:
+  - CSS
+  - CSS 関数
+  - Reference
+  - Web
+  - attr
+  - レイアウト
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator note"><strong>メモ:</strong> <code>attr()</code> 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。</div>
+
+<p><strong><code>attr()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* 型付き */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* 代替値付き */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>CSS で参照する、 HTML 要素の属性名です。</dd>
+ <dt><code style="white-space: nowrap;">&lt;type-or-unit&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <code>&lt;type-or-unit&gt;</code> で与えると、 <code>attr()</code> 式も無効になります。省略すると既定値の <code>string</code> になります。有効な値は以下の通りです。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">キーワード</th>
+    <th scope="col">関係する型</th>
+    <th scope="col">コメント</th>
+    <th scope="col">既定値</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;string&gt;")}}</td>
+    <td>属性値は CSS {{CSSxRef("&lt;string&gt;")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。</td>
+    <td>空文字列</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;color&gt;")}}</td>
+    <td>属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("&lt;string&gt;")}} 値でなければなりません。<br>
+     前後の空白は除去されます。</td>
+    <td><code>currentcolor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;url&gt;")}}</td>
+    <td>属性値は、 CSS の <code>url()</code> 関数の中で使用される文字列として解析されます。<br>
+     相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。<br>
+     前後の空白は除去されます。</td>
+    <td>一般的なエラーの状況で存在しない文書を指す <code>about:invalid</code> の URL。</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;integer&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;integer&gt;")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;number&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;length&gt;")}} の距離として単位を含んで (<code>12.5em</code> など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     指定された値が相対的な長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;length&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("&lt;length&gt;")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     指定された値が相対的な長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;angle&gt;")}} の大きさとして単位を含んで (<code>30.5deg</code> など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0deg</code>、または <code>0deg</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;angle&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("&lt;angle&gt;")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0deg</code>、または <code>0deg</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;time&gt;")}} の大きさとして単位を含んで (<code>30.5ms</code> など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0s</code>、または <code>0s</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;time&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("&lt;time&gt;")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0s</code>、または <code>0s</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;frequency&gt;")}} の大きさとして単位を含んで (<code>30.5ms</code> など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。</td>
+    <td><code>0Hz</code>、または <code>0Hz</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;frequency&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("&lt;frequency&gt;")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0Hz</code>、または <code>0Hz</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{Experimental_Inline}}</td>
+    <td style="white-space: nowrap;">{{CSSxRef("&lt;percentage&gt;")}}</td>
+    <td>属性値は CSS の {{CSSxRef("&lt;number&gt;")}}、つまり単位なし (<code>12.5</code> など) で解析され、 {{CSSxRef("&lt;percentage&gt;")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br>
+     指定された値が長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br>
+     前後の空白は除去されます。</td>
+    <td><code>0%</code>、または <code>0%</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <code>&lt;type-or-unit&gt;</code> で定義された既定値を使います。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="content_property" name="content_property">content プロパティ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2] notranslate">[data-foo]::before {
+  content: attr(data-foo) " ";
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+
+<h3 id="&lt;color>_value" name="&lt;color>_value">&lt;color&gt; 値</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="background" data-background="lime"&gt;background expected to be red if your browser does not support advanced usage of attr()&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6] notranslate">.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("color-value", "100%", 50)}}</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("CSS4 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>{{CSSxRef("var()")}} のように動作するように変更。 <code>attr()</code> を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>
+    <p>2 つのオプション引数を追加<br>
+     全プロパティで使用可能<br>
+     {{CSSxRef("&lt;string&gt;")}} 以外の値が返せるようになった。</p>
+    これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>{{CSSxRef("content")}} プロパティに限定<br>
+    常に {{CSSxRef("&lt;string&gt;")}} を返す</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.attr")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li>
+ <li><a href="/ja/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> 属性</a></li>
+ <li><a href="/ja/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> 属性</a></li>
+</ul>
diff --git a/files/ja/web/css/attribute_selectors/index.html b/files/ja/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..dbe1c60acd
--- /dev/null
+++ b/files/ja/web/css/attribute_selectors/index.html
@@ -0,0 +1,236 @@
+---
+title: 属性セレクター
+slug: Web/CSS/Attribute_selectors
+tags:
+  - CSS
+  - CSS 3 属性セレクター
+  - CSS 属性
+  - Reference
+  - セレクター
+  - ノードの識別
+  - ノードの選択
+  - リファレンス
+  - 属性
+  - 属性セレクター
+  - 要素の識別
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の<ruby><strong>属性セレクター</strong><rp> (</rp><rt>attribute selector</rt><rp>) </rp></ruby>は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* title 属性を持つ &lt;a&gt; 要素 */
+a[title] {
+		color: purple;
+}
+
+/* href が "https://example.org" と一致する &lt;a&gt; 要素 */
+a[href="https://example.org"] {
+		color: green;
+}
+
+/* href に "example" を含む &lt;a&gt; 要素 */
+a[href*="example"] {
+		font-size: 2em;
+}
+
+/* href が "org" で終わる &lt;a&gt; 要素 */
+a[href$=".org"] {
+		font-style: italic;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性を持つ要素を表します。</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> である要素を表します。</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致する要素を表します。空白区切りの語のリストの形で、複数の <em>value</em> を含めることができます。</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致するか、 <em>value</em> で始まり直後にハイフン (<code>-</code> (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が <em>value</em> で始まる要素を表します。</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が <em>value</em> で終わる要素を表します。</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd><em>attr</em> という名前の属性の値が、文字列中に <em>value</em> を1つ以上含む要素を表します。</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>閉じ角括弧の前に <code>i</code> (または <code>I</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。</dd>
+ <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt>
+ <dd>閉じ角括弧の前に <code>s</code> (または <code>S</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Links" name="Links">リンク</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a {
+		color: blue;
+}
+
+/* "#" で始まる内部リンク */
+a[href^="#"] {
+		background-color: gold;
+}
+
+/* URL のどこかに "example" が含まれるリンク */
+a[href*="example"] {
+		background-color: silver;
+}
+
+/* URL のどこかに "insensitive" が含まれるリンクで、
+			大文字小文字は区別しない */
+a[href*="insensitive" i] {
+		color: cyan;
+}
+
+/* URL のどこかに "cAsE" があるリンクに一致
+大文字小文字の区別つき */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* ".org" で終わるリンク */
+a[href$=".org"] {
+		color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Links")}}</p>
+
+<h3 id="Languages" name="Languages">言語</h3>
+
+<h4 id="CSS_2" name="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/* `lang` 属性があるすべての div を太字にする。 */
+div[lang] {
+  font-weight: bold;
+}
+
+/* アメリカ英語の div はすべて青。 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* ポルトガル語の div はすべて緑。 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 中国語の div はすべて赤。
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 'data-lang' が中国語繁体字の div はすべて紫。 */
+/* 注: ハイフン区切りの属性は二重引用符なしで使用できる */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Languages")}}</p>
+
+<h3 id="HTML_ordered_lists" name="HTML_ordered_lists">HTML 順序付きリスト</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 <a href="#case-sensitive">case-sensitive</a> 修飾子がなければ正しく動作しません。</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol type="A"&gt;
+  &lt;li&gt;Example list&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("HTML_ordered_lists")}}</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("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.attribute")}}</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("attr")}}</li>
+ <li>単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}}</li>
+ <li>一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}}</li>
+ <li>上記のメソッドはすべて {{domxref("ParentNode")}} に混在して実装されています。 {{DOMxRef("ParentNode.querySelector()")}} および {{DOMxRef("ParentNode.querySelectorAll()")}} を参照してください</li>
+</ul>
diff --git a/files/ja/web/css/aural/index.html b/files/ja/web/css/aural/index.html
new file mode 100644
index 0000000000..ac66215e3c
--- /dev/null
+++ b/files/ja/web/css/aural/index.html
@@ -0,0 +1,41 @@
+---
+title: aural
+slug: Web/CSS/aural
+tags:
+  - CSS
+  - リファレンス
+  - 非推奨
+translation_of: Web/CSS/@media/aural
+---
+<div>{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>aural</code> <a href="/ja/docs/CSS/@media#Media_types">メディア種別</a>は、音声出力の能力を持った機器に使用されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このメディア種別は <code><a href="/ja/docs/Web/CSS/@media#speech">speech</a></code> に置き換えられ、非推奨になりました。</p>
+</div>
+
+<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><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td>
+   <td>非推奨</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/@media">@media</a></li>
+</ul>
diff --git a/files/ja/web/css/auto/index.html b/files/ja/web/css/auto/index.html
new file mode 100644
index 0000000000..68a6d03e67
--- /dev/null
+++ b/files/ja/web/css/auto/index.html
@@ -0,0 +1,28 @@
+---
+title: auto
+slug: Web/CSS/auto
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/width
+---
+<div>
+  {{CSSRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>ユーザエージェントによって自動的に計算される値です。その具体的な効果は <code>auto</code> が適用されたプロパティ毎にそれぞれ異なります。</p>
+<h2 id="Used_in" name="Used_in">auto 値の使用が可能なプロパティ</h2>
+<ul>
+  <li>{{Cssxref("overflow")}}</li>
+  <li>{{Cssxref("overflow-x")}}</li>
+  <li>{{Cssxref("overflow-y")}}</li>
+  <li>{{Cssxref("cursor")}}</li>
+  <li>{{Cssxref("width")}}</li>
+  <li>{{Cssxref("marker-offset")}}</li>
+  <li>{{Cssxref("margin")}}</li>
+  <li>margin-* (left|bottom|top|right|start|end)</li>
+  <li>{{Cssxref("bottom")}}</li>
+  <li>{{Cssxref("left")}}</li>
+  <li>{{Cssxref("table-layout")}}</li>
+  <li>{{Cssxref("z-index")}}</li>
+  <li>{{Cssxref("column-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/backdrop-filter/index.html b/files/ja/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..11d185cec2
--- /dev/null
+++ b/files/ja/web/css/backdrop-filter/index.html
@@ -0,0 +1,147 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - CSS プロパティ
+  - Graphics
+  - Layout
+  - Reference
+  - SVG
+  - SVG フィルター
+  - Web
+  - ウェブ
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>backdrop-filter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の<em>背後</em>のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+backdrop-filter: none;
+
+/* SVG フィルターへの URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* &lt;filter-function&gt; 値 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 複数のフィルター */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* グローバル値 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>背後にフィルターを適用しません。</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>背景に適用する {{cssxref("&lt;filter-function&gt;")}} または <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター</a>の空白区切りのリストです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 400)}}</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.backdrop-filter")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Building iOS-like transparency effects in CSS with backdrop-filter</a></li>
+</ul>
diff --git a/files/ja/web/css/backface-visibility/index.html b/files/ja/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..abe789c057
--- /dev/null
+++ b/files/ja/web/css/backface-visibility/index.html
@@ -0,0 +1,215 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>backface-visibility</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>要素の裏面は表面の鏡像です。裏面は二次元では可視ではありませんが、三次元空間で要素に回転の変換が行われたときに、背面を見ることができます。 (このプロパティは、遠近感を持たない二次元の変換では効果がありません。)</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* グローバル値 */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p><code>backface-visibility</code> プロパティは、以下に挙げたキーワードのうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>ユーザーに対して裏を向いたとき、背面が可視になります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>背面が非表示になり、要素がユーザーに対して反対を向いたときに不可視にするのに便利です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Cube_with_transparent_and_opaque_faces" name="Cube_with_transparent_and_opaque_faces">透明な面と不透明な面を持った立方体</h3>
+
+<p>この例は、透明な面と不透明な面を持つ立方体を表示します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube showbf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        すべての面が透明であり、
+        裏面 (2, 4, 5) が 表面 (1, 3, 6) を通して表示されます。
+      &lt;/p&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube hidebf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        背後の3面 (2, 4, 5) は非表示です。
+      &lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* コンテナ div、立方体 div、面の一般的な設定 */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Cube_with_transparent_and_opaque_faces', '100%', 360)}}</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('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.backface-visibility")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/background-attachment/index.html b/files/ja/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..cca2c19152
--- /dev/null
+++ b/files/ja/web/css/background-attachment/index.html
@@ -0,0 +1,153 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-attachment</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* グローバル値 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p><code>background-attachment</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)</dd>
+ <dt><code>local</code></dt>
+ <dd>背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_example" name="Simple_example">単純な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3>
+
+<p>このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <code>&lt;attachment&gt;</code> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <code>&lt;attachment&gt;</code> の値が適用されます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_images")}}</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 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>複数の背景画像と <code>local</code> に対応するために一括指定プロパティを拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>重要な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>重要な変更なし。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.background-attachment")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景画像を使う</a></li>
+</ul>
diff --git a/files/ja/web/css/background-blend-mode/index.html b/files/ja/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..11fea632d7
--- /dev/null
+++ b/files/ja/web/css/background-blend-mode/index.html
@@ -0,0 +1,114 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - 合成と混合
+translation_of: Web/CSS/background-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-blend-mode</code></strong> プロパティは、要素の背景画像を互いに、または要素の背景色と、どのように混合するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>混合モードは {{cssxref("background-image")}} プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや短縮が行われます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 1 値 */
+background-blend-mode: normal;
+
+/* 2 値、背景ごとにひとつずつ */
+background-blend-mode: darken, luminosity;
+
+/* グローバル値 */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>適用する混合モードです。複数の値をコンマ区切りで置くことができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html hidden">&lt;div id="div"&gt;&lt;/div&gt;
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<pre class="brush: css hidden">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<pre class="brush: js hidden">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<p>{{ EmbedLiveSample('Examples', "330", "330") }}</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('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.background-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/background-clip/index.html b/files/ja/web/css/background-clip/index.html
new file mode 100644
index 0000000000..f9a9583cde
--- /dev/null
+++ b/files/ja/web/css/background-clip/index.html
@@ -0,0 +1,137 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-clip
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>background-clip</code></strong> は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <a href="/ja/docs/Web/HTML/Element/html">ルート要素</a>は異なる背景の描画領域を持っているため、その要素に <code>background-clip</code> プロパティが指定されても効果はありません。「<a href="https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds">特殊要素の背景</a>」を参照してください。</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> <a href="/ja/docs/Web/HTML/Element/html">ルート要素</a>が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が <code>none</code> であり、その {{cssxref("background-color")}} が <code>transparent</code> であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <code>&lt;body&gt;</code> 要素の <code>background</code> プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <code>&lt;body&gt;</code> 要素にキャンバスの背景を指定することを推奨します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* グローバル値 */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。</dd>
+ <dt><code>content-box</code></dt>
+ <dd>背景をコンテンツボックスの中に (切り取って) 表示します。</dd>
+ <dt><code>text</code> {{experimental_inline}}</dt>
+ <dd>背景を前景のテキストの中に (切り取って) 表示します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="border-box"&gt;背景が境界の裏まで拡張されます。&lt;/p&gt;
+&lt;p class="padding-box"&gt;背景が境界の内側の縁まで拡張されます。&lt;/p&gt;
+&lt;p class="content-box"&gt;背景がコンテンツボックスの縁までだけ表示されます。&lt;/p&gt;
+&lt;p class="text"&gt;背景が前景のテキストで切り取られます。&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 600, 580)}}</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 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td><code>text</code> の値を追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.background-clip")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}} プロパティは<em>要素全体</em>を表示する部分を定義するクリッピング領域を作成します。</li>
+ <li>背景のプロパティ: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}</li>
+ <li><a href="/ja/docs/Web/CSS/box_model">CSS ボックスモデルの紹介</a></li>
+</ul>
diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html
new file mode 100644
index 0000000000..c75f4fb248
--- /dev/null
+++ b/files/ja/web/css/background-color/index.html
@@ -0,0 +1,156 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - グラフィック
+  - リファレンス
+  - レイアウト
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-color</code></strong> プロパティは、要素の背景色を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+background-color: red;
+background-color: indigo;
+
+/* Hexadecimal value */
+background-color: #bbff00;    /* 不透過 */
+background-color: #11ffee00;  /* 完全透過 */
+background-color: #11ffeeff;  /* 不透過 */
+
+/* RGB 値 */
+background-color: rgb(255, 255, 128);        /* 不透過 */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% 不透過 */
+
+/* HSL 値 */
+background-color: hsl(50, 33%, 25%);         /* 不透過 */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */
+
+/* 特殊なキーワード値 */
+background-color: currentcolor;
+background-color: transparent;
+
+/* グローバル値 */
+background-color: inherit;
+background-color: initial;
+background-color: unset;</pre>
+
+<p><code>background-color</code> プロパティは単一の <code><a href="#&lt;color>">&lt;color&gt;</a></code> 値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="&lt;color>"></a>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 200, 150)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。</p>
+
+<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば 18.66px 以上、または 24px 以上と定義されています。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>形式上は <code>transparent</code> キーワードが削除されたが、 {{cssxref("&lt;color&gt;")}} の正規の値として組み入れられたため、変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/background-image/index.html b/files/ja/web/css/background-image/index.html
new file mode 100644
index 0000000000..6305d98ea0
--- /dev/null
+++ b/files/ja/web/css/background-image/index.html
@@ -0,0 +1,169 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - Background
+  - CSS
+  - CSS Background
+  - CSS Property
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - background-image
+  - 'recipe:css-property'
+  - リファレンス
+translation_of: Web/CSS/background-image
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>background-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に1つ以上の背景画像を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。</p>
+
+<p>要素の<a href="/ja/docs/Web/CSS/border">境界</a>は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。</p>
+
+<p>指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を <code>none</code> 値であるかのように処理します。</p>
+
+<div class="note"><strong>注:</strong> たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>それぞれの背景画像は、キーワード <code><a href="#none">none</a></code> または {{cssxref("&lt;image&gt;")}} 値として指定されます。</p>
+
+<p>複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。</p>
+
+<pre class="brush: css no-line-numbers notranslate">background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="none"><code>none</code></dt>
+ <dd>画像を用いないことを表すキーワード。</dd>
+ <dt id="image"><code>&lt;image&gt;</code></dt>
+ <dd>表示する背景を指し示す {{cssxref("&lt;image&gt;")}}。<a href="/ja/docs/Web/Guide/CSS/Using_multiple_backgrounds">複数の背景</a>に対応している場合は、カンマ区切りで複数指定することができます。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Layering_background_images" name="Layering_background_images">背景画像の重ね合わせ</h3>
+
+<p>星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="catsandstars"&gt;
+    This paragraph is full of cats&lt;br /&gt;and stars.
+  &lt;/p&gt;
+  &lt;p&gt;This paragraph is not.&lt;/p&gt;
+  &lt;p class="catsandstars"&gt;
+    Here are more cats for you.&lt;br /&gt;Look at them!
+  &lt;/p&gt;
+  &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Layering_background_images')}}</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 Backgrounds', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("&lt;image&gt;")}} CSS データ型をサポートするよう拡張されました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.properties.background-image")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS イメージスプライト</a></li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>画像に関するデータ型: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
+ <li>画像に関する関数:
+  <ul>
+   <li>{{cssxref("cross-fade")}}</li>
+   <li>{{cssxref("element")}}</li>
+   <li>{{cssxref("imagefunction", "image()")}}</li>
+   <li>{{cssxref("image-set")}}</li>
+   <li>{{cssxref("linear-gradient")}}</li>
+   <li>{{cssxref("radial-gradient")}}</li>
+   <li>{{cssxref("repeating-linear-gradient")}}</li>
+   <li>{{cssxref("repeating-radial-gradient")}}</li>
+   <li>{{cssxref("paint")}}</li>
+   <li>{{cssxref("url", "url()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/background-origin/index.html b/files/ja/web/css/background-origin/index.html
new file mode 100644
index 0000000000..bdef2ef165
--- /dev/null
+++ b/files/ja/web/css/background-origin/index.html
@@ -0,0 +1,112 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - Background
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - background-origin
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-origin</code></strong> プロパティは、<em>背景配置領域</em>を設定します。言い換えれば、 {{cssxref("background-image")}} プロパティで指定された画像の原点の位置を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssxref("background-attachment")}} が <code>fixed</code> のときは <code>background-origin</code> が無視されることに注意してください。</p>
+
+<div class="note"><strong>メモ:</strong> {{cssxref("background")}} 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* グローバル値 */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<p><code>background-origin</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>背景は境界ボックスからの相対位置になります。</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>背景はパディングボックスからの相対位置になります。</dd>
+ <dt><code>content-box</code></dt>
+ <dd>背景はコンテンツボックスからの相対位置になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css; highlight:[6];">.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[6];">#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[4];">div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}</pre>
+
+<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 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/ja/web/css/background-position-x/index.html b/files/ja/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..b2d1d43a22
--- /dev/null
+++ b/files/ja/web/css/background-position-x/index.html
@@ -0,0 +1,106 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Experimental
+  - Reference
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-position-x</code></strong> プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* &lt;percentage&gt; 値 */
+background-position-x: 25%;
+
+/* &lt;length&gt; 値 */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* 辺からの相対値 */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* 複数の値 */
+background-position-x: 0px, center;
+
+/* グローバル値 */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<p><code>background-position-x</code> プロパティは、1つ以上の値をカンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>背景画像の左端を、背景位置レイヤーの左端に配置します。</dd>
+ <dt><code>center</code></dt>
+ <dd>背景画像を背景位置レイヤーの方向の中央に配置します。</dd>
+ <dt><code>right</code></dt>
+ <dd>背景画像の右端を、背景位置レイヤーの右端に配置します。</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dt>指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。</dt>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の<em>右端</em>が、コンテナーの<em>右端</em>の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.background-position-x")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/background-position-y/index.html b/files/ja/web/css/background-position-y/index.html
new file mode 100644
index 0000000000..a57e431146
--- /dev/null
+++ b/files/ja/web/css/background-position-y/index.html
@@ -0,0 +1,107 @@
+---
+title: background-position-y
+slug: Web/CSS/background-position-y
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Experimental
+  - Reference
+translation_of: Web/CSS/background-position-y
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-position-y</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+background-position-y: top;
+background-position-y: center;
+background-position-y: bottom;
+
+/* &lt;percentage&gt; 値 */
+background-position-y: 25%;
+
+/* &lt;length&gt; 値 */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* 辺からの相対値 */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* 複数の値 */
+background-position-y: 0px, center;
+
+/* グローバル値 */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+</pre>
+
+<p><code>background-position-y</code> プロパティは、1つ以上の値をコンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>背景画像の上端を、背景位置レイヤーの上端に合わせます。</dd>
+ <dt><code>center</code></dt>
+ <dd>背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。</dd>
+ <dt><code>bottom</code></dt>
+ <dd>背景画像の下端を、背景位置レイヤーの下端に合わせます。</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background-position-y")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/background-position/index.html b/files/ja/web/css/background-position/index.html
new file mode 100644
index 0000000000..57d104aef1
--- /dev/null
+++ b/files/ja/web/css/background-position/index.html
@@ -0,0 +1,231 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* &lt;percentage&gt; 値 */
+background-position: 25% 75%;
+
+/* &lt;length&gt; 値 */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* 複数の画像 */
+background-position: 0 0, center;
+
+/* 辺からのオフセット値 */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* グローバル値 */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p><code>background-position</code> プロパティは1つ以上の <code><a href="#&lt;position>">&lt;position&gt;</a></code> 値をカンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
+ <dd>{{cssxref("&lt;position&gt;")}} です。位置は要素のボックスの辺を基準にして項目を配置するための X/Y 座標を定義します。1～4つの値を使用して定義できます。2つのキーワード値でない値を使用する場合は、最初の値が水平位置を表し、2番目の値が垂直位置を表します。1つの値しか指定されない場合、2番目の値は <code>center</code> とみなされます。3つまたは4つの値が使用された場合は、 length-percentage 値はその前のキーワード値に対するオフセットです。</dd>
+ <dd>
+ <p><strong>値1つの構文:</strong> 値は以下のようになります。</p>
+
+ <ul>
+  <li><code>center</code> のキーワード値の場合は、画像を中央揃えにします。</li>
+  <li>キーワード値 <code>top</code>、 <code>left</code>、 <code>bottom</code>、 <code>right</code> のうちの一つの場合。<span id="result_box" lang="ja"><span>アイテムを配置する辺を指定します。</span><span>もう一方の寸法が50％に設定されていれば、指定された端までの間の中央に配置されます。</span></span></li>
+  <li>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は50%に設定されます。</li>
+ </ul>
+
+ <p><strong>値2つの構文:</strong> 1つ目の値が X を定義し、もう1つの値が Y を定義します。両方が以下の値を取ることができます。</p>
+
+ <ul>
+  <li>キーワード値 <code>top</code>、 <code>left</code>、 <code>bottom</code>、 <code>right</code> のうちの一つの場合。ここで <code>left</code> または <code>right</code> が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 <code>top</code> または <code>bottom</code> が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。</li>
+  <li>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の場合。もう一方の値が <code>left</code> または <code>right</code> の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が <code>top</code> または <code>bottom</code> の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が <code>&lt;length&gt;</code> または <code>&lt;percentage&gt;</code> の値である場合は、最初の値が X 座標を定義し、2番目の値が Y 座標を定義します。</li>
+  <li>注: 一方の値が <code>top</code> または <code>bottom</code> である場合、もう一方の値を <code>top</code> または <code>bottom</code> にすることはできません。一方の値が <code>left</code> または <code>right</code> である場合、もう一方の値を <code>left</code> または <code>right</code> にすることはできません。すなわち、例えば <code>top top</code> や <code>left right</code> は妥当ではありません。</li>
+  <li>既定値は <code>top left</code> または <code>0% 0%</code> です。</li>
+ </ul>
+ </dd>
+ <dd>
+ <p><strong>値3つの構文:</strong> 2つの値はキーワード値で、3つ目の値はその前の値のオフセットです。</p>
+
+ <ul>
+  <li>最初の値はキーワード値 <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, <code>center</code> のうちの1つです。ここで <code>left</code> または <code>right</code> が指定された場合は、これは X 座標を定義します。 <code>top</code> または <code>bottom</code> が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。</li>
+  <li>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値が2番目の値であった場合は、最初の値に対するオフセットです。3番目の値であった場合は、2番目の値に対するオフセットです。</li>
+  <li>単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1つのキーワードに2つの keyword with two {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値の組み合わせは無効です。</li>
+ </ul>
+ </dd>
+ <dd>
+ <p><strong>値4つの構文:</strong> 1番目と3番目の値は、X と Y を定義するキーワード値で、2番目と4番目の値は、先行する X と Y のキーワード値のオフセットです。</p>
+
+ <ul>
+  <li>1番目と3番目の値は <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> のうちの1つです。ここで <code>left</code> または <code>right</code> が指定された場合、これは X を定義します。 <code>top</code> または <code>bottom</code> が指定された場合、これは Y を表し、もう一方のキーワード値が X を表します。</li>
+  <li>2番目と4番目の値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の値です。2番目の値は1番目のキーワードのオフセットです。4番目の値は3番目の値のオフセットです。</li>
+ </ul>
+ </dd>
+ <dd>
+ <p><strong>パーセント値について</strong></p>
+ </dd>
+ <dd>指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％ の値は、背景画像の<em>右</em> (または<em>下</em>) の縁が容器の<em>右</em> (または<em>下</em>) の縁と揃うか、または画像の 100％ マークが容器の100％マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 <code>background-position: 25% 75%</code> は、画像の左から 25%、上から 75% の位置にある点が、コンテナの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。</dd>
+ <dd>基本的に何が起こるかというと、背景画像の寸法が対応するコンテナの寸法から<em>減算され</em>、その結果の値のパーセンテージが左端（または上端）からの直接のオフセットとして使用されます。</dd>
+ <dd>
+ <p><code>(コンテナーの幅 - 画像の幅) * (position x%) = (x オフセット値)<br>
+  (コンテナーの高さ - 画像の高さ) * (position y%) = (y オフセット値)</code></p>
+
+ <p>X 軸を例にすると、幅 300px の画像があり、それを幅 100px のコンテナーに入れて、 background-size を auto に設定して使用しているとします。</p>
+
+ <p><code>100px - 300px = -200px <em>(コンテナーと画像の差)</em></code></p>
+
+ <p>ですから、位置のパーセント値が -25%, 0%, 50%, 100%, 125% であった場合、画像とコンテナーの橋のオフセット値は以下のようになります。</p>
+
+ <p><code>-200px * -25% = 50px<br>
+  -200px * 0% = 0px<br>
+  -200px * 50% = -100px<br>
+  -200px * 100% = -200px </code><br>
+  <code>-200px * 125% = -250px </code></p>
+
+ <p>そのため、この例の結果の値では、<strong>画像</strong>の<strong>左端</strong>が<strong>コンテナー</strong>の<strong>左端</strong>からオフセットされています。</p>
+
+ <ul>
+  <li>+ 50px (画像の左端を100ピクセル幅のコンテナーの中央に配置)</li>
+  <li>0px (画像の左端がコンテナーの左端に一致)</li>
+  <li>-100px (画像の左端をコンテナーの左から 100px に配置。この例では画像の中央である 100px の位置が、コンテナーの中央になることを意味します)</li>
+  <li>-200px (画像の左端をコンテナーの左から 200px に配置。この例では右の画像の端が右のコンテナの端と一致することを意味します)</li>
+  <li>-250px (画像の左端をコンテナーの左から 250px に配置。この例では 300px 幅の画像の右端をコンテナの中央に置きます)</li>
+ </ul>
+
+ <p>背景サイズが指定された軸のコンテナーのサイズと等しい場合、その軸のパーセンテージ位置は、「コンテナーと画像の差」がゼロになるので、何の効果もないことは言及しておく価値があります。絶対値を使ってオフセットする必要があります。</p>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Positioning_background_images" name="Positioning_background_images">背景画像の位置指定</h3>
+
+<p>以下の3つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exampleone"&gt;Example One&lt;/div&gt;
+&lt;div class="exampletwo"&gt;Example Two&lt;/div&gt;
+&lt;div class="examplethree"&gt;Example Three&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* すべての &lt;div&gt; で共有される */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* これらの例は background 一括指定プロパティを使用しています */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat;
+}
+
+/* 複数の背景画像: 各画像は対応する位置スタイルに、
+   最初に指定されたものから順に対応付けられます。 */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       right 3em bottom 2em;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Positioning_background_images', 420, 200)}}</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 Backgrounds', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>キーワード値と {{cssxref("&lt;length&gt;")}} および {{cssxref("&lt;percentage&gt;")}} の値の混合指定を許容。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.background-position")}}</p>
+
+<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+
+<ul>
+ <li>Gecko には <code>background-position</code> が異なる数の {{cssxref("&lt;position&gt;")}} の値を持つ2つの値の {{cssxref("transition")}} ができないというバグがあります。例えば <code>background-position: 10px 10px;</code> と <code>background-position: 20px 20px, 30px 30px;</code> などです（{{bug(1390446)}} を参照）。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> と呼ばれており、 Firefox 57 でリリース予定) では修正されています。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景</a></li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/ja/web/css/background-repeat/index.html b/files/ja/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..5ca4c622ba
--- /dev/null
+++ b/files/ja/web/css/background-repeat/index.html
@@ -0,0 +1,234 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - Background
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - background-repeat
+  - リファレンス
+translation_of: Web/CSS/background-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-repeat</code></strong> プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (<code>round</code> を使用) や、背景画像間にスペースを挿入する方法 (<code>space</code> を使用) など、別の敷き詰め方法を選択することも可能です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 値2つの構文: 水平方向 | 垂直方向 */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* グローバル値 */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>値1つの構文は完全な値2つの構文に対する一括指定です。</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>単一の値</strong></td>
+    <td><strong>対応するペアの値</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。<code>space</code> を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;no-repeat
+    &lt;div class="one"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat
+    &lt;div class="two"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x
+    &lt;div class="three"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-y
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;space
+    &lt;div class="five"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;round
+    &lt;div class="six"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x, repeat-y (multiple images)
+    &lt;div class="seven"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* 例のすべての div で共通 */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* 背景の繰り返し */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* 複数の画像 */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>この例では、リストの各要素に <code>background-repeat</code> の異なる値が対応付けられています。</p>
+
+<p>{{EmbedLiveSample('Examples', 240, 560)}}</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 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、<code>space</code> と <code>round</code> キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>特筆すべき変更点はなし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background-repeat", "background-repeat")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">CSS での複数の背景の利用方法</a></li>
+</ul>
diff --git a/files/ja/web/css/background-size/index.html b/files/ja/web/css/background-size/index.html
new file mode 100644
index 0000000000..377a64e800
--- /dev/null
+++ b/files/ja/web/css/background-size/index.html
@@ -0,0 +1,196 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - Background
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - background-size
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-size</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+background-size: cover;
+background-size: contain;
+
+/* 値1つの構文 */
+/* 画像の幅 (高さは 'auto' になる) */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* 値2つの構文 */
+/* 1番目の値は画像の幅、2番目の値は高さ */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* 複数の背景 */
+background-size: auto, auto; /* 'auto auto' と混同しないでください */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* グローバル値 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<p><code>background-size</code> プロパティは以下のいずれか1つの方法で指定します。</p>
+
+<ul>
+ <li><code><a href="#contain">contain</a></code> または <code><a href="#cover">cover</a></code> のキーワード値を使用</li>
+ <li>幅の値のみを使用、この場合の高さは既定の <code><a href="#auto">auto</a></code> になります。</li>
+ <li>幅と高さの値の両方を使用、この場合は1番目の値で幅を、2番目の値で高さを設定します。どちらの値も {{cssxref("&lt;length&gt;")}}、 {{cssxref("&lt;percentage&gt;")}} または <code><a href="#auto">auto</a></code> のいずれかになります。</li>
+</ul>
+
+<p>複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="contain"><code>contain</code></dt>
+ <dd>画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。</dd>
+ <dt id="cover"><code>cover</code></dt>
+ <dd>画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。</dd>
+ <dt id="length">{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。</dd>
+ <dt id="percentage">{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>その軸が<em>背景配置領域</em>の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が <code>fixed</code> の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。</dd>
+</dl>
+
+<h3 id="Intrinsic_dimensions_and_proportions" name="Intrinsic_dimensions_and_proportions">固有の軸と比率</h3>
+
+<p>値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。</p>
+
+<ul>
+ <li>ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。</li>
+ <li>ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。</li>
+ <li>CSS の {{cssxref("&lt;gradient&gt;")}} には固有の寸法も固有の比率もありません。</li>
+ <li>{{cssxref("element()")}} 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>&lt;gradient&gt;</code> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ:</strong> Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。</p>
+</div>
+
+<p>固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。</p>
+
+<dl>
+ <dt><code>background-size</code> の幅と高さがともに定義されていて <code>auto</code> でない場合</dt>
+ <dd>背景画像は指定の寸法で描画されます。</dd>
+ <dt><code>background-size</code> が <code>contain</code> または <code>cover</code> の場合</dt>
+ <dd>固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。</dd>
+ <dt><code>background-size</code> が <code>auto</code> または <code>auto auto</code> の場合</dt>
+ <dd>
+ <ul>
+  <li>画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。</li>
+  <li>画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。</li>
+  <li>画像に固有の寸法はない物の固有の比率がある場合は、 <code>contain</code> が指定された場合のように描画されます。</li>
+  <li>画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。</li>
+  <li>画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。</li>
+ </ul>
+ </dd>
+ <dd>
+ <div class="note"><strong>メモ:</strong> SVG 画像には <code><a href="/ja/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> 属性があり、既定では <code>contain</code> と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に <code>background-size</code> が設定されると <code>preserveAspectRatio</code> が無視されます。</div>
+ </dd>
+ <dt><code>background-size</code> の一方が <code>auto</code> でもう一方が <code>auto</code> ではない場合</dt>
+ <dd>
+ <ul>
+  <li>画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。</li>
+  <li>画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>例については <a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> を参照してください。</p>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>背景としてグラデーションを定義し、<code>background-size</code> をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば <code>background-size: 50%</code>)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 の <code>background-size</code> 仕様</a> や <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 の Image Values gradient 仕様</a> に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。</p>
+
+<pre class="brush: css notranslate">.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* 利用が安全ではない */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* 利用可能 */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+</pre>
+
+<p>なお、 <code>&lt;gradient&gt;</code> に対してピクセルの寸法と <code>auto</code> を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。</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 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">背景画像の拡大縮小</a></li>
+ <li><a href="/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds">背景 SVG の拡大縮小</a></li>
+ <li>{{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/ja/web/css/background/index.html b/files/ja/web/css/background/index.html
new file mode 100644
index 0000000000..92ce9a9189
--- /dev/null
+++ b/files/ja/web/css/background/index.html
@@ -0,0 +1,174 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/background
+---
+<p>{{CSSRef("CSS Background")}}</p>
+
+<p><span class="seoSummary"><strong><code>background</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;background-color&gt; を使用 */
+background: green;
+
+/* &lt;bg-image&gt; と &lt;repeat-style&gt; を使用 */
+background: url("test.jpg") repeat-y;
+
+/* &lt;box&gt; と &lt;background-color&gt; を使用 */
+background: border-box red;
+
+/* 単一の画像、中央寄せかつ縮小 */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<p><code>background</code> プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。</p>
+
+<p>それぞれのレイヤーの構文は以下の通りです。</p>
+
+<ul>
+ <li>それぞれのレイヤーは、以下の値をそれぞれ0～1回含めることができます。
+  <ul>
+   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> の値は <code><a href="#&lt;position>">&lt;position&gt;</a></code> の直後に '/' の文字で区切って含めなければなりません。例: "<code>center/80%</code>"</li>
+ <li><code><a href="#&lt;box>">&lt;box&gt;</a></code> の値は0～2回含めることができます。1回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2回の場合は、1つ目は {{cssxref("background-origin")}} に、2つ目は {{cssxref("background-clip")}} に設定されます。</li>
+ <li><code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> の値は最後のレイヤーの指定でのみ含めることができます。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="&lt;attachment>"><code>&lt;attachment&gt;</code></dt>
+ <dd>{{cssxref("background-attachment")}} を参照</dd>
+ <dt id="&lt;box>"><code>&lt;box&gt;</code></dt>
+ <dd>{{cssxref("background-clip")}} 及び {{cssxref("background-origin")}} を参照</dd>
+ <dt id="&lt;background-color>"><code>&lt;background-color&gt;</code></dt>
+ <dd>{{cssxref("background-color")}} を参照</dd>
+ <dt id="&lt;bg-image>"><code>&lt;bg-image&gt;</code></dt>
+ <dd>{{Cssxref("background-image")}} を参照</dd>
+ <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
+ <dd>{{cssxref("background-position")}} を参照</dd>
+ <dt id="&lt;repeat-style>"><code>&lt;repeat-style&gt;</code></dt>
+ <dd>{{cssxref("background-repeat")}} を参照</dd>
+ <dt id="&lt;bg-size>"><code>&lt;bg-size&gt;</code></dt>
+ <dd>{{cssxref("background-size")}} を参照。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
+  Starry sky&lt;br/&gt;
+  Twinkle twinkle&lt;br/&gt;
+  Starry sky
+&lt;/p&gt;
+&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css' highlight:[2,6]; notranslate">.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</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 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_gradients">グラデーションの使用</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/basic-shape/index.html b/files/ja/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..39ed0d2953
--- /dev/null
+++ b/files/ja/web/css/basic-shape/index.html
@@ -0,0 +1,175 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - CSS シェイプ
+  - CSS データ型
+  - リファレンス
+translation_of: Web/CSS/basic-shape
+---
+<div>{{CSSRef}}</div>
+
+<p> <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;basic-shape&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+
+<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>
+
+<p><code>&lt;basic-shape&gt;</code> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。</p>
+
+<p>シェイプを作成するときは、 <code>&lt;basic-shape&gt;</code> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。</p>
+
+<h3 id="Shape_functions" name="Shape_functions">シェイプ関数</h3>
+
+<p>以下のシェイプに対応しています。 <code>&lt;basic-shape&gt;</code> 値はすべて関数表記であり、 <a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a>で定義されます。</p>
+
+<dl>
+ <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>
+
+ <p>内部の長方形を定義します。</p>
+
+ <p>最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。</p>
+
+ <p><a href="/ja/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。</p>
+
+ <p>内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。</p>
+ </dd>
+ <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></pre>
+
+ <p>引数 <code>&lt;shape-radius&gt;</code> は<em>r</em>、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して <code>sqrt(width^2+height^2)/sqrt(2)</code> としての割合になります。</p>
+
+ <p>引数 {{cssxref("&lt;position&gt;")}} は円の中心を定義します。省略時は既定で中央になります。</p>
+ </dd>
+ <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></pre>
+
+ <p>引数 <code>&lt;shape-radius&gt;</code> は、 r<sub>x</sub> と r<sub>y</sub>、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（r<sub>x</sub> 値の場合）と高さ（r<sub>y</sub> 値の場合）に対する割合になります。</p>
+
+ <p>引数 position は楕円の中心を定義します。省略時は既定で中央になります。</p>
+ </dd>
+ <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>
+
+ <p><code>&lt;fill-rule&gt;</code> は多角形の内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p>
+
+ <p>それぞれの shape-arg の組における引数 <em>x<sub>i</sub></em> と <em>y<sub>i</sub></em> は、多角形の i 番目の頂点の座標を表します。</p>
+ </dd>
+ <dt><code><a id="path()" name="path()"></a>path()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+
+ <p>省略可能な <code>&lt;fill-rule&gt;</code> は、パスの内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p>
+
+ <p>必須の &lt;string&gt; は、引用符で囲まれた <a href="/ja/docs/SVG/Attribute/d">SVG Path</a> です。</p>
+ </dd>
+</dl>
+
+<p>上記で定義されていない引数は、以下のように定義されています。</p>
+
+<pre class="syntaxbox"><code>&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</code></pre>
+
+<p>円や楕円の半径を定義します。省略時の既定値は <code>closest-side</code> です。</p>
+
+<p><code>closest-side</code> はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。</p>
+
+<p><code>farthest-side</code> はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。</p>
+
+<h2 id="Computed_values_of_basic_shapes" name="Computed_values_of_basic_shapes">基本シェイプの計算値</h2>
+
+<p><code>&lt;basic-shape&gt;</code> 関数での値は以下の例外を除けば、規定通りに計算されます。</p>
+
+<ul>
+ <li>省略された値は既定値として含められ計算されます。</li>
+ <li><code>circle()</code> または <code>ellipse()</code> における {{cssxref("&lt;position&gt;")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。</li>
+ <li><code>inset()</code> での <a href="/ja/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。</li>
+</ul>
+
+<h2 id="Interpolation_of_basic_shapes" name="Interpolation_of_basic_shapes">基本シェイプの補間</h2>
+
+<p> ある <code>&lt;basic-shape&gt;</code> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("&lt;length&gt;")}}、 {{cssxref("&lt;percentage&gt;")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に <code>nonzero</code> があった場合など）、それらの値は補間が行われます。</p>
+
+<ul>
+ <li>どちらのシェイプも同じ参照ボックスを使う必要があります。</li>
+ <li>両方のシェイプが同じ型で、型が <code>ellipse()</code> または <code>circle()</code> で、半径に <code>closest-side</code> または <code>farthest-side</code> のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
+ <li>両方のシェイプの型が <code>inset()</code> の場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
+ <li>両方のシェイプの型が <code>polygon()</code> で、両方の多角形が同じ数の角を持っており、同じ <code>&lt;fill-rule&gt;</code> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li>
+ <li>両方のシェイプの型が <code>path()</code> の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。</li>
+ <li>それ以外の場合は補間が行われません。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Animated_polygon" name="Animated_polygon">アニメーションする多角形</h3>
+
+<p>この例では、 <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</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('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</td>
+   <td>{{ Spec2('CSS Shapes') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.types.basic-shape")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li>
+ <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/ja/web/css/blend-mode/index.html b/files/ja/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..b187084964
--- /dev/null
+++ b/files/ja/web/css/blend-mode/index.html
@@ -0,0 +1,403 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+tags:
+  - Blend modes
+  - CSS
+  - CSS Compositing
+  - CSS Data Type
+  - CSS データ型
+  - CSS 合成
+  - Compositing
+  - Reference
+  - ブレンドモード
+  - 合成
+translation_of: Web/CSS/blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;blend-mode&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、要素が重なったときにどのように色が現れるかを記述します。 {{cssxref("background-blend-mode")}} または {{cssxref("mix-blend-mode")}} プロパティで使用されます。</p>
+
+<p>ブレンドモードは、適用されるレイヤーの各ピクセルについて前景と背景の色を取り、それらを計算し、新しい色の値を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;blend-mode&gt;</code> データ型は、以下に挙げたキーワードのうちの一つで定義します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="normal">normal</code></dt>
+ <dd>
+ <p>下の色が何であるかに関わらず、上の色が最終的な色になります。<br>
+  この効果は2枚の不透明の紙が重なっているようなものです。</p>
+
+ <div id="normal_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: normal;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="multiply">multiply</code></dt>
+ <dd>
+ <p>上の色と下の色を掛け合わせた結果が最終的な色になります。<br>
+  黒いレイヤーは最終的に黒いレイヤーに近づけ、白いレイヤーは変化をもたらしません。<br>
+  この効果は2枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。</p>
+
+ <div id="multiply_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: multiply;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>
+ <p>色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。<br>
+  黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白いのレイヤーへ近づけます。<br>
+  この効果は2枚の画像がスクリーンに投影された状況に似ています。</p>
+
+ <div id="screen_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: screen;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="overlay">overlay</code></dt>
+ <dd>下の色が暗ければ <code>multiply</code>、下の色が明るければ <code>screen</code> の結果が最終的な色になります。。<br>
+ このブレンドモードは <code>hard-light</code> と同等ですが、レイヤーは逆です。
+ <div id="overlay_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: overlay;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="darken">darken</code></dt>
+ <dd>
+ <p>色成分ごとに最も暗い値が最終的な値になります。</p>
+
+ <div id="darken_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: darken;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="lighten">lighten</code></dt>
+ <dd>
+ <p>色成分ごとに最も明るい値が最終的な値になります。</p>
+
+ <div id="lighten_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: lighten;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="color-dodge">color-dodge</code></dt>
+ <dd>
+ <p>下の色を、反転した上の色で除算した結果が、最終的な色になります。<br>
+  黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。<br>
+  このブレンドモードは <code>screen</code> に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。</p>
+
+ <div id="color-dodge_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color-dodge;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="color-burn">color-burn</code></dt>
+ <dd>
+ <p>反転した下の色を上の色で除算して、さらに反転した結果が最終的な色になります。<br>
+  白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。<br>
+  このブレンドモードは <code>multiply</code> に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。</p>
+
+ <div id="color-burn_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color-burn;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
+ </dd>
+ <dt>hard-light</dt>
+ <dd>
+ <p>上の色が暗い色であれば <code>multiply</code> 、明るい色であれば <code>screen</code> の結果が最終的な色になります。<br>
+  このブレンドモードは <code>overlay</code> と同じですが、レイヤーが入れ替わっています。<br>
+  この効果は、背景に<em>強烈な</em>スポットライトを当てた状況に似ています。</p>
+
+ <div id="hard-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: hard-light;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="soft-light">soft-light</code></dt>
+ <dd>
+ <p>最終的な色は <code>hard-light</code> に似ていますが、よりソフトになります。<br>
+  このブレンドモードは <code>hard-light</code> に似ています。<br>
+  この効果は、背景に<em>拡散光の</em>スポットライトを当てた状況に似ています。</p>
+
+ <div id="soft-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: soft-light;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="difference">difference</code></dt>
+ <dd>
+ <p>2つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。<br>
+  黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>
+
+ <div id="difference_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: difference;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="exclusion">exclusion</code></dt>
+ <dd>
+ <p>最終的な色は <code>difference</code> に似ていますが、コントラストが低くなります。<br>
+  <code>difference</code> と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。</p>
+
+ <div id="exclusion_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: exclusion;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="hue">hue</code></dt>
+ <dd>
+ <p>最終的な色は上の色の<em>色調</em>を持ちますが、<em>彩度</em>および<em>明度</em>は下の色の値を使用します。</p>
+
+ <div id="hue_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: hue;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="saturation">saturation</code></dt>
+ <dd>
+ <p>最終的な色は上の色の<em>彩度</em>を持ちますが、<em>色調</em>および<em>明度</em>は下の色の値を使用します。<br>
+  彩度を持たない純粋なグレーの背景は、効果がありません。</p>
+
+ <div id="saturation_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: saturation;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="color">color</code></dt>
+ <dd>
+ <p>最終的な色は上の色の<em>色調</em>および<em>彩度</em>を持ちますが、<em>明度</em>は下の色の値を使用します。<br>
+  この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。</p>
+
+ <div id="color_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
+ </dd>
+ <dt><code id="luminosity">luminosity</code></dt>
+ <dd>
+ <p>最終的な色は上の色の<em>明度</em>を持ちますが、<em>色調</em>および <em>彩度</em>は下の色の値を使用します。<br>
+  このブレンドモードは <code>color</code> と同じですが、レイヤーが入れ替わっています。</p>
+
+ <div id="luminosity_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: luminosity;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Interpolation_of_blend_modes" name="Interpolation_of_blend_modes">ブレンドモードの補間</h2>
+
+<p>ブレンドモード間の遷移は補間されません。変更は直ちに行われます。</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('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このデータ型を使用するプロパティ: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
+</ul>
diff --git a/files/ja/web/css/block-size/index.html b/files/ja/web/css/block-size/index.html
new file mode 100644
index 0000000000..9e4f423851
--- /dev/null
+++ b/files/ja/web/css/block-size/index.html
@@ -0,0 +1,107 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/block-size
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>block-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。</p>
+
+<p>書字方向が垂直方向であった場合、 <code>block-size</code> の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの {{cssxref("inline-size")}} が要素のもう一方の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+block-size: 300px;
+block-size: 25em;
+
+/* &lt;percentage&gt; 値 */
+block-size: 75%;
+
+/* キーワード値 */
+block-size: max-content;
+block-size: min-content;
+block-size: fit-content(20em);
+block-size: auto;
+
+/* グローバル値 */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>block-size</code> プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Block_size_with_vertical_text" name="Block_size_with_vertical_text">縦書き時のブロック方向の寸法</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Block_size_with_vertical_text")}}</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("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.block-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付けされる物理的プロパティ: {{cssxref("width")}} および {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-color/index.html b/files/ja/web/css/border-block-color/index.html
new file mode 100644
index 0000000000..3b3b348c11
--- /dev/null
+++ b/files/ja/web/css/border-block-color/index.html
@@ -0,0 +1,94 @@
+---
+title: border-block-color
+slug: Web/CSS/border-block-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-block-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<pre class="brush:css no-line-numbers">border-block-color: yellow;
+border-block-color: #F5F6F7;
+</pre>
+
+<p>他の方向の境界については、 {{cssxref("border-block-color")}} によって、 {{cssxref("border-block-start-color")}} と {{cssxref("border-block-end-color")}} の両方を設定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="構文">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応します</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-end-color/index.html b/files/ja/web/css/border-block-end-color/index.html
new file mode 100644
index 0000000000..ad34d10b2f
--- /dev/null
+++ b/files/ja/web/css/border-block-end-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-block-end-color
+slug: Web/CSS/border-block-end-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-color
+  - border-block-end
+  - border-block-end-color
+translation_of: Web/CSS/border-block-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-end-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-end-style/index.html b/files/ja/web/css/border-block-end-style/index.html
new file mode 100644
index 0000000000..b536bdd846
--- /dev/null
+++ b/files/ja/web/css/border-block-end-style/index.html
@@ -0,0 +1,104 @@
+---
+title: border-block-end-style
+slug: Web/CSS/border-block-end-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-end
+  - border-block-end-style
+  - border-block-style
+translation_of: Web/CSS/border-block-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-end-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; 値 */
+border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-end-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-end-width/index.html b/files/ja/web/css/border-block-end-width/index.html
new file mode 100644
index 0000000000..131b154a85
--- /dev/null
+++ b/files/ja/web/css/border-block-end-width/index.html
@@ -0,0 +1,103 @@
+---
+title: border-block-end-width
+slug: Web/CSS/border-block-end-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-end
+  - border-block-end-width
+  - border-block-width
+translation_of: Web/CSS/border-block-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-end-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; 値 */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-end-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-end/index.html b/files/ja/web/css/border-block-end/index.html
new file mode 100644
index 0000000000..485152ccb0
--- /dev/null
+++ b/files/ja/web/css/border-block-end/index.html
@@ -0,0 +1,110 @@
+---
+title: border-block-end
+slug: Web/CSS/border-block-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-end-color
+  - border-block-end-style
+  - border-block-end-width
+translation_of: Web/CSS/border-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なブロック方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+</pre>
+
+<p><code>border-block-end</code> は1つ以上の {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-block-end</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-start-color/index.html b/files/ja/web/css/border-block-start-color/index.html
new file mode 100644
index 0000000000..5ca63e40e5
--- /dev/null
+++ b/files/ja/web/css/border-block-start-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-block-start-color
+slug: Web/CSS/border-block-start-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-color
+  - border-block-start
+  - border-block-start-color
+translation_of: Web/CSS/border-block-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>{{cssxref("border-color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-start-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li>
+</ul>
diff --git a/files/ja/web/css/border-block-start-style/index.html b/files/ja/web/css/border-block-start-style/index.html
new file mode 100644
index 0000000000..cff711d790
--- /dev/null
+++ b/files/ja/web/css/border-block-start-style/index.html
@@ -0,0 +1,105 @@
+---
+title: border-block-start-style
+slug: Web/CSS/border-block-start-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-start
+  - border-block-start-style
+  - border-block-style
+  - 境界
+translation_of: Web/CSS/border-block-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-start-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; 値 */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-start-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-start-width/index.html b/files/ja/web/css/border-block-start-width/index.html
new file mode 100644
index 0000000000..4409e56a82
--- /dev/null
+++ b/files/ja/web/css/border-block-start-width/index.html
@@ -0,0 +1,103 @@
+---
+title: border-block-start-width
+slug: Web/CSS/border-block-start-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-start
+  - border-block-start-width
+  - border-block-width
+translation_of: Web/CSS/border-block-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-start-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; 値 */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-start-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-start/index.html b/files/ja/web/css/border-block-start/index.html
new file mode 100644
index 0000000000..6e4490037a
--- /dev/null
+++ b/files/ja/web/css/border-block-start/index.html
@@ -0,0 +1,111 @@
+---
+title: border-block-start
+slug: Web/CSS/border-block-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-block
+  - border-block-start
+  - border-block-start-color
+  - border-block-start-style
+  - border-block-start-width
+translation_of: Web/CSS/border-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なブロック方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css  no-line-numbers">border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+</pre>
+
+<p><code>border-block-start</code> は1つ以上の {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-block-start</code> は以下の値の家の1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css  no-line-numbers">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-style/index.html b/files/ja/web/css/border-block-style/index.html
new file mode 100644
index 0000000000..928aeb32cf
--- /dev/null
+++ b/files/ja/web/css/border-block-style/index.html
@@ -0,0 +1,96 @@
+---
+title: border-block-style
+slug: Web/CSS/border-block-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-block-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロック方向の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}} と {{cssxref("border-bottom-style")}}、または {{cssxref("border-right-style")}} と {{cssxref("border-left-style")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; 値 */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+</pre>
+
+<p>他の方向の境界については、 {{cssxref("border-block-style")}} によって、 {{cssxref("border-block-start-style")}} と {{cssxref("border-block-end-style")}} の両方を設定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="構文">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応します</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block-width/index.html b/files/ja/web/css/border-block-width/index.html
new file mode 100644
index 0000000000..e20b409a44
--- /dev/null
+++ b/files/ja/web/css/border-block-width/index.html
@@ -0,0 +1,95 @@
+---
+title: border-block-width
+slug: Web/CSS/border-block-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-block-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-block-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロック方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; values */
+border-block-width: 5px;
+border-block-width: thick;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-inline-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} が要素の他の境界の幅を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-block/index.html b/files/ja/web/css/border-block/index.html
new file mode 100644
index 0000000000..1d5b736960
--- /dev/null
+++ b/files/ja/web/css/border-block/index.html
@@ -0,0 +1,102 @@
+---
+title: border-block
+slug: Web/CSS/border-block
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>border-block</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<pre class="brush:css no-line-numbers">border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+</pre>
+
+<p><code>border-block</code> は {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。</p>
+
+<p>他の方向の境界については、 {{cssxref("border-inline")}} によって、 {{cssxref("border-inline-start")}} と {{cssxref("border-inline-end")}} の両方を設定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-block</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom-color/index.html b/files/ja/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..37b4ce9f2a
--- /dev/null
+++ b/files/ja/web/css/border-bottom-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-bottom-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-bottom-color</code></strong> は CSS のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers  language-css notranslate">/* &lt;color&gt; 値 */
+border-bottom-color: red;
+border-bottom-color: #ffbb00;
+border-bottom-color: rgb(255, 0, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: currentcolor;
+border-bottom-color: transparent;
+
+/* グローバル値 */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+</pre>
+
+<p><code>border-bottom-color</code> プロパティは1つの値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>境界線の色を定義します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="mybox"&gt;
+  &lt;p&gt;これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     &lt;span class="redtext"&gt;赤&lt;/span&gt;になっています。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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 Backgrounds', '#propdef-border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("&lt;color&gt;")}} 含められたので、形式的には削除された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-bottom-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.</li>
+ <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-left-color")}}</li>
+ <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom-left-radius/index.html b/files/ja/web/css/border-bottom-left-radius/index.html
new file mode 100644
index 0000000000..e1821163f7
--- /dev/null
+++ b/files/ja/web/css/border-bottom-left-radius/index.html
@@ -0,0 +1,195 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-bottom-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-bottom-left-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p>
+
+<div style="text-align: center;"><img alt="border-bottom-left-radius.png" class="default internal" src="/@api/deki/files/6136/=border-bottom-left-radius.png"></div>
+
+<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p>
+
+<div class="note"><strong>注:</strong> このプロパティの値が <code>border-bottom-left-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */
+/* border-bottom-left-radius: <em>radius</em> */
+border-bottom-left-radius: 3px;
+
+/* パーセント値 */
+
+/* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-left-radius: 20%;
+
+/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-left-radius: 20% 20%;
+
+/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+border-bottom-left-radius: 20% 10%;
+
+/* 角を楕円にする */
+/* border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;</pre>
+
+<p>値１つで指定する場合:</p>
+
+<ul>
+ <li>値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する円の半径を示します。</li>
+</ul>
+
+<p>値２つで指定する場合:</p>
+
+<ul>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>ライブ例</th>
+   <th>コード</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+   <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;">
+   <div style="display: none;">.</div>
+   </div>
+   </td>
+   <td>境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+   <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;">
+   <div style="display: none;">.</div>
+   </div>
+   </td>
+   <td>境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>ボックスは正方形。境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>ボックスは正方形ではない。境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>背景色は境界で切り取られる
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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 Backgrounds', '#propdef-border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-bottom-left-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>一括指定の {{cssxref("border-radius")}} プロパティ</li>
+ <li>{{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-top-left-radius")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom-right-radius/index.html b/files/ja/web/css/border-bottom-right-radius/index.html
new file mode 100644
index 0000000000..a757c6aa39
--- /dev/null
+++ b/files/ja/web/css/border-bottom-right-radius/index.html
@@ -0,0 +1,189 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-bottom-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-bottom-right-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p>
+
+<div style="text-align: center;"><img alt="border-bottom-right-radius.png" class="default internal" src="/@api/deki/files/6134/=border-bottom-right-radius.png"></div>
+
+<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p>
+
+<div class="note"><strong>注:</strong> このプロパティの値が <code>border-bottom-right-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */
+/* border-bottom-right-radius: <em>radius</em> */
+border-bottom-right-radius: 3px;
+
+/* パーセント値 */
+border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */
+border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */
+border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */
+
+/* 角を楕円にする */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;</pre>
+
+<p>値１つで指定する場合:</p>
+
+<ul>
+ <li>値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する円の半径を示します。</li>
+</ul>
+
+<p>値２つで指定する場合:</p>
+
+<ul>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>ライブ例</th>
+   <th>コード</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>ボックスは正方形。境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>ボックスは正方形ではない。境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>背景色は境界で切り取られる
+    <pre class="brush: css notranslate">
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-bottom-right-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>一括指定の {{cssxref("border-radius")}} プロパティ</li>
+ <li>{{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom-style/index.html b/files/ja/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..01471dae24
--- /dev/null
+++ b/files/ja/web/css/border-bottom-style/index.html
@@ -0,0 +1,139 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - border
+  - border-bottom
+  - border-style
+  - リファレンス
+translation_of: Web/CSS/border-bottom-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-bottom-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* グローバル値 */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+</pre>
+
+<p><code>border-bottom-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>こちらの表では border-bottom-style のすべての値を紹介します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* 表の外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style の例のクラス */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Examples', 300, 200) }}</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 Backgrounds', '#propdef-border-bottom-style', 'border-bottom-style') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-bottom-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}</li>
+ <li>その他の下側の境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom-width/index.html b/files/ja/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..fb65fdb357
--- /dev/null
+++ b/files/ja/web/css/border-bottom-width/index.html
@@ -0,0 +1,148 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-bottom
+  - border-width
+translation_of: Web/CSS/border-bottom-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-bottom-width</code></strong> プロパティは、ボックスの下の境界の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* &lt;length&gt; 値 */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* グローバルキーワード */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>明示的な非負の {{cssxref("&lt;length&gt;")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">細い境界線</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">中くらいの境界線</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">太い境界線</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', '100%')}}</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 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-bottom-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}</li>
+ <li>他の border-bottom 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-bottom/index.html b/files/ja/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..dfc11e2f13
--- /dev/null
+++ b/files/ja/web/css/border-bottom/index.html
@@ -0,0 +1,139 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-bottom</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>他の一括指定プロパティと同様に、 <code>border-bottom</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: thick green;
+</pre>
+
+<p>・・・は、実際には以下と同じです・・・</p>
+
+<pre class="brush: css notranslate">border-bottom-style: dotted;
+border-bottom: none thick green;
+</pre>
+
+<p>・・・そして、 <code>border-bottom</code> の前で設定された {{cssxref("border-bottom-style")}} の値は無視されます。 {{cssxref("border-bottom-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+</pre>
+
+<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-bottom-width")}} を参照してください。</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-bottom-style")}} を参照してください。</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-bottom-color")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Applying_a_bottom_border" name="Applying_a_bottom_border">下の境界の適用</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  このボックスには下側に境界線があります。
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Applying_a_bottom_border')}}</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 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>直接的な変更はないが、 {{cssxref("border-bottom-color")}} に適用される値が変更された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>有意な変更点なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-bottom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-block")}}</li>
+ <li>{{cssxref("outline")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-collapse/index.html b/files/ja/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..384a7d42c9
--- /dev/null
+++ b/files/ja/web/css/border-collapse/index.html
@@ -0,0 +1,144 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/border-collapse
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>border-collapse</code> プロパティは、 {{htmlElement("table")}} の中のセルが境界線を共有するか分離するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>セルが collapsed の場合、 {{cssxref("border-style")}} の値で <code>inset</code> が <code>groove</code> のように動作し、 <code>outset</code> が <code>ridge</code> のように動作します。</p>
+
+<p>セルが separated の場合、セルの間隔は {{cssxref("border-spacing")}} プロパティで定義されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* グローバル値 */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+</pre>
+
+<p><code>border-collapse</code> プロパティは、以下のリストから選択された単一のキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>collapse</code></dt>
+ <dd>隣接するセルで境界線を共有します (collapsed-border 表レンダリングモデル)。</dd>
+ <dt><code>separate</code></dt>
+ <dd>隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_colorful_table_of_browser_engines" name="A_colorful_table_of_browser_engines">ブラウザーエンジンのカラフルな表</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table class="separate"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;table class="collapse"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ed"&gt;Edge&lt;/td&gt; &lt;td class="tr"&gt;EdgeHTML&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</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('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-collapse")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}</li>
+ <li><code>border-collapse</code> プロパティは HTML の {{htmlelement("table")}} 要素の表示方法を変更します。</li>
+</ul>
diff --git a/files/ja/web/css/border-color/index.html b/files/ja/web/css/border-color/index.html
new file mode 100644
index 0000000000..2e1c0247af
--- /dev/null
+++ b/files/ja/web/css/border-color/index.html
@@ -0,0 +1,196 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 境界線
+  - CSS 背景と境界
+  - HTML 色
+  - Reference
+  - Styling HTML
+  - border
+  - border-color
+  - 一括指定プロパティ
+  - 色
+translation_of: Web/CSS/border-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-color</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>を行う <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の境界の色を設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。</p>
+
+<p>境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;color&gt; 値 */
+border-color: red;
+
+/* 水平線 | 垂直線 */
+border-color: red #f015ca;
+
+/* 上辺 | 垂直線 | 下辺 */
+border-color: red rgb(240,30,50,.7) green;
+
+/* 上辺 | 右辺 | 下辺 | 左辺 */
+border-color: red yellow green blue;
+
+/* グローバル値 */
+border-color: inherit;
+border-color: initial;
+border-color: unset;
+</pre>
+
+<p><code>border-color</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ色が適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目の色は<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目の色<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、それぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）に適用される。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;color&gt;")}}</dt>
+ <dd>境界線の色を定義します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Complete_border-color_usage" name="Complete_border-color_usage">完全な border-color の使用法</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="justone"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt; is equivalent to&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="horzvert"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt; is equivalent to&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="topvertbott"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt; is equivalent to&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="trbl"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan black gold;&lt;/code&gt; is equivalent to&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+/* すべての div に幅とスタイルを設定 */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}</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("CSS Logical Properties", "#logical-shorthand-keyword")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td><code>logical</code> キーワードを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}</td>
+   <td>{{Spec2("CSS3 Backgrounds")}}</td>
+   <td><code>transparent</code> キーワードが削除され、 {{CSSxRef("&lt;color&gt;")}} データ型の一部になった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>一括指定プロパティと定義された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#border-color", "border-color")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}},</li>
+ <li>その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}}</li>
+ <li>{{CSSxRef("&lt;color&gt;")}} データ型</li>
+ <li>その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/border-end-end-radius/index.html b/files/ja/web/css/border-end-end-radius/index.html
new file mode 100644
index 0000000000..2b479ee923
--- /dev/null
+++ b/files/ja/web/css/border-end-end-radius/index.html
@@ -0,0 +1,113 @@
+---
+title: border-end-end-radius
+slug: Web/CSS/border-end-end-radius
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-end-end-radius
+  - 'recipe:css-property'
+  - writing modes
+translation_of: Web/CSS/border-end-end-radius
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>border-end-end-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+/* 値1つの場合は角を円にする */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-end-end-radius: 1em 2em;
+
+/* グローバル値 */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+</pre>
+
+<p>このプロパティは、要素の block-end と inline-end の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-bottom-right-radius")}} プロパティに対応します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-end-end-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理プロパティ: {{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-end-start-radius/index.html b/files/ja/web/css/border-end-start-radius/index.html
new file mode 100644
index 0000000000..d7967ba6b1
--- /dev/null
+++ b/files/ja/web/css/border-end-start-radius/index.html
@@ -0,0 +1,113 @@
+---
+title: border-end-start-radius
+slug: Web/CSS/border-end-start-radius
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-end-start-radius
+  - 'recipe:css-property'
+  - writing modes
+translation_of: Web/CSS/border-end-start-radius
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>border-end-start-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+/* 値1つの場合は角を円にする */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-end-start-radius: 1em 2em;
+
+/* グローバル値 */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+</pre>
+
+<p>このプロパティは、要素の block-end と inline-start の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-bottom-left-radius")}} プロパティに対応します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-end-start-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理プロパティ: {{CSSxRef("border-top-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-image-outset/index.html b/files/ja/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..2ae454522e
--- /dev/null
+++ b/files/ja/web/css/border-image-outset/index.html
@@ -0,0 +1,114 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border-image
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-outset</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>が境界ボックスからはみ出す幅を設定します。</p>
+
+<p>境界画像のうち、 <code>border-image-outset</code> によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+border-image-outset: 1rem;
+
+/* &lt;number&gt; 値 */
+border-image-outset: 1.5;
+
+/* 上下 | 左右 */
+border-image-outset: 1 1.2;
+
+/* 上 | 左右 | 下 */
+border-image-outset: 30px 2 45px;
+
+/* 上 | 右 | 下 | 左 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* グローバル値 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+</pre>
+
+<p><code>border-image-outset</code> プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;number&gt;")}} です。負の値は無効であり、指定すると <code>border-image-outset</code> の宣言が無効になります。</p>
+
+<ol>
+ <li>値が<strong>1つ</strong>指定された場合は、<strong>全4辺</strong>に適用されます。</li>
+ <li>値が<strong>2つ</strong>指定された場合は、1つ目が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li>
+ <li>値が<strong>3つ</strong>指定された場合は、1つ目が<strong>上</strong>に、2つ目が<strong>左右</strong>に、3つ目が<strong>下</strong>に適用されます。</li>
+ <li>値が<strong>4つ</strong>指定された場合は、<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) で適用されます。</li>
+</ol>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><code>border-image</code> がはみ出す寸法を長さ — 数値と単位で指定します。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd><code>border-image</code> がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が <code>border-width: 1em 2px 0 1.5rem</code> で、 <code>border-image-outset: 2</code> であると、最終的な <code>border-image-outset</code> は <code>2em 4px 0 3rem</code> として計算されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="outset"&gt;This element has an outset border image!&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "auto", 200)}}</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 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.border-image-outset")}}</p>
diff --git a/files/ja/web/css/border-image-repeat/index.html b/files/ja/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..53d19da69d
--- /dev/null
+++ b/files/ja/web/css/border-image-repeat/index.html
@@ -0,0 +1,126 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - border-image
+  - リファレンス
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-image-repeat</code></strong> プロパティは、元画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を、どうやって要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>に合うように合わせるかを定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
+
+/* 垂直 | 水平 */
+border-image-repeat: round stretch;
+
+/* グローバル値 */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<p><code>border-image-repeat</code> プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ動作が適用されます。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目の動作が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。</dd>
+ <dt><code>repeat</code></dt>
+ <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。</dd>
+ <dt><code>round</code></dt>
+ <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。</dd>
+ <dt><code>space</code></dt>
+ <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS_content" name="CSS_content">CSS コンテンツ</h3>
+
+<pre class="brush: css; highlight[7]">#bordered {
+  width: 12rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 40px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch;  /* live sample で変更可能 */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="bordered"&gt;You can try out various border repetition rules on me!&lt;/div&gt;
+
+&lt;select id="repetition"&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="repeat"&gt;repeat&lt;/option&gt;
+  &lt;option value="round"&gt;round&lt;/option&gt;
+  &lt;option value="space"&gt;space&lt;/option&gt;
+  &lt;option value="stretch repeat"&gt;stretch repeat&lt;/option&gt;
+  &lt;option value="space round"&gt;space round&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "auto", 200)}}</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 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-image-repeat")}}</p>
diff --git a/files/ja/web/css/border-image-slice/index.html b/files/ja/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..98e350758f
--- /dev/null
+++ b/files/ja/web/css/border-image-slice/index.html
@@ -0,0 +1,115 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - border-image
+  - border-image-slice
+  - リファレンス
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-image-slice</code></strong> プロパティは {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は<a href="/ja/docs/Web/CSS/border-image">境界画像</a>の部品を構成します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>上の図は、それぞれの領域の位置を説明しています。</p>
+
+<ul>
+ <li>1-4 の領域は<span id="corner-regions">角の領域</span>です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。</li>
+ <li>5-8 の領域は <span id="edge-regions">辺の領域</span>です。これらは最終的な境界画像の中で、要素の寸法に合わせて<a href="/ja/docs/Web/CSS/border-image-repeat">反復、拡縮、その他の加工が行なわれ</a>ます。</li>
+ <li>9 の領域は<span id="middle-region">中央領域</span>です。既定では描画されませんが、キーワード <code>fill</code> がセットされていれば背景画像のように使用されます。</li>
+</ul>
+
+<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* すべての辺 */
+border-image-slice: 30%;
+
+/* 上下 | 左右 */
+border-image-slice: 10% 30%;
+
+/* 上 | 左右 | 下 */
+border-image-slice: 30 30% 45;
+
+/* 上 | 右 | 下 | 左 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` キーワードの使用 */
+border-image-slice: 10% fill 7 12;
+
+/* グローバル値 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<p><code>border-image-slice</code> プロパティは1つから4つの <code>&lt;number-percentage&gt;</code> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は <code>100%</code> に丸められます。</p>
+
+<ul>
+ <li>位置が<strong>1つ</strong>指定された場合、全4本の分割線がそれぞれの辺から同じ距離で作成されます。</li>
+ <li>位置が<strong>2つ</strong>指定された場合、1つ目の値を<strong>上下</strong>の辺からの距離として、2つ目を<strong>左右</strong>の辺からの距離として分割線を作成します。</li>
+ <li>位置が<strong>3つ</strong>指定された場合、1つ目の値を<strong>上</strong>の辺からの距離として、2つ目を<strong>左右</strong>の辺からの距離、3つ目は<strong>下</strong>の辺からの距離として分割線を作成します。</li>
+ <li>位置が<strong>4つ</strong>指定された場合、<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。</li>
+</ul>
+
+<p><code>fill</code> の値は任意で、使用する場合は、宣言のどこにおいても構いません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。</dd>
+ <dt><code>fill</code></dt>
+ <dd>中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-image-slice")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">1～4つの値による構文の図による説明</a></li>
+</ul>
diff --git a/files/ja/web/css/border-image-source/index.html b/files/ja/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..ffac71e956
--- /dev/null
+++ b/files/ja/web/css/border-image-source/index.html
@@ -0,0 +1,93 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-source</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>に使われる元の画像を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+border-image-source: none;
+
+/* &lt;image&gt; 値 */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* グローバル値 */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>境界に使用する画像への参照です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。</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 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-image-source")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}} 関数</li>
+</ul>
diff --git a/files/ja/web/css/border-image-width/index.html b/files/ja/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..35702b3958
--- /dev/null
+++ b/files/ja/web/css/border-image-width/index.html
@@ -0,0 +1,129 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border-image
+translation_of: Web/CSS/border-image-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-image-width: auto;
+
+/* &lt;length&gt; 値 */
+border-image-width: 1rem;
+
+/* &lt;percentage&gt; 値 */
+border-image-width: 25%;
+
+/* &lt;number&gt; 値 */
+border-image-width: 3;
+
+/* 上下 | 左右 */
+border-image-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p><code>border-image-width</code> プロパティは下記の値のリストにある1つから4つの値を使用して指定することができます。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ幅が適用されます。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目の幅が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目の幅が<strong>上</strong>に、2つ目が<strong>左右</strong>に、3つ目が<strong>下</strong>に適用されます。</li>
+ <li>値が<strong>4つ</strong>指定された場合、幅は<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) で適用されます。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>境界の幅を、 {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の<em>幅</em>、また垂直オフセットにおいては境界画像の領域の<em>高さ</em>です。負の値であってはいけません。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する <code>border-width</code> が代わりに使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10470/border.png"></p>
+
+<p>そして、元の画像内のそれぞれの円は30×30ピクセルです。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 200, 240)}}</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 Backgrounds', '#border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-image-width")}}</p>
diff --git a/files/ja/web/css/border-image/index.html b/files/ja/web/css/border-image/index.html
new file mode 100644
index 0000000000..0ee0aa316a
--- /dev/null
+++ b/files/ja/web/css/border-image/index.html
@@ -0,0 +1,171 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border-image
+  - border-image-slice
+  - border-image-source
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の<a href="/ja/docs/Web/CSS/border">境界</a>を置き換えます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。他の一括指定プロパティと同様、省略された値には<a href="/ja/docs/Web/CSS/initial_value">初期値</a>が設定されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+</pre>
+
+<p><code>border-image</code> プロパティは以下に挙げられた1つから5つの値で指定することができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> {{cssxref("border-image-source")}} の <a href="/ja/docs/Web/CSS/computed_value">計算値</a> が <code>none</code> になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-image-source'&gt;</code></dt>
+ <dd>元となる画像です。 {{cssxref("border-image-source")}} を参照してください。</dd>
+ <dt><code>&lt;'border-image-slice'&gt;</code></dt>
+ <dd>source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。</dd>
+ <dt><code>&lt;'border-image-width'&gt;</code></dt>
+ <dd>境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-image-outset'&gt;</code></dt>
+ <dd>要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。</dd>
+ <dt><code>&lt;'border-image-repeat'&gt;</code></dt>
+ <dd>source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Bitmap" name="Bitmap">ビットマップ</h3>
+
+<p>この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。</p>
+
+<p><img alt="境界画像の例" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;この要素はビットマップベースの境界画像に囲まれています。&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための <code>27</code> を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 <code>round</code> に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。</p>
+
+<pre class="brush:css">#bitmap {
+  width: 200px;
+  background-color: #ffa;
+  border: 36px solid orange;
+  margin: 30px;
+  padding: 10px;
+
+  border-image:
+      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
+      27 /                    /* slice */
+      36px 28px 18px 8px /    /* width */
+      18px 14px 9px 4px       /* outset */
+      round;                  /* repeat */
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Bitmap', '100%', 200)}}</p>
+
+<h3 id="Gradient" name="Gradient">グラデーション</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="gradient"&gt;この要素はグラデーションの境界に囲まれています。&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">#gradient {
+  width: 200px;
+  border: 30px solid;
+  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
+  padding: 20px;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Gradient')}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Backgrounds', '#the-border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-image")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}} 関数</li>
+ <li>Gradient functions: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-color/index.html b/files/ja/web/css/border-inline-color/index.html
new file mode 100644
index 0000000000..8dbf1be88f
--- /dev/null
+++ b/files/ja/web/css/border-inline-color/index.html
@@ -0,0 +1,94 @@
+---
+title: border-inline-color
+slug: Web/CSS/border-inline-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-inline-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}} および {{cssxref("border-bottom-color")}}、または {{cssxref("border-right-color")}} および {{cssxref("border-left-color")}} のどちらかに対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<pre class="brush:css no-line-numbers">border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の方向の境界色を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-end-color/index.html b/files/ja/web/css/border-inline-end-color/index.html
new file mode 100644
index 0000000000..4a868a5bed
--- /dev/null
+++ b/files/ja/web/css/border-inline-end-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-inline-end-color
+slug: Web/CSS/border-inline-end-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-color
+  - border-inline-end
+  - border-inline-end-color
+translation_of: Web/CSS/border-inline-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-end-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} が要素の他の境界色を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-end-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-end-style/index.html b/files/ja/web/css/border-inline-end-style/index.html
new file mode 100644
index 0000000000..a33a5711dd
--- /dev/null
+++ b/files/ja/web/css/border-inline-end-style/index.html
@@ -0,0 +1,104 @@
+---
+title: border-inline-end-style
+slug: Web/CSS/border-inline-end-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-end
+  - border-inline-end-style
+  - border-inline-style
+translation_of: Web/CSS/border-inline-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-end-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の終端側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; 値 */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-end-style", "border-block-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-block-end-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-end-width/index.html b/files/ja/web/css/border-inline-end-width/index.html
new file mode 100644
index 0000000000..cd8926c2d3
--- /dev/null
+++ b/files/ja/web/css/border-inline-end-width/index.html
@@ -0,0 +1,103 @@
+---
+title: border-inline-end-width
+slug: Web/CSS/border-inline-end-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-end
+  - border-inline-end-width
+  - border-inline-width
+translation_of: Web/CSS/border-inline-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-end-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; 値 */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} が要素の他の境界の幅を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-end-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-end/index.html b/files/ja/web/css/border-inline-end/index.html
new file mode 100644
index 0000000000..13490579f3
--- /dev/null
+++ b/files/ja/web/css/border-inline-end/index.html
@@ -0,0 +1,111 @@
+---
+title: border-inline-end
+slug: Web/CSS/border-inline-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-end
+  - border-inline-end-color
+  - border-inline-end-style
+  - border-inline-end-width
+translation_of: Web/CSS/border-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なインライン方向の末尾側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+</pre>
+
+<p><code>border-inline-end</code> は1つ以上の {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, {{cssxref("border-inline-end-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}} が要素の他の境界を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-inline-end</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-start-color/index.html b/files/ja/web/css/border-inline-start-color/index.html
new file mode 100644
index 0000000000..dde977fdea
--- /dev/null
+++ b/files/ja/web/css/border-inline-start-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-inline-start-color
+slug: Web/CSS/border-inline-start-color
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-color
+  - border-inline-start
+  - border-inline-start-color
+translation_of: Web/CSS/border-inline-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-start-color</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界色を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-start-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-start-style/index.html b/files/ja/web/css/border-inline-start-style/index.html
new file mode 100644
index 0000000000..83db36932f
--- /dev/null
+++ b/files/ja/web/css/border-inline-start-style/index.html
@@ -0,0 +1,104 @@
+---
+title: border-inline-start-style
+slug: Web/CSS/border-inline-start-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-start
+  - border-inline-start-style
+  - border-inline-style
+translation_of: Web/CSS/border-inline-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-start-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なブロックの先頭側の境界のスタイルを定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界のスタイルに対応付けられます。これは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; 値 */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-end-style")}} が要素の他の境界のスタイルを定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界の線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-start-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-start-width/index.html b/files/ja/web/css/border-inline-start-width/index.html
new file mode 100644
index 0000000000..dfd1916c0a
--- /dev/null
+++ b/files/ja/web/css/border-inline-start-width/index.html
@@ -0,0 +1,103 @@
+---
+title: border-inline-start-width
+slug: Web/CSS/border-inline-start-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-start
+  - border-inline-start-width
+  - border-inline-width
+translation_of: Web/CSS/border-inline-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-start-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の先頭側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; 値 */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+</pre>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-end-color")}} が要素の他の境界の幅を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-start-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応付けられます</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-start/index.html b/files/ja/web/css/border-inline-start/index.html
new file mode 100644
index 0000000000..20ccccddf6
--- /dev/null
+++ b/files/ja/web/css/border-inline-start/index.html
@@ -0,0 +1,111 @@
+---
+title: border-inline-start
+slug: Web/CSS/border-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - border-inline
+  - border-inline-start
+  - border-inline-start-color
+  - border-inline-start-style
+  - border-inline-start-width
+translation_of: Web/CSS/border-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、個々の論理的なインライン方向の先頭側境界のプロパティ値を、スタイルシート内の単一の場所で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+</pre>
+
+<p><code>border-inline-start</code> は1つ以上の {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}} の値の組み合わせを使用することができます。対応付けられる物理的な境界は、書字方向やテキストの向きによって決まります。これは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連するプロパティとしては、 {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, {{cssxref("border-inline-end")}} が要素の他の境界を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-inline-start</code> は以下の値の内の1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} のうちの一つに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-style/index.html b/files/ja/web/css/border-inline-style/index.html
new file mode 100644
index 0000000000..7b49f9aeb0
--- /dev/null
+++ b/files/ja/web/css/border-inline-style/index.html
@@ -0,0 +1,96 @@
+---
+title: border-inline-style
+slug: Web/CSS/border-inline-style
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-inline-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-style</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは {{cssxref("border-top-style")}} および {{cssxref("border-bottom-style")}}、または {{cssxref("border-left-style")}} および {{cssxref("border-right-style")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に応じて対応します。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; の値 */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+</pre>
+
+<p>他の方向の境界スタイルは {{cssxref("border-block-style")}} で設定することができ、これは {{cssxref("border-block-start-style")}} および {{cssxref("border-block-end-style")}} を定義します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{ cssxref("border-style") }} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは物理的な境界のプロパティ {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}} のうちの一つに割り当てられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline-width/index.html b/files/ja/web/css/border-inline-width/index.html
new file mode 100644
index 0000000000..81904da54d
--- /dev/null
+++ b/files/ja/web/css/border-inline-width/index.html
@@ -0,0 +1,96 @@
+---
+title: border-inline-width
+slug: Web/CSS/border-inline-width
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-inline-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>border-inline-width</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素の論理的なインライン方向の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは {{cssxref("border-top-width")}} と {{cssxref("border-bottom-width")}}、または {{cssxref("border-left-width")}} と {{cssxref("border-right-width")}} の組み合わせのどちらか対応し、どちらに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-width'&gt; 値 */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+</pre>
+
+<p>他の方向の境界の幅については、 {{cssxref("border-block-width")}} によって、 {{cssxref("border-block-start-width")}} と {{cssxref("border-block-end-width")}} を設定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-inline-width", "border-inline-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} のうちの1つに対応します</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-inline/index.html b/files/ja/web/css/border-inline/index.html
new file mode 100644
index 0000000000..f3e3bde468
--- /dev/null
+++ b/files/ja/web/css/border-inline/index.html
@@ -0,0 +1,100 @@
+---
+title: border-inline
+slug: Web/CSS/border-inline
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+translation_of: Web/CSS/border-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>border-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なインライン方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<pre class="brush:css no-line-numbers">border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+</pre>
+
+<p><code>border-inline</code> は {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, {{cssxref("border-inline-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。</p>
+
+<p>他の方向の境界については、 {{cssxref("border-block")}} によって、 {{cssxref("border-block-start")}} と {{cssxref("border-block-end")}} の両方を設定することができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>border-inline</code> は以下の値のうちの1つ以上を任意の順序で指定します。</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>境界の幅です。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>境界の色です。 {{cssxref("color")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-inline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは物理的な境界プロパティである {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}} の何れかに対応付けられます。</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-left-color/index.html b/files/ja/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..6e50e7e0b1
--- /dev/null
+++ b/files/ja/web/css/border-left-color/index.html
@@ -0,0 +1,119 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-color
+  - border-left
+translation_of: Web/CSS/border-left-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-left-color</code></strong> は CSS のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers  language-css notranslate">/* &lt;color&gt; 値 */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentcolor;
+border-left-color: transparent;
+
+/* グローバル値 */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+</pre>
+
+<p><code>border-left-color</code> プロパティは1つの値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>左の境界線の色を定義します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="mybox"&gt;
+  &lt;p&gt;これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     &lt;span class="redtext"&gt;赤&lt;/span&gt;になっています。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.mybox {
+    border: solid 0.3em gold;
+    border-left-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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 Backgrounds', '#propdef-border-left-color', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("&lt;color&gt;")}} 含められたので、形式的には削除された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-left-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.</li>
+ <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}</li>
+ <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-left-style/index.html b/files/ja/web/css/border-left-style/index.html
new file mode 100644
index 0000000000..427e9c5f46
--- /dev/null
+++ b/files/ja/web/css/border-left-style/index.html
@@ -0,0 +1,137 @@
+---
+title: border-left-style
+slug: Web/CSS/border-left-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-left
+  - border-style
+translation_of: Web/CSS/border-left-style
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-left-style</code></strong> プロパティは、要素の左側の {{cssxref("border")}} における線の形状を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* グローバル値 */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+</pre>
+
+<p><code>border-left-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style の例のクラス */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Examples', 300, 200) }}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>明確な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-left-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}}</li>
+ <li>その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-left-width/index.html b/files/ja/web/css/border-left-width/index.html
new file mode 100644
index 0000000000..eb54d04b4e
--- /dev/null
+++ b/files/ja/web/css/border-left-width/index.html
@@ -0,0 +1,148 @@
+---
+title: border-left-width
+slug: Web/CSS/border-left-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-left
+  - border-width
+translation_of: Web/CSS/border-left-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-left-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の境界の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* &lt;length&gt; 値 */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* グローバル値 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>明示的な負の値ではない {{cssxref("&lt;length&gt;")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td>細い境界線</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td>中くらいの境界線</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td>太い境界線</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+div:nth-child(2) {
+  border-left-width: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', '100%')}}</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 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-left-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}</li>
+ <li>他の border-left 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-left/index.html b/files/ja/web/css/border-left/index.html
new file mode 100644
index 0000000000..22e4a8467d
--- /dev/null
+++ b/files/ja/web/css/border-left/index.html
@@ -0,0 +1,139 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-left
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-left</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>他の一括指定プロパティと同様に、 <code>border-left</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p>
+
+<pre class="brush: css notranslate">border-left-style: dotted;
+border-left: thick green;
+</pre>
+
+<p>・・・は、実際には以下と同じです・・・</p>
+
+<pre class="brush: css notranslate">border-left-style: dotted;
+border-left: none thick green;
+</pre>
+
+<p>・・・そして、 <code>border-left</code> の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+</pre>
+
+<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-left-width")}} を参照してください。</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-left-style")}} を参照してください。</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-left-color")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Applying_a_left_border" name="Applying_a_left_border">左の境界の適用</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  このボックスには左側に境界線があります。
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Applying_a_left_border')}}</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 Backgrounds', '#propdef-border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>直接的な変更はないが、 {{cssxref("border-left-color")}} に適用される値が変更された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>有意な変更点なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-left")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-block")}}</li>
+ <li>{{cssxref("outline")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-radius/index.html b/files/ja/web/css/border-radius/index.html
new file mode 100644
index 0000000000..f72ffbefe4
--- /dev/null
+++ b/files/ja/web/css/border-radius/index.html
@@ -0,0 +1,217 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border-radius
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+
+<p>半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。</p>
+
+<p><code>border-radius</code> プロパティは {{cssxref("border-collapse")}} が <code>collapse</code> の table 要素には適用されません。</p>
+
+<div class="note"><strong>メモ:</strong> 他の一括指定プロパティと同様、個別のサブプロパティは <code>border-radius:0 0 inherit inherit</code> のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers"><strong>/* 最初の半径の構文は1つから4つの値が許可されています */</strong>
+/* 半径を全4角に設定 */
+border-radius: 10px;
+
+/* <em>左上と右下</em> | <em>右上と左下</em> */
+border-radius: 10px 5%;
+
+/* <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
+border-radius: 2px 4px 2px;
+
+/* <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* 2番目の半径の構文は1つから4つの値が許可されています */</strong>
+/* (最初の半径の値) / <em>radius</em> */
+border-radius: 10px / 20px;
+
+/* (最初の半径の値) / <em>左上と右下</em> | <em>右上と左下</em> */
+border-radius: 10px 5% / 20px 30px;
+
+/* (最初の半径の値) / <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (最初の半径の値) / <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* グローバル値 */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+</pre>
+
+<p><code>border-radius</code> プロパティは次のように指定することができます。</p>
+
+<ul>
+ <li>1つ、2つ、3つ、4つの {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} の値。これは角の半径を1つ設定するために使用します。</li>
+ <li>その後に任意で、 "/" と1つ、2つ、3つ、4つの <code>&lt;length&gt;</code> 又は <code>&lt;percentage&gt;</code> の値。これは追加の半径を設定し、楕円形の角にすることができます。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>半径</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">境界の四隅に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。1つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>左上と右下</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>右上と左下</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つ又は3つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>左上</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>右上</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>右下</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>左下</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。</dd>
+</dl>
+
+<p>例:</p>
+
+<pre class="brush: css">border-radius: 1em/5em;
+
+/* ... is equivalent to: */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... is equivalent to: */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px !important; border-radius: 10px 40px 40px 10px; width: 90%;">  border: solid 10px;
+  /* 境界が「D」のように描画される */
+  border-radius: 10px 40px 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red  !important; border-radius: 2em; width: 90%;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold  !important; border-radius: 13em/3em; width: 90%;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none  !important; border-radius: 40px 10px; width: 90%;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: burlywood; border: none  !important; border-radius: 50%; width: 90%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px  !important; border-radius: 10px 40px; width: 90%;">  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px  !important; border-radius: 40px; width: 90%;">  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+</pre>
+
+<h2 id="Live_Samples" name="Live_Samples">ライブサンプル</h2>
+
+<ul>
+ <li>例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
+ <li>例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
+ <li>例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
+ <li>例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
+ <li>例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
+</ul>
+
+<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 Backgrounds', '#border-radius', 'border-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-right-color/index.html b/files/ja/web/css/border-right-color/index.html
new file mode 100644
index 0000000000..5655faa913
--- /dev/null
+++ b/files/ja/web/css/border-right-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-right-color
+slug: Web/CSS/border-right-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-right-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-right-color</code></strong> は CSS のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers  language-css notranslate">/* &lt;color&gt; 値 */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentcolor;
+border-right-color: transparent;
+
+/* グローバル値 */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+</pre>
+
+<p><code>border-right-color</code> プロパティは1つの値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>右の境界線の色を定義します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="mybox"&gt;
+  &lt;p&gt;これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     &lt;span class="redtext"&gt;赤&lt;/span&gt;になっています。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.mybox {
+    border: solid 0.3em gold;
+    border-right-color: red;
+    width: auto;
+}
+
+.redtext {
+    color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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 Backgrounds', '#propdef-border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("&lt;color&gt;")}} 含められたので、形式的には削除された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-right-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.</li>
+ <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}</li>
+ <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-right-style/index.html b/files/ja/web/css/border-right-style/index.html
new file mode 100644
index 0000000000..fd9108dd8f
--- /dev/null
+++ b/files/ja/web/css/border-right-style/index.html
@@ -0,0 +1,137 @@
+---
+title: border-right-style
+slug: Web/CSS/border-right-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-right
+  - border-style
+translation_of: Web/CSS/border-right-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-right-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の右側の境界 ({{cssxref("border")}}) における線の形状を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* グローバル値 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+</pre>
+
+<p><code>border-right-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style の例のクラス */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Examples') }}</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 Backgrounds', '#the-border-style', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-right-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}</li>
+ <li>その他の左側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-width") }}</li>
+</ul>
diff --git a/files/ja/web/css/border-right-width/index.html b/files/ja/web/css/border-right-width/index.html
new file mode 100644
index 0000000000..4290b4da04
--- /dev/null
+++ b/files/ja/web/css/border-right-width/index.html
@@ -0,0 +1,148 @@
+---
+title: border-right-width
+slug: Web/CSS/border-right-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-right
+  - border-width
+translation_of: Web/CSS/border-right-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-right-width</code></strong> プロパティは、要素の右側の境界の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css">/* キーワード値 */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* &lt;length&gt; 値 */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* グローバル値 */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>明示的な負の値ではない {{cssxref("&lt;length&gt;")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>細い境界線</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>中くらいの境界線</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>太い境界線</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+div:nth-child(2) {
+  border-right-width: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', '100%')}}</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 Backgrounds', '#the-border-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-right-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}</li>
+ <li>他の border-right 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-right/index.html b/files/ja/web/css/border-right/index.html
new file mode 100644
index 0000000000..5cbd175efa
--- /dev/null
+++ b/files/ja/web/css/border-right/index.html
@@ -0,0 +1,139 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-right
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-right</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-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>border-right</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p>
+
+<pre class="brush: css notranslate">border-right-style: dotted;
+border-right: thick green;
+</pre>
+
+<p>・・・は、実際には以下と同じです・・・</p>
+
+<pre class="brush: css notranslate">border-right-style: dotted;
+border-right: none thick green;
+</pre>
+
+<p>・・・そして、 <code>border-right</code> の前で設定された {{cssxref("border-right-style")}} の値は無視されます。 {{cssxref("border-right-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+</pre>
+
+<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-right-width")}} を参照してください。</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-right-style")}} を参照してください。</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-right-color")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Applying_a_right_border" name="Applying_a_right_border">右の境界の適用</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  このボックスには右側に境界線があります。
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Applying_a_right_border')}}</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 Backgrounds', '#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>直接的な変更はないが、 {{cssxref("border-right-color")}} に適用される値が変更された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>有意な変更点なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-right")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-block")}}</li>
+ <li>{{cssxref("outline")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-spacing/index.html b/files/ja/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..0e9470089c
--- /dev/null
+++ b/files/ja/web/css/border-spacing/index.html
@@ -0,0 +1,131 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - CSS テーブル
+  - CSS プロパティ
+  - CSS 表
+  - Reference
+  - リファレンス
+translation_of: Web/CSS/border-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>border-spacing</code></strong> プロパティは、 {{htmlelement("table")}} における隣り合うセルの枠線同士の間隔を定めます。このプロパティは {{cssxref("border-collapse")}} が <code>separate</code> のときのみ適用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><code>border-spacing</code> の値は、表の外周部分にも使用され、表の境界線と最初/最後の列または行との間の距離は、 (縦または横の) 対応する <code>border-spacing</code> と、表の対応する側 (上下左右のいずれか) の {{cssxref("padding")}} の合計になります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>border-spacing</code> プロパティは、 <code>&lt;table&gt;</code> 要素の非推奨になった <code>cellspacing</code> 属性と同等ですが、任意で2つ目の値を指定して、左右方向と上下方向に異なる間隔を設定することができる点が異なります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;length&gt; */
+border-spacing: 2px;
+
+/* 左右の &lt;length&gt; | 上下の &lt;length&gt; */
+border-spacing: 1cm 2em;
+
+/* グローバル値 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+</pre>
+
+<p><code>border-spacing</code> プロパティは1つまたは2つの値で指定することができます。</p>
+
+<ul>
+ <li><code>&lt;length&gt;</code> 値が<strong>1つ</strong>指定された場合は、セル間の左右方向と上下方向の両方の間隔を定義します。</li>
+ <li><code>&lt;length&gt;</code> 値が<strong>2つ</strong>指定された場合は、最初の値がセル間の左右方向の間隔 (つまり、隣り合う<em>列</em>の間隔) を定義し、2番目の値がセル間の上下方向の間隔 (つまり、隣り合う<em>行</em>の間隔) を定義します。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値による間隔の大きさです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では表のセル間において、垂直方向に <code>.5em</code>、水平方向に <code>1em</code> の間隔を適用します。なお、外の辺においては、表の <code>padding</code> の値が <code>border-spacing</code> の値に追加されます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', 400, 200) }}</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('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.border-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border-collapse")}}, {{cssxref("border-style")}}</li>
+ <li><code>border-spacing</code> プロパティは HTML の {{htmlelement("table")}} 要素の出現方法を変更します。</li>
+</ul>
diff --git a/files/ja/web/css/border-start-end-radius/index.html b/files/ja/web/css/border-start-end-radius/index.html
new file mode 100644
index 0000000000..853988d0b7
--- /dev/null
+++ b/files/ja/web/css/border-start-end-radius/index.html
@@ -0,0 +1,113 @@
+---
+title: border-start-end-radius
+slug: Web/CSS/border-start-end-radius
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-start-end-radius
+  - 'recipe:css-property'
+  - writing modes
+translation_of: Web/CSS/border-start-end-radius
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>border-start-end-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+/* 値1つの場合は角を円にする */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-start-end-radius: 1em 2em;
+
+/* グローバル値 */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+</pre>
+
+<p>このプロパティは、要素の block-start と inline-end の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-top-right-radius")}} プロパティに対応します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-start-end-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理プロパティ: {{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-start-start-radius/index.html b/files/ja/web/css/border-start-start-radius/index.html
new file mode 100644
index 0000000000..9a1b326993
--- /dev/null
+++ b/files/ja/web/css/border-start-start-radius/index.html
@@ -0,0 +1,113 @@
+---
+title: border-start-start-radius
+slug: Web/CSS/border-start-start-radius
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-start-start-radius
+  - 'recipe:css-property'
+  - writing modes
+translation_of: Web/CSS/border-start-start-radius
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>border-start-start-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の論理的な境界の半径を定義します。これは要素の {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に応じて、物理的な境界の半径に対応付けられます。これは<a href="/ja/docs/Web/CSS/text-orientation">テキストの方向</a>や<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存せずにスタイルを構築する際に便利です。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+/* 値1つの場合は角を円にする */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* 値2つの場合は角を楕円にする */
+border-start-start-radius: 1em 2em;
+
+/* グローバル値 */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+</pre>
+
+<p>このプロパティは、要素の block-start と inline-start の間の角に影響します。すなわち、書字方向が <code>horizontal-tb</code> で <code>ltr</code> の方向であれば、 {{CSSxRef("border-top-left-radius")}} プロパティに対応します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Border_radius_with_vertical_text" name="Border_radius_with_vertical_text">縦書きの時の境界の丸め</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample("Border_radius_with_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-start-start-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理プロパティ: {{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-style/index.html b/files/ja/web/css/border-style/index.html
new file mode 100644
index 0000000000..1dd8bcc7a4
--- /dev/null
+++ b/files/ja/web/css/border-style/index.html
@@ -0,0 +1,246 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - Web
+  - border
+  - border-style
+  - 一括指定プロパティ
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p> <strong><code>border-style</code></strong> は <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a> の <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 上下 | 左右 */
+border-style: dotted solid;
+
+/* 上 | 左右 | 下 */
+border-style: hidden double dashed;
+
+/* 上 | 右 | 下 | 左 */
+border-style: none solid dotted dashed;
+
+/* グローバル値 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<p><code>border-style</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じスタイルが適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目のスタイルは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目のスタイルは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、スタイルはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）に適用される。</li>
+</ul>
+
+<p>それぞれの値は以下の一覧にあるキーワードです。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-style&gt;</code></dt>
+ <dd>枠線のスタイルを表すキーワード。以下の値を使用できます。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;"><code>hidden</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>none</code> 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;"><code>none</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>hidden</code> 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">1本の直線、実線を表示します。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">凹んだように見える境界線を表示します。 <code>ridge</code> の逆です。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">出っ張ったように見える境界線を表示します。 <code>groove</code> の逆です。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">要素が埋め込まれて見える境界線を表示します。 <code>outset</code> の逆です。 {{cssxref("border-collapse")}} が <code>collapsed</code> に設定されたテーブルのセルに適用すると、この値は <code>groove</code> のようにふるまいます。</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;">要素</div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>要素が出っ張って見える境界線を表示します。 <code>inset</code> の逆です。 {{cssxref("border-collapse")}} を <code>collapsed</code> に設定したテーブルセルに適用すると、この値は <code>ridge</code> のようにふるまいます。</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">プロパティのすべての値を指定したテーブル</h3>
+
+<p>プロパティのすべての値のサンプルです。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* テーブルの外見を定義 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style の例示用クラス */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}</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 Backgrounds', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>hidden</code> キーワードを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-top-color/index.html b/files/ja/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..8754521b7a
--- /dev/null
+++ b/files/ja/web/css/border-top-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-top-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-top-color</code></strong> は CSS のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers  language-css notranslate">/* &lt;color&gt; 値 */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentcolor;
+border-top-color: transparent;
+
+/* グローバル値 */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+</pre>
+
+<p><code>border-top-color</code> プロパティは1つの値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>上の境界線の色を定義します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="mybox"&gt;
+  &lt;p&gt;これは周囲に境界線があるボックスです。
+     なお、ボックスのその辺が
+     &lt;span class="redtext"&gt;赤&lt;/span&gt;になっています。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("&lt;color&gt;")}} 含められたので、形式的には削除された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-top-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.</li>
+ <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</li>
+ <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-top-left-radius/index.html b/files/ja/web/css/border-top-left-radius/index.html
new file mode 100644
index 0000000000..0fd505b09b
--- /dev/null
+++ b/files/ja/web/css/border-top-left-radius/index.html
@@ -0,0 +1,170 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - border-radius
+  - リファレンス
+translation_of: Web/CSS/border-top-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>border-top-left-radius</code></strong> プロパティは、要素の左上の角を丸めます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>丸みは円又は楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p>
+
+<div style="text-align: center;"><img alt="border-radius.png" class="default internal" src="/@api/deki/files/6132/=border-radius.png"></div>
+
+<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p>
+
+<div class="note">このプロパティの値が <code>border-top-left-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 角を円にする */
+/* border-top-left-radius: <em>radius</em> */
+border-top-left-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-left-radius: <em>horizontal</em> <em>vertical</em> */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+</pre>
+
+<p>値１つで指定する場合:</p>
+
+<ul>
+ <li>値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する円の半径を示します。</li>
+</ul>
+
+<p>値２つで指定する場合:</p>
+
+<ul>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>ライブ例</th>
+   <th>コード</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>境界として使用されている円弧
+    <pre class="brush:css">
+div {
+  border-top-left-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>境界として使用されている楕円の弧
+    <pre class="brush:css">
+div {
+  border-top-left-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="square-box-circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>ボックスは正方形。境界として使用されている円弧
+    <pre class="brush: css">
+div {
+  border-top-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="not-square-ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;"> </div>
+   </td>
+   <td>ボックスは正方形ではない。境界として使用されている楕円の弧
+    <pre class="brush: css">
+div {
+  border-top-left-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div id="clipped-border" style="background-color: rgb(250,20,70); background-clip: content-box; border: double 3px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div>
+   </td>
+   <td>背景色は境界で切り取られる
+    <pre class="brush: css">
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-top-left-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</p>
diff --git a/files/ja/web/css/border-top-right-radius/index.html b/files/ja/web/css/border-top-right-radius/index.html
new file mode 100644
index 0000000000..e207a4c5cf
--- /dev/null
+++ b/files/ja/web/css/border-top-right-radius/index.html
@@ -0,0 +1,172 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - border-radius
+  - リファレンス
+translation_of: Web/CSS/border-top-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>border-top-right-radius</code></strong> プロパティは、要素の右上の角を丸めます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p>
+
+<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="/@api/deki/files/6133/=border-top-right-radius.png"></div>
+
+<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p>
+
+<div class="note">このプロパティの値が <code>border-top-right-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */
+/* border-top-right-radius: <em>radius</em> */
+border-top-right-radius: 3px;
+
+/* 角を楕円にする */
+/* border-top-right-radius: <em>horizontal</em> <em>vertical</em> */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+</pre>
+
+<p>値１つで指定する場合:</p>
+
+<ul>
+ <li>値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する円の半径を示します。</li>
+</ul>
+
+<p>値２つで指定する場合:</p>
+
+<ul>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li>
+ <li>最初の値は {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("&lt;length&gt;")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>ライブ例</th>
+   <th>コード</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 40px; width: 100px; height: 100px;"></div>
+   </td>
+   <td>境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-top-right-radius: 40px 40px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 20px; width: 100px; height: 100px;"></div>
+   </td>
+   <td>境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-top-right-radius: 40px 20px;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 100px;"></div>
+   </td>
+   <td>ボックスは正方形。境界として使用されている円弧
+    <pre class="brush: css notranslate">
+div {
+  border-top-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;">
+    <div style="display: none;">.</div>
+    </div>
+   </td>
+   <td>ボックスは正方形ではない。境界として使用されている楕円の弧
+    <pre class="brush: css notranslate">
+div {
+  border-top-right-radius: 40%;
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td style="padding: 1.5em;">
+    <div style="border: black 3px double; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"></div>
+   </td>
+   <td>背景色は境界で切り取られる
+    <pre class="brush: css notranslate">
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.border-top-right-radius")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</p>
diff --git a/files/ja/web/css/border-top-style/index.html b/files/ja/web/css/border-top-style/index.html
new file mode 100644
index 0000000000..9932676ff5
--- /dev/null
+++ b/files/ja/web/css/border-top-style/index.html
@@ -0,0 +1,139 @@
+---
+title: border-top-style
+slug: Web/CSS/border-top-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-style
+  - border-top
+translation_of: Web/CSS/border-top-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-top-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* グローバル値 */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+</pre>
+
+<p><code>border-top-style</code> プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* 表の外見を定義 */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style の例のクラス */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 300, 200)}}</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 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.border-top-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}}</li>
+ <li>その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-top-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-top-width/index.html b/files/ja/web/css/border-top-width/index.html
new file mode 100644
index 0000000000..9d6d09ba3e
--- /dev/null
+++ b/files/ja/web/css/border-top-width/index.html
@@ -0,0 +1,148 @@
+---
+title: border-top-width
+slug: Web/CSS/border-top-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-top
+  - border-width
+translation_of: Web/CSS/border-top-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-top-width</code></strong> プロパティは、要素の上側の境界の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* &lt;length&gt; 値 */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* グローバルキーワード */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>明示的な非負の {{cssxref("&lt;length&gt;")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>細い境界線</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>中くらいの境界線</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>太い境界線</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', '100%')}}</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 Backgrounds', '#the-border-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-top-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}</li>
+ <li>他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-top/index.html b/files/ja/web/css/border-top/index.html
new file mode 100644
index 0000000000..1c5a2650f7
--- /dev/null
+++ b/files/ja/web/css/border-top/index.html
@@ -0,0 +1,139 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-top
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-top</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>他の一括指定プロパティと同様に、 <code>border-top</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p>
+
+<pre class="brush: css notranslate">border-top-style: dotted;
+border-top: thick green;
+</pre>
+
+<p>・・・は、実際には以下と同じです・・・</p>
+
+<pre class="brush: css notranslate">border-top-style: dotted;
+border-top: none thick green;
+</pre>
+
+<p>・・・そして、 <code>border-top</code> の前で設定された {{cssxref("border-top-style")}} の値は無視されます。 {{cssxref("border-top-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+</pre>
+
+<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-top-width")}} を参照してください。</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-top-style")}} を参照してください。</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-top-color")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Applying_a_top_border" name="Applying_a_top_border">上側の境界の適用</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  このボックスには上側に境界線があります。
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Applying_a_top_border')}}</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 Backgrounds', '#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>直接的な変更はないが、 {{cssxref("border-top-color")}} に適用される値が変更された。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>有意な変更点なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border-top")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-block")}}</li>
+ <li>{{cssxref("outline")}}</li>
+</ul>
diff --git a/files/ja/web/css/border-width/index.html b/files/ja/web/css/border-width/index.html
new file mode 100644
index 0000000000..a9b09f0205
--- /dev/null
+++ b/files/ja/web/css/border-width/index.html
@@ -0,0 +1,183 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 背景と境界
+  - Reference
+  - border
+  - border-width
+  - リファレンス
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-width</code></strong> プロパティは、要素の境界線の四辺すべての線の幅を設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div>
+
+<p>それぞれの辺は個別に、 {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, {{cssxref("border-left-width")}} や、書字方向による指定を利用して {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-end-width")}} で設定することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* &lt;length&gt; 値 */<em>
+</em>border-width: 4px;
+border-width: 1.2rem;<em>
+</em>
+/* 上下 | 左右 */
+border-width: 2px 1.5em;
+
+/* 上 | 左右 | 下 */
+border-width: 1px 2em 1.5cm;
+
+/* 上 | 右 | 下 | 左 */
+border-width: 1px 2em 0 4rem;
+
+/* グローバルキーワード */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+</pre>
+
+<p><code>border-width</code> プロパティは一つ、二つ、三つ、四つの値を使って指定することができます。</p>
+
+<ul>
+ <li>値が<strong>一つ</strong>指定された場合、<strong>全四辺</strong>に同じ幅が適用される。</li>
+ <li>値が<strong>二つ</strong>指定された場合、1つ目の幅は<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>三つ</strong>指定された場合、1つ目の幅は<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>四つ</strong>指定された場合、幅はそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>明示的な非負の {{cssxref("&lt;length&gt;")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">細い境界線</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">中くらいの境界線</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">太い境界線</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">値と長さの組み合わせ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p id="sval"&gt;
+    one value: 6px wide border on all 4 sides&lt;/p&gt;
+&lt;p id="bival"&gt;
+    two different values: 2px wide top and bottom border, 10px wide right and left border&lt;/p&gt;
+&lt;p id="treval"&gt;
+    three different values: 0.3em top, 9px bottom, and zero width right and left&lt;/p&gt;
+&lt;p id="fourval"&gt;
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em left&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#sval {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+#bival {
+  border: solid red;
+  border-width: 2px 10px;
+}
+#treval {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+#fourval {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 320, 320) }}</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 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>直接は変更なし。 CSS の {{cssxref("&lt;length&gt;")}} データ型拡張がこのプロパティに影響。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>値の意味が文書内で一定でなければならないという制限を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.border-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>境界線に関する一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
+ <li>境界線の幅に関するプロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/border/index.html b/files/ja/web/css/border/index.html
new file mode 100644
index 0000000000..bf684888c7
--- /dev/null
+++ b/files/ja/web/css/border/index.html
@@ -0,0 +1,153 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Shorthand property
+  - Layout
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p><span class="seoSummary"><strong><code>border</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、要素の境界を設定します。</span>これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 種類 */
+border: solid;
+
+/* 幅 | 種類 */
+border: 2px dotted;
+
+/* 種類 | 色 */
+border: outset #f33;
+
+/* 幅 | 種類 | 色 */
+border: medium dashed green;
+
+/* グローバル値 */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p><code>border</code> プロパティは、以下に挙げる値の1～3つを使用して指定します。値の順序は関係ありません。</p>
+
+<div class="note">
+<p><strong>注:</strong> style が指定されていない場合は境界線は表示されません。 style の既定値が <code>none</code> だからです。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="&lt;line-width>"><code>&lt;line-width&gt;</code></dt>
+ <dd>境界線の太さを設定します。指定されなかった場合は既定値の <code>medium</code> になります。 {{cssxref("border-width")}} を参照してください。</dd>
+ <dt id="&lt;line-style>"><code>&lt;line-style&gt;</code></dt>
+ <dd>境界線の種類を設定します。指定されなかった場合は既定値の <code>none</code> になります。 {{cssxref("border-style")}} を参照してください。</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>他の一括指定プロパティと同様、省略された部分値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。重要なことですが、 <code>border</code> は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり <code>none</code> に設定します。</p>
+
+<p><code>border</code> による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。</p>
+
+<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3>
+
+<p>境界線と<a href="/ja/docs/Web/CSS/outline">輪郭線</a>はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p>
+
+<ul>
+ <li>輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。</li>
+ <li>輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。</li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="ピンク色の出っ張った境界の設定">ピンク色の出っ張った境界の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;I have a border, an outline, AND a box shadow! Amazing, isn't it?&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_a_pink_outset_border')}}</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 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td><code>transparent</code> の<em>特別</em>扱いを廃止し、有効な {{cssxref("&lt;color&gt;")}} とした。実質的な影響はない。<br>
+    一括指定を使用してカスタム値を設定することはできないため、 <code>border</code> は {{cssxref("border-image")}} を初期値 (<code>none</code>) にリセットするようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>inherit</code> キーワードを受け付けるようになった。また、<code>transparent</code> を有効な色として受けつけるようになった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.border")}}</p>
diff --git a/files/ja/web/css/bottom/index.html b/files/ja/web/css/bottom/index.html
new file mode 100644
index 0000000000..87298e5afe
--- /dev/null
+++ b/files/ja/web/css/bottom/index.html
@@ -0,0 +1,153 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 位置指定レイアウト
+  - Reference
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/en-US/docs/Web/CSS/position"><ruby>位置指定要素<rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby></a>の垂直位置の設定に関与します。位置指定されていない要素には効果はありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>bottom</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p>
+
+<ul>
+ <li><code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されている場合、 <code>bottom</code> プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。</li>
+ <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>bottom</code> プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。</li>
+ <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>bottom</code> プロパティは sticky 制約の矩形を計算するために使用されます。</li>
+ <li><code>position</code> が <code>static</code> に設定されている場合、 <code>bottom</code> プロパティは<em>効果がありません</em>。</li>
+</ul>
+
+<p>{{cssxref("top")}} と <code>bottom</code> の両方が指定されており、 <code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されており、<em>かつ</em> {{cssxref("height")}} が未指定 (<code>auto</code> または <code>100%</code> のどちらか) の場合は、 <code>top</code> と <code>bottom</code> の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または <code>position</code> が <code>relative</code> に設定されていた場合は、 <code>top</code> プロパティが優先されて <code>bottom</code> プロパティは無視されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+bottom: 3px;
+bottom: 2.4em;
+
+/* 内包ブロックの高さに対する &lt;percentage&gt; */
+bottom: 10%;
+
+/* キーワード値 */
+bottom: auto;
+
+/* グローバル値 */
+bottom: inherit;
+bottom: initial;
+bottom: 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("top")}} プロパティに基づいて決まり、 <code>height: auto</code> は内容物の高さに基づいて決まります。また、 <code>top</code> も <code>auto</code> であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。</li>
+  <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("top")}} に基づきます。また、 <code>top</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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、 {{cssxref("position")}} が <code>absolute</code> と <code>fixed</code> であった場合の <code>bottom</code> プロパティの動作の違いを示します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This&lt;br&gt;is&lt;br&gt;some&lt;br&gt;tall,&lt;br&gt;tall,&lt;br&gt;tall,&lt;br&gt;tall,&lt;br&gt;tall&lt;br&gt;content.&lt;/p&gt;
+&lt;div class="fixed"&gt;&lt;p&gt;Fixed&lt;/p&gt;&lt;/div&gt;
+&lt;div class="absolute"&gt;&lt;p&gt;Absolute&lt;/p&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.2);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example','500','250')}}</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 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>sticky の位置の動作を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.bottom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("left")}}</li>
+ <li>対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-align/index.html b/files/ja/web/css/box-align/index.html
new file mode 100644
index 0000000000..6ad0ca4bc0
--- /dev/null
+++ b/files/ja/web/css/box-align/index.html
@@ -0,0 +1,146 @@
+---
+title: box-align
+slug: Web/CSS/box-align
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/box-align
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{warning("このプロパティは、当初の CSS Flexible Box Layout Module の草案段階のものでしたが、既により新しい標準のものが取って変わっています。")}}</div>
+
+<p><strong><code>box-align</code></strong> は、交差軸方向に子要素をどう整列させるかを定義するCSSプロパティです。ボックス内に余分なスペースがある場合にかぎり、その効果を確認することができます。</p>
+
+<p>現在の標準仕様に関する情報については、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を確認してください。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>配置する方向は、その要素の向き (水平か垂直か) に依存します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-align</code> プロパティは、 以下に記載する値で定義されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>ボックス内のコンテンツを先頭に寄せて、末尾に余分なスペースを残します。</dd>
+ <dt><code>center</code></dt>
+ <dd>ボックス内のコンテンツを中央に寄せて、余分なスペースを等分に分割し始端と終端に残します。</dd>
+ <dt><code>end</code></dt>
+ <dd>ボックス内のコンテンツを末尾に寄せて、先頭に余分なスペースを残します。</dd>
+ <dt><code>baseline</code></dt>
+ <dd>ボックス内のコンテンツが持つテキストのベースラインに整列させます。これはボックス内のコンテンツの向きが水平である場合にのみ適用されます。</dd>
+ <dt><code>stretch</code></dt>
+ <dd>ボックス内に余分なスペースがなくなるようコンテンツを引き伸ばします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;CSS box-align example&lt;/title&gt;
+&lt;style&gt;
+div.example {
+  display: box;                   /* 仕様書通り */
+  display: -moz-box;              /* Mozilla */
+  display: -webkit-box;           /* WebKit */
+
+  /* ボックスの高さを子要素より高くし、
+     box-pack のためのスペースを確保する */
+  height: 400px;
+
+  /* ボックスの幅を子要素より広くし、
+     box-align のためのスペースを確保する */
+  width: 300px;
+
+  /* 子要素の向きは垂直方向にする */
+  box-orient: vertical;           /* 仕様書通り */
+  -moz-box-orient: vertical;      /* Mozilla */
+  -webkit-box-orient: vertical;   /* WebKit */
+
+  /* 子要素をボックス内の水平方向に対して中央に整列させる */
+  box-align: center;              /* 仕様書通り */
+  -moz-box-align: center;         /* Mozilla */
+  -webkit-box-align: center;      /* WebKit */
+
+  /* 子要素をボックス内の終端に寄せる */
+  box-pack: end;                  /* 仕様書通り */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example &gt; p {
+  /* 子要素を親要素の幅より狭くし、
+  box-align のためのスペースを確保する */
+  width: 200px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div class="example"&gt;
+    &lt;p&gt;I will be second from the bottom of div.example, centered horizontally.&lt;/p&gt;
+    &lt;p&gt;I will be on the bottom of div.example, centered horizontally.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>配置の用途で <em>start</em> と定義されるボックスの辺は、ボックスの向きに依存します。</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>top</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertical</strong></th>
+   <td>left</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>start と反対方向の辺が <em>end</em> と定義されます。</p>
+
+<p>その要素の <code>align</code> 属性を使って整列する方向を指定した場合、スタイルで指定した値は無視されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout Module (W3C Working Draft)</a> {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Old Flexible Box Layout Module</a> {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.box-align")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("align-items")}}, {{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-pack")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-decoration-break/index.html b/files/ja/web/css/box-decoration-break/index.html
new file mode 100644
index 0000000000..b370a57727
--- /dev/null
+++ b/files/ja/web/css/box-decoration-break/index.html
@@ -0,0 +1,155 @@
+---
+title: box-decoration-break
+slug: Web/CSS/box-decoration-break
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 断片化
+  - Experimental
+  - Reference
+translation_of: Web/CSS/box-decoration-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-decoration-break</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/CSS_Fragmentation">断片</a>が複数の行、段、ページに渡る場合に描画する方法を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>指定された値は、次のプロパティの表示方法に影響を与えます。</p>
+
+<ul>
+ <li>{{Cssxref("background")}}</li>
+ <li>{{Cssxref("border")}}</li>
+ <li>{{Cssxref("border-image")}}</li>
+ <li>{{Cssxref("box-shadow")}}</li>
+ <li>{{Cssxref("clip-path")}}</li>
+ <li>{{Cssxref("margin")}}</li>
+ <li>{{Cssxref("padding")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* グローバル値 */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+</pre>
+
+<p><code>box-decoration-break</code> プロパティは、以下の一覧にあるキーワード値の一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>slice</code></dt>
+ <dd>要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。</dd>
+ <dt><code>clone</code></dt>
+ <dd>それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }} はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 {{ Cssxref("background-repeat") }}<code>: no-repeat</code> がついた背景画像であっても、複数回繰り返されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Inline_box_fragments" name="Inline_box_fragments">インラインボックスの断片化</h3>
+
+<p>改行を含むインライン要素は次のように整形されます。</p>
+
+<pre class="brush:css">.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+&lt;span class="example"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<p>... 結果は以下のようになります。</p>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p>
+
+<p>上記のスタイルに <code>box-decoration-break: clone</code> を追加すると、</p>
+
+<pre class="brush:css">-webkit-box-decoration-break: clone;
+box-decoration-break: clone;
+</pre>
+
+<p>... 以下のような結果になります。</p>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p>
+
+<p>ブラウザーで<a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">上記の二つのインラインの例を試してみる</a>ことができます。</p>
+
+<p>これはインライン要素に大きな <code>border-radius</code> の値を使用した例です。二番目の <code>"iM"</code> には、 <code>"i"</code> と <code>"M"</code> の間に改行があります。それに対して、最初の <code>"iM"</code> には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。</p>
+
+<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p>
+
+<p>ブラウザーで<a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">上の例を試してみる</a>ことができます。</p>
+
+<h3 id="Block_box_fragments" name="Block_box_fragments">ブロックボックスの断片化</h3>
+
+<p>上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。</p>
+
+<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p>
+
+<p>上記のブロックが三つの段に分割されると、次のような結果になります。</p>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p>
+
+<p>なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。</p>
+
+<p>そして、同じ例を <code>box-decoration-break: clone</code> で整形すると、次のような結果になります。</p>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p>
+
+<p>なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。</p>
+
+<p>ブラウザーで<a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">上の例を試してみる</a>ことができます。</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 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td>
+   <td>{{ Spec2('CSS3 Fragmentation') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.box-decoration-break")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-direction/index.html b/files/ja/web/css/box-direction/index.html
new file mode 100644
index 0000000000..3e39f80bc6
--- /dev/null
+++ b/files/ja/web/css/box-direction/index.html
@@ -0,0 +1,99 @@
+---
+title: box-direction
+slug: Web/CSS/box-direction
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+  - box-direction
+translation_of: Web/CSS/box-direction
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p>これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった <code>box-direction</code> は <code>flex-direction</code> に置き換えられたので、 <code>-moz-box-direction</code> は XUL でのみ使用されます。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-direction</code></strong> プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+box-direction: normal;
+box-direction: reverse;
+
+/* グローバル値 */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-direction</code> プロパティは以下の列挙されたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>ボックスが内容を先頭 (左または上の端) から配置します。</dd>
+ <dt><code>reverse</code></dt>
+ <dd>ボックスが内容を末尾 (右または下の端) から配置します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">.example {
+  /* bottom-to-top layout */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;           /* 仕様書通り */
+}
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>配置目的で <em>start</em> で示されるボックスの端は、ボックスの方向に依存します。</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>left</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertical</strong></th>
+   <td>top</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>start と反対側の辺は <em>end</em> で示します。</p>
+
+<p>書字方向が要素の <code>dir</code> 属性を使用して設定されている場合は、このスタイルは無視されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout Module (W3C Working Draft)</a> {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Old Flexible Box Layout Module</a> {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}</li>
+</ul>
+
+<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.properties.box-direction")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-orient")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+ <li>{{CSSxRef("box-align")}}</li>
+ <li>{{CSSxRef("flex-direction")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-flex-group/index.html b/files/ja/web/css/box-flex-group/index.html
new file mode 100644
index 0000000000..16d0cc0655
--- /dev/null
+++ b/files/ja/web/css/box-flex-group/index.html
@@ -0,0 +1,78 @@
+---
+title: box-flex-group
+slug: Web/CSS/box-flex-group
+tags:
+  - CSS
+  - CSS Property
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/box-flex-group
+---
+<p>{{CSSRef}}{{Non-standard_Header}}</p>
+
+<div class="blockIndicator warning">
+<p>これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><strong><code>box-flex-group</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。</p>
+
+<pre class="brush: css; no-line-numbers notranslate">/* &lt;integer&gt; 値 */
+box-flex-group: 1;
+box-flex-group: 5;
+
+/* グローバル値 */
+box-flex-group: inherit;
+box-flex-group: initial;
+box-flex-group: unset;
+</pre>
+
+<p>フレックスグループに割り当てられたフレックス要素について、最初のフレックスグループは 1 であり、より高い値は下位のフレックスグループを示します。初期値は 1 です。ボックスの余白が分割されるとき、ブラウザーは最初にすべての要素が最初のフレックスグループに入ると想定します。そのグループ内のそれぞれの要素は、同じフレックスグループ内の他の要素のフレックス係数と比較した、その余蘊そのフレックス係数に基づいて余白が与えられます。グループ内のすべてのフレックスな子の余白が最大まで増加した場合は、前のフレックスグループから残っている余白を使用して、次のフレックスグループ内の子に対して処理が繰り返されます。フレックスグループがなくなり、まだ余白が残っている場合は、 {{cssxref("box-pack")}} プロパティに従って、追加の余白が包含ボックス内で配分されます。</p>
+
+<p>推奨される子の余白が計算された後でボックスがあふれた場合は、追加の余白を追加するときに使用されるのと同様の方法で、フレックス要素からスペースが削除されます。各フレックスグループを順番に調べ、各要素のフレックス係数の比率に従ってスペースを削除します。要素は最小幅より小さくはなりません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-flex-group</code> プロパティは、任意の正の {{CSSxRef("&lt;integer&gt;")}} で指定します。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_usage_example" name="Simple_usage_example">シンプルな使用例</h3>
+
+<p>当初のフレックスボックスの仕様書では、 <code>box-flex-group</code> を使用してフレックスの子を異なるグループに割り当て、自由な空間を配分できるようになっていました。</p>
+
+<pre class="brush: css notranslate">article:nth-child(1) {
+  -webkit-box-flex-group: 1;
+}
+
+article:nth-child(2) {
+  -webkit-box-flex-group: 2;
+}</pre>
+
+<p>これは WebKit ベースのブラウザーのみが接頭辞つきで対応しましたが、仕様書のその後の版ではこれとは同等の機能ではありませんでした。代わりに、フレックスコンテナー内の空間の配分は、 {{cssxref("flex-basis")}}, {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} を使用して制御するようになっています。</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>
+
+<div>{{Compat("css.properties.box-flex-group")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-flex")}}</li>
+ <li>{{CSSxRef("box-ordinal-group")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-flex/index.html b/files/ja/web/css/box-flex/index.html
new file mode 100644
index 0000000000..5b179f5efb
--- /dev/null
+++ b/files/ja/web/css/box-flex/index.html
@@ -0,0 +1,114 @@
+---
+title: box-flex
+slug: Web/CSS/box-flex
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - box-flex
+translation_of: Web/CSS/box-flex
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p>このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の '<code>box-flex</code>' (このプロパティの元になったもの) または '<code>-webkit-box-flex</code>' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-box-flex</code></strong> および <strong><code>-webkit-box-flex</code></strong> プロパティは、 <code>-moz-box</code> または <code>-webkit-box</code> が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; 値 */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Global values */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+</pre>
+
+<div>{{CSSInfo}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-flex</code> プロパティは {{CSSxRef("&lt;number&gt;")}} として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;-moz-box-flex example&lt;/title&gt;
+    &lt;style&gt;
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example &gt; p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example &gt; p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div class="example"&gt;
+      &lt;p&gt;I will expand to fill extra space&lt;/p&gt;
+      &lt;p&gt;I will not expand&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>包含ボックスは利用可能な余白を、中のそれぞれの要素におけるフレックス値の比率で拡張します。</p>
+
+<p>フレックス値がゼロになっている中の要素は拡張されません。</p>
+
+<p>フレックス値がゼロではない中の要素が一つしかない場合は、有効な余白を埋めるまで拡張されます。</p>
+
+<p>同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。</p>
+
+<p>フレックス値が要素の <code>flex</code> 属性を使用して設定された場合は、スタイルは無視されます。</p>
+
+<p>包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの <code>equalsize</code> 属性を <code>always</code> の値に設定してください。この属性には対応する CSS プロパティはありません。</p>
+
+<p>包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば <code>height: 0</code>) と、同じゼロより大きい <code>box-flex</code> の値 (例えば <code>-moz-box-flex: 1</code>) を設定することです。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティは標準外の拡張です。<a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">古い CSS3 Flexbox 仕様書の草稿</a>には <code>box-flex</code> プロパティが定義されていましたが、この草稿はその後で置き換えられました。</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>
+
+<div>{{Compat("css.properties.box-flex")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-orient")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+ <li>{{CSSxRef("box-direction")}}</li>
+ <li>{{CSSxRef("flex")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-lines/index.html b/files/ja/web/css/box-lines/index.html
new file mode 100644
index 0000000000..b2c01cbf1f
--- /dev/null
+++ b/files/ja/web/css/box-lines/index.html
@@ -0,0 +1,78 @@
+---
+title: box-lines
+slug: Web/CSS/box-lines
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - 標準外
+translation_of: Web/CSS/box-lines
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p>これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-lines</code></strong> プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。</p>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+box-lines: single;
+box-lines: multiple;
+
+/* グローバル値 */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は <code>box-lines</code> プロパティを使用して変更することができます。既定値は <code>single</code> であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。</p>
+
+<p>しかし、 <code>multiple</code> の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。</p>
+
+<p>水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。</p>
+
+<p>同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。</p>
+
+<p>配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が <code>0</code> 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。</p>
+
+<div>{{CSSInfo}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-lines</code> プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>single</code></dt>
+ <dd>ボックスの要素は単一の行または列に配置されます。</dd>
+ <dt><code>multiple</code></dt>
+ <dd>ボックスの要素は複数の行または列に配置されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout Module (W3C Working Draft)</a> {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Old Flexible Box Layout Module</a> {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}</li>
+</ul>
+
+<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>
+
+<div>{{Compat("css.properties.box-lines")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-flex")}}</li>
+ <li>{{CSSxRef("box-flex-group")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-ordinal-group/index.html b/files/ja/web/css/box-ordinal-group/index.html
new file mode 100644
index 0000000000..7dd95b2029
--- /dev/null
+++ b/files/ja/web/css/box-ordinal-group/index.html
@@ -0,0 +1,80 @@
+---
+title: box-ordinal-group
+slug: Web/CSS/box-ordinal-group
+tags:
+  - CSS
+  - CSS Property
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/box-ordinal-group
+---
+<div>{{CSSRef}}{{Non-standard_Header}}
+<div class="blockIndicator warning">
+<p>これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+</div>
+
+<p><strong><code>box-ordinal-group</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;integer&gt; 値 */
+box-ordinal-group: 1;
+box-ordinal-group: 5;
+
+/* グローバル値 */
+box-ordinal-group: inherit;
+box-ordinal-group: initial;
+box-ordinal-group: unset;
+</pre>
+
+<p>順序付きグループは、ボックスの直接の子が現れる順序を制御するために、 {{CSSxRef("box-direction")}} プロパティとの組み合わせで使用されることがあります。 <code>box-direction</code> の計算値が normal である場合、ボックスは小さい番号が付いた順序付きグループから要素を表示し、それらの要素がコンテナーの左 (水平ボックスの場合) または上端 (垂直ボックスの場合) に現れます。同じ順序付きグループの要素は、ソースの文書ツリーに現れる順序で流れます。逆の方向では、順序付きグループは要素が逆に現れた場合を除き、順序付きグループは同じ順序で現れようとします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-ordinal-group</code> プロパティは任意の正の {{CSSxRef("&lt;integer&gt;")}} で指定されます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_usage_example" name="Basic_usage_example">基本的な使用方法の例</h3>
+
+<p>古いバージョンの仕様では、 <code>box-ordinal-group</code> はフレックスコンテナー内の子の表ジュ順序を変更するために含まれていました。</p>
+
+<pre class="brush: css notranslate">article:nth-child(1) {
+  -webkit-box-ordinal-group: 2
+  -moz-box-ordinal-group: 2
+  box-ordinal-group: 2
+}
+
+article:nth-child(2) {
+  -webkit-box-ordinal-group: 1
+  -moz-box-ordinal-group: 1
+  box-ordinal-group: 1
+}</pre>
+
+<p>現在のフレックスボックスの同等の機能は {{cssxref("order")}} です。</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.properties.box-ordinal-group")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-flex")}}</li>
+ <li>{{CSSxRef("box-flex-group")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-orient/index.html b/files/ja/web/css/box-orient/index.html
new file mode 100644
index 0000000000..35708ac6e3
--- /dev/null
+++ b/files/ja/web/css/box-orient/index.html
@@ -0,0 +1,110 @@
+---
+title: box-orient
+slug: Web/CSS/box-orient
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/box-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}
+<p class="blockIndicator warning">これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>box-orient</code></strong> プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。</p>
+
+<pre class="brush:css">/* キーワード値 */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* グローバル値 */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+</pre>
+
+<p>例えば、 XUL の {{XULElem("box")}} や {{XULElem("hbox")}} 要素は既定で中身を水平にレイアウトするのに対し、XUL の {{XULElem("vbox")}} 要素は既定で中身を垂直にレイアウトします。</p>
+
+<p>HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の {{CSSxRef("display")}} が {{CSSxRef("box")}} または {{CSSxRef("inline-box")}} の値であるものに対してのみ適用されます。</p>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-orient</code> プロパティは以下の列挙されたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>horizontal</code></dt>
+ <dd>ボックスは、その内容を水平にレイアウトします。</dd>
+ <dt><code>vertical</code></dt>
+ <dd>ボックスは、その内容を垂直にレイアウトします。</dd>
+ <dt><code>inline-axis</code> (HTML)</dt>
+ <dd>ボックスは、子をインライン軸に沿って表示します。</dd>
+ <dt><code>block-axis</code> (HTML)</dt>
+ <dd>ボックスは、子をブロック軸に沿って表示します。</dd>
+</dl>
+
+<p><code>inline-axis</code> と <code>block-axis</code> は書字方向に依存するキーワードであり、英語では、それぞれ <code>horizontal</code> と <code>vertical</code> に対応付けられます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.example {
+  display: -moz-box;                /* Mozilla */
+  display: -webkit-box;             /* WebKit */
+  display: box;                     /* 仕様書通り */
+
+  /* 子は垂直に向けられる */
+  -moz-box-orient: horizontal;      /* Mozilla */
+  -webkit-box-orient: horizontal;   /* WebKit */
+  box-orient: horizontal;           /* 仕様書通り */
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+  &lt;p&gt;I will be to the left of my sibling.&lt;/p&gt;
+  &lt;p&gt;I will be to the right of my sibling.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p><code>box-orient</code> プロパティは、例にある上記の二つの {{HTMLElement("p")}} セクションに作用して同じ行に表示するようにし、次のように表示します。</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}</p>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>XUL 要素では、方向は要素の {{XULAttr("orient")}} 属性を使用して設定されるので、このスタイルは無視されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Flexible Box Layout Module (W3C Working Draft)</a> {{note("この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Old Flexible Box Layout Module</a> {{note("Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。")}}</li>
+</ul>
+
+<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.properties.box-orient")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-direction")}}</li>
+ <li>{{CSSxRef("box-pack")}}</li>
+ <li>{{CSSxRef("box-align")}}</li>
+ <li>{{CSSxRef("flex-direction")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-pack/index.html b/files/ja/web/css/box-pack/index.html
new file mode 100644
index 0000000000..0a448172a9
--- /dev/null
+++ b/files/ja/web/css/box-pack/index.html
@@ -0,0 +1,144 @@
+---
+title: box-pack
+slug: Web/CSS/box-pack
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - box-pack
+translation_of: Web/CSS/box-pack
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p>これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>を参照してください。</p>
+</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>-moz-box-pack</code></strong> および <strong><code>-webkit-box-pack</code></strong> プロパティは、 <code>-moz-box</code> または <code>-webkit-box</code> がどのようにレイアウトの方向に内容をまとめるかを指定します。この効果はボックス内に余白がある場合のみ見ることができます。</p>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* グローバル値 */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+</pre>
+
+<p>レイアウトの方向は要素の方向、 horizontal または vertical に依存します。</p>
+
+<div>{{CSSInfo}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-pack</code> プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>ボックスは内容を先頭にまとめ、残りの余白を末尾に残します。</dd>
+ <dt><code>center</code></dt>
+ <dd>ボックスは内容を中央にまとめ、残りの余白を先頭と末尾に均等に分配します。</dd>
+ <dt><code>end</code></dt>
+ <dd>ボックスは内容を末尾にまとめ、残りの余白を先頭に残します。</dd>
+ <dt><code>justify</code></dt>
+ <dd>余白はそれぞれの子の間に均等に配分され、最初の子の前と最後の子の後には余白が配置されません。子が一つだけであれば、値が <code>start</code> であるのと同様に扱われます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* このボックスを子よりも高くし、
+     box-pack のための余裕を作る */
+  height: 300px;
+  /* このボックスを、水平方向に中央揃えされた
+     内容を表示するのに十分な幅にする */
+  width: 300px;
+
+  /* 子を垂直方向に並べる */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* 子をこのボックスの水平方向に中央揃えする */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* 子をこのボックスの下にまとめる */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* 子を親より狭くして、
+     box-align のための余裕を作る */
+  width: 200px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+  &lt;p&gt;I will be second from the bottom of div.example, centered horizontally.&lt;/p&gt;
+  &lt;p&gt;I will be on the bottom of div.example, centered horizontally.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<div>{{EmbedLiveSample('Examples', 310, 310)}}</div>
+
+<h2 id="メモ">メモ</h2>
+
+<p>まとめる目的で <em>start</em> で示されるボックスの端は、ボックスの向きと方向に依存します。</p>
+
+<table class="standard-table" style="text-align: center;">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th><strong>Normal</strong></th>
+   <th><strong>Reverse</strong></th>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Horizontal</strong></th>
+   <td>左</td>
+   <td>右</td>
+  </tr>
+  <tr>
+   <th style="text-align: right;"><strong>Vertical</strong></th>
+   <td>上</td>
+   <td>下</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>start と反対の端は <em>end</em> で表されます。</p>
+
+<p>まとめ方が要素の <code>pack</code> 属性を使用して設定されていた場合は、スタイルは無視されます。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティは標準外ですが、 <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">CSS3 Flexbox の早期の草稿</a>に似たプロパティが現れ、仕様書のより新しい版で置き換えられました。</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>
+
+<div>{{Compat("css.properties.box-pack")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("box-orient")}}</li>
+ <li>{{CSSxRef("box-direction")}}</li>
+ <li>{{CSSxRef("box-align")}}</li>
+</ul>
diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..241656e182
--- /dev/null
+++ b/files/ja/web/css/box-shadow/index.html
@@ -0,0 +1,192 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Property
+  - CSS Styles
+  - CSS スタイル
+  - CSS プロパティ
+  - CSS 背景と境界
+  - HTML Colors
+  - Reference
+  - Shadows
+  - Styles
+  - Styling HTML
+  - box-shadow
+  - 'recipe:css-property'
+  - 影
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a> は、 <code>box-shadow</code> を対話的に作成できるツールです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* 複数の影はカンマで区切る */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* グローバルキーワード */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+</pre>
+
+<p>単一の box-shadow の使用を指定してみます。</p>
+
+<ul>
+ <li>二つ、三つ、四つの <code><a href="/ja/docs/Web/CSS/length">&lt;length&gt;</a></code> 値
+
+  <ul>
+   <li>値が二つだけ与えられた場合、 <code><a href="#offset-x">&lt;offset-x&gt;&lt;offset-y&gt;</a></code> として解釈されます。</li>
+   <li>値が三つ与えられた場合、 <code><a href="#blur-radius">&lt;blur-radius&gt;</a></code> として解釈されます。</li>
+   <li>値が四つ与えられた場合、 <code><a href="#spread-radius">&lt;spread-radius&gt;</a></code> として解釈されます。</li>
+  </ul>
+ </li>
+ <li>任意で、 <code><a href="#inset">inset</a></code> キーワード</li>
+ <li>任意で、 <code><a href="#color">&lt;color&gt;</a></code> の値</li>
+</ul>
+
+<p>複数の影を指定するには、影をカンマで区切ったリストを提供します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="inset"><code>inset</code></dt>
+ <dd>指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。<br>
+ <code>inset</code> キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 <code>inset</code> な影は背景の上、境界や内容の下に描画されます。</dd>
+ <dt id="offset-x"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
+ <dd>これら２つの {{cssxref("&lt;length&gt;")}} 値は、影のオフセットを設定します。 <code>&lt;offset-x&gt;</code> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <code>&lt;offset-y&gt;</code> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("&lt;length&gt;")}} をご覧ください。<br>
+ どちらのオフセットも <code>0</code> である場合、影は要素の裏に配置されます。 (<code>&lt;blur-radius&gt;</code> や <code>&lt;spread-radius&gt;</code> が指定されている場合は、ぼかし効果が与えられるでしょう。)</dd>
+ <dt id="blur-radius"><code>&lt;blur-radius&gt;</code></dt>
+ <dd>これは３番目の {{cssxref("&lt;length&gt;")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は <code>0</code> となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。</dd>
+ <dd>
+ <blockquote>…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。</blockquote>
+ </dd>
+ <dt id="spread-radius"><code>&lt;spread-radius&gt;</code></dt>
+ <dd>4 番目に指定された {{cssxref("&lt;length&gt;")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は <code>0</code> と解釈され、影の大きさは要素の大きさと同じままとなります。</dd>
+ <dt id="color"><code>&lt;color&gt;</code></dt>
+ <dd>可能なキーワード及び記述方法については {{cssxref("&lt;color&gt;")}} の値をご覧ください。<br>
+ 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。</dd>
+</dl>
+
+<h3 id="Interpolation" name="Interpolation">補間</h3>
+
+<p>リストの中 (<code>none</code> は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし <code>inset</code> が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で <code>inset</code> と <code>inset</code> の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は <code>transparent</code> の色の影で補完し、すべての長さが <code>0</code> であり、 <code>inset</code> (の有無) が一致するものがあれば、より長いリストに一致します。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_three_shadows" name="Setting_three_shadows">3つの影の設定</h3>
+
+<p>この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。</p>
+
+<div id="Examples1">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;blockquote&gt;&lt;q&gt;You may shoot me with your words,&lt;br/&gt;
+You may cut me with your eyes,&lt;br/&gt;
+You may kill me with your hatefulness,&lt;br/&gt;
+But still, like air, I'll rise.&lt;/q&gt;
+&lt;p&gt;&amp;mdash; Maya Angelou&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">blockquote {
+  padding: 20px;
+  box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}</p>
+
+<h3 id="Setting_zero_for_offset_and_blur" name="Setting_zero_for_offset_and_blur">offset と blur をゼロに設定</h3>
+
+<div id="Examples2">
+<p><code>x-offset</code>, <code>y-offset</code>, <code>blur</code> がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 <code>border-radius</code> が 0 に設定されていた場合、影の角は同様に尖った形になります。 <code>border-radius</code> にそれ以外の値を設定した場合、角は丸みを帯びます。。</p>
+
+<p>影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウは<a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>の寸法に影響を与えません。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}</p>
+
+<h2 class="cleared" 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 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.box-shadow")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を用いた HTML 要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/box-sizing/index.html b/files/ja/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..345b21e0ab
--- /dev/null
+++ b/files/ja/web/css/box-sizing/index.html
@@ -0,0 +1,137 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - Boxes
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックスモデル
+  - Reference
+  - border-box
+  - box model
+  - box-sizing
+  - content-box
+  - height
+  - size
+  - width
+translation_of: Web/CSS/box-sizing
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-sizing</code></strong> プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS ボックスモデル</a>の既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 <code>width: 25%;</code> で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。</p>
+
+<p><code>box-sizing</code> プロパティは上記の振る舞いを調整するために使用できます。</p>
+
+<ul>
+ <li><code>content-box</code> は CSS box-sizing の既定の振る舞いです。要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になり、要素が100pxよりも広くなります。</li>
+ <li><code>border-box</code> は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 要素をレイアウトする際には、 <code>box-sizing</code> を <code>border-box</code> に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 <code>position: relative</code> または <code>position: absolute</code> を使用する場合、 <code>box-sizing: content-box</code> を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>box-sizing</code> プロパティは、以下のいずれか1つのキーワードを選択して定義します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>これは、 CSS 標準仕様で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば <code>.box {width: 350px; border: 10px solid black;}</code> は 370px の幅のボックスを描画します。</dd>
+ <dd>この場合、それぞれの要素の寸法は、 <em>幅 = コンテンツの幅</em>、<em>高さ = コンテンツの高さ</em> として計算されます（境界線やパディングの値を除く）。</dd>
+ <dt><code>border-box</code></dt>
+ <dd>{{Cssxref("width")}} および {{Cssxref("height")}} プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば <code>.box {width: 350px; border: 10px solid black;}</code> は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために <code>border-box</code> を使用することはできません。</dd>
+ <dd>この場合、それぞれの要素の寸法は、 <em>幅 = 境界線 + パディング + コンテンツの幅</em>、 <em>高さ = 境界線 + パディング + コンテンツの高さ</em> として計算されます。</dd>
+</dl>
+
+<h2 id="公式定義">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Box_sizes_with_content-box_and_border-box" name="Box_sizes_with_content-box_and_border-box">content-box と border-box のボックスサイズ</h3>
+
+<p>この例では、2つの <code>box-sizing</code> の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
+     全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
+     コンテンツ領域の幅: 160px
+     コンテンツ領域の高さ: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* 全体の幅: 160px
+     全体の高さ: 80px
+     コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
+     コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}</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 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.box-sizing")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデル</a></li>
+</ul>
diff --git a/files/ja/web/css/break-after/index.html b/files/ja/web/css/break-after/index.html
new file mode 100644
index 0000000000..2e846d7a87
--- /dev/null
+++ b/files/ja/web/css/break-after/index.html
@@ -0,0 +1,259 @@
+---
+title: break-after
+slug: Web/CSS/break-after
+tags:
+  - CSS
+  - CSS Fragmentation
+  - CSS Multi-column Layout
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/break-after
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>break-after</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、生成されたボックスの後で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 一般の区切り値 */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* 改ページ値 */
+break-after: avoid-page;
+break-after: page;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* 段区切り値 */
+break-after: avoid-column;
+break-after: column;
+
+/* 領域区切り値 */
+break-after: avoid-region;
+break-after: region;
+
+/* グローバル値 */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+</pre>
+
+<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の <code>break-after</code> の値、次の要素の {{cssxref("break-before")}} の値、包含要素の {{cssxref("break-inside")}} の値です。</p>
+
+<p>区切られるかどうかを判断するために、以下の規則が適用されます。</p>
+
+<ol>
+ <li>考慮される三つの値の中の何れかに<em>区切りを強制する値</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, <code>region</code> の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 <code>break-before</code> の値は <code>break-after</code> の値より優先し、それは更に <code>break-inside</code> よりも優先します)。</li>
+ <li>考慮される三つの値の中に<em>区切りを防止する値</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code> の何れか) が含まれていた場合は、その場所で区切りは適用されません。</li>
+</ol>
+
+<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>break-after</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<h4 id="Generic_break_values" name="Generic_break_values">一般の区切り値</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。</dd>
+ <dt><code>always</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。</dd>
+ <dt><code>all</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。</dd>
+</dl>
+
+<h4 id="Page_break_values" name="Page_break_values">改ページ値</h4>
+
+<dl>
+ <dt><code>avoid-page</code></dt>
+ <dd>該当するボックスの直後の改ページを禁止します。</dd>
+ <dt><code>page</code></dt>
+ <dd>該当するボックスの直後で改ページを行います。</dd>
+ <dt><code>left</code></dt>
+ <dd>該当するボックスの直後で一つまたは二つの改ページを行い、次のページが左ページになるようにします。</dd>
+ <dt><code>right</code></dt>
+ <dd>該当するボックスの直後で一つまたは二つの改ページを行い、次のページが右ページになるようにします。</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)</dd>
+</dl>
+
+<h4 id="Column_break_values" name="Column_break_values">段区切り値</h4>
+
+<dl>
+ <dt><code>avoid-column</code></dt>
+ <dd>該当するボックスの直後の段区切りを禁止します。</dd>
+ <dt><code>column</code></dt>
+ <dd>該当するボックスの直後で段区切りを行います。</dd>
+</dl>
+
+<h4 id="領域区切り値">領域区切り値</h4>
+
+<dl>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後の領域区切りを禁止します。</dd>
+ <dt><code>region</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直後で領域区切りを行います。</dd>
+</dl>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p>互換性のため、古い {{cssxref("page-break-after")}} はブラウザーから <code>break-after</code> の別名として扱われます。これにより、 <code>page-break-after</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-after</th>
+   <th scope="col">break-after</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>ブラウザーにおいては <code>always</code> の値は <code>page-break-*</code> において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では <code>always</code> の値ではなく <code>page</code> の別名となっています。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Breaking_into_neat_columns" name="Breaking_into_neat_columns">きれいに段に分割</h3>
+
+<p>次の例では、すべての段にまたがる <code>&lt;h1&gt;</code> (<code>column-span: all</code> を使用して実現) と、一連の <code>&lt;h2&gt;</code> と段落を <code>column-width: 200px</code> を使用して段組みレイアウトしたコンテナーを用意しています。</p>
+
+<p>既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 <code>break-after: column</code> を <code>&lt;p&gt;</code> 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に <code>&lt;h2&gt;</code> がきちんと配置されます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h1&gt;Main heading&lt;/h1&gt;
+
+  &lt;h2&gt;Subheading&lt;/h2&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.&lt;/p&gt;
+
+  &lt;h2&gt;Subheading&lt;/h2&gt;
+
+  &lt;p&gt;Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.&lt;/p&gt;
+
+  &lt;h2&gt;Subheading&lt;/h2&gt;
+
+  &lt;p&gt;Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
+
+  &lt;h2&gt;Subheading&lt;/h2&gt;
+
+  &lt;p&gt;In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h2 {
+  font-size: 1.2rem;
+  color: red;
+  letter-spacing: 1px;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}</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 Fragmentation', '#break-between', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td><code>recto</code> および <code>verso</code> キーワードを追加。このプロパティのメディア種別を <code>paged</code> から {{xref_cssvisual}} に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>領域区切りを扱うようにプロパティを拡張した。 <code>avoid-region</code> および <code>region</code> キーワードを追加した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義。 CSS 2.1 の {{cssxref("page-break-after")}} プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<h3 id="Support_in_multi-column_layout" name="Support_in_multi-column_layout">段組みレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.break-after.multicol_context")}}</p>
+
+<h3 id="Support_in_paged_media" name="Support_in_paged_media">ページメディアでの対応</h3>
+
+<p>{{Compat("css.properties.break-after.paged_context")}}</p>
diff --git a/files/ja/web/css/break-before/index.html b/files/ja/web/css/break-before/index.html
new file mode 100644
index 0000000000..f52d6657d0
--- /dev/null
+++ b/files/ja/web/css/break-before/index.html
@@ -0,0 +1,193 @@
+---
+title: break-before
+slug: Web/CSS/break-before
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 断片化
+  - CSS 段組みレイアウト
+  - Reference
+translation_of: Web/CSS/break-before
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>break-before</code></strong> プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+
+<pre class="brush:css no-line-numbers">/* 一般の区切り値 */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* 改ページ値 */
+break-before: avoid-page;
+break-before: page;
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* 段区切り値 */
+break-before: avoid-column;
+break-before: column;
+
+/* 領域区切り値 */
+break-before: avoid-region;
+break-before: region;
+
+/* グローバル値 */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+</pre>
+
+<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の <code>break-before</code> の値、包含要素の {{cssxref("break-inside")}} の値です。</p>
+
+<p>区切られるかどうかを判断するために、以下の規則が適用されます。</p>
+
+<ol>
+ <li>考慮される三つの値の中の何れかに<em>区切りを強制する値</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, <code>region</code> の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 <code>break-before</code> の値は <code>break-after</code> の値より優先し、それは更に <code>break-inside</code> よりも優先します)。</li>
+ <li>考慮される三つの値の中に<em>区切りを防止する値</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code> の何れか) が含まれていた場合は、その場所で区切りは適用されません。</li>
+</ol>
+
+<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>break-before</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<h4 id="Generic_break_values" name="Generic_break_values">一般の区切り値</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。</dd>
+ <dt><code>always</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。</dd>
+ <dt><code>all</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。</dd>
+</dl>
+
+<h4 id="Page_break_values" name="Page_break_values">改ページ値</h4>
+
+<dl>
+ <dt><code>avoid-page</code></dt>
+ <dd>該当するボックスの直前の改ページを禁止します。</dd>
+ <dt><code>page</code></dt>
+ <dd>該当するボックスの直前で改ページを行います。</dd>
+ <dt><code>left</code></dt>
+ <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。</dd>
+ <dt><code>right</code></dt>
+ <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)</dd>
+</dl>
+
+<h4 id="Column_break_values" name="Column_break_values">段区切り値</h4>
+
+<dl>
+ <dt><code>avoid-column</code></dt>
+ <dd>該当するボックスの直前の段区切りを禁止します。</dd>
+ <dt><code>column</code></dt>
+ <dd>該当するボックスの直前で段区切りを行います。</dd>
+</dl>
+
+<h4 id="領域区切り値">領域区切り値</h4>
+
+<dl>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前の領域区切りを禁止します。</dd>
+ <dt><code>region</code> {{experimental_inline}}</dt>
+ <dd>該当するボックスの直前で領域区切りを行います。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p>互換性のため、古い {{cssxref("page-break-before")}} はブラウザーから <code>break-before</code> の別名として扱われます。これにより、 <code>page-break-before</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">page-break-before</th>
+   <th scope="col">break-before</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>ブラウザーにおいては <code>always</code> の値は <code>page-break-*</code> において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では <code>always</code> の値ではなく <code>page</code> の別名となっています。</p>
+</div>
+
+<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 Fragmentation', '#break-between', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td><code>recto</code> および <code>verso</code> キーワードを追加。このプロパティのメディア種別を <code>paged</code> から {{xref_cssvisual}} に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>領域区切りを扱うようにプロパティを拡張した。 <code>avoid-region</code> および <code>region</code> キーワードを追加した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義。 CSS 2.1 の {{cssxref("page-break-before")}} プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<h3 id="Support_in_multi-column_layout" name="Support_in_multi-column_layout">段組みレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.break-before.multicol_context")}}</p>
+
+<h3 id="Support_in_paged_media" name="Support_in_paged_media">ページ化メディアでの対応</h3>
+
+<p>{{Compat("css.properties.break-before.paged_context")}}</p>
diff --git a/files/ja/web/css/break-inside/index.html b/files/ja/web/css/break-inside/index.html
new file mode 100644
index 0000000000..3f0781500a
--- /dev/null
+++ b/files/ja/web/css/break-inside/index.html
@@ -0,0 +1,207 @@
+---
+title: break-inside
+slug: Web/CSS/break-inside
+tags:
+  - CSS
+  - CSS Fragmentation
+  - CSS Multi-column Layout
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/break-inside
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>break-inside</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、生成されたボックスの途中で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* グローバル値 */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+</pre>
+
+<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の <code>break-inside</code> の値です。</p>
+
+<p>区切られるかどうかを判断するために、以下の規則が適用されます。</p>
+
+<ol>
+ <li>考慮される三つの値の中の何れかに<em>区切りを強制する値</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, <code>region</code> の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 <code>break-before</code> の値は <code>break-after</code> の値より優先し、それは更に <code>break-inside</code> よりも優先します)。</li>
+ <li>考慮される三つの値の中に<em>区切りを防止する値</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code> の何れか) が含まれていた場合は、その場所で区切りは適用されません。</li>
+</ol>
+
+<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>break-inside</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>主ボックスの途中の改ページを禁止します。</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>主ボックスの途中の段区切りを禁止します。</dd>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>主ボックスの途中の領域区切りを禁止します。</dd>
+</dl>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p>互換性のため、ブラウザーは古い {{cssxref("page-break-inside")}} を <code>break-inside</code> の別名として扱います。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-inside</th>
+   <th scope="col">break-inside</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Avoiding_breaking_inside_a_figure" name="Avoiding_breaking_inside_a_figure">図の中の改行を防ぐ</h3>
+
+<p>次の例では、すべての段にまたがる <code>&lt;h1&gt;</code> (<code>column-span: all</code> を使用して実現) と、 <code>column-width: 200px</code> を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む <code>&lt;figure&gt;</code> もあります。</p>
+
+<p>既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 <code>break-inside: avoid</code> を <code>&lt;figure&gt;</code> に設定しています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h1&gt;Main heading&lt;/h1&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus. Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.&lt;/p&gt;
+
+  &lt;figure&gt;
+    &lt;img src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png"&gt;
+    &lt;figcaption&gt;The Firefox logo — fox wrapped around the world&lt;/figcaption&gt;
+  &lt;/figure&gt;
+
+  &lt;p&gt;Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie nec nisi.&lt;/p&gt;
+
+  &lt;p&gt;In finibus viverra enim vel suscipit. Quisque consequat velit eu orci malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl, sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  font-family: helvetica, arial, sans-serif;
+}
+
+body {
+  width: 80%;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 3rem;
+  letter-spacing: 2px;
+  column-span: all;
+}
+
+h1 + p {
+  margin-top: 0;
+}
+
+p {
+  line-height: 1.5;
+  break-after: column;
+}
+
+figure {
+  break-inside: avoid;
+}
+
+img {
+  max-width: 70%;
+  display: block;
+  margin: 0 auto;
+}
+
+figcaption {
+  font-style: italic;
+  font-size: 0.8rem;
+  width: 70%;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Avoiding_breaking_inside_a_figure', '100%', 600)}}</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 Fragmentation', '#break-within', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>領域区切りを扱うようにプロパティを拡張した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.break-inside", 4)}}</p>
+
+<h3 id="Notes_on_compatibility" name="Notes_on_compatibility">互換性のメモ</h3>
+
+<p>Forefox 65 以前では、より古い {{cssxref("page-break-inside")}} プロパティがページと同様に段の分割も防止するするよう動作します。後方互換性のために両方のプロパティを追加してください。</p>
+
+<p>古い WebKit ベースのブラウザーでは、接頭辞付きの <code>-webkit-column-break-inside</code> プロパティで段区切りを制御することができます。</p>
diff --git a/files/ja/web/css/calc()/index.html b/files/ja/web/css/calc()/index.html
new file mode 100644
index 0000000000..2eb9293a88
--- /dev/null
+++ b/files/ja/web/css/calc()/index.html
@@ -0,0 +1,167 @@
+---
+title: calc()
+slug: Web/CSS/calc()
+tags:
+  - CSS
+  - CSS 値と単位
+  - CSS 関数
+  - calc
+  - ウェブ
+  - リファレンス
+  - レイアウト
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>calc()</code></strong> 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;integer&gt;")}} が利用できる場所ならば使用できます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* プロパティ: calc(式) */
+width: calc(100% - 80px);</pre>
+
+<p><code>calc()</code> 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">演算子の優先順位の規則</a>を使用します。</p>
+
+<dl>
+ <dt><code>+</code></dt>
+ <dd>加算です。</dd>
+ <dt><code>-</code></dt>
+ <dd>減算です。</dd>
+ <dt><code>*</code></dt>
+ <dd>乗算です。引数の少なくとも1つは {{cssxref("&lt;number&gt;")}} でなければなりません。</dd>
+ <dt><code>/</code></dt>
+ <dd>除算です。右側は {{cssxref("&lt;number&gt;")}} でなければなりません。</dd>
+</dl>
+
+<p>式のオペランドは任意の {{cssxref("&lt;length&gt;")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。</p>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<ul>
+ <li><code>+</code> 演算子と <code>-</code> 演算子は前後に空白文字をつける必要があります。たとえば、 <code>calc(50% -8px)</code> と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 <code>calc(50% - 8px)</code> はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 <code>calc(8px + -50%)</code> は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。</li>
+ <li><code>*</code> 演算子と <code>/</code> 演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。</li>
+ <li>ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。</li>
+ <li>自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 <code>auto</code> が指定されたものとして扱います。</li>
+ <li><code>calc()</code> 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Positioning_an_object_on_screen_with_a_margin" name="Positioning_an_object_on_screen_with_a_margin">余白をつけてオブジェクトを画面に配置する</h3>
+
+<p><code>calc()</code> はマージン設定を持つボックス配置を容易にします。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は40ピクセル空けます。</p>
+
+<pre class="brush: css notranslate">.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banner"&gt;これはバナーです！&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}</p>
+
+<h3 id="Automatically_sizing_form_fields_to_fit_their_container" name="Automatically_sizing_form_fields_to_fit_their_container">フォーム項目のコンテナーへの自動フィット</h3>
+
+<p><code>calc()</code> はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。</p>
+
+<p>いくつかの CSS を見てみましょう。</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>ここで、フォームはウィンドウの取り得る幅の1/6を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 <code>calc()</code> を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="formbox"&gt;
+  &lt;label&gt;Type something:&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}</p>
+
+<h3 id="Nested_calc_with_CSS_Variables" name="Nested_calc_with_CSS_Variables">入れ子の <code>calc()</code> と CSS 変数</h3>
+
+<p><code>calc()</code> で <a href="/ja/docs/Web/CSS/CSS_Variables">CSS 変数</a>を使用することもできます。以下のコードを見てみてください。</p>
+
+<pre class="brush: css notranslate">.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}</pre>
+
+<p>すべての変数が展開された後、 <code>widthC</code> の値は <code>calc( calc( 100px / 2) / 2)</code> になります。この値が .foo の width プロパティに割り当てられるとき、内部にあるすべての <code>calc()</code> は (入れ子の深さにかかわらず) 単なる括弧になり、<code>width</code> プロパティの値は最終的に <code>calc( ( 100px / 2) / 2)</code>、すなわち <code>25px</code> になります。要するに、<code>calc()</code> の内部にある <code>calc()</code> は単なる括弧と同等です。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>calc()</code> をテキストの大きさを制御するために使用するとき、値の一つに<a href="/ja/docs/Web/CSS/length#Relative_length_units">相対的な長さの単位</a>を含むことを確認してください。</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>これによって、ページが拡大縮小されたときにテキストの寸法が拡大縮小されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.calc")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
+</ul>
diff --git a/files/ja/web/css/caption-side/index.html b/files/ja/web/css/caption-side/index.html
new file mode 100644
index 0000000000..8628282eb2
--- /dev/null
+++ b/files/ja/web/css/caption-side/index.html
@@ -0,0 +1,140 @@
+---
+title: caption-side
+slug: Web/CSS/caption-side
+tags:
+  - CSS
+  - CSS Property
+  - CSS Tables
+  - Reference
+translation_of: Web/CSS/caption-side
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>caption-side</code></strong> は、表 ({{htmlelement("table")}}) の {{HTMLElement("caption")}} の配置位置を指定する <a href="/ja/docs/CSS" title="CSS">CSS</a> プロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+
+
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* 方向を示す値 */
+caption-side: top;
+caption-side: bottom;
+
+/* 警告: 非標準の値 */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* グローバル値 */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+</pre>
+
+<p>このプロパティの値は、表の {{cssxref('writing-mode')}} に対して相対的です。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>キャプションボックスを表の上に配置することを示すキーワードです。</dd>
+ <dt><code>bottom</code></dt>
+ <dd>キャプションボックスを表の下に配置することを示すキーワードです。</dd>
+ <dt><code>left</code> {{non-standard_inline}}</dt>
+ <dd>キャプションボックスを表の左に配置することを示すキーワードです。</dd>
+ <dd>{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}</dd>
+ <dt><code>right</code> {{non-standard_inline}}</dt>
+ <dd>キャプションボックスを表の右に配置することを示すキーワードです。</dd>
+ <dd>{{Note("この値は CSS 2 で提案されましたが、最終的な CSS 2.1 仕様から削除されており、非標準です。")}}</dd>
+ <dt><code>top-outside</code> {{non-standard_inline}}</dt>
+ <dd>キャプションボックスを表の上に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。<br>
+ {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 <code>top</code> について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}</dd>
+ <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
+ <dd>キャプションボックスを表の下に配置することを示すキーワードです。ただし、キャプションの幅や水平方向の配置は、表の水平方向のレイアウトに束縛されません。<br>
+ {{Note("CSS 2.1 仕様では、CSS 2 仕様で値 <code>bottom</code> について異なる動作を説明していたとの注記があります。この動作は将来の仕様書で、この値を使用して再導入する予定です。")}}</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="top"&gt;
+  &lt;caption&gt;Caption ABOVE the table&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Some data&lt;/td&gt;
+    &lt;td&gt;Some more data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;br&gt;
+
+&lt;table class="bottom"&gt;
+  &lt;caption&gt;Caption BELOW the table&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Some data&lt;/td&gt;
+    &lt;td&gt;Some more data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+</pre>
+
+<h3 id="出力">出力</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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('CSS Logical Properties', '#caption-side', 'caption-side')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>値 <code>top</code> および <code>bottom</code> は、<code>writing-mode</code> の値に対して相対的であることを定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>最初の定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+
+
+<p>{{Compat("css.properties.caption-side")}}</p>
diff --git a/files/ja/web/css/caret-color/index.html b/files/ja/web/css/caret-color/index.html
new file mode 100644
index 0000000000..9ec9500f78
--- /dev/null
+++ b/files/ja/web/css/caret-color/index.html
@@ -0,0 +1,124 @@
+---
+title: caret-color
+slug: Web/CSS/caret-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - HTML 整形
+  - HTML 色
+  - Reference
+  - contenteditable
+  - テキスト編集
+  - 入力
+  - 編集
+translation_of: Web/CSS/caret-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>caret-color</code></strong> プロパティは、 {{HTMLElement("input")}} または {{htmlattrxref("contenteditable")}} 属性のついた要素などの中ので、次に入力された文字が挿入される位置を示す視覚的なマーカーである入力キャレットの色を設定します。</span>キャレットは {{HTMLElement("input")}} 要素や {{htmlattrxref("contenteditable")}} 属性が付いた要素に現れます。ふつうキャレットは細い垂直線で、気づきやすくなるように点滅します。既定では黒ですが、このプロパティで色を変更することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>なお、入力キャレットはキャレットのうちの一種類にすぎません。例えば、多くのブラウザーには「ナビゲーションキャレット」があり、入力キャレットと同様に動きますが、編集できないテキストの中を移動できるものがあります。一方、マウスカーソルが、 {{cssxref("cursor")}} プロパティが <code>auto</code> のときにテキスト上に移動した場合や、 <code>cursor</code> プロパティが <code>text</code> または <code>vertical-text</code> の場合に、キャレットのように見えることがありますが、キャレットではありません (カーソルです)。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+caret-color: auto;
+caret-color: transparent;
+caret-color: currentColor;
+
+/* &lt;color&gt; 値 */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントはキャレットの適切な色を選択します。これは一般的に {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}} ですが、ユーザーエージェントは視認性や周囲のコンテンツとのコントラストを高めるために、 <code>currentcolor</code>、背景色、影の色、その他の要因を考慮して、別な色を選択することがあります。
+ <div class="note">
+ <p><strong>メモ:</strong> ユーザーエージェントは <code>auto</code> の値に <code>currentcolor</code> (通常はアニメーション可能) を使用することがありますが、 <code>auto</code> はトランジションやアニメーションで補完されません。</p>
+ </div>
+ </dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>キャレットの色です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input value="この入力欄は既定のキャレットを使用します。" size="64"/&gt;
+&lt;input class="custom" value="キャレットが独自の色です！" size="64"/&gt;
+&lt;p contenteditable class="custom"&gt;この段落は編集可能であり、
+   同様にキャレットが独自の色です！&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  caret-color: auto;
+  display: block;
+  margin-bottom: .5em;
+}
+
+input.custom {
+  caret-color: red;
+}
+
+
+p.custom {
+  caret-color: green;
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 500, 200)}}</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 UI", "#propdef-caret-color", "caret-color")}}</td>
+   <td>{{Spec2("CSS3 UI")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.caret-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} 要素</li>
+ <li>要素のテキストを編集可能にする HTML の {{htmlattrxref("contenteditable")}} 属性</li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/cascade/index.html b/files/ja/web/css/cascade/index.html
new file mode 100644
index 0000000000..fe6ecec340
--- /dev/null
+++ b/files/ja/web/css/cascade/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS カスケード入門
+slug: Web/CSS/Cascade
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - Reference
+  - カスケード
+  - ガイド
+  - スタイル
+  - スタイルシート
+  - レイアウト
+translation_of: Web/CSS/Cascade
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>カスケード</strong>は、異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは<em>カスケーディング</em>スタイルシートという名前で強調されているように、 CSS の中心を占めるものです。<span class="seoSummary">この記事では、カスケードとは何か、 {{Glossary("CSS")}} <a href="/ja/docs/Web/API/CSSStyleDeclaration">宣言</a>をカスケードする順番、そしてウェブ開発者にどのように影響するかを説明します。</span></p>
+
+<h2 id="Which_CSS_entities_participate_in_the_cascade" name="Which_CSS_entities_participate_in_the_cascade">どの CSS エンティティがカスケードに関係するか</h2>
+
+<p>CSS 宣言のみが、つまりプロパティ/値の組だけが、カスケードに加わります。つまり、宣言以外のエンティティを含む <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>、例えば<em>記述子</em>を含む {{ cssxref("@font-face")}} などは、カスケードには加わりません。これらの場合、カスケードには全体としての @-規則のみがカスケードに加わります。ここで、 <code>@font-face</code> は <code><a href="/ja/docs/Web/CSS/@font-face/font-family">font-family</a></code> 記述子で識別されます。いくつかの <code>@font-face</code> 規則に同じ記述子が定義されていた場合は、全体から見て、最も適切な <code>@font-face</code> が考慮されます。</p>
+
+<p>大部分の @-規則 — {{cssxref("@media")}}, {{cssxref("@document")}}, {{cssxref("@supports")}} の中など — に含まれる宣言はカスケードに加わりますが、 {{cssxref("@keyframes")}} に含まれる宣言は加わりません。 <code>@font-face</code> と同様に、 @-規則全体のみがカスケードアルゴリズムによって選択されます。</p>
+
+<p>最後に、 {{cssxref("@import")}} および {{cssxref("@charset")}} は特定のアルゴリズムに従い、カスケードアルゴリズムには影響を与えないことに注意してください。</p>
+
+<h2 id="Origin_of_CSS_declarations" name="Origin_of_CSS_declarations">CSS 宣言のオリジン</h2>
+
+<p>CSS カスケードアルゴリズムの役割は、 CSS プロパティの正しい値を決定するために CSS 宣言を選択することです。 CSS 宣言は、 <strong>{{anch("User-agent stylesheets", "ユーザーエージェントスタイルシート")}}</strong>, <strong>{{anch("Author stylesheets", "ページ作成者スタイルシート")}}</strong>, <strong>{{anch("User stylesheets", "ユーザースタイルシート")}}</strong> など、さまざまなものに由来します。</p>
+
+<p>スタイルシートはこれらの異なる起源に由来しますが、それらは範囲が重複しています。これを機能させるために、カスケードアルゴリズムはそれらの相互作用を定義します。</p>
+
+<h3 id="User-agent_stylesheets" name="User-agent_stylesheets">ユーザーエージェントスタイルシート</h3>
+
+<p>ブラウザーには、任意の文書に既定のスタイルを提供する基本的なスタイルシートがあります。これらのスタイルシートには<strong>ユーザーエージェントスタイルシート</strong>という名前が付けられています。実際のスタイルシートを使用するブラウザーもあれば、コードでシミュレートするブラウザーもありますが、最終的な結果は同じです。</p>
+
+<p>一部のブラウザーでは、ユーザーがユーザーエージェントスタイルシートを変更することができます。ユーザーエージェントスタイルシートに関するいくつかの制約は HTML 仕様書によって設定されていますが、ブラウザーにはまだ多くの自由度があります。つまり、ブラウザーごとに大きな違いがあります。開発プロセスを簡素化するために、ウェブ開発者は多くの場合、 CSS リセットスタイルシートを使用して、特定のニーズに合わせて変更を開始する前に、共通のプロパティ値を既知の状態にします。</p>
+
+<h3 id="Author_stylesheets" name="Author_stylesheets">ページ作成者スタイルシート</h3>
+
+<p><strong>ページ作成者スタイルシート</strong>は、スタイルシートの最も一般的な種類です。これらは、特定のウェブページまたはサイトのデザインの一部としてスタイルを定義するスタイルシートです。ページの作成者は、1つ以上のスタイルシートを使用して文書のスタイルを定義します。スタイルシートは、ウェブサイトの外観 (テーマ) を定義します。</p>
+
+<h3 id="User_stylesheets" name="User_stylesheets">ユーザースタイルシート</h3>
+
+<p>ウェブサイトのユーザー (または読者) は、ユーザーの希望に合わせて使い勝手を調整するように設計された独自の<strong>ユーザースタイルシート</strong>を使用して、多くのブラウザーでスタイルを上書きすることを選択できます。</p>
+
+<h2 id="Cascading_order" name="Cascading_order">カスケード順</h2>
+
+<p>カスケードアルゴリズムは、文書の各要素の各プロパティに適用する値を見つける方法を決定します。</p>
+
+<ol>
+ <li>最初に、さまざまな起源からすべての規則をフィルタリングして、特定の要素に適用されるルールのみを保持します。つまり、セレクターが指定された要素と一致し、適切な <code>media</code> @-規則の一部である規則を意味します。</li>
+ <li>次に、これらのルールをその重要度、つまり、 <code>!important</code> が後に続くかどうか、およびその起源に従って並べ替えます。カスケードは上流から下流に向けて行われます。つまり、ユーザー定義のスタイルシートによる <code>!important</code> の値は、ユーザーエージェントスタイルシートによる通常の値よりも優先されます。
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"></th>
+     <th scope="col">起源</th>
+     <th scope="col">重要性</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>ユーザーエージェント</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>ユーザー</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>作成者</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>アニメーション</td>
+     <td></td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>ユーザーエージェント</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>作成者</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>ユーザー</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>8</td>
+     <td>トランジション</td>
+     <td></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>同等の場合は、どれを選択するかに値の<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が考慮されます。</li>
+</ol>
+
+<h2 id="Resetting_styles" name="Resetting_styles">スタイルの初期化</h2>
+
+<p>コンテンツのスタイルの変更が完了した後で、それ自体を既知の状態に戻す必要がある状況に陥ることがあります。アニメーションやテーマの変更などの場合に起こるかもしれません。 CSS プロパティ {{cssxref("all")}} を使用すると、 CSS 内の (ほぼ) すべてのものを既知の状態に素早く戻すことができます。</p>
+
+<p><code>all</code>では、すべてのプロパティを初期 (既定) 状態、前のレベルのカスケードから継承した状態、特定の起源 (ユーザーエージェントスタイルシート、作成者スタイルシート、またはユーザースタイルシート) のいずれかに直ちに復元することを選択できます。または、プロパティの値を完全にクリアすることもできます。</p>
+
+<h2 id="CSS_animations_and_the_cascade" name="CSS_animations_and_the_cascade">CSS アニメーションとカスケード</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>は、 {{cssxref("@keyframes")}} @-規則を使用して、状態間のアニメーションを定義します。キーフレームはカスケードされません。つまり、 CSS は常に単一の {{cssxref("@keyframes")}} から値を取得し、複数の値を混合することはありません。</p>
+
+<p>複数のキーフレームが適用された場合は、最も重要な文書で定義されている最新のものを選択しますが、すべてを組み合わせることはありません。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>さまざまなオリジンにまたがる CSS の複数のソースを含む例を見てみましょう。ここには、ユーザーエージェントスタイルシート、2つの作成者スタイルシート、ユーザースタイルシート、および HTML 内のインラインスタイルがあります。</p>
+
+<p><strong>ユーザーエージェント CSS:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 10px }</pre>
+
+<p><strong>作成者 CSS 1:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 0 } /* 初期化のため */</pre>
+
+<p><strong>作成者 CSS 2:</strong></p>
+
+<pre class="brush:css;">@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong>ユーザー CSS:</strong></p>
+
+<pre class="brush:css;">.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush:html;">&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>この場合、 <code>li</code> および <code>.specific</code> 規則内の宣言を適用する必要があります。 <code>!important</code>として宣言されている宣言はないため、優先順位は、ユーザースタイルシートまたはユーザーエージェントスタイルシートの前の作成者スタイルシートです。</p>
+
+<p>ここでは3つの宣言が競合しています。</p>
+
+<pre class="brush:css;">margin-left: 0</pre>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<pre class="brush:css;">margin-left: 1px</pre>
+
+<p>最後のものは (画面上で) 無視され、最初の2つは同じセレクターを持つため、同じ詳細度があります。したがって、次に選択されるのは同じ詳細度のうちの最後のものです。</p>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<p>カスケードアルゴリズムは詳細度アルゴリズムの前に適用されるため、ユーザー CSS で定義された宣言はより高い詳細度を持ちますが、選択されないことに注意してください。</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("CSS4 Cascade")}}</td>
+   <td>{{Spec2("CSS4 Cascade")}}</td>
+   <td>プロパティをカスケードレベルに戻すことができる {{CSSxRef("revert")}} キーワードを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Cascade")}}</td>
+   <td>{{Spec2("CSS3 Cascade")}}</td>
+   <td>カスケードオリジンの上書を削除。 W3C 標準で使用されなかったため。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">とても簡単な CSS カスケードの紹介</a></li>
+ <li>{{CSS_Key_Concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/child_combinator/index.html b/files/ja/web/css/child_combinator/index.html
new file mode 100644
index 0000000000..dc29194c31
--- /dev/null
+++ b/files/ja/web/css/child_combinator/index.html
@@ -0,0 +1,93 @@
+---
+title: 子結合子
+slug: Web/CSS/Child_combinator
+tags:
+  - CSS
+  - Reference
+  - Selector
+  - Selectors
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><ruby><strong>子結合子</strong><rp> (</rp><rt>child combinator</rt><rp>)</rp></ruby> (<code>&gt;</code>) は2つの CSS セレクターの間に配置されます。2つ目のセレクターが1つ目のセレクターの直接の子要素の場合にのみマッチします。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* "my-things"クラスを持つリストの子要素であるリスト項目 */
+ul.my-things &gt; li {
+  margin: 2em;
+}</pre>
+
+<p>2つ目のセレクターに一致する要素は、1つ目のセレクターに一致する要素の直接の子要素でなければなりません。これは、<a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a>が1つ目のセレクターに一致する要素が祖先に存在する2つ目のセレクターに一致するすべての要素に一致するのに比べて厳密です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">セレクター1 &gt; セレクター2 { <em>スタイルプロパティ</em> }
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">span {
+  background-color: white;
+}
+
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;span&gt;Span #1, in the div.
+    &lt;span&gt;Span #2, in the span that's in the div.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span #3, not in the div at all.&lt;/span&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 100)}}</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("CSS4 Selectors", "#child-combinators", "child combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.child")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></li>
+</ul>
diff --git a/files/ja/web/css/clamp()/index.html b/files/ja/web/css/clamp()/index.html
new file mode 100644
index 0000000000..e8f18e5e57
--- /dev/null
+++ b/files/ja/web/css/clamp()/index.html
@@ -0,0 +1,123 @@
+---
+title: clamp()
+slug: Web/CSS/clamp()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - Calculate
+  - Compute
+  - Function
+  - Layout
+  - Reference
+  - Web
+  - clamp
+  - ウェブ
+  - レイアウト
+  - 計算
+  - 関数
+translation_of: Web/CSS/clamp()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>clamp()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、値を上限と下限の間に制限します。 <code>clamp()</code> によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 <code>clamp()</code> 関数は {{CSSxRef("&lt;length&gt;")}}, {{CSSxRef("&lt;frequency&gt;")}}, {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;time&gt;")}}, {{CSSxRef("&lt;percentage&gt;")}}, {{CSSxRef("&lt;number&gt;")}}, {{CSSxRef("&lt;integer&gt;")}} のいずれでも使用することができます。</p>
+
+<p><code>clamp(MIN, VAL, MAX)</code> は <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code> と同等です。</p>
+
+<pre class="brush: css; no-line-numbers">/* property: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);</pre>
+
+<p>上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。</p>
+
+<p>上記の場合で em が 16px の幅であると仮定しましょう。</p>
+
+<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px);
+/* 1em = 16px, 4em = 16px * 4 = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX))) と同等 */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>clamp()</code> 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。</p>
+
+<p>最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。</p>
+
+<p>推奨値は、結果が最小値と最大値の間である限り使用される値の式です。</p>
+
+<p>最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。</p>
+
+<p>式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("&lt;length&gt;")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。</p>
+
+<p>式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。</p>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<ul>
+ <li>自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 <code>auto</code> がして甥されたものとして扱われる<em>ことが</em>あります。</li>
+ <li>式の値として <code>max()</code> および <code>min()</code> 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。</li>
+ <li>式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("&lt;length&gt;")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。</li>
+ <li>{{CSSxRef("min")}} および {{CSSxRef("max")}} を <code>clamp()</code> 関数の中で使用したくなるでしょう。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_a_minimum_and_max_size_for_a_font" name="Setting_a_minimum_and_max_size_for_a_font">フォントへの最小値と最大値の設定</h3>
+
+<p><code>clamp()</code> によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a> の中のコードと同じ効果を持ちます。</p>
+
+<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+</pre>
+
+<pre class="brush: html;">&lt;p&gt;
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>TBD</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("CSS4 Values", "#calc-notation", "clamp()")}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.clamp")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("calc")}}</li>
+ <li>{{CSSxRef("max")}}</li>
+ <li>{{CSSxRef("min")}}</li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li>
+</ul>
diff --git a/files/ja/web/css/class_selectors/index.html b/files/ja/web/css/class_selectors/index.html
new file mode 100644
index 0000000000..f5acf09c25
--- /dev/null
+++ b/files/ja/web/css/class_selectors/index.html
@@ -0,0 +1,107 @@
+---
+title: クラスセレクター
+slug: Web/CSS/Class_selectors
+tags:
+  - CSS
+  - Reference
+  - セレクター
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong>クラスセレクター</strong><rp> (</rp><rt>class selector</rt><rp>) </rp></ruby>は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* class="spacious" であるすべての要素 */
+.spacious {
+  margin: 2em;
+}
+
+/* class="spacious" であるすべての &lt;li&gt; 要素 */
+li.spacious {
+  margin: 2em;
+}
+
+/* "spacious" および "elegant" の両方をクラスリストに含む &lt;li&gt; 要素すべて */
+/* 例えば、 class="elegant retro spacious" */
+li.spacious.elegant {
+  margin: 2em;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">.クラス名 { <em>スタイルプロパティ</em> }</pre>
+
+<p>なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。</p>
+
+<pre class="syntaxbox">[class~=クラス名] { <em>スタイルプロパティ</em> }</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red {
+  color: #f33;
+}
+
+.yellow-bg {
+  background: #ffa;
+}
+
+.fancy {
+  font-weight: bold;
+  text-shadow: 4px 4px 3px #77f;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="red"&gt;この段落は赤い文字です。&lt;/p&gt;
+&lt;p class="red yellow-bg"&gt;この段落は黄色の背景に赤い文字です。&lt;/p&gt;
+&lt;p class="red fancy"&gt;この段落は「fancy」スタイルで赤い文字です。&lt;/p&gt;
+&lt;p&gt;これは単なる普通の段落です。&lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.class")}}</p>
diff --git a/files/ja/web/css/clear/index.html b/files/ja/web/css/clear/index.html
new file mode 100644
index 0000000000..1c90db6387
--- /dev/null
+++ b/files/ja/web/css/clear/index.html
@@ -0,0 +1,237 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 位置指定レイアウト
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>clear</code></strong> プロパティは、要素が先行する<a href="/ja/docs/Web/CSS/float">浮動</a>要素の下に移動 (clear) する必要があるかどうかを設定します。 <code>clear</code> プロパティは、浮動要素と非浮動要素のどちらにも適用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>非浮動ブロックに適用された場合は、その要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界の辺</a>が、関係するすべての浮動要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin-area">マージンの辺</a>より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。</p>
+
+<p>一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。</p>
+
+<p>解除されることに関連する浮動要素は、その前の浮動要素と<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">同一のブロック整形コンテキスト</a>内の先行する浮動要素です。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは <strong>clearfix</strong> と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> に <code>clear</code> を使います。</p>
+
+<pre class="brush: css">#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* グローバル値 */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>要素は先行するフロートと切り離されず、下に移動しません。</dd>
+ <dt><code>left</code></dt>
+ <dd>要素は先行する <em>左の </em>フロートと切り離され、下に移動します。</dd>
+ <dt><code>right</code></dt>
+ <dd>要素は先行する<em> 右の</em> フロートと切り離され、下に移動します。</dd>
+ <dt><code>both</code></dt>
+ <dd>要素は先行する<em> 左右両方の </em>フロートと切り離され、下に移動します。</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>要素は、先行する<em>包含ブロックの始端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>左側</em>、rtl 表記では<em>右側</em>のフロートです。</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>要素は、先行する<em>包含ブロックの終端側</em>のフロートの下に移動することを示すキーワードです。これは ltr 表記では<em>右側</em>、rtl 表記では<em>左側</em>のフロートです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="clear-left" name="clear-left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('clear-left','100%','250') }}</p>
+
+<h3 id="clear-right" name="clear-right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear-right','100%','250') }}</p>
+
+<h3 id="clear-both" name="clear-both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear-both','100%','300') }}</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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>重要な変更はないが、細部が明瞭になった</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.clear")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="CSS/box_model">CSS 基本ボックスモデル</a></li>
+</ul>
diff --git a/files/ja/web/css/clip-path/index.html b/files/ja/web/css/clip-path/index.html
new file mode 100644
index 0000000000..c469fec575
--- /dev/null
+++ b/files/ja/web/css/clip-path/index.html
@@ -0,0 +1,623 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - Experimental
+  - Reference
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>clip-path</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+clip-path: none;
+
+/* <var>&lt;clip-source&gt;</var> 値 */
+clip-path: url(resources.svg#c1);
+
+/* <var>&lt;geometry-box&gt;</var> 値 */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* <var>&lt;basic-shape&gt;</var> 値 */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* ボックスおよびシェイプ値の組み合わせ */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* グローバル値 */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<p><code>clip-path</code> プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;clip-source&gt;</var></code></dt>
+ <dd><a href="/ja/docs/Web/SVG">SVG</a> の {{SVGElement("clipPath")}} 要素を参照する {{cssxref("&lt;url&gt;")}} です。</dd>
+ <dt>{{cssxref("&lt;basic-shape&gt;")}}</dt>
+ <dd><code>&lt;geometry-box&gt;</code> 値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとして <code>border-box</code> が使用されます。</dd>
+ <dt><code><var>&lt;geometry-box&gt;</var></code></dt>
+ <dd><code><var>&lt;basic-shape&gt;</var></code> と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 ({{cssxref("border-radius")}} など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。</dd>
+ <dd>
+ <dl>
+  <dt><code>margin-box</code></dt>
+  <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box">マージンボックス</a>を参照ボックスとして使用します。</dd>
+  <dt><code>border-box</code></dt>
+  <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#border-box">境界ボックス</a>を参照ボックスとして使用します。</dd>
+  <dt><code>padding-box</code></dt>
+  <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box">パディングボックス</a>を参照ボックスとして使用します。</dd>
+  <dt><code>content-box</code></dt>
+  <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values#content-box">コンテンボックス</a>を参照ボックスとして使用します。</dd>
+  <dt><code>fill-box</code></dt>
+  <dd>オブジェクトの境界ボックスを参照ボックスとして使用します。</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>ストロークの境界ボックスを参照ボックスとして使用します。</dd>
+  <dt><code>view-box</code></dt>
+  <dd>最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に {{SVGAttr("viewBox")}} 属性が指定されている場合、参照ボックスは <code>viewBox</code> 属性で指定された座標系の原点に位置し、参照ボックスの寸法は <code>viewBox</code> 属性の width および height 値に設定されます。</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>クリッピングパスは作成されません。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注</strong>: 計算値が <strong><code>none</code></strong> 以外の場合は、新しい<a href="/ja/docs/CSS/Understanding_z-index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。これは、 {{cssxref("opacity")}} が <code>1</code> 以外の値の場合と同様です。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Comparison_of_HTML_and_SVG" name="Comparison_of_HTML_and_SVG">HTML と SVG の比較</h3>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html notranslate">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Comparison_of_HTML_and_SVG", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="Complete_example" name="Complete_example">完全な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+  &lt;option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"&gt;path&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Complete_example", 230, 250)}}</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("CSS Shapes 2", "#supported-basic-shapes", 'path')}}</td>
+   <td>{{Spec2('CSS Shapes 2')}}</td>
+   <td><code>path()</code> を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>適用範囲を HTML 要素に拡張。 <code>clip-path</code> プロパティが非推奨の {{cssxref("clip")}} プロパティを置き換えた。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初回定義 (SVG 要素のみに適用)。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Shapes in clipping and masking – and how to use them</a></li>
+ <li>CSS プロパティ: {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="/ja/docs/Applying_SVG_effects_to_HTML_content">SVG 効果の HTML コンテンツへの適用</a></li>
+ <li>SVG 属性:
+  <ul>
+   <li>{{SVGAttr("clip-path")}}</li>
+   <li>{{SVGAttr("clip-rule")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://www.coding-dude.com/wp/css/css-circle-image/">CSS Circle Image</a> ({{SVGAttr("clip-path")}} およびその他のメソッドを使用)</li>
+</ul>
diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.html
new file mode 100644
index 0000000000..cc9e9a3e1b
--- /dev/null
+++ b/files/ja/web/css/clip/index.html
@@ -0,0 +1,132 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分が可視であるかを定義します。 <code>clip</code> プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。</span></p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+clip: auto;
+
+/* &lt;shape&gt; 値 */
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* グローバル値 */
+clip: inherit;
+clip: initial;
+clip: unset;</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<div class="note">
+<p><strong>注:</strong> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;shape&gt;")}}</dt>
+ <dd><code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> 形式の矩形の {{cssxref("&lt;shape&gt;")}} です。 <code>&lt;top&gt;</code> と <code>&lt;bottom&gt;</code> は、ボックス境界の上辺からのオフセットを表します。<code>&lt;right&gt;</code> と <code>&lt;left&gt;</code> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。</dd>
+ <dd><code>&lt;top&gt;</code>、<code>&lt;right&gt;</code>、<code>&lt;bottom&gt;</code>、<code>&lt;left&gt;</code> の値は {{cssxref("&lt;length&gt;")}} または <code>auto</code> のいずれかです。<code>auto</code> が指定されると、その辺のボックス境界で切り取られます。</dd>
+ <dt><code>auto</code></dt>
+ <dd>要素はクリップされません (既定値)。ボックス境界で切り取る <code>rect(auto, auto, auto, auto)</code> とはまったく異なることに注意してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Clipping_an_image" name="Clipping_an_image">画像の切り抜き</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left,
+#middle,
+#bottom-right {
+  position: absolute;
+  top: 0;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0, 175px, 113px, 0);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px, 335px, 345px, 160px);
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html notranslate">&lt;p class="dotted-border"&gt;
+  &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"&gt;
+  &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
+  &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
+  &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}</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('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td><code>clip</code> プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.clip")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。</li>
+ <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}</li>
+</ul>
diff --git a/files/ja/web/css/color-adjust/index.html b/files/ja/web/css/color-adjust/index.html
new file mode 100644
index 0000000000..a6eac63a08
--- /dev/null
+++ b/files/ja/web/css/color-adjust/index.html
@@ -0,0 +1,125 @@
+---
+title: color-adjust
+slug: Web/CSS/color-adjust
+tags:
+  - Adjusting Colors
+  - CSS
+  - CSS Colors
+  - CSS Property
+  - HTML Colors
+  - HTML Styles
+  - Layout
+  - Non-standard
+  - Reference
+  - Styling HTML
+  - Styling text
+  - Web
+  - color-adjust
+  - 'recipe:css-property'
+translation_of: Web/CSS/color-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>color-adjust</code></strong> は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。</span>既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">color-adjust: economy;
+color-adjust: exact;</pre>
+
+<p><code>color-adjust</code> プロパティの値は、以下のキーワードのうちの一つでなければなりません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>ユーザーエージェントは、それがレンダリングされているデバイスのために出力を最適化するために、適切かつ慎重に要素に調整を加えることが許されています。例えば、印刷するときに、ブラウザは背景画像をすべて削除して、白い紙で読むときにコントラストが最適化されるようにテキストの色を調整することを選ぶかもしれません。これがデフォルトです。</dd>
+ <dt><code>exact</code></dt>
+ <dd>要素の内容は、ブラウザによって変更されると、実際には良くなるどころか悪くなるかもしれないような、思慮深い重要な方法で色や画像やスタイルを使用するように、特別に慎重に作られています。コンテンツの外観は、ユーザーの要求がない限り変更されるべきではありません。例えば、あるページでは、背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストが含まれているかもしれません。背景色を削除すると、コンテンツの読みやすさが低下します。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>ブラウザーが指定された外観から逸脱したいと思う理由はいくつかあります。</p>
+
+<ul>
+ <li>コンテンツがテキストや背景色を使用しているため、出力機器上では読みやすさの点で似たような色になってしまう。</li>
+ <li>出力デバイスがプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。</li>
+ <li>ページを印刷するとき、ブラウザは、暗い背景の明るい色のテキストを、白い背景の濃いテキストに置き換えることを望むかもしれません。</li>
+</ul>
+
+<p>ユーザーが色や画像の使用を制御するためにユーザーエージェントが提供しているおぷh損は、 <code>color-adjust</code> の値よりも優先されます。言い換えれば、 <code>color-adjust</code> が何かをするという保証はありません。ユーザーが動作を上書きすることができるだけでなく、各ユーザエージェントは、与えられた状況で <code>color-adjust</code> をどのように扱うかをそれ自身で決定することが許されています。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preserving_low_contrast" name="Preserving_low_contrast">低コントラストの維持</h3>
+
+<p>この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、 <code>color-adjust: exact</code> を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.my-box {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="my-box"&gt;
+  &lt;p&gt;Need more contrast!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}}</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('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
+   <td>{{Spec2('CSS Color Adjust')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.color-adjust")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+</ul>
diff --git a/files/ja/web/css/color/index.html b/files/ja/web/css/color/index.html
new file mode 100644
index 0000000000..77a3ad9077
--- /dev/null
+++ b/files/ja/web/css/color/index.html
@@ -0,0 +1,160 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - CSS プロパティ
+  - CSS 色
+  - HTML 整形
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>color</code></strong> プロパティは、要素のテキストや<a href="/ja/docs/Web/CSS/text-decoration">テキスト装飾</a>における前景色の<a href="/en-US/docs/Web/CSS/color_value">色の値</a>を設定し、 {{cssxref("currentcolor")}} の値を設定します。</span> <code>currentcolor</code> は<em>他の</em>プロパティの間接的な値として使用される可能性があり、 {{cssxref("border-color")}} のような他の色に関するプロパティの既定値にもなったりします。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>HTML における色の使用の概要については、<a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>をご覧ください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+color: currentcolor;
+
+/* &lt;named-color&gt; 値 */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* &lt;hex-color&gt; 値 */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* &lt;rgb()&gt; 値 */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* &lt;hsl()&gt; 値 */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* グローバル値 */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<p><code>color</code> プロパティは単一の {{cssxref("&lt;color&gt;")}} 値で指定します。</p>
+
+<p>なお、値は {{cssxref("color")}} の形でなければなりません。 {{cssxref("&lt;gradient&gt;")}} は実際の型が {{cssxref("&lt;image&gt;")}} であるため使用できません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>要素のテキストや装飾部分の色を設定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例はすべて、要素のテキストを赤色にします。</p>
+
+<pre class="brush: css">p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% 透過 */
+p { color: #ff000080; }
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。</p>
+
+<p>色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば 18.66px 以上、または 24px 以上と定義されています。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Colors', '#the-color-property', 'color')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> に関数記法にカンマがない構文を追加。 <code>rgb()</code>, <code>hsl()</code> にアルファ値を含めることを許可して、 <code>rgba()</code> および <code>hsla()</code> をそれらの (非推奨な) 別名に変更。<br>
+    <code>rebeccapurple</code> キーワードを追加。<br>
+    最後の桁がアルファ値を表す、 4 桁および 8 桁の 16 進数による色の値を追加。<br>
+    <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 関数を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>system-color を非推奨化。 SVG color を追加。 <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数記法を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>orange</code> color と system-color を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>他の色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/color_value/index.html b/files/ja/web/css/color_value/index.html
new file mode 100644
index 0000000000..ed3abd2d12
--- /dev/null
+++ b/files/ja/web/css/color_value/index.html
@@ -0,0 +1,1539 @@
+---
+title: <color>
+slug: Web/CSS/color_value
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - Web
+  - hsl
+  - hsla
+  - rgb
+  - rgba
+  - レイアウト
+  - 単位
+  - 色
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;color&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB 色空間</a>にある一つの色を表します。 <code>&lt;color&gt;</code> は <a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB">アルファチャネル</a><em>透過値</em>を含むこともでき、背景とどのように<a class="external" href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">合成</a>するかを示すこともできます。</p>
+
+<p><code>&lt;color&gt;</code> は以下の何れかの方法で定義することができます。</p>
+
+<ul>
+ <li>キーワードの使用 (<code>blue</code> や <code>transparent</code> など)</li>
+ <li><a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">RGB 立方体座標方式</a>の使用 (#+16進数値や、<code>rgb()</code> や <code>rgba()</code> の関数記法によって)</li>
+ <li><a href="https://en.wikipedia.org/wiki/HSL_and_HSV">HSL 円柱座標方式</a> の使用 (<code>hsl()</code> や <code>hsla()</code> の関数記法によって)</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> この記事は <code>&lt;color&gt;</code> データ型の詳細を説明しています。 HTML での色の使い方について詳しくは、 <a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a>を参照してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;color&gt;</code> データ型は以下のいずれか1つの方法を使って指定されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>&lt;color&gt;</code> の色は詳細に定義されていますが、出力端末によって (時には著しく) 違って見えるかもしれません。出力端末の大半は色補正がされておらず、ブラウザーによっては出力端末の<a href="https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB">色プロファイル</a>に対応していないからです。</p>
+</div>
+
+<h3 id="Color_keywords" name="Color_keywords">色キーワード</h3>
+
+<p>色キーワードは大文字と小文字の区別をしない識別子で、特定の色を表します。例えば <code>red</code>, <code>blue</code>, <code>black</code>, <code>lightseagreen</code> といったものです。色名は多少なりとそれぞれの色を説明していますが、ほとんどは基本的に人工的であり、名前の仕様について強い根拠はありません。</p>
+
+<p>キーワードを使うとき、考慮すべき点がいくつかあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML">HTML</a> は CSS1 に見られる基本16色のみを解釈し、解釈できない値を (ふつう完全に違う色に) 変換する際は特定のアルゴリズムを使用します。その他の色キーワードは CSS および <a href="/ja/docs/Web/SVG">SVG</a> のみで使用してください。</li>
+ <li>HTML とは異なり、 CSS では未知のキーワードは完全に無視されます。</li>
+ <li>CSS のキーワード定義された色はどれも透明度を持たず、完全に不透明な色です。</li>
+ <li>同じ色を表すキーワードがいくつかあります。
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>キーワードは <a href="https://ja.wikipedia.org/wiki/X_Window_System">X11</a> の色名からとられたものですが、メーカーが X11 の色を特定のハードウェアに合わせて変えていることがあるので、 RGB 値は X11 システムでの色とは異なる可能性があります。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> 利用可能なキーワードの一覧は、様々な CSS の仕様書によって異なります。</p>
+
+<ul>
+ <li>CSS Level 1 は基本的な16色だけを受け付けていました。<a href="https://ja.wikipedia.org/wiki/Video_Graphics_Array">VGA</a> グラフィックカードで表示可能な色の組み合わせという意味で、<em>VGA 色</em>と命名されました。</li>
+ <li>CSS Level 2 は <code>orange</code> キーワードを追加しました。</li>
+ <li>当初から、ブラウザーはその他の色を受け付けていました。初期のブラウザーのいくつかは X11 アプリケーションであったため、ほとんどは X11 色名称でしたが、少しずつ違いがありました。SVG 1.0 は正式にこうしたキーワードを定義した最初の規格でした。CSS Colors Level 3 も正式にこれらのキーワードを定義しました。このリストはよく<em>拡張色キーワード</em>、<em>X11 色</em>、<em>SVG 色</em>と呼ばれます。</li>
+ <li>CSS Colors Level 4 では <a href="https://codepen.io/trezy/post/honoring-a-great-man">ウェブのパイオニア、エリック・メイヤーに敬意を表して</a> <code>rebeccapurple</code> のキーワードを追加しました。</li>
+</ul>
+</div>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">キーワード</th>
+   <th scope="col">RGB 16 進表記</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cyan</code><br>
+    (synonym of <code>aqua</code>)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>magenta</code><br>
+    (synonym of <code>fuchsia</code>)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="transparent_keyword" name="transparent_keyword"><code id="transparent">transparent</code> キーワード</h3>
+
+<p><code>transparent</code> は完全な透明色を表すキーワードです。この色が付いた項目の背後の背景は完全に見えます。厳密にはこれはアルファチャンネルに最大値を持つ黒色で、計算値<code> rgba(0,0,0,0)</code> へのショートカットです。</p>
+
+<div class="note">
+<p><strong>互換性のメモ:</strong> {{cssxref("gradient","グラデーション")}}の場合の同様、予期しない動きを避けるために、現在の CSS の仕様書は <code>transparent</code> を<a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">アルファ乗算色空間</a>で計算するように定めています。しかし、古いブラウザーはアルファ―チャンネルが <code>0</code> の値である黒として扱うかもしれません。</p>
+</div>
+
+<div class="note">
+<p><strong>歴史的なメモ:</strong> <code>transparent</code> キーワードは CSS Level 2 (Revision 1) では色ではありませんでした。これは {{Cssxref("background")}} プロパティと {{Cssxref("border")}} プロパティの2つにおいて、通常の <code>&lt;color&gt;</code> の代わりに使用することができた特殊なキーワードでした。基本的に、継承された色を開発者が上書きすることができるように追加されたものです。 CSS Colors Level 3 でアルファチャンネルが出現し、 <code>transparent</code> は色として再定義されました。 <code>&lt;color&gt;</code> の値を使用することができる場所ならば、どこでも使用することができるようになりました。</p>
+</div>
+
+<h3 id="currentcolor_keyword" name="currentcolor_keyword"><code id="currentColor">currentcolor</code> キーワード</h3>
+
+<p><code>currentcolor</code> キーワードは、要素の {{Cssxref("color")}} プロパティの値を表します。これで <code>color</code> の値をプロパティが既定で受け取らなくても利用することができます。</p>
+
+<p><code>currentcolor</code> が <code>color</code> プロパティの値として使用された場合、 <code>color</code> プロパティが継承した値が使用されます。</p>
+
+<h4 id="currentcolor_example" name="currentcolor_example">currentcolor の例</h4>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;div style="color:blue; border: 1px dashed currentcolor;"&gt;
+  この文字列の色は青です。
+  &lt;div style="background:currentcolor; height:9px;"&gt;&lt;/div&gt;
+  このブロックは青い境界線で囲まれています。
+&lt;/div&gt;</pre>
+
+<h5 id="Result" name="Result">結果</h5>
+
+<p>{{EmbedLiveSample('currentcolor_example')}}</p>
+
+<h3 id="RGB_色">RGB 色</h3>
+
+<p>RGB 色モデルは赤、緑、青の成分によって指定された色を定義します。任意のアルファ成分は色の透過性を表します。</p>
+
+<h4 id="Syntax_2" name="Syntax_2">構文</h4>
+
+<p>RGB 色は16進表記 (<code>#</code> の接頭辞つき) と関数表記 (<code id="rgb()">rgb()</code>, <code id="rgba()">rgba()</code>) の両方で表すことができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> CSS Colors Level 4 では、 <code>rgba()</code> は <code>rgb()</code> の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。</p>
+</div>
+
+<dl>
+ <dt>16進表記: <code>#RRGGBB[AA]</code></dt>
+ <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) と <code>A</code> (アルファ) は16進数の文字 (0–9, A–F) です。 <code>A</code> は任意です。例えば、 <code>#ff0000</code> は <code>#ff0000ff</code> と同等です。</dd>
+ <dt>16進表記: <code>#RGB[A]</code></dt>
+ <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) と <code>A</code> (アルファ) は16進数の文字 (0–9, A–F) です。 <code>A</code> は任意です。3桁表記 (<code>#RGB</code>) は6桁形式 (<code>#RRGGBB</code>) を短縮したものです。例えば、 <code>#f09</code> は <code>#ff0099</code> と同じ色です。同様に、4桁の RGB 表記 (<code>#RGBA</code>) は8桁形式 (<code>#RRGGBBAA</code>) を短縮したものです。例えば、 <code>#0f38</code> は <code>#00ff3388</code> と同じ色です。</dd>
+ <dt>関数表記: <code>rgb[a](R, G, B[, A])</code></dt>
+ <dd><code>R</code> (赤)、 <code>G</code> (緑)、 <code>B</code> (青) は {{cssxref("&lt;number&gt;", "数値")}}または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}のどちらかで、<code>255</code>が<code>100%</code>に対応します。 <code>A</code> (アルファ)は<code>0</code>と<code>1</code>の間の{{cssxref("&lt;number&gt;", "数値")}}、または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}で、数値<code>1</code>が<code>100%</code> (不透明) です。</dd>
+ <dt>関数表記: <code>rgb[a](R G B[ / A])</code></dt>
+ <dd>CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。</dd>
+</dl>
+
+<h4 id="Examples" name="Examples">例</h4>
+
+<h5 id="RGB_syntax_variations" name="RGB_syntax_variations">様々な RGB 構文</h5>
+
+<p>この例は、一つの色を RGB 色構文で生成することができる様々な方法を示しています。</p>
+
+<pre>/* これらの様々な構文は、すべて同じ色、不透明な濃いピンク色を指定します。 */
+
+/* 16進表記 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 関数表記 */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* ERROR! 数値とパーセントを混ぜないでください */
+rgb(255 0 153)
+
+/* アルファ値付き16進表記 */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* アルファ値付き関数表記 */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* 空白区切りの構文 */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* 浮動小数点値による実数表記 */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h5 id="RGB_transparency_variations" name="RGB_transparency_variations">RGB の様々な透過性</h5>
+
+<pre>/* 16進表記 */
+#3a30                   <span style="background: #3a30;"> /* 透明な緑 */ </span>
+#3A3F                   <span style="background: #3A3F;"> /* 不透明な緑 */ </span>
+#33aa3300               <span style="background: #33aa3300;"> /* 完全に透明な緑 */ </span>
+#33AA3388               <span style="background: #33AA3380;"> /*  50%半透明の緑 */ </span>
+
+/* 関数表記 */
+rgba(51, 170, 51, .1)   <span style="background: rgba(51, 170, 51, .1);"> /*  10%半透明の緑 */ </span>
+rgba(51, 170, 51, .4)   <span style="background: rgba(51, 170, 51, .4);"> /*  40%半透明の緑 */ </span>
+rgba(51, 170, 51, .7)   <span style="background: rgba(51, 170, 51, .7);"> /*  70%半透明の緑 */ </span>
+rgba(51, 170, 51,  1)   <span style="background: rgba(51, 170, 51,  1);"> /* 完全に不透明な緑 */ </span>
+
+/* ホワイトスペース区切りの構文 */
+rgba(51 170 51 / 0.4)   <span> /*  40%半透明の緑 */ </span>
+rgba(51 170 51 / 40%)   <span> /*  40%半透明の緑 */ </span>
+
+/* 実数値の関数構文 */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h3 id="HSL_colors" name="HSL_colors">HSL 色</h3>
+
+<p>HSL 色モデルは色相 (H)、彩度 (S)、明度 (L) の各成分によって与えられた色を定義します。任意のアルファ成分は色の透過性を表します。</p>
+
+<p>多くのデザイナーは、 HSL は色相、彩度、明度をそれぞれ個別に調整できるので、 RGB より直感的であると考えています。 HSL は一連の合う色の組み合わせ (例えば、同じ色相で、明暗や彩度が異なる色など) をより簡単に作成することもできます。</p>
+
+<h4 id="Syntax_3" name="Syntax_3">構文</h4>
+
+<p>HSL 色は関数表記の <code id="hsl()">hsl()</code> および <code id="hsla()">hsla()</code> を通して説明されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> CSS Colors Level 4 では、 <code>hsla()</code> は <code>hsl()</code> の別名です。 Level 4 標準を実装するブラウザーでは、同じ引数を受け取り同じ挙動をします。</p>
+</div>
+
+<dl>
+ <dt>関数表記: <code>hsl[a](H, S, L[, A])</code></dt>
+ <dd><code>H</code> (色相) は色相環の{{cssxref("&lt;angle&gt;", "角度")}}を {{SpecName("CSS4 Colors","#the-hsl-notation")}} で定義されている <code>deg</code>、 <code>rad</code>、 <code>grad</code>、 <code>turn</code> の単位で与えます。単位のない{{cssxref("&lt;number&gt;", "数値")}}の場合は、 {{SpecName("CSS3 Colors", "#hsl-color")}} で定められている通り deg (度) として扱われます。定義では、赤=0deg=360deg であり、他の色は、緑=120deg、 青=240deg、 などのように色相環を回ります。 <code>&lt;angle&gt;</code> は暗黙的に周回するので、 -120deg=240deg、 480deg=120deg、 -1turn=1turn のようになります。</dd>
+ <dd><code>S</code> (彩度) と <code>L</code> (明度) はパーセント表記です。<strong>彩度</strong><code>100%</code>は完全に鮮やかな色で、彩度<code>0%</code>は完全に薄い色 (灰色) です。<strong>明度</strong><code>100%</code>は白で、明度<code>0%</code>は黒で、明度<code>50%</code>は「普通」です。</dd>
+ <dd><code>A</code> (アルファ)は<code>0</code>と<code>1</code>の間の{{cssxref("&lt;number&gt;", "数値")}}、または{{cssxref("&lt;percentage&gt;", "パーセント表記")}}で、数値<code>1</code>が<code>100%</code> (不透明) です。</dd>
+ <dt>関数表記: <code>hsl[a](H S L[ / A])</code></dt>
+ <dd>CSS Colors Level 4 では、関数表記で空白区切りの値の対応が追加されます。</dd>
+</dl>
+
+<h4 id="Examples_2" name="Examples_2">例</h4>
+
+<h5 id="HSL_syntax_variations" name="HSL_syntax_variations">様々な HSL の構文</h5>
+
+<pre>/* これらの例はすべて同じ色、ラベンダーを指定します。 */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* これらの例はすべて同じ色、15%半透明のラベンダーを指定します。 */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+</pre>
+
+<h5 id="Fully_saturated_colors" name="Fully_saturated_colors">彩度100%の色</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">表記</th>
+   <th scope="col">説明</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(0, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(0,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(30, 100%, 50%)</code></td>
+   <td>orange</td>
+   <td style="background: hsl(30,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(60, 100%, 50%)</code></td>
+   <td>yellow</td>
+   <td style="background: hsl(60,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(90, 100%, 50%)</code></td>
+   <td>lime green</td>
+   <td style="background: hsl(90,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(150, 100%, 50%)</code></td>
+   <td>blue-green</td>
+   <td style="background: hsl(150,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(180, 100%, 50%)</code></td>
+   <td>cyan</td>
+   <td style="background: hsl(180,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(210, 100%, 50%)</code></td>
+   <td>sky blue</td>
+   <td style="background: hsl(210,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(240, 100%, 50%)</code></td>
+   <td>blue</td>
+   <td style="background: hsl(240,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(270, 100%, 50%)</code></td>
+   <td>purple</td>
+   <td style="background: hsl(270,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(300, 100%, 50%)</code></td>
+   <td>magenta</td>
+   <td style="background: hsl(300,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(330, 100%, 50%)</code></td>
+   <td>pink</td>
+   <td style="background: hsl(330,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(360, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(360,100%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Lighter_and_darker_greens" name="Lighter_and_darker_greens">緑の明度の変化</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">表記</th>
+   <th scope="col">説明</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 0%)</code></td>
+   <td>black</td>
+   <td style="background: hsl(120,100%,0%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 20%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,20%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 40%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,40%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 60%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,60%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 80%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,80%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 100%)</code></td>
+   <td>white</td>
+   <td style="background: hsl(120,100%,100%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Saturated_and_desaturated_greens" name="Saturated_and_desaturated_greens">緑の彩度の変化</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">表記</th>
+   <th scope="col">説明</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 80%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,80%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 60%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,60%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 40%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,40%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 20%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,20%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 0%, 50%)</code></td>
+   <td>gray</td>
+   <td style="background: hsl(120,0%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="HSL_transparency_variations" name="HSL_transparency_variations">HSL の様々な透過性</h5>
+
+<pre>hsla(240, 100%, 50%, .05)    <span style="background: hsla(240,100%,50%,0.05);"> /*   5%半透明の青 */ </span>
+hsla(240, 100%, 50%, .4)     <span style="background: hsla(240,100%,50%,0.4);"> /*  40%半透明の青 */ </span>
+hsla(240, 100%, 50%, .7)     <span style="background: hsla(240,100%,50%,0.7);"> /*  70%半透明の青 */ </span>
+hsla(240, 100%, 50%, 1)      <span style="background: hsla(240,100%,50%,1);"> /* 不透明な青 */ </span>
+
+/* 空白表記 */
+hsla(240 100% 50% / .05)     <span style="background: hsla(240,100%,50%,0.05);"> /*   5%半透明の青 */ </span>
+
+/* アルファのパーセント表記 */
+hsla(240 100% 50% / 5%)      <span style="background: hsla(240,100%,50%,0.05);"> /*   5%半透明の青 */ </span>
+</pre>
+
+<h3 id="System_Colors" name="System_Colors">システム色</h3>
+
+<p><em>色強制モード</em> (<a href="/ja/docs/Web/CSS/@media/forced-colors">forced-colors</a> メディアクエリで検出可能) では、多くの色がユーザーまたはブラウザーが定義したパレットに制約されます。これらのシステム色は以下のキーワードで公開されており、ページの残りの部分が制限されたパレットにうまく合わせられることを保証するために使用することができます。これらの値は他のコンテキストでも使用できますが、ブラウザーの対応は限定的です。</p>
+
+<p>以下のリストにあるキーワードは、 CSS Color Module Level 4 仕様書で定義されています。</p>
+
+<div class="blockIndicator note">
+<p>なお、これらのキーワードは<em>大文字小文字を区別しません</em>が、読みやすさのために大文字小文字を交ぜて表記しています。</p>
+</div>
+
+<dl>
+ <dt>ActiveText</dt>
+ <dd>
+ <p>アクティブなリンクのテキスト</p>
+ </dd>
+ <dt>ButtonFace</dt>
+ <dd>
+ <p>プッシュボタンの背景</p>
+ </dd>
+ <dt>ButtonText</dt>
+ <dd>
+ <p>プッシュボタンのテキスト</p>
+ </dd>
+ <dt>Canvas</dt>
+ <dd>
+ <p>アプリケーションのコンテンツや文書の背景</p>
+ </dd>
+ <dt>CanvasText</dt>
+ <dd>
+ <p>アプリケーションのコンテンツや文書のテキスト</p>
+ </dd>
+ <dt>Field</dt>
+ <dd>
+ <p>入力フィールドの背景</p>
+ </dd>
+ <dt>FieldText</dt>
+ <dd>
+ <p>入力フィールドのテキスト</p>
+ </dd>
+ <dt>GrayText</dt>
+ <dd>
+ <p>無効なテキスト</p>
+ </dd>
+ <dt>Highlight</dt>
+ <dd>
+ <p>コントロールの中で選択されているアイテムの背景</p>
+ </dd>
+ <dt>HighlightText</dt>
+ <dd>
+ <p>コントロールの中で選択されているアイテムのテキスト</p>
+ </dd>
+ <dt>LinkText</dt>
+ <dd>
+ <p>アクティブではない、訪問していないリンクのテキスト</p>
+ </dd>
+ <dt>VisitedText</dt>
+ <dd>
+ <p>訪問したリンクのテキスト</p>
+ </dd>
+</dl>
+
+<h4 id="Deprecated_system_color_keywords" name="Deprecated_system_color_keywords">非推奨のシステム色のキーワード</h4>
+
+<p>以下のキーワードは、 CSS Color モジュールの早期の版で定義されていました。これらは非推奨になりました。公開ウェブページでの使用は {{deprecated_inline}} です。</p>
+
+<div class="twocolumns">
+<dl>
+ <dt>ActiveBorder</dt>
+ <dd>
+ <p>アクティブウィンドウの境界線。</p>
+ </dd>
+ <dt>ActiveCaption</dt>
+ <dd>
+ <p>アクティブウィンドウのキャプション。 <code>CaptionText</code> を前景色として使用してください。</p>
+ </dd>
+ <dt>AppWorkspace</dt>
+ <dd>
+ <p>複数文書インターフェイス (MDI) の背景色。</p>
+ </dd>
+ <dt>Background</dt>
+ <dd>
+ <p>デスクトップの背景です。</p>
+ </dd>
+ <dt>ButtonHighlight</dt>
+ <dd>
+ <p>周囲の境界線で1つの平面を作って3Dになっている3D要素の光源に向いている境界線です。</p>
+ </dd>
+ <dt>ButtonShadow</dt>
+ <dd>
+ <p>周囲の境界線で1つの平面を作って3Dになっている3D要素の光源から離れている境界線です。</p>
+ </dd>
+ <dt>CaptionText</dt>
+ <dd>
+ <p>キャプションの文字列、サイズ変更ボックス、スクロールバーの矢印ボックスの文字列です。 <code>ActiveCaption</code> を背景色として使用してください。</p>
+ </dd>
+ <dt>InactiveBorder</dt>
+ <dd>
+ <p>非アクティブウィンドウの境界線です。</p>
+ </dd>
+ <dt>InactiveCaption</dt>
+ <dd>
+ <p>非アクティブウィンドウのキャプションです。 <code>InactiveCaptionText</code> を前景色に使用してください。</p>
+ </dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>
+ <p>非アクティブなキャプションの文字列の色です。 <code>InactiveCaption</code> を背景色に使用してください。</p>
+ </dd>
+ <dt>InfoBackground</dt>
+ <dd>
+ <p>ツールチップコントロールの背景色です。 <code>InfoText</code> を前景色に使用してください。</p>
+ </dd>
+ <dt>InfoText</dt>
+ <dd>
+ <p>ツールチップコントロールの文字色です。 <code>InfoBackground</code> を背景色に使用してください。</p>
+ </dd>
+ <dt>Menu</dt>
+ <dd>
+ <p>メニューの背景。 <code>MenuText</code> または <code>-moz-MenuBarText</code> を前景色に使用してください。</p>
+ </dd>
+ <dt>MenuText</dt>
+ <dd>
+ <p>メニュー内の文字列。 <code>Menu</code> を背景色に使用してください。</p>
+ </dd>
+ <dt>Scrollbar</dt>
+ <dd>
+ <p>スクロールバーの背景色。</p>
+ </dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>
+ <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の暗い方 (ふつうは外側) の色。</p>
+ </dd>
+ <dt>ThreeDFace</dt>
+ <dd>
+ <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の表面の色。前景色には <code>ButtonText</code> を使用してください。</p>
+ </dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>
+ <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺の明るい方 (ふつうは外側) の色。</p>
+ </dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>
+ <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源に向いた2辺のっ暗い方 (ふつうは内側) の色。</p>
+ </dd>
+ <dt>ThreeDShadow</dt>
+ <dd>
+ <p>囲む境界線が2つの連続した層になっているために 3D に表示される 3D 要素の、光源から遠い2辺の明るい方 (ふつうは内側) の色。</p>
+ </dd>
+ <dt>Window</dt>
+ <dd>
+ <p>ウィンドウの背景。 <code>WindowText</code> を前景色に使用してください。</p>
+ </dd>
+ <dt>WindowFrame</dt>
+ <dd>
+ <p>ウィンドウの枠。</p>
+ </dd>
+ <dt>WindowText</dt>
+ <dd>
+ <p>ウィンドウ内の文字列。 <code>Window</code> を背景色に使用してください。</p>
+ </dd>
+</dl>
+</div>
+
+<h3 id="Mozilla_System_Color_Extensions" name="Mozilla_System_Color_Extensions">Mozilla システム色拡張</h3>
+
+<div class="twocolumns">
+<dl>
+ <dt>-moz-ButtonDefault</dt>
+ <dd>
+ <p>ダイアログボックスの既定の動作を表すボタンの周りを囲む境界線の色です。</p>
+ </dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>
+ <p>マウスポインターが上にある時のボタンの背景色 (マウスポインターが上にない場合は <code>ThreeDFace</code> または <code>ButtonFace</code>)。 <code>-moz-ButtonHoverText</code> の前景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>
+ <p>マウスポインタが上にあるボタンのテキスト色 (マウスポインタが上にない場合は <code>ButtonText</code>)。 <code>-moz-ButtonHoverFace background</code> の背景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>
+ <p>ツリーウィジェットで選択された項目の背景色。 <code>-moz-CellHighlightText</code> の前景色と一緒に使用する必要があります。 <code>-moz-html-CellHighlight</code> も参照。</p>
+ </dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>
+ <p>ツリー内で選択された項目のテキスト色。 <code>-moz-CellHighlight background</code> の背景色と一緒に使う必要があります。 <code>-moz-html-CellHighlightText</code> も参照。</p>
+ </dd>
+ <dt>-moz-Combobox</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.2")}} コンボボックスの背景色。 <code>-moz-ComboboxText</code> の前景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに <code>-moz-Field</code> を使用してください。</p>
+ </dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.2")}} コンボボックスのテキスト色。 <code>-moz-Combobox</code> の背景色と一緒に使う必要があります。 1.9.2 以前のバージョンでは、代わりに <code>-moz-FieldText</code> を使用してください。</p>
+ </dd>
+ <dt>-moz-Dialog</dt>
+ <dd>
+ <p>ダイアログボックスの背景色。moz-DialogTextの前景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-DialogText</dt>
+ <dd>
+ <p>ダイアログボックスのテキスト色。 <code>-moz-DialogText</code> の背景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} ツリー内の偶数行の背景色。 <code>-moz-FieldText</code> の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 <code>-moz-Field</code> を使用してください。 <code>-moz-OddTreeRow</code> も参照してください。</p>
+ </dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムの背景色。前景色には <code>-moz-html-CellHighlightText</code> を使用します。 Gecko 1.9 以前では、 <code>-moz-CellHighlight</code> を使用してください。</p>
+ </dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} HTML の {{HTMLElement("select")}} における強調表示されたアイテムのテキストの色。背景色には <code>-moz-html-CellHighlight</code> を使用します。 Gecko 1.9 以前では、 <code>-moz-CellHighlightText</code> を使用してください。</p>
+ </dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.1")}}</p>
+ </dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.1")}}</p>
+ </dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>
+ <p>ホバーされたメニュー項目の背景色。 <code>Highlight</code> によく似ています。 <code>-moz-MenuHoverText</code> や <code>-moz-MenuBarHoverText</code> の前景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>
+ <p>ホバーされたメニュー項目のテキスト色。 <code>HighlightText</code> によく似ています。 <code>-moz-MenuHover</code> の背景色と一緒に使う必要があります。</p>
+ </dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.2")}} メニューバーのテキスト色。 <code>MenuText</code> によく似ています。 <code>Menu</code> の背景の上に使用します。</p>
+ </dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>
+ <p>メニューバーのホバーされたテキストの色。多くの場合、 <code>-moz-MenuHoverText</code> に似ています。 <code>-moz-MenuHover</code> 背景の上に使用する必要があります。</p>
+ </dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("1.9.1")}} 既定のプラットフォームのハイパーリンク色</p>
+ </dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} ツリー内の奇数行の背景色。 <code>-moz-FieldText</code> の前景色と一緒に使う必要があります。 Gecko のバージョン 1.9 より前のバージョンでは、 <code>-moz-Field</code> を使用してください。 <code>-moz-EvenTreeRow</code> も参照してください。</p>
+ </dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code> を持つオブジェクトのテキストに使用する必要があります。</p>
+ </dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("1.9")}} <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code> を持つオブj稀有とのテキストに使用する必要があります。</p>
+ </dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("56")}}<br>
+  スタートメニューやタスクバー、タイトルバーなどに設定できる Windows 10 のカスタムアクセントカラーにアクセスするために使用します。</p>
+ </dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>
+ <p>{{gecko_minversion_inline("56")}}<br>
+  スタートメニュー、タスクバー、タイトルバーなどの Windows 10 のカスタムアクセントカラーの上に配置されたテキストの色にアクセスするために使用します。</p>
+ </dd>
+</dl>
+</div>
+
+<h3 id="Mozilla_Color_Preference_Extensions" name="Mozilla_Color_Preference_Extensions">Mozilla 色設定拡張</h3>
+
+<dl>
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>
+ <p>アクティブ化されたリンクの文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
+ </dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("5.0")}} 文書の背景色のユーザー設定です。</p>
+ </dd>
+ <dt>-moz-default-color</dt>
+ <dd>
+ <p>{{Gecko_minversion_inline("5.0")}} 文字色のユーザー設定です。</p>
+ </dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>
+ <p>未訪問のリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
+ </dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>
+ <p>訪問済みのリンクにおける文字色のユーザー設定です。既定の文書の背景色と共に使用されます。</p>
+ </dd>
+</dl>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーションや<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">グラデーション</a>において、 <code>&lt;color&gt;</code> の値は赤、緑、青の成分ごとに補間されます。それぞれの成分は浮動小数点の実数として補間されます。なお、予期しない灰色が現れるのを避けるため、色の補間は<a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">アルファ乗算済み sRGBA 色空間</a>で行われます。アニメーションでは補間の速度はアニメーションと関連づけられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって決められます。</p>
+
+<h2 id="Accessibility_considerations" name="Accessibility_considerations">アクセシビリティの考慮事項</h2>
+
+<p>色を見分けることが難しい人がいます。 <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> 勧告は、色を特定のメッセージ、動作、結果を伝える唯一の手段として使用することを避けるよう強く勧告しています。詳しくは <a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> をご覧ください。</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('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td><code>rebeccapurple</code>、4 桁 (<code>#RGBA</code>) および 8 桁 (<code>#RRGGBBAA</code>) の 16 進記法、<code>rgb()</code> および <code>hsl()</code> の別名である <code>rgba()</code> および <code>hsla()</code> (どちらも引数の構文が同じ)、関数の引数をカンマの代わりに空白で区切るこおｔ、アルファ値のパーセント値表記、<code>hsl()</code> 色の色相の角度表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>システム色を非推奨化。 SVG 色を追加。<code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数記法を追加</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td><code>orange</code> キーワードとシステム色を追加</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">初回定義。基本16色のキーワードを含む。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("opacity")}} プロパティは要素レベルで色の透明度を定義できます。</li>
+ <li>このデータ型を使用するよく使われるプロパティ: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/column-count/index.html b/files/ja/web/css/column-count/index.html
new file mode 100644
index 0000000000..9f1ee0dbb3
--- /dev/null
+++ b/files/ja/web/css/column-count/index.html
@@ -0,0 +1,100 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - リファレンス
+  - 段組み
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>column-count</code></strong> プロパティは、指定された段数で要素のコンテンツを分割します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+column-count: auto;
+
+/* &lt;integer&gt; 値 */
+column-count: 3;
+
+/* グローバル値 */
+column-count: inherit;
+column-count: initial;
+column-count: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>正の{{cssxref("&lt;integer&gt;", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が <code>auto</code> 以外の値で一緒に設定された場合は、最大の列数を示します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</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 Multicol', '#cc', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a> (レイアウトの学習)</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みの基本概念</a></li>
+</ul>
diff --git a/files/ja/web/css/column-fill/index.html b/files/ja/web/css/column-fill/index.html
new file mode 100644
index 0000000000..1ccb7597ae
--- /dev/null
+++ b/files/ja/web/css/column-fill/index.html
@@ -0,0 +1,110 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>column-fill</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* グローバル値 */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<p><code>column-fill</code> プロパティは、以下に挙げたキーワード値のうちの1つで指定します。初期値は <code>balance</code> で、コンテンツは段の間で均等になります。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。</dd>
+ <dt><code>balance</code></dt>
+ <dd>コンテンツは各段に均等に分割されます。<a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a>などの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。</dd>
+ <dt><code>balance-all</code></dt>
+ <dd>コンテンツは格段に均等に分割されます。<a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a>などの断片化されたコンテキストでは、すべての断片が均等になります。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Splitting_text_evenly_across_columns" name="Splitting_text_evenly_across_columns">テキストを段間で均等に分割</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="content-box"&gt;
+  This is a bunch of text split into multiple
+  columns. The CSS `column-fill` property is
+  used to spread the contents evenly across
+  all the columns.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight=[4] notranslate">.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Splitting_text_evenly_across_columns', 'auto', 120)}}</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 Multicol', '#cf', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.column-fill")}}</p>
+
+<div class="blockIndicator warning">
+<p>仕様上の未解決の問題により、 <code>column-fill</code> にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。</p>
+
+<p>特に、 <code>column-fill: auto</code> を使用して連続的に列を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。</p>
+</div>
diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.html
new file mode 100644
index 0000000000..4708977143
--- /dev/null
+++ b/files/ja/web/css/column-gap/index.html
@@ -0,0 +1,209 @@
+---
+title: column-gap (grid-column-gap)
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - CSS ボックス配置
+  - CSS 段組みレイアウト
+  - Reference
+  - column-gap
+  - 'recipe:css-property'
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>column-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-gap.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>当初は<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>の一部でしたが、 <code>column-gap</code> の定義は複数のレイアウト方法を含めるように拡張されました。現在は<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。</p>
+
+<div class="note">
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>は当初、 <code>grid-column-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>column-gap</code> で置き換えられました。しかし、グリッドで <code>grid-column-gap</code> を実装しており <code>column-gap</code> を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css; no-line-numbers notranslate">/* キーワード値 */
+column-gap: normal;
+
+/* &lt;length&gt; 値 */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* &lt;percentage&gt; 値 */
+column-gap: 3%;
+
+/* グローバル値 */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+</pre>
+
+<p><code>column-gap</code> プロパティは以下に挙げた値の一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは <code>1em</code> と指定され、他の種類のレイアウトでは 0 になります。</dd>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>段間 (列間) の寸法を {{CSSxRef("&lt;length&gt;")}} として定義します。 {{CSSxRef("&lt;length&gt;")}} のプロパティ値は負の数であってはいけません。</dd>
+ <dt>{{CSSxRef("&lt;percentage&gt;")}}</dt>
+ <dd>段間 (列間) の寸法を {{CSSxRef("&lt;percentage&gt;")}} として定義します。 {{CSSxRef("&lt;percentage&gt;")}} のプロパティ値は負の数であってはいけません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4] notranslate">#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: auto;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p>
+
+<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-column-gap: 20px;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6] notranslate">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p>
+
+<h3 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="content-box"&gt;
+  This is some multi-column text with a 40px column
+  gap created with the CSS `column-gap` property.
+  Don't you think that's fun and exciting? I sure do!
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush:css notranslate">.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</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 Box Alignment", "#column-row-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>グリッド及びフレックスボックスに適用</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>グリッドレイアウトにどう適用されるかを指定</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Multicol")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.column-gap.grid_context")}}</p>
+
+<h3 id="Support_in_Multi-column_layout" name="Support_in_Multi-column_layout">段組みレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.column-gap.multicol_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}}</li>
+ <li>グリッドレイアウトのガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
+ <li>段組みレイアウトのガイド: <em><a href="/ja/docs/Web/CSS/CSS_Columns/Styling_Columns">段組みのスタイル付け</a></em></li>
+</ul>
diff --git a/files/ja/web/css/column-rule-color/index.html b/files/ja/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..8aecf5ad2d
--- /dev/null
+++ b/files/ja/web/css/column-rule-color/index.html
@@ -0,0 +1,103 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - HTML 色
+  - Reference
+  - 段組み
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>column-rule-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで段間に引かれる線の色を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;color&gt; 値 */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* グローバル値 */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+</pre>
+
+<p><code>column-rule-color</code> プロパティは、単一の <code>&lt;color&gt;</code> 値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>段を分割する段間罫の色です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.column-rule-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/column-rule-style/index.html b/files/ja/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..04f25f3270
--- /dev/null
+++ b/files/ja/web/css/column-rule-style/index.html
@@ -0,0 +1,99 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - Reference
+  - 段組み
+translation_of: Web/CSS/column-rule-style
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>column-rule-style</code></strong> プロパティは、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;'border-style'&gt; の値 */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* グローバル値 */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+</pre>
+
+<p><code>column-rule-style</code> プロパティは、単一の <code>&lt;'border-style'&gt;</code> 値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>{{ cssxref("border-style") }} で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-style` property is used to change
+   the style of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  column-count: 3;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</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 Multicol', '#crs', 'column-rule-style') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.column-rule-style")}}</p>
diff --git a/files/ja/web/css/column-rule-width/index.html b/files/ja/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..f946e5e131
--- /dev/null
+++ b/files/ja/web/css/column-rule-width/index.html
@@ -0,0 +1,99 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - Reference
+  - 段組み
+translation_of: Web/CSS/column-rule-width
+---
+<div>{{ CSSRef}}</div>
+
+<p><strong><code>column-rule-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* &lt;length&gt; 値 */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* グローバル値 */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+</pre>
+
+<p><code>column-rule-width</code> プロパティは単一の <code>&lt;'border-width'&gt;</code> の値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("&lt;length&gt;")}} または <code>thin</code>、 <code>medium</code>、 <code>thick</code> のキーワードのいずれかです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;This is a bunch of text split into three columns.
+   The `column-rule-width` property is used to change
+   the width of the line that is drawn between columns.
+   Don't you think that's wonderful?&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-width: thick;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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 Multicol', '#crw', 'column-rule-width') }}</td>
+   <td>{{ Spec2('CSS3 Multicol') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.column-rule-width")}}</p>
diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html
new file mode 100644
index 0000000000..ed13f58638
--- /dev/null
+++ b/files/ja/web/css/column-rule/index.html
@@ -0,0 +1,130 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - column-rule
+  - column-rule-color
+  - column-rule-style
+  - column-rule-width
+  - リファレンス
+  - 一括指定プロパティ
+  - 段組み
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>column-rule</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>を行う <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>これは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>であり、一回の便利な宣言で個別の <code>column-rule-*</code> プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* グローバル値 */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</pre>
+
+<p><code>column-rule</code> プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'column-rule-width'&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} または3つのキーワード、 <code>thin</code>, <code>medium</code>, <code>thick</code> のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。</dd>
+ <dt><code>&lt;'column-rule-style'&gt;</code></dt>
+ <dd>有効な値と詳細は {{cssxref("border-style")}} を参照してください。</dd>
+ <dt><code>&lt;'column-rule-color'&gt;</code></dt>
+ <dd>{{cssxref("&lt;color&gt;")}} 値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Example_1" name="Example_1">例1</h3>
+
+<pre class="brush: css">/* "medium dotted currentColor" と同じ */
+p.foo { column-rule: dotted; }
+
+/* "medium solid blue" と同じ */
+p.bar { column-rule: solid blue; }
+
+/* "8px solid currentColor" と同じ */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+</pre>
+
+<h3 id="Example_2" name="Example_2">例2</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Example_2')}}</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 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
diff --git a/files/ja/web/css/column-span/index.html b/files/ja/web/css/column-span/index.html
new file mode 100644
index 0000000000..63a153b5c6
--- /dev/null
+++ b/files/ja/web/css/column-span/index.html
@@ -0,0 +1,117 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/column-span
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>column-span</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、値に <code>all</code> を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+column-span: none;
+column-span: all;
+
+/* グローバル値 */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+</pre>
+
+<p>複数の段にまたがる要素は、<ruby><strong>スパニング要素</strong><rp> (</rp><rt>spanning element</rt><rp>) </rp></ruby>と呼びます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>column-span</code> プロパティは以下に挙げたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>この要素は複数の段にまたがりません。</dd>
+ <dt><code>all</code></dt>
+ <dd>この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Making_a_heading_span_columns" name="Making_a_heading_span_columns">段をまたぐ見出しの設定</h3>
+
+<p>この例では、見出しが記事のすべての段にまたがって作成されます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;h2&gt;Header spanning all of the columns&lt;/h2&gt;
+  &lt;p&gt;
+     The h2 should span all the columns. The rest
+     of the text should be distributed among the columns.
+  &lt;/p&gt;
+  &lt;p&gt;This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.&lt;/p&gt;
+  &lt;p&gt;This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.&lt;/p&gt;
+  &lt;p&gt;This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.&lt;/p&gt;
+  &lt;p&gt;This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.&lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}}</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 Multicol', '#column-span', 'column-span')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.column-span")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a></li>
+ <li>{{domxref("HTMLSpanElement")}} </li>
+</ul>
diff --git a/files/ja/web/css/column-width/index.html b/files/ja/web/css/column-width/index.html
new file mode 100644
index 0000000000..159888d092
--- /dev/null
+++ b/files/ja/web/css/column-width/index.html
@@ -0,0 +1,110 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS 段組みレイアウト
+  - リファレンス
+  - 段組み
+translation_of: Web/CSS/column-width
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>column-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、段組みレイアウトで理想的な段の幅を設定します。</span>コンテナーは <code>column-width</code> の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) {{cssxref("column-count")}} プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}}, {{cssxref('column-rule-width')}} です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+column-width: auto;
+
+/* &lt;length&gt; 値 */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* グローバル値 */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+</pre>
+
+<p><code>column-width</code> プロパティは以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。余白を埋める必要がある場合は広くなる可能性があり、利用可能な幅が小さすぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>段の幅は {{cssxref("column-count")}} などの他の CSS プロパティによって決定されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  column-width: 100px;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 160)}}</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('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}</td>
+   <td>{{Spec2('CSS4 Writing Modes')}}</td>
+   <td><code>min-content</code>, <code>max-content</code>, <code>fill-available</code>, <code>fit-content</code> の各キーワードによって固有の寸法を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.column-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a> (レイアウトの学習)</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みの基本概念</a></li>
+</ul>
diff --git a/files/ja/web/css/column_combinator/index.html b/files/ja/web/css/column_combinator/index.html
new file mode 100644
index 0000000000..8e533ec13e
--- /dev/null
+++ b/files/ja/web/css/column_combinator/index.html
@@ -0,0 +1,99 @@
+---
+title: 列結合子
+slug: Web/CSS/Column_combinator
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Selectors
+  - セレクター
+  - 表
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p><ruby><strong>列結合子</strong><rp> (</rp><rt>column combinator</rt><rp>) </rp></ruby> (<code>||</code>) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。</p>
+
+<pre class="brush: css">/* 表の "selected" クラスの列に所属するセル */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* スタイルプロパティ */</var>
+}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%")}}</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("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.selectors.column")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>
diff --git a/files/ja/web/css/columns/index.html b/files/ja/web/css/columns/index.html
new file mode 100644
index 0000000000..6f01f3ac59
--- /dev/null
+++ b/files/ja/web/css/columns/index.html
@@ -0,0 +1,103 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - CSS Property
+  - CSS 段組みレイアウト
+  - Reference
+  - 一括指定プロパティ
+  - 段組み
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>columns</code></strong> プロパティは、段組みされた要素の段の幅や段数を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 段の幅 */
+columns: 18em;
+
+/* 段数 */
+columns: auto;
+columns: 2;
+
+/* 段の幅と段数の両方 */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* グローバル値 */
+columns: inherit;
+columns: initial;
+columns: unset;</pre>
+
+<p><code>columns</code> プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'column-width'&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 値または <code>auto</code> キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。</dd>
+ <dt><code>&lt;'column-count'&gt;</code></dt>
+ <dd>正の {{cssxref("&lt;integer&gt;")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が <code>auto</code> 以外の値で一緒に設定された場合は、最大の段数を示します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.content-box {
+  columns: 3 auto;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 120)}}</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 Multicol', '#columns', 'columns')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.columns")}}</p>
diff --git a/files/ja/web/css/comments/index.html b/files/ja/web/css/comments/index.html
new file mode 100644
index 0000000000..2c90a49e58
--- /dev/null
+++ b/files/ja/web/css/comments/index.html
@@ -0,0 +1,54 @@
+---
+title: コメント
+slug: Web/CSS/Comments
+tags:
+  - CSS
+  - CSS 構文と基本データ型
+  - Reference
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の<strong>コメント</strong>は、説明的なメモをコードに追加したり、スタイルシートの特定の部分をブラウザーに解釈させないようにしたりするために使用します。設計上、コメントは文書のレイアウトにおいて効果を持ちません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>コメントはスタイルシート内で、ホワイトスペースが置ける場所ならばどこでも配置できます。1行で使用したり、複数行に渡らせたりすることができます。</p>
+
+<pre class="syntaxbox">/* コメント */</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">/* 1行のコメント */
+
+/*
+複数行に
+またがる
+コメント
+*/
+
+/* 以下のコメントは、特定の
+   スタイルを無効にします。 */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p><code>/* */</code> のコメント構文は、1行のコメントにも複数行のコメントにも使用されます。外部のスタイルシートでコメントを指定する方法は他にありません。しかし、推奨されませんが、 {{htmlelement("style")}} 要素を使用するときは、古いブラウザーから CSS を隠すために <code>&lt;!-- --&gt;</code> を使用することができます。 <code>/* */</code> のコメント文法を使用する他のプログラミング言語と同様、コメントはネストできません。言い換えれば、 <code>/*</code> の後で最初に <code>*/</code> が出現すると、コメントが終了します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/common_css_questions/index.html b/files/ja/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..4307266923
--- /dev/null
+++ b/files/ja/web/css/common_css_questions/index.html
@@ -0,0 +1,231 @@
+---
+title: CSS の一般的な質問
+slug: Web/CSS/Common_CSS_Questions
+tags:
+  - CSS
+  - FAQ
+  - Web
+  - questions
+  - ガイド
+  - 例
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<p><span class="seoSummary">この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。</span></p>
+
+<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly" name="Why_doesn't_my_CSS_which_is_valid_render_correctly">なぜ CSS が妥当なのに正しくレンダリングされないのか？</h2>
+
+<p>ブラウザーは <code>DOCTYPE</code> 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい <code>DOCTYPE</code> 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。</p>
+
+<p>現代のブラウザーは、2つの主要なレンダリングモードを備えています。</p>
+
+<ul>
+ <li><em>Quirks Mode</em>: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 <code>DOCTYPE</code> 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の <code>DOCTYPE</code> 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。</li>
+ <li><em>Standards Mode</em>: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい <code>DOCTYPE</code> 宣言を持つページは Standards Mode でレンダリングされます。</li>
+</ul>
+
+<p>Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードであります<em><a href="/ja/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> があります。</p>
+
+<p>以下は Standards Mode または Almost Standards Mode になる <code>DOCTYPE</code> 宣言で、もっとも一般的に使用されるものの一覧です:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
+                   この doctype が推奨されます */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<p>可能な限り、 HTML5 の doctype を使用するべきです。</p>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">なぜ CSS が妥当なのにまったくレンダリングされないのか?</h2>
+
+<p>以下のような可能性があります。</p>
+
+<ul>
+ <li>CSS ファイルへのパスが間違っている。</li>
+ <li>適用されるためには、 CSS スタイルシートを MIME タイプ <code>text/css</code> で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。</li>
+</ul>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><code>id</code> と <code>class</code> の違いは何か?</h2>
+
+<p>HTML の要素は、 <code>id</code> 属性と <code>class</code> 属性の片方または両方を持つことができます。 <code>id</code> 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 <code>class</code> 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の <code>id</code> または <code>class</code> 名に対してスタイルを設定できます。</p>
+
+<ul>
+ <li>ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。</li>
+ <li>適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。</li>
+</ul>
+
+<p>一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。</p>
+
+<ul>
+ <li>class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります</li>
+ <li>class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です</li>
+ <li>class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です</li>
+</ul>
+
+<div class="note">
+<p><strong>注</strong>: 詳しくは <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a> もご覧ください。</p>
+</div>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">プロパティの既定値に戻すにはどうすればよいのか?</h2>
+
+<p>当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。</p>
+
+<pre class="brush: css">/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: black; }</pre>
+
+<p>これは CSS 2 で変わり、<a href="/ja/docs/CSS/initial" title="initial">initial</a> キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。</p>
+
+<pre class="brush: css">/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: initial; }</pre>
+
+<h2 id="Derived_styles" name="Derived_styles">スタイルを他のスタイルから派生させるにはどうすればよいか?</h2>
+
+<p>CSS では、あるスタイルが他の表現で定義されることを許可していません (<a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Working Group のスタンスに関する、Eric Meyer 氏のコメント</a>をご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数</a> が導入されました。</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">ひとつの要素に複数のクラスを割り当てる方法は?</h2>
+
+<p>HTML の要素は <code>class</code> 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。<code>class</code> 属性内のクラスの順序は関係がありません。</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">なぜ私のスタイル規則は正しく動作しないのか?</h2>
+
+<p>構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために <a href="/ja/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> の <em>CSS Style Rules</em> ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 要素の階層</h3>
+
+<p>CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- ニュース項目は黒色ですが、社名は赤色かつ太字です --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">明示的に再定義されたスタイル規則</h3>
+
+<p>CSS スタイルシートでは、順序<strong>こそが</strong>重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  他の規則             */
+/*  他の規則             */
+/*  他の規則             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">ショートハンドプロパティの使用</h3>
+
+<p>ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序<strong>こそが</strong>重要であるためです。</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><code>*</code> セレクタの使用</h3>
+
+<p>ワイルドカードセレクタ <code>*</code> はすべての要素を参照するものであり、特に注意して使用しなければなりません。</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>この例では、<code>body *</code> セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した <code>font-weight: bold;</code> は、body 内の全要素に適用した <code>font-weight: normal;</code> にオーバーライドされます。</p>
+
+<p>特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS の詳細度</h3>
+
+<p>ある要素に複数の規則を適用すると、スタイルの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity" title="Specificity">詳細さ</a>に従って規則が選ばれます。インラインスタイル（HTML の <code>style</code> 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a> でご覧いただけます。</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?</h2>
+
+<p>これらのプロパティは<em>接頭辞付きプロパティ</em>と呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。</p>
+
+<p>本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの <code>-webkit-</code> 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが <code>-webkit-</code> プレフィックスエイリアスを実装し始めました。</p>
+
+<p>実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。</p>
+
+<p>作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span>deg<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 接頭辞付きプロパティの処理の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザテスト</a>モジュールの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理</a>を参照してください。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ</strong>: Mozilla をプレフィックスとする CSS プロパティの詳細については、<a href="/ja/docs/Web/CSS/Mozilla_Extensions">CSS の Mozilla 拡張</a>ページを参照してください。</p>
+</div>
+
+<h2 id="How_does_z-index_relate_to_positioning.3F" name="How_does_z-index_relate_to_positioning.3F">z-index は位置指定へどのように関係するのか?</h2>
+
+<p>z-index プロパティは、要素を積み重ねる順序を指定します。</p>
+
+<p>z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (<code>position:absolute</code>、<code>position:relative</code>、または  <code>position:fixed</code>) を持つ要素に対してのみ機能します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">ポジショニング</a>学習の記事、特に <a href="/ja/docs/Learn/CSS/CSS_layout/Positioning#Introducing_z-index">z-index の紹介</a>セクションを参照してください。</p>
+</div>
diff --git a/files/ja/web/css/compositing_and_blending/index.html b/files/ja/web/css/compositing_and_blending/index.html
new file mode 100644
index 0000000000..bcac5a1c4a
--- /dev/null
+++ b/files/ja/web/css/compositing_and_blending/index.html
@@ -0,0 +1,78 @@
+---
+title: 合成と混合
+slug: Web/CSS/Compositing_and_Blending
+tags:
+  - CSS
+  - リファレンス
+  - 合成と混合
+  - 概要
+translation_of: Web/CSS/Compositing_and_Blending
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>合成と混合</strong><rp> (</rp><rt>Compositing and Blending</rt><rp>) </rp></ruby>は CSS モジュールの一つで、様々な要素のシェイプを単一の画像に合成する方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("isolation")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+</ul>
+</div>
+
+<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("Compositing")}}</td>
+   <td>{{Spec2("Compositing")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="background-blend-mode_プロパティ"><code>background-blend-mode</code> プロパティ</h3>
+
+<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.properties.background-blend-mode")}}</p>
+</div>
+
+<h3 id="isolation_プロパティ"><code>isolation</code> プロパティ</h3>
+
+<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.properties.isolation")}}</p>
+</div>
+
+<h3 id="mix-blend-mode_プロパティ"><code>mix-blend-mode</code> プロパティ</h3>
+
+<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.properties.mix-blend-mode")}}</p>
+</div>
diff --git a/files/ja/web/css/computed_value/index.html b/files/ja/web/css/computed_value/index.html
new file mode 100644
index 0000000000..f08509b8d0
--- /dev/null
+++ b/files/ja/web/css/computed_value/index.html
@@ -0,0 +1,59 @@
+---
+title: 計算値
+slug: Web/CSS/computed_value
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - リファレンス
+translation_of: Web/CSS/computed_value
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の プロパティの<ruby><strong>計算値</strong><rp> (</rp><rt>computed value</rt><rp>) </rp></ruby>は、継承の過程で親から子へ伝えられる値です。</span>これは<a href="/ja/docs/Web/CSS/specified_value">指定値</a>から計算されます。</p>
+
+<ol>
+ <li>特殊な値である {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}} を扱います。</li>
+ <li>プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。</li>
+</ol>
+
+<p>プロパティの計算値に達するのに必要な計算は、一般に (<code>em</code> の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に <code>font-size: 16px</code> と <code>padding-top: 2em</code> が指定された場合、 <code>padding-top</code> の計算値は <code>32px</code> (フォントサイズの倍) になります。</p>
+
+<p>しかしながら、いくつかのプロパティ (<code>width</code>, <code>margin-right</code>, <code>text-indent</code>, <code>top</code> など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント指定された値はパーセント計算された値に変わります。さらに、 <code>line-height</code> に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、<a href="/ja/docs/Web/CSS/used_value">使用値</a>が定義された場合、絶対値になります。</p>
+
+<div class="note">
+<p><strong>注:</strong> DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は<a href="/ja/docs/Web/CSS/resolved_value">解決値</a>を返しますが、これはプロパティによって<a href="/ja/docs/Web/CSS/computed_value">計算値</a>であるか<a href="/ja/docs/Web/CSS/used_value">使用値</a>であるかが変わります。</p>
+</div>
+
+<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("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td>
+    <p>変更なし</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/conic-gradient()/index.html b/files/ja/web/css/conic-gradient()/index.html
new file mode 100644
index 0000000000..bd847a2406
--- /dev/null
+++ b/files/ja/web/css/conic-gradient()/index.html
@@ -0,0 +1,269 @@
+---
+title: conic-gradient()
+slug: Web/CSS/conic-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラデーション
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/conic-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 <code>conic-gradient()</code> 関数の結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>他のグラデーションと同様、扇形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <code>&lt;image&gt;</code> の寸法に一致します。</p>
+
+<p>繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。</p>
+
+<p>g</p>
+
+<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>conic-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+<div class="blockIndicator note">
+<p>なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。</p>
+</div>
+
+<h2 id="Understanding_conic_gradients" name="Understanding_conic_gradients">扇型グラデーションの理解</h2>
+
+<p>扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p>
+
+<p><img alt="扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点" src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>
+
+<p>扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。<a href="/ja/docs/Web/CSS/length">長さ</a>を指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には<a href="/ja/docs/Web/CSS/angle">度</a>を表す <code>deg</code>、グラデーションを表す <code>grad</code>、ラジアンを表す <code>rad</code>、回転数を表す <code>turn</code> があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。</p>
+
+<p>放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。</p>
+
+<p>グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の<em>始点</em>は北、つまり12時の方向です。そして、グラデーションは <em>from</em> の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。</p>
+
+<h3 id="Customizing_gradients" name="Customizing_gradients">グラデーションのカスタマイズ</h3>
+
+<p>By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("&lt;angle&gt;")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent</p>
+
+<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>
+
+<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.</p>
+
+<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>
+
+<p>If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre>
+
+<p>Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient</p>
+
+<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+</pre>
+
+<p>There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+</pre>
+
+<p>And, yes, you can mix and match different angle units, but don't. The above is hard to read.</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="language-css notranslate" id="css">/* 45度回転した扇形グラデーション、
+   青で始まり赤で終わる */
+conic-gradient(from 45deg, blue, red);
+
+/* A a bluish purple box: the gradient goes from blue to red,
+   but as only the bottom right quadrant is visible, as the
+   center of the conic gradient is in at the top left corner */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* 色相環 */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Preceded by the <code>from</code> keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Using the same length, order and keyterm values as the <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property, the position defines center of the gradient. If omitted, the default value is <code>center</code>, meaing the gradient will be centered, .</dd>
+ <dt><code>&lt;angular-color-stop&gt;</code></dt>
+ <dd>A color-stop's {{CSSxRef("&lt;color&gt;")}} value, followed by one or two optional stop positions, (an {{CSSxRef("&lt;angle&gt;")}} along the gradient's circumference axis).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">conic-gradient(
+  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
+  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
+  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
+  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>
+<h3 id="Gradient_at_a_40-degrees" name="Gradient_at_a_40-degrees">40度のグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Off-centered_gradient" name="Off-centered_gradient">中心をずらしたグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}</pre>
+
+<p>{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Gradient_pie-chart" name="Gradient_pie-chart">グラデーションの円グラフ</h3>
+
+<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}</pre>
+
+<p>{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Checkerboard">Checkerboard</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}</pre>
+
+<p>{{EmbedLiveSample("Checkerboard", 120, 120)}}</p>
+</div>
+
+<div class="note">
+<p><strong>注:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
+</div>
+
+<h2 id="Acessibility_Concerns" name="Acessibility_Concerns">アクセシビリティの考慮事項</h2>
+
+<p>Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>他のグラデーション関数: {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/contain/index.html b/files/ja/web/css/contain/index.html
new file mode 100644
index 0000000000..ce4baf2d86
--- /dev/null
+++ b/files/ja/web/css/contain/index.html
@@ -0,0 +1,210 @@
+---
+title: contain
+slug: Web/CSS/contain
+tags:
+  - CSS
+  - CSS Containment
+  - CSS Property
+  - Layout
+  - NeedsExample
+  - Paint
+  - Reference
+  - Style
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/contain
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>contain</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から<em>独立している</em>ことを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。</p>
+
+<p>このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> (<code>paint</code>, <code>strict</code>, <code>content</code> のいずれかの値で) 適用された場合、このプロパティは以下のものを生成します。</p>
+
+<ol>
+ <li>新しい<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a> (対象は {{cssxref("position")}} プロパティが <code>absolute</code> または <code>fixed</code> の子孫)。</li>
+ <li>新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>。</li>
+ <li>新しい<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>。</li>
+</ol>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate ">/* キーワード値 */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 複数のキーワード */
+contain: size paint;
+contain: size layout paint;
+
+/* グローバル値 */
+contain: inherit;
+contain: initial;
+contain: unset;</pre>
+
+<p><code>contain</code> プロパティは以下のうちの一つで指定します。</p>
+
+<ul>
+ <li><code>none</code>, <code>strict</code>, <code>content</code> の何れかのキーワードを単独で使用。</li>
+ <li><code>size</code>, <code>layout</code>, <code>style</code>, and <code>paint</code> の各キーワードを1つ以上、任意の順序で使用。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>その要素が通常通り描画され、抑制を適用しないことを示します。</dd>
+ <dt><code>strict</code></dt>
+ <dd><code>style</code> を除くすべての抑制規則がその要素に適用されることを示します。これは <code>contain: size layout paint</code> と同等です。</dd>
+ <dt><code>content</code></dt>
+ <dd><code>size</code> および <code>style</code> 以外の抑制規則がその要素に適用されることを示します。これは <code>contain: layout paint</code> と同等です。</dd>
+ <dt><code>size</code></dt>
+ <dd>子孫の寸法を確認する必要なく、その要素の寸法を変更できることを示します。</dd>
+ <dt><code>layout</code></dt>
+ <dd>要素の外側が内部のレイアウトなどに影響しないことを示します。</dd>
+ <dt><code>style</code></dt>
+ <dd>ある要素とその子孫以外に影響を及ぼす可能性のあるプロパティの場合、その要素が含まれている要素をエスケープしないことを示します。なお、この値は仕様書で「リスクあり」と位置づけられており、どこでも対応しているとは限りません。</dd>
+ <dt><code>paint</code></dt>
+ <dd>その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_layout" name="Simple_layout">単純なレイアウト</h3>
+
+<p>以下のマークアップは多数のコンテンツを持つ記事からなるものです。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>それぞれの <code>&lt;article&gt;</code> および <code>&lt;img&gt;</code> には境界があり、画像は浮動状態です。</p>
+
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}</pre>
+
+<p>{{EmbedLiveSample('Simple_layout', '100%', '300')}}</p>
+
+<h3 id="Float_interference" name="Float_interference">浮動要素の干渉</h3>
+
+<p>1つ目の記事の下部に別の画像を挿入すると、 DOM ツリーの大部分が再レイアウトされたり、再描画されたりする可能性があり、2つ目の記事のレイアウトにも支障をきたしてしまいます。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+  &lt;img src="i-just-showed-up.jpg" alt="social"&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>ご覧の通り、浮動要素の動作方法が原因で、最初の画像が2つ目の記事の領域内に掛かってしまっています。</p>
+
+<p>{{EmbedLiveSample('Float_interference', '100%', '300')}}</p>
+
+<h3 id="Fixing_with_contain" name="Fixing_with_contain">contain による修正</h3>
+
+<p>それぞれの <code>article</code> の <code>contain</code> プロパティを <code>content</code> の値を設定することで、新しい要素が挿入されたときに、ブラウザーはそれが含まれる要素のサブツリーの再計算をするだけで、その外側には何もする必要がないことを理解します。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+  &lt;img src="i-just-showed-up.jpg" alt="social"&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+</div>
+
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}</pre>
+
+<p>これで、最初の画像が2つ目の記事の下に浮いてくることなく、包含する要素の範囲内に留まることも意味します。</p>
+
+<p>{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}</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('CSS Containment')}}</td>
+   <td>{{Spec2('CSS Containment')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.global_keywords.initial")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Containment">CSS 抑制</a></li>
+ <li>CSS の {{cssxref("position")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/containing_block/index.html b/files/ja/web/css/containing_block/index.html
new file mode 100644
index 0000000000..9239a20877
--- /dev/null
+++ b/files/ja/web/css/containing_block/index.html
@@ -0,0 +1,269 @@
+---
+title: レイアウトと包含ブロック
+slug: Web/CSS/Containing_block
+tags:
+  - CSS
+  - CSS Position
+  - Containers
+  - Guide
+  - Layout
+  - Position
+  - Style
+  - blocks
+  - containing block
+  - size
+translation_of: Web/CSS/Containing_block
+---
+<div>{{cssref}}</div>
+
+<p>要素の寸法や位置は、しばしば<ruby><strong>包含ブロック</strong><rp> (</rp><rt>containing block</rt><rp>) </rp></ruby>に影響されます。多くの場合、包含ブロックは要素から見て直近の<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル</a>の祖先の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">コンテンツ領域</a>ですが、常にそうとは限りません。<span class="seoSummary">この記事では、要素の包含ブロックが決まる要因を学びます。</span></p>
+
+<p>ユーザーエージェント (ブラウザーなど) が文書をレイアウトする時、それぞれの要素にボックスを生成します。それぞれのボックスは４つの領域に分かれます。</p>
+
+<ol start="1">
+ <li>コンテンツ領域</li>
+ <li>パディング領域</li>
+ <li>境界領域</li>
+ <li>マージン領域</li>
+</ol>
+
+<p><img alt="ボックスモデルの図" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<p>多くの開発者が、要素の包含ブロックは常に親要素のコンテンツ領域であると信じていますが、それは必ずしも正しくありません。要素の包含ブロックが何になるかを決定する要因を調べてみましょう。</p>
+
+<h2 id="Effects_of_the_containing_block" name="Effects_of_the_containing_block">包含ブロックの影響</h2>
+
+<p>何が要素の包含ブロックを決定するかを学習する前に、最初になぜそのようなことが起こるのかを知っておくと役立ちます。</p>
+
+<p>要素の寸法と位置は、しばしば包含ブロックに影響されます。 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} に適用されるパーセント値や、絶対位置指定要素 (つまり、 {{cssxref("position")}} が <code>absolute</code> または <code>fixed</code> に設定されている要素) のオフセットプロパティは、要素の包含ブロックから計算されます。</p>
+
+<h2 id="Identifying_the_containing_block" name="Identifying_the_containing_block">包含ブロックの識別</h2>
+
+<p>包含ブロックを識別するプロセスは、要素の {{cssxref("position")}} プロパティの値に全面的に依存します。</p>
+
+<ol start="1">
+ <li><code>position</code> プロパティが <code><strong>static</strong></code>, <code><strong>relative</strong></code>, <strong><code>sticky</code></strong> のいずれかの場合、包含ブロックは<strong>ブロックコンテナー</strong> (inline-block, block, list-item などの要素) または<strong>整形コンテキストを確立する</strong>要素 (表コンテナー、フレックスコンテナー、グリッドコンテナー、ブロックコンテナー自身など) である直近の祖先要素の<em>コンテンツボックス</em>の辺によって構成されます。</li>
+ <li><code>position</code> プロパティが <code><strong>absolute</strong></code> の場合、包含ブロックは <code>position</code> の値が <code>static</code> 以外 (<code>fixed</code>, <code>absolute</code>, <code>relative</code>, <code>sticky</code>) の直近の祖先要素における<em>パディングボックス</em>の辺によって構成されます。</li>
+ <li><code>position</code> プロパティが <code><strong>fixed</strong></code> の場合、包含ブロックは{{glossary("viewport", "ビューポート")}} (連続的なメディアの場合) またはページ領域 (ページメディアの場合) によって確立されます。</li>
+ <li><code>position</code> プロパティが <code><strong>absolute</strong></code> または <code><strong>fixed</strong></code> の場合、包含ブロックは以下の条件を持った直近の祖先要素における<em>パディングボックス</em>の辺によって構成されることがあります。
+  <ol start="1">
+   <li>{{cssxref("transform")}} または {{cssxref("perspective")}} の値が <code>none</code> 以外である</li>
+   <li>{{cssxref("will-change")}} の値が <code>transform</code> または <code>perspective</code> である</li>
+   <li>{{cssxref("filter")}} の値が <code>none</code> 以外、または <code>will-change</code> の値が <code>filter</code> の場合 (Firefox のみで動作)。</li>
+   <li>{{cssxref("contain")}} の値が <code>paint</code> の場合 (例 <code>contain: paint;</code>)</li>
+  </ol>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>注:</strong> ルート要素 ({{HTMLElement("html")}}) が包含ブロックである場合、<strong>初期包含ブロック</strong>と呼ばれる矩形になります。これはビューポート (連続的なメディアの場合) またはページ領域 (ページメディアの場合) の寸法を持ちます。</p>
+</div>
+
+<h2 id="Calculating_percentage_values_from_the_containing_block" name="Calculating_percentage_values_from_the_containing_block">包含ブロックからのパーセント値の計算</h2>
+
+<p>前述の通り、特定のプロパティがパーセント値を与えられた場合、計算値は要素の包含ブロックに依存します。このように動作するプロパティは<strong>ボックスモデルプロパティ</strong>及び<strong>オフセットプロパティ</strong>です。</p>
+
+<ol start="1">
+ <li>{{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} の各プロパティは、包含ブロックの <code>height</code> からパーセント値を計算します。</li>
+ <li>{{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} の各プロパティは、包含ブロックの <code>width</code> からパーセント値を計算します。</li>
+</ol>
+
+<h2 id="Some_examples" name="Some_examples">いくつかの例</h2>
+
+<p>すべての例の HTML コードは以下の通りです。</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<p>以下のそれぞれの例では、 CSS のみが異なります。</p>
+
+<h3 id="Example_1" name="Example_1">例 1</h3>
+
+<p>この例では、段落が静的に配置されているため、包含ブロックはブロックコンテナーである直近の祖先である {{HTMLElement("section")}} になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_1','100%','300')}}</p>
+
+<h3 id="Example_2" name="Example_2">例 2</h3>
+
+<p>この例では、 <code>&lt;section&gt;</code> が (<code>display: inline</code> であるため) ブロックコンテナーではなく、整形コンテキストを確立しないので、段落の包含ブロックは {{HTMLElement("body")}} 要素になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_2','100%','300')}}</p>
+
+<h3 id="Example_3" name="Example_3">例 3</h3>
+
+<p>この例では、 <code>&lt;section&gt;</code> の <code>position</code> が <code>absolute</code> であるため、段落の包含ブロックは <code>&lt;section&gt;</code> になります。段落のパーセント値は、包含ブロックの <code>padding</code> に影響されますが、 {{cssxref("box-sizing")}} の値が <code>border-box</code> である場合はそのようにはなりません。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_3','100%','300')}}</p>
+
+<h3 id="Example_4" name="Example_4">例 4</h3>
+
+<p>この例では、段落の <code>position</code> が <code>fixed</code> なので、包含ブロックは初期包含ブロック (画面の場合はビューポート) になります。従って、段落の寸法はブラウザーウィンドウの寸法に基づいて変化します。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_4','100%','300')}}</p>
+
+<h3 id="Example_5" name="Example_5">例 5</h3>
+
+<p>この例では、段落の <code>position</code> が <code>absolute</code> なので、包含ブロックは {{cssxref("transform")}} プロパティが <code>none</code> ではない直近の祖先である <code>&lt;section&gt;</code> になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;This is a paragraph!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_5','100%','300')}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>{{cssxref("all")}} プロパティは、すべての CSS 宣言を初期状態に初期化します</li>
+</ul>
diff --git a/files/ja/web/css/content/index.html b/files/ja/web/css/content/index.html
new file mode 100644
index 0000000000..c28fc33ac9
--- /dev/null
+++ b/files/ja/web/css/content/index.html
@@ -0,0 +1,297 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 生成コンテンツ
+  - Reference
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>content</code></strong> プロパティは、要素を生成された値で置き換えます。 <code>content</code> プロパティを使用して挿入されたオブジェクトは、<em>無名の<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></em>になります。</p>
+
+<pre class="brush:css no-line-numbers">/* 他の値と組み合わせることができないキーワード */
+content: normal;
+content: none;
+
+/* <a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a> 値 */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* 生成コンテンツの代替テキスト、第3水準の仕様書で追加 */
+content: url("http://www.example.com/test.png") / "This is the alt text";
+
+/* 以下の値は ::before および ::after を使用して生成されたコンテンツにのみ適用 */
+
+/* &lt;string&gt; 値 */
+content: "prefix";
+
+/* &lt;counter&gt; 値 */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* HTML 属性値にリンクした attr() 値 */
+content: attr(value string);
+
+/* 言語や位置に依存したキーワード */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* normal と none を除き、複数の値が同時に使用可 */
+content: open-quote chapter_counter;
+
+/* グローバル値 */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>擬似要素は生成されません。</dd>
+ <dt><code>normal</code></dt>
+ <dd><code>:before</code> および <code>:after</code> 擬似要素では <code>none</code> として計算されます。</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>要素の「代替テキスト」を指定します。この値は任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスを使用してエンコードする必要があります。例えば、 <code>\000A9</code> は著作権記号を表します。</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>{{cssxref("&lt;url&gt;")}} または {{cssxref("&lt;gradient&gt;")}} データ型で示された {{cssxref("&lt;image&gt;")}}、または表示するコンテンツを記述する {{cssxref("element", "element()")}} 関数で定義されたウェブページの一部です。</dd>
+ <dt>{{cssxref("&lt;counter&gt;")}}</dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>の値で、通常は数値です。 {{cssxref("counter")}} または {{cssxref("counters")}} 関数を使用して表示することができます。</dd>
+ <dd>
+ <p>{{cssxref("counter")}} 関数には、 'counter(<var>名前</var>)' または 'counter(<var>名前</var>, <var>スタイル</var>)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前の最も内側のカウンターです。指定されたスタイルで整形されます (<code>decimal</code> が既定値です)。</p>
+
+ <p>{{cssxref("counters")}} 関数も、 'counters(<var>名前</var>, <var>文字列</var>)' または 'counters(<var>名前</var>, <var>文字列</var>, <var>スタイル</var>)' の二つの形式があります。生成されるテキストは、その擬似要素のスコープにおけるその名前のすべてのカウンターの値であり、外側から内側に向けて、指定された文字列で区切られます。カウンターは指定されたスタイルで表示されます(<code>decimal</code> が既定値です)。</p>
+ </dd>
+ <dt><code>attr(x)</code></dt>
+ <dd>要素の属性の値 <em>x</em> を文字列として返します。属性 <em>x</em> が存在しない場合は、空文字列が返されます。属性名の大文字と小文字が区別されるかどうかは、文書の言語に依存します。</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>これらの値は {{cssxref("quotes")}} プロパティの対応する文字列に置き換えられます。</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>内容はありませんが、引用符の入れ子の階層を増加 (または減少) させます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Headings_and_quotes" name="Headings_and_quotes">見出しと引用符</h3>
+
+<p>この例では引用部分の周りに引用符を挿入し、見出しの前に "Chapter" の語を追加します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt;According to Sir Tim Berners-Lee,
+  &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.&lt;/q&gt;
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt;According to the Mozilla Manifesto,
+  &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.&lt;/q&gt;
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* 最後の空白は、追加コンテンツと
+                           残りのコンテンツの間を隔てる
+                           ものです */
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p>
+
+<h3 id="Image_combined_with_text" name="Image_combined_with_text">テキストと組み合わせる画像</h3>
+
+<p>この例はリンクの前に画像を挿入します。画像が見つからなければ、代わりにテキストを挿入します。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Mozilla Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p>
+
+<h3 id="Targeting_classes" name="Targeting_classes">クラスのターゲッティング</h3>
+
+<p>この例はリストの特定の項目の後に追加のテキストを挿入します。</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Paperback Best Sellers&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Political Thriller&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Halloween Stories&lt;/li&gt;
+  &lt;li&gt;My Biography&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Vampire Romance&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.new-entry::after {
+  content: " New!";  /* 先頭の空白は、追加コンテンツと
+                        残りのコンテンツの間を隔てる
+                        ものです */
+  color: red;
+}</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p>
+
+<h3 id="Images_and_element_attributes" name="Images_and_element_attributes">画像および要素の属性</h3>
+
+<p>この例はそれぞれのリンクの前に画像を挿入し、後に <code>id</code> 属性を追加します。</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+    Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+    Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+</pre>
+
+<h4 id="Result_4" name="Result_4">結果</h4>
+
+<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p>
+
+<h3 id="Element_replacement" name="Element_replacement">要素の置き換え</h3>
+
+<p>この例は要素の内容を画像で置き換えます。要素の内容を {{cssxref("&lt;url&gt;")}} または {{cssxref("&lt;image&gt;")}} の値のどちらかで置き換えることができます。 <code>::before</code> または <code>::after</code> で追加された内容は、要素の中身が置き換えられるときは生成されません。</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* 要素の置換に対応している場合は表示されない */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Result_5" name="Result_5">結果</h4>
+
+<p>{{EmbedLiveSample('Element_replacement', '100%', 200)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>CSS の生成コンテンツは <a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM</a> に含まれません。そのため、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>に現れず、支援技術とブラウザーの組み合わせによってはアナウンスされません。コンテンツがページの目的を理解する上で重要な情報を持つのであれば、文書本体に含めた方が適切です。</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">WCAG ガイドライン 1.3 の解説 – MDN</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td>代替テキストの対応を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{Cssxref("::marker")}}</li>
+ <li>{{Cssxref("quotes")}}</li>
+ <li>{{cssxref("url()", "url()")}} 関数</li>
+</ul>
diff --git a/files/ja/web/css/counter()/index.html b/files/ja/web/css/counter()/index.html
new file mode 100644
index 0000000000..7793cfceae
--- /dev/null
+++ b/files/ja/web/css/counter()/index.html
@@ -0,0 +1,140 @@
+---
+title: counter()
+slug: Web/CSS/counter()
+tags:
+  - CSS
+  - CSS Counter
+  - CSS Function
+  - Function
+  - Reference
+translation_of: Web/CSS/counter()
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>counter()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>において用いるのが多いものの、理論的には<code><a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a></code>に対応するすべての箇所で用いることができます。</p>
+
+<pre class="brush: css notranslate">/* 単純な使用法 */
+counter(countername);
+
+/* カウンターの表示の変更 */
+counter(countername, upper-roman)</pre>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">カウンター</a>自身には視覚的効果が何もありません。 <code>counter()</code> 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。</p>
+
+<div class="blockIndicator note">
+<p>注: <code>counters()</code> 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。</p>
+
+<p><a href="#Browser_compatibility">ブラウザーの互換性の表</a>を注意深く確認してから本番環境に用いてください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code> という名前は禁止です。</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の<a href="/ja/docs/Web/CSS/CSS_Counter_Styles">定義済みカウンタースタイル</a>があります。省略された場合は、既定で <code>decimal</code> になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="default_value_compared_to_upper_Roman" name="default_value_compared_to_upper_Roman">既定値と upper-roman との比較</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
+
+<h3 id="decimal-leading-zero_compared_to_lower-alpha" name="decimal-leading-zero_compared_to_lower-alpha">decimal-leading-zero と lower-alpha との比較</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, <dfn>decimal-leading-zero</dfn>) "] == ["
+               counter(count, lower-alpha) "]";
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</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 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.counter")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>CSS の <code><a href="/ja/docs/Web/CSS/counters">counters()</a></code> 関数</li>
+</ul>
diff --git a/files/ja/web/css/counter-increment/index.html b/files/ja/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..52058c8293
--- /dev/null
+++ b/files/ja/web/css/counter-increment/index.html
@@ -0,0 +1,120 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - CSS Counter
+  - CSS Lists
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/counter-increment
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>counter-increment</code></strong> プロパティは、指定された値によって <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>の値を増加又は減少させるためのプロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>注:</strong> カウンターの値は CSS の {{cssxref("counter-reset")}} プロパティを使用して任意の値にリセットすることができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* "my-counter" を 1 増加 */
+counter-increment: my-counter;
+
+/* "my-counter" を 1 減少 */
+counter-increment: my-counter -1;
+
+/* "counter1" を 1 増加、 "counter2" を 4 減少 */
+counter-increment: counter1 counter2 -4;
+
+/* 増加又は減少させない。より詳細度が低い規則を上書きするために使用 */
+counter-increment: none;
+
+/* グローバル値 */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+</pre>
+
+<p><code>counter-increment</code> プロパティは、以下の値のうちの一つで指定します。</p>
+
+<ul>
+ <li>カウンターの名前を指定する <code>&lt;custom-ident&gt;</code> と、その後に任意で <code>&lt;integer&gt;</code>。名前又は名前と数値の組み合わせを空白で区切ることで、数を増減させるカウンターを好きなだけ指定することができます。</li>
+ <li>キーワード値 <code>none</code>。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>増加の対象となる、カウンターの名前です。</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>カウンタに加える値です。指定されない場合は既定値の <code>1</code> になります。</dd>
+ <dt><code>none</code></dt>
+ <dd>カウンターは増加しません。これは既定値として、またはより詳細な規則によって増加を取り消すために使用することができます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Incrementing_named_counters" name="Incrementing_named_counters">名前付きカウンターの増加</h3>
+
+<pre class="brush: css notranslate">h1 {
+  counter-increment: chapter section 2 page;
+  /* chapter と page カウンタの値を 1 、
+     section カウンタの値を 2 増加させます。 */
+}
+</pre>
+
+<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 Lists", "#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.counter-increment")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの利用</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter")}} および {{cssxref("counters")}} 関数</li>
+</ul>
diff --git a/files/ja/web/css/counter-reset/index.html b/files/ja/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..3a0ac5be80
--- /dev/null
+++ b/files/ja/web/css/counter-reset/index.html
@@ -0,0 +1,115 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - リファレンス
+translation_of: Web/CSS/counter-reset
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>counter-reset</code></strong> プロパティは、 <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>を、与えられた値に初期化します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> カウンターの値は CSS の {{cssxref("counter-increment")}} プロパティを使用して増加させたり減少させたりすることができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* "my-counter" を 0 に設定 */
+counter-reset: my-counter;
+
+/* "my-counter" を -1 に設定 */
+counter-reset: my-counter -1;
+
+/* "counter1" を 1 に、 "counter2" を 4 に設定 */
+counter-reset: counter1 1 counter2 4;
+
+/* より詳細度が低い規則による値の初期化をキャンセル */
+counter-reset: none;
+
+/* グローバル値 */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+</pre>
+
+<p><code>counter-reset</code> プロパティは、以下のうちの一つで指定します。</p>
+
+<ul>
+ <li>カウンターの名前を指定する <code>&lt;custom-ident&gt;</code> と、その後に任意で <code>&lt;integer&gt;</code>。名前又は名前と数値の組み合わせを空白で区切ることで、初期化させるカウンターを好きなだけ指定することができます。</li>
+ <li>キーワード値 <code>none</code>。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>初期化の対象となる、カウンターの名前です。</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>要素が出現するごとに、カウンターを初期化するための値です。与えられない場合、初期値の <code>0</code> なります。</dd>
+ <dt><code>none</code></dt>
+ <dd>カウンターの初期化は行われません。これはより詳細度の低い規則によって定義された <code>counter-reset</code> を上書きするために使用することができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">h1 {
+  counter-reset: chapter section 1 page;
+  /* chapter と page カウンターを 0 に、
+     section カウンターを 1 に設定します。 */
+}
+</pre>
+
+<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 Lists', '#counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.counter-reset")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの利用</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/ja/web/css/counter-set/index.html b/files/ja/web/css/counter-set/index.html
new file mode 100644
index 0000000000..aa081fcccf
--- /dev/null
+++ b/files/ja/web/css/counter-set/index.html
@@ -0,0 +1,109 @@
+---
+title: counter-set
+slug: Web/CSS/counter-set
+tags:
+  - CSS
+  - CSS Counter
+  - CSS Lists
+  - CSS Property
+translation_of: Web/CSS/counter-set
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a>属性<strong><code>counter-set</code></strong>は，<a href="/ja/docs/Web/Guide/CSS/Counters">CSS計数</a>を指定した値に設定します。当属性は存在する計数を操作し，新しい計数を作成するのは指定された名前の計数が要素に未だ存在しない場合のみです。</span></p>
+
+<div class="note">
+<p><strong>注意:</strong> 計数値の増減分にはCSS属性{{cssxref("counter-increment")}}を用いることもできます。</p>
+</div>
+
+<h2 id="構文">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* "my-counter"を0に設定 */
+counter-set: my-counter;
+
+/* "my-counter"を-1に設定 */
+counter-set: my-counter -1;
+
+/* "counter1"を1に，"counter2"を4に設定 */
+counter-set: counter1 1 counter2 4;
+
+/* これより詳細度が低い規則で設定される全計数を消去する */
+counter-set: none;
+
+/* 大域値 */
+counter-set: inherit;
+counter-set: initial;
+counter-set: unset;
+</pre>
+
+<p><code>counter-set</code>属性には次の内どれかを指定します。</p>
+
+<ul>
+ <li>計数名<code>&lt;custom-ident&gt;</code>に引き続く任意の<code>&lt;integer&gt;</code>。指定できる計数の個数に制限はなく，それぞれを空白で区切って指定します。</li>
+ <li>予約語<code>none</code>。</li>
+</ul>
+
+<h3 id="値">値</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>設定する計数名。</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>この値が，〔当CSSが規則を適用する〕要素が現れる度に計数を設定します。指定なき場合の既定値は0です。指定した名前の計数が現在要素に存在しない場合，その要素に指定された名前の計数を初期値0で新たに作成します（ただし，作成の後，速やかに他の値に設定又は増分されます）。</dd>
+ <dt><code>none</code></dt>
+ <dd>いかなる計数の設定も行いません。より詳細度の低い規則で定めた<code>counter-set</code>を上書きするのに使えるでしょう。</dd>
+</dl>
+
+<h3 id="形式文法">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="事例">事例</h2>
+
+<pre class="brush:css">h1 {
+  counter-set: chapter section 1 page;
+  /* "chapter"及び"page"計数を0に，
+     "section"計数を1に設定 */
+}
+</pre>
+
+<h2 id="仕様書">仕様書</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 Lists', '#propdef-counter-set', 'counter-set')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.counter-set")}}</p>
+</div>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Counters">CSSカウンタの使用</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter")}}及び{{cssxref("counters")}}関数</li>
+ <li>{{cssxref("content")}}属性</li>
+</ul>
diff --git a/files/ja/web/css/counters()/index.html b/files/ja/web/css/counters()/index.html
new file mode 100644
index 0000000000..3c7412b968
--- /dev/null
+++ b/files/ja/web/css/counters()/index.html
@@ -0,0 +1,183 @@
+---
+title: counters()
+slug: Web/CSS/counters()
+tags:
+  - CSS
+  - CSS Counter
+  - CSS Function
+  - Function
+  - Reference
+translation_of: Web/CSS/counters()
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>counter()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 <code>counters()</code> 関数には <code>counters(<var>name</var>, <var>string</var>)</code> と <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code> の二つの形式があります。一般的には<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>と一緒に使用されますが、理論的には <code><a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a></code> 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で <code>decimal</code> で表示されます。</p>
+
+<pre class="brush: css notranslate">/* 単純な使用法 - スタイルは既定で decimal */
+counters(countername, '-');
+
+/* カウンターの表示の変更 */
+counters(countername, '.', upper-roman)</pre>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">カウンター</a>自身には視覚的効果が何もありません。 <code>counters()</code> 関数 (および {{cssxref("counter", "counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。</p>
+
+<div class="blockIndicator note">
+<p>注: <code>counters()</code> 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。</p>
+
+<p><a href="#Browser_compatibility">ブラウザーの互換性の表</a>を注意深く確認してから本番環境に用いてください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code> という名前は禁止です。</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の<a href="/ja/docs/Web/CSS/CSS_Counter_Styles">定義済みカウンタースタイル</a>があります。省略された場合は、既定で <code>decimal</code> になります。</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば <code>\000A9</code> は著作権記号を表します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="default_value_compared_to_upper_Roman" name="default_value_compared_to_upper_Roman">既定値と upper-roman との比較</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}</p>
+
+<h3 id="decimal-leading-zero_compared_to_lower-alpha" name="decimal-leading-zero_compared_to_lower-alpha">decimal-leading-zero と lower-alpha との比較</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(count, ".", lower-alpha);
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}</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 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.counters")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>CSS の <code><a href="/ja/docs/Web/CSS/counters">counters()</a></code> 関数</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/ja/web/css/cross-fade()/index.html b/files/ja/web/css/cross-fade()/index.html
new file mode 100644
index 0000000000..c3144141f5
--- /dev/null
+++ b/files/ja/web/css/cross-fade()/index.html
@@ -0,0 +1,153 @@
+---
+title: cross-fade()
+slug: Web/CSS/cross-fade()
+tags:
+  - CSS
+  - CSS Function
+  - CSS-4 Images
+  - Experimental
+  - Function
+  - Reference
+  - Web
+translation_of: Web/CSS/cross-fade()
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">CSS の <strong><code>cross-fade()</code></strong> 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。</span>これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><strong>重要</strong>: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。</p>
+
+<h3 id="Specification_syntax" name="Specification_syntax">仕様書上の構文</h3>
+
+<p><code>cross-fade()</code> 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。</p>
+
+<p>この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。</p>
+
+<h4 id="Cross-fade_percentages" name="Cross-fade_percentages">cross-fade のパーセント値</h4>
+
+<p>Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.</p>
+
+<pre class="brush: css notranslate">cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */
+cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
+cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
+<span class="hljs-tag"><span class="hljs-value">cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */</span></span></pre>
+
+<p>If any percentages are omitted, all the specified percentages are summed together and subtracted from <code>100%</code>. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.</p>
+
+<p>In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.</p>
+
+<p>The above could also have been written as:</p>
+
+<pre class="brush: css notranslate">cross-fade( url(white.png) 0%,   url(black.png)); /* fully black */
+cross-fade( url(white.png) 25%,  url(black.png)); /* 25% white, 75% black */
+cross-fade( url(white.png),      url(black.png)); /* 50% white, 50% black */
+cross-fade( url(white.png) 75%,  url(black.png)); /* 75% white, 25% black */
+cross-fade( url(white.png) 100%, url(black.png)); /* fully white */
+cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */</pre>
+
+<p>If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.</p>
+
+<p>In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.</p>
+
+<p>If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:</p>
+
+<pre class="brush: css notranslate">cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
+cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);</pre>
+
+<h3 id="Older_implemented_syntax">Older, implemented syntax</h3>
+
+<pre class="syntaxbox notranslate">cross-fade( &lt;image, &lt;image&gt;, &lt;percentage&gt; )</pre>
+
+<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/en-US/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
+cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
+cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
+cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
+cross-fade(url(white.png), url(black.png), 100%); /* fully white */
+</pre>
+
+<p>In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from <span class="css">100%, with the difference being the opacity of the second image</span>.</p>
+
+<p>The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Older_syntax_for_cross-fade" name="Older_syntax_for_cross-fade">cross-fade の古い構文</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="crossfade"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4-11] notranslate">.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}</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('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.image.cross-fade")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS グラデーションの使用</a></li>
+ <li>グラデーション関数: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li>
+</ul>
diff --git a/files/ja/web/css/css_animated_properties/index.html b/files/ja/web/css/css_animated_properties/index.html
new file mode 100644
index 0000000000..db600908d3
--- /dev/null
+++ b/files/ja/web/css/css_animated_properties/index.html
@@ -0,0 +1,21 @@
+---
+title: アニメーション可能な CSS プロパティ
+slug: Web/CSS/CSS_animated_properties
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Transitions
+  - CSS アニメーション
+  - CSS トランジション
+  - Guide
+  - Reference
+  - ガイド
+translation_of: Web/CSS/CSS_animated_properties
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>または <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>を使用すると、<strong>特定の CSS プロパティをアニメーションさせることができます</strong>。<em>アニメーション</em>とは、それらの値を所定の時間をかけて徐々に変化させることができることを意味します。</p>
+
+<p>アニメーション可能なプロパティは次の通りです。</p>
+
+<p>{{CSSAnimatedProperties}}</p>
diff --git a/files/ja/web/css/css_animations/detecting_css_animation_support/index.html b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html
new file mode 100644
index 0000000000..8ef15c0236
--- /dev/null
+++ b/files/ja/web/css/css_animations/detecting_css_animation_support/index.html
@@ -0,0 +1,99 @@
+---
+title: CSS アニメーション対応の検出
+slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+tags:
+  - Advanced
+  - CSS
+  - CSS アニメーション
+  - Guide
+  - JavaScript
+  - Junk
+  - Reference
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS アニメーションでは CSS だけを使用してコンテンツの創造的なアニメーションを行うことができます。しかし、この機能が利用できないことがよくあり、この場合には同様の効果を JavaScript コードで実現したいと思うかもしれません。この記事では、<a class="external" href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">このブログ投稿</a> (Chris Heilmann 著) に基づいて、これを行うためのテクニックを紹介します。</p>
+
+<h2 id="CSS_アニメーションへの対応の検査">CSS アニメーションへの対応の検査</h2>
+
+<p>このコードは、 CSS アニメーション対応があるかどうかをチェックします。</p>
+
+<pre class="brush: js">var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>最初にいくつかの変数を定義します。アニメーションに対応していないと仮定して、 <code>animation</code> に <code>false</code> を設定します。 <code>animationstring</code> を後で設定するプロパティである <code>animation</code> に設定します。ループ用にブラウザーの接頭辞の配列を生成して、 <code>pfx</code> を空文字列に設定します。</p>
+
+<p>それから、 CSS の {{cssxref("animation-name")}} プロパティが変数 <code>elem</code> で指定された要素のスタイルコレクションに設定されていることを確認します。これは、ブラウザーが CSS アニメーションを接頭辞なしで対応していることを意味するので、その際は何もしません。</p>
+
+<p>ブラウザーが接頭辞なしのアニメーションに対応していなければ、 <code>animation</code> はまだ <code>false</code> ですが、主要なブラウザー全てがこのプロパティに接頭辞を付けているので、可能性のある接頭辞をすべて試して、名前が <code>AnimationName</code> に変化するかを調べます。</p>
+
+<p>このコードの実行が終了したとき、値が <code>false</code> であれば CSS アニメーション対応が有効ではなく、そうでなければ <code>true</code> となります。 <code>true</code> であった場合、 animation プロパティの名前とキーフレームの接頭辞は正しいものになります。よって、新しい Firefox を使用している場合は、プロパティは <code>MozAnimation</code> となってキーフレームの接頭辞は <code>-moz-</code> となり、 Chrome ではそれぞれ <code>WebkitAnimation</code> および <code>-webkit-</code> になります。なお、ブラウザーではキャメルケースとハイフンを簡単に切り替えることはできません。</p>
+
+<h2 id="Animating_using_the_correct_syntax_for_different_browsers" name="Animating_using_the_correct_syntax_for_different_browsers">様々なブラウザーで正しい構文を使用したアニメーション</h2>
+
+<p>CSS アニメーションに対応しているかどうか分かったところで、アニメーションを行うことができます。</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // JavaScript によるアニメーションの代替
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>このコードは <code>animation</code> の値を見ます。もし <code>false</code> ならば、アニメーションを実行するために JavaScript の代替コードを使う必要があることが分かります。そうでなければ、求められる CSS アニメーション効果を生成するために JavaScript を使用することができます。</p>
+
+<p>animation プロパティの設定は簡単です。単にスタイルコレクションの値を更新するだけです。しかし、 keyframe の追加は、従来の CSS の構文を使用して定義されていないため、より困難です (より柔軟性がありますが、スクリプトの定義がより難しくなります)。</p>
+
+<p>JavaScript を用いて keyframe を定義するには、それを CSS 文字列に書き出す必要があります。行うことは、 <code>keyframes</code> 変数を設定し、構築されるそれぞれの属性に接頭辞を付けることです。この変数は、いったん構築されれば、一連のアニメーションシーケンスで必要なすべてのキーフレームの完全な記述を含んでいます。</p>
+
+<p>次の仕事は、ページの CSS に実際にキーフレームを追加することです。最初に行うことは、文書に既にスタイルシートがあるかどうかを確認することです。もしあれば、単にそのスタイルシートにキーフレームの記述を挿入するだけです。これは13-15行目で行っています。</p>
+
+<p>スタイルシートがないのであれば、新しい {{HTMLElement("style")}} 要素を生成し、その内容をキーフレームの値のセットとします。それから新しい {{HTMLElement("style")}} 要素を文書の {{HTMLElement("head")}} に追加し、それによって新しいスタイルシートが文書に追加されます。/p&gt;</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">JSFiddle で見る</a></p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーション</a></li>
+</ul>
diff --git a/files/ja/web/css/css_animations/index.html b/files/ja/web/css/css_animations/index.html
new file mode 100644
index 0000000000..e75719617a
--- /dev/null
+++ b/files/ja/web/css/css_animations/index.html
@@ -0,0 +1,85 @@
+---
+title: CSS アニメーション
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS アニメーション
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS アニメーション</strong><rp> (</rp><rt>CSS Animations</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules" name="CSS_At-rules">CSS @-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">CSS アニメーション対応の検出</a></dt>
+ <dd>ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></dt>
+ <dd>CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Animations/Tips">CSS アニメーションのコツとトリック</a></dt>
+ <dd>CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。</dd>
+</dl>
+
+<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 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="animation_プロパティ"><code>animation</code> プロパティ</h3>
+
+<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.properties.animation")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS アニメーションに関連して、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>はユーザーの操作に基づいてアニメーションを起動することができます。</li>
+</ul>
diff --git a/files/ja/web/css/css_animations/tips/index.html b/files/ja/web/css/css_animations/tips/index.html
new file mode 100644
index 0000000000..4d2fa03e26
--- /dev/null
+++ b/files/ja/web/css/css_animations/tips/index.html
@@ -0,0 +1,156 @@
+---
+title: CSS アニメーションのヒントとコツ
+slug: Web/CSS/CSS_Animations/Tips
+tags:
+  - CSS
+  - CSS Animations
+  - Example
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">CSS アニメーションはドキュメントとアプリを構成する要素を使って驚くべき事を行うことを可能にします。 しかしながら、行いたくても理解しやすくないことがあったり、すぐに思いつかないであろう巧妙な方法があります。 この記事は停止したアニメーションをどのように再び実行するのかを含む、あなたの仕事を楽にするかもしれない私達が見つけた秘訣やトリックを集めたものになります。</span></p>
+
+<h2 id="Run_an_animation_again" name="Run_an_animation_again">再度アニメーションを実行する</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の仕様書では再度アニメーションを実行する方法を提示していません。 要素に魔法の関数 <code>resetAnimation()</code> というものはなく、要素の {{cssxref("animation-play-state")}} を再び <code>"running"</code> に設定することさえもできません。その代わりに、停止したアニメーションをリプレイするための巧妙なトリックを使う必要があります。</p>
+
+<p>ここでの私達が考える停止したアニメーションのリプレイを行う方法はあなたに提案することに対して十分に信頼、安定しています。</p>
+
+<h3 id="HTML_content" name="HTML_content">HTML の内容</h3>
+
+<p>はじめに、HTML にアニメーションしてほしい {{HTMLElement("div")}} と、アニメーションを再生(またはリプレイ)するためのボタンを定義しましょう。</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton"&gt;Click me to run the animation&lt;/div&gt;</pre>
+
+<h3 id="CSS_content" name="CSS_content">CSS の内容</h3>
+
+<p>次に CSS を使ってアニメーションそのものを定義しましょう。 簡潔さのためにいくつかの重要ではない CSS (”Run” ボタンそのもののスタイル) はここではお見せしません。</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>ここに2つのクラスがあります。 <code>”box”</code> クラスはアニメーション情報を含まない box の外見の基本的な記述です。 アニメーションの詳細は <code>”changing”</code> クラスに含まれており、その中で <code>”colorchange”</code> と名付けられた {{cssxref("@keyframes")}} は box をアニメーションするために2秒間を使うべきだと書いてあります。</p>
+
+<p>このため、box は所定の位置でアニメーション効果を開始しないので、アニメーションすることはないでしょう。</p>
+
+<h3 id="JavaScript_content" name="JavaScript_content">JavaScript の内容</h3>
+
+<p>次にアニメーションを行うための JavaScript を見ていきます。 このテクニックの内容は <code>play()</code> 関数にあり、ユーザーが "Run" ボタンをクリックした時に呼ばれます。</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>これは奇妙に見受けられるでしょうか？ 再度アニメーションを実行する唯一の方法はアニメーション効果を取り除くことであるため、あなたが行いたいことをドキュメントに知らせてあげて、ドキュメントにスタイルの再計算させてあげましょう。 その時要素に戻るためのアニメーション効果を追加します。 それを実現するためには、私達は創造的でなければなりません。</p>
+
+<p><code>play()</code> 関数が呼び出された時に起きることは以下のものです。</p>
+
+<ol>
+ <li>box の CSS クラスのリストを単純な <code>"box"</code> にリセットします。 これは、その box に現在適用されている他のどのクラスを取り除く効果を持ちます。 これにはアニメーションを扱う <code>"changing"</code> クラスが含まれます。 言い換えると、box からアニメーション効果を取り除きます。 しかしながら、クラスのリストを変更することはそのスタイルの再計算が完了するまで効果を持たず、更新はその変更を反映するために発生し続けます。</li>
+ <li>スタイルが確実に再計算されるように、{{domxref("window.requestAnimationFrame()")}} を使用し、コールバックを指定します。 コールバックは次のドキュメントの再描画の前に適切に実行されます。 問題はそのコールバックの呼び出しが再描画の前であるゆえに、スタイルの再計算はまだ実際に起きてはいないのです。</li>
+ <li>コールバックは巧妙でもう一度 <code>requestAnimationFrame()</code> を呼びます！ 今回は、スタイルの再計算が行われた後の次の再描画の前に、コールバックが実行されます。 このコールバックは box クラスの後ろに <code>"changing"</code> クラスを追加し、そのためクラスを追加したことによる再描画はもう一度要素のアニメーションを始めることでしょう。</li>
+</ol>
+
+<p>もちろん、実際に動作するために "Run" ボタンにイベントハンドラーを追加することは必要です。</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p>
+
+<h2 id="Stopping_an_animation" name="Stopping_an_animation">アニメーションの停止</h2>
+
+<p>単純に、要素に適用した {{cssxref("animation-name")}} を取り除くことはそれの次の状態にジャンプまたは割り込ませます。 代わりに、アニメーションを完了して停止する場合は、別のアプローチを試す必要があります。 主要なトリックは次のものです。</p>
+
+<ol>
+ <li>可能なら自身を含めるようアニメーションさせること。 これは <code>animation-direction: alternate</code> を信頼するべきではないことを意味します。 代わりに一回の繰り返しの中で完全なアニメーションを経過するキーフレームアニメーションを明示的に書くべきです。</li>
+ <li>JavaScript を使用し、<code>animationiteration</code> イベントが発生した時に使われるアニメーションをクリアーすること。</li>
+</ol>
+
+<p>次のデモは前述の JavaScript テクニックをどのように利用するかを示します。</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Click me to stop&lt;/h1&gt;
+</pre>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<p>デモ <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジッションの使用</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ja/web/css/css_animations/using_css_animations/index.html b/files/ja/web/css/css_animations/using_css_animations/index.html
new file mode 100644
index 0000000000..1c38fe8147
--- /dev/null
+++ b/files/ja/web/css/css_animations/using_css_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: CSS アニメーションの使用
+slug: Web/CSS/CSS_Animations/Using_CSS_animations
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><strong>CSS アニメーション</strong>は、ある CSS のスタイル設定を別の設定へ遷移させることを可能にします。</span> アニメーションは、2 種類の要素で構成されています。 それは、アニメーションについて記述するスタイルと、アニメーションの始めと終わりの CSS スタイルを示すキーフレームです。 同様に、アニメーション途中の通過点となるスタイルを示すこともできます。</p>
+
+<p>CSS アニメーションは、従来のスクリプトによるアニメーションに比べて 3 つの長所があります。</p>
+
+<ol>
+ <li>単純なアニメーションには使いやすくできています。 つまり、 JavaScript を知らない場合でもアニメーションを作ることができます。</li>
+ <li>アニメーションは中程度以下のシステム負荷で、良く動作します。 JavaScript では、 (上手に作成しなければ) 単純なアニメーションでもシステムの負荷を高めてしまうことがあります。 レンダリングエンジンは可能な限りパフォーマンスをなめらかに保つため、フレームを省略するなどの技術を用いることができます。</li>
+ <li>ブラウザーはアニメーションの流れを制御して、パフォーマンスや効率を最適化します。 例えば、アクティブではないタブで動作しているアニメーションは、更新の頻度を減らします。</li>
+</ol>
+
+<h2 id="Configuring_the_animation" name="Configuring_the_animation">アニメーションの設定</h2>
+
+<p>CSS アニメーションの流れ (シーケンス) を作成するには、アニメーションさせたい要素に {{cssxref("animation")}} プロパティまたはそのサブプロパティを付加します。 このプロパティはアニメーションのタイミングと長さを設定します。 同様に、アニメーションをどのように進めるかの詳細も設定できます。 なお、このプロパティはアニメーションの外見を指定するものでは<strong>ありません</strong>。 それらは、後述の<a href="#Defining_the_animation_sequence_using_keyframes">キーフレームを用いたアニメーションの流れの定義</a>で説明する {{cssxref("@keyframes")}} @ 規則で定義します。</p>
+
+<p>{{cssxref("animation")}} プロパティのサブプロパティは以下のとおりです:</p>
+
+<dl>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>アニメーションのキーフレームを示す {{cssxref("@keyframes")}} @ 規則の名前を指定します。</dd>
+ <dt>{{cssxref("animation-duration")}}</dt>
+ <dd>1 回のアニメーションサイクルに要する時間の長さを設定します。</dd>
+ <dt>{{cssxref("animation-timing-function")}}</dt>
+ <dd>アニメーションの進め方を設定します。 これは加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表します。</dd>
+ <dt>{{cssxref("animation-delay")}}</dt>
+ <dd>要素が読み込まれてからアニメーションを始めるまでの遅延時間を設定します。</dd>
+ <dt>{{cssxref("animation-iteration-count")}}</dt>
+ <dd>アニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには <code>infinite</code> を指定してください。</dd>
+ <dt>{{cssxref("animation-direction")}}</dt>
+ <dd>アニメーションのシーケンス完了時に、逆方向にアニメーションして繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定します。</dd>
+ <dt>{{cssxref("animation-fill-mode")}}</dt>
+ <dd>アニメーションの実行前後に、指定したスタイルを適用するかを設定します。</dd>
+ <dt>{{cssxref("animation-play-state")}}</dt>
+ <dd>アニメーションを一時停止したり、再開したりすることができます。</dd>
+</dl>
+
+<h2 id="Defining_the_animation_sequence_using_keyframes" name="Defining_the_animation_sequence_using_keyframes">キーフレームを用いたアニメーションの流れの定義</h2>
+
+<p>アニメーションのタイミングを指定した後は、アニメーションの外見を定義することが必要です。 これは、{{cssxref("@keyframes")}} @ 規則を用いて 2 つまたはそれ以上のキーフレームを定義することです。 各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。</p>
+
+<p>CSS スタイルでアニメーションのタイミングを定義するため、キーフレームを {{cssxref("percentage")}} で指定し、アニメーションの流れの中でいつそのスタイルが適用されるかを示します。 0% はアニメーションの始点、100% はアニメーションが終点を表します。 これら始点と終点はとても重要なため、それぞれ、0% は <code>from</code>、100% は <code>to</code> の別名でも代替できます。 両者の指定は任意ですが、<code>from</code>/<code>0%</code> と <code>to</code>/<code>100%</code> の両方が指定されていない場合、ブラウザーは、すべての属性から計算された値を用いてアニメーションを開始または終了します。</p>
+
+<p>また、任意でアニメーションの始まりと終わりの中間地点を定義する追加のキーフレームを含めることも可能です。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="note"><strong>メモ:</strong> (2017年以前の) 古いブラウザーでは接頭辞が必要かもしれません。 クリックして参照できるライブサンプルには、<code>-webkit</code> 接頭辞を付加したプロパティも含まれています。</div>
+
+<h3 id="Making_text_slide_across_the_browser_window" name="Making_text_slide_across_the_browser_window">文字列がブラウザーのウィンドウを横切る</h3>
+
+<p>この例では文字列がブラウザーのウィンドウ右端の外側からすべり込むように、 {{HTMLElement("p")}} 要素へスタイルを設定しています。</p>
+
+<p>このようなアニメーションは、ページ幅がブラウザーウィンドウの幅よりも広くなる原因になるので注意してください。 これは、アニメーションする要素をコンテナ内に置き、そのコンテナのスタイルに {{cssxref("overflow")}}<code>:hidden</code> を指定することで回避できます。</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>{{HTMLElement("p")}} 要素では、アニメーションの始まりから終わりまでの実行に 3 秒かけることを {{cssxref("animation-duration")}} プロパティで定義しています。 また、アニメーションのキーフレームを定義する {{cssxref("@keyframes")}} @ 規則の名前が "slidein" であることを定義しています。</p>
+
+<p>{{HTMLElement("p")}} 要素に CSS アニメーションに対応していないブラウザーでのスタイルを設定したい場合は、この部分にそれらのスタイルを含めてください。 ただし、この例ではアニメーション効果以外のスタイル付けは必要ありません。</p>
+
+<p>キーフレームは {{cssxref("@keyframes")}} @ 規則で定義します。 この例には、2 つのキーフレームがあります。 1 番目のキーフレームは 0% (代替表記の <code>from</code> を使用しています) です。 ここでは、要素の左マージンを 100% (包含要素の右端を示します) に、要素の幅を 300% (包含要素の幅の 3 倍) に設定しています。 これによりアニメーションの始まりの時点では、見出しがブラウザーのウィンドウの右端の外側に描画されます。</p>
+
+<p>2 番目 (かつ最後) のキーフレームは、100% (代替表記の <code>to</code> を使用しています) です。 要素の左マージンを 0% に、幅を 100% に設定しています。 これにより、見出しがコンテンツエリアの左端へすべり込むことでアニメーションが終わります。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。</p>
+</div>
+
+<p>{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}</p>
+
+<h3 id="Adding_another_keyframe" name="Adding_another_keyframe">キーフレームの追加</h3>
+
+<p>先ほどのアニメーション例に、他のキーフレームを追加してみましょう。 例えば、見出しが右から左へ動くのにあわせて文字サイズを大きくしてゆき、その後元のサイズへ戻るようにしたいとします。 これには、単純に以下のキーフレームを追加します:</p>
+
+<pre class="brush: css notranslate">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<p>コード全体は次のようなものです。</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>これはブラウザーに、アニメーションの流れの 75% 経過時点で見出しの左マージンを 25% に、また幅を 150% にするよう設定します。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: アニメーションを見るにはページを再読み込みするか、 CodePen 環境では CodePen ボタンをクリックしてください。</p>
+</div>
+
+<p>{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}</p>
+
+<h3 id="Making_it_repeat" name="Making_it_repeat">アニメーションの繰り返し</h3>
+
+<p>アニメーションを繰り返すためには {{cssxref("animation-iteration-count")}} を用いて、アニメーションを何回繰り返すかを設定します。 以下の例では、<code>infinite</code> を指定してアニメーションを無期限に繰り返します。</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<p>これを既存のコードの追加してください。</p>
+
+<pre class="brush: css notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Making_it_repeat","100%","250")}}</p>
+
+<h3 id="Making_it_move_back_and_forth" name="Making_it_move_back_and_forth">前後の移動</h3>
+
+<p>アニメーションを繰り返すようにしましたが、毎回始めの状態にジャンプしてアニメーションが始まるのはとても不自然です。 画面上を前後に移動するようにしたいでしょう。 これは、{{cssxref("animation-direction")}} プロパティに <code>alternate</code> を設定することで簡単に実現できます:</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>そしてコードの残りは次の通りです。</p>
+
+<pre class="brush: css notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}</p>
+
+<h3 id="Using_animation_shorthand" name="Using_animation_shorthand">animation 一括指定の利用</h3>
+
+<p>{{cssxref("animation")}} 一括指定はスペースの節約に便利です。 例として、この記事を通して使用してきているルールがあります。</p>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>このように置き換えることができます。</p>
+
+<pre class="brush: css notranslate">p {
+  animation: 3s infinite alternate slidein;
+}
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 詳しくは、 {{cssxref("animation")}} のリファレンスページをご覧ください。</p>
+</div>
+
+<h3 id="Setting_multiple_animation_property_values" name="Setting_multiple_animation_property_values">複数のアニメーションプロパティ値の設定</h3>
+
+<p>CSS アニメーションの個別指定値は、コンマで区切って複数の値を受け付けることができます。 — この機能は複数のアニメーションに一つの規則を適用したり、別々なアニメーションに別々の期間、繰り返し回数などを適用したい時に使うことができます。 別々な変化を説明するために、いくつか簡単な例を見てみましょう。</p>
+
+<p>この例では、三つのアニメーション名を設定していますが、期間と繰り返し回数は1つしか設定していません。 この場合、3つのアニメーションはすべて同じ期間と繰り返し回数になります。</p>
+
+<pre class="brush: css notranslate">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>第二の例では、三つの値を三つのプロパティ全てに設定しました。この場合、それぞれのアニメーションはそれぞれのプロパティの同じ位置で対応する値で実行されますので、例えば <code>fadeInOut</code> の長さは 2.5s で、繰り返し回数は 2 のようになります。</p>
+
+<pre class="brush: css notranslate">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>第三の例では、三つのアニメーションが指定されていますが、期間と繰り返し回数は二つしかありません。 この場合、それぞれのアニメーションに個別の値が不足するので、値は最初から最後まで繰り返して使用されます。 ですから例えば、fadeInOut の長さは 2.5s で moveLeft300px の長さは 5s となります。 これで妥当な期間の値の最後に来たので、最初からまた始まります。 — 従って bounce の長さは 2.5s になります。 繰り返し回数 (および指定した他のプロパティ) は、同様に割り当てられます。</p>
+
+<pre class="brush: css notranslate">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Using_animation_events" name="Using_animation_events">アニメーションイベントの利用</h3>
+
+<p>アニメーションイベントを用いることで、アニメーションをさらに制御したり、アニメーションの有用な情報を得たりすることができます。 これらのイベントは {{domxref("event/AnimationEvent", "AnimationEvent")}} オブジェクトに集められており、アニメーションの開始・終了・繰り返しの始まりを検出することができます。 それぞれのイベントには発生した時間や、イベントが発生したアニメーションの名前が含まれています。</p>
+
+<p>文字列がすべり込むアニメーションの例を、アニメーションがいつ発生したかの情報を出力するように変更して、イベントがどのように働くかを見てみましょう。</p>
+
+<h4 id="Adding_the_CSS" name="Adding_the_CSS">CSS の追加</h4>
+
+<p>アニメーションの CSS を作成することから始めます。 このアニメーションは、"slidein" が呼び出されて 3 秒後に終わり、3 回繰り返されます。 繰り返すたびに、逆方向へアニメーションします。 {{cssxref("@keyframes")}} 内で、要素が画面を横切るようにするため、 width と margin-left を操作します。</p>
+
+<pre class="brush: css notranslate">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Adding_the_animation_event_listeners" name="Adding_the_animation_event_listeners">アニメーションイベントのリスナーの追加</h4>
+
+<p>使用することができる 3 つのアニメーションイベントを取得するため、 JavaScript のコードを用います。 <code>setup()</code> 関数は、イベントのリスナーになります。 この関数は文書が読み込まれたとき、最初に呼び出します。</p>
+
+<pre class="brush: js notranslate">var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+</pre>
+
+<p>これは一般的なコードです。 このコードがどのように働くかについて、詳しくは {{domxref("element.addEventListener()")}} の文書を参照してください。 最後に setup() 関数では要素の <code>class</code> 属性を、アニメーションを設定したクラス "slidein" に設定しています。 これによりアニメーションを開始させています。</p>
+
+<p>なぜこのような処理を行うのでしょうか？ それは、 <code>animationstart</code> イベントはアニメーションが始まるとすぐに発生するので、この例ではコードを実行する前にイベントが発生してしまうためです。 そこでコードの実行後に要素の class 属性をアニメーションのスタイルを記述したものに設定することで、アニメーションを開始させるようにしています。</p>
+
+<h4 id="Receiving_the_events" name="Receiving_the_events">イベントを受け取る</h4>
+
+<p>イベントは、以下の <code>listener()</code> 関数に送られます。</p>
+
+<pre class="brush: js notranslate">function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>こちらのコードも、非常に単純です。 単純に {{domxref("event.type")}} を見てどのイベントが発生したかを判断して、発生したイベントの記録として、{{HTMLElement("ul")}} (順序なしリスト) で適切な情報を出力しています。</p>
+
+<p>その出力は、最終的に以下のようになります:</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>表示された時間が、アニメーションの設定時に指定した時間から予測されるものにとても近く、しかし厳密に一致はしていないことに注意してください。 また、最終の繰り返しの後に <code>animationiteration</code> イベントが発生していないことにも注意してください。 ただし、<code>animationend</code> イベントは発生しています。</p>
+
+<h4 id="The_HTML" name="The_HTML">HTML</h4>
+
+<p>この例を完成させるために、コンテンツの表示と受信したイベントの情報をスクリプトが挿入するために用いる HTML 文書を以下に掲載します:</p>
+
+<pre class="brush: html notranslate">&lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+&lt;p&gt;
+  This example shows how to use CSS animations to make &lt;code&gt;H1&lt;/code&gt;
+  elements move across the page.
+&lt;/p&gt;
+&lt;p&gt;
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>そしてこちらはライブ出力です。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: アニメーションを見るにはページを再読み込みするか、 CodePen 環境でアニメーションを見るには CodePen ボタンをクリックしてください。</p>
+</div>
+
+<p>{{EmbedLiveSample('Using_animation_events', '600', '300')}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_animations/Detecting_CSS_animation_support">CSS アニメーションの対応の検出</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions">CSS トランジションの使用</a></li>
+</ul>
diff --git a/files/ja/web/css/css_background_and_borders/border-image_generator/index.html b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..fa4aa48cdf
--- /dev/null
+++ b/files/ja/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2629 @@
+---
+title: 境界画像作成ツール
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - CSS 背景と境界
+  - ツール
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>このツールを使用して、 CSS3 の {{cssxref("border-image")}} の値を作成できます。</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
+
+<p> </p>
diff --git a/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..7ec4cab13e
--- /dev/null
+++ b/files/ja/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1602 @@
+---
+title: Border-radius ジェネレーター
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - CSS 境界と背景
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>このツールは CSS3 の {{cssxref("border-radius")}} の効果を生成するために使用することができます。</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; 丸いコーナー &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; 境界の単位を選択 &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..8baafa448c
--- /dev/null
+++ b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS での複数の背景の利用方法
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p id="Summary">{{CSSRef}}</p>
+
+<p>CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。</p>
+
+<p>複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。</p>
+
+<pre class="syntaxbox">.myclass {
+  background: 背景1, 背景2, ..., 背景N;
+}</pre>
+
+<p>この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>次の例では、上位レイヤーから</p>
+
+<ol>
+ <li>Firefox のロゴ</li>
+ <li><a href="/ja/CSS/linear-gradient" title="linear-gradient">線形グラデーション</a></li>
+ <li>花の画像</li>
+</ol>
+
+<p>の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。</p>
+
+<pre class="brush: css">.multi_bg_example {
+  background-image:
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
+    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");
+
+  background-repeat:
+    no-repeat, /* 最前面の背景レイヤーに対応 */
+	no-repeat,
+	repeat;
+
+  background-position:
+    bottom right, /* 最前面の背景レイヤーに対応 */
+	left,
+	right;
+}</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">スクリーンショット</td>
+  </tr>
+  <tr>
+   <td><img alt="css_multibg.png" src="/@api/deki/files/4028/=css_multibg.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ <code>background-image</code> で記述した各値に対し、同じ順番で適用されます。つまり、<code>background-image</code> の最初の値として指定した FireFox のアイコンの画像に対し、<br>
+ {{cssxref("background-repeat")}} は "<code>bottom left</code>"、<br>
+ {{cssxref("background-position")}} は "<code>no-repeat</code>"<br>
+ が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの<em>右下に</em>、<em>ひとつだけ</em> 表示されるのです。</p>
+
+<h2 id="See_also" name="See_also">関連記事</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="グラデーションの利用">グラデーションの利用</a></li>
+</ul>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/index.html b/files/ja/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..6e43c5ab15
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,112 @@
+---
+title: CSS 背景と境界
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - CSS
+  - CSS 背景と境界
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 背景と境界</strong>モジュールでスタイル付けをすると、背景を色や画像で埋めたり (クリッピングや寸法の変更も) 他の加工を行ったりすることができます。これらのスタイルでは、境界を線や画像で装飾したり、四角くしたり丸くしたりすることもできます。(さらに、要素ボックスに影をつけて装飾することもできます)。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Tools" name="Tools">ツール</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景の使用</a></dt>
+ <dd>要素に1つまたは複数の背景を設定する方法を説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">背景画像の拡縮</a></dt>
+ <dd>背景画像の拡大縮小や繰り返しを変更する方法を説明します。</dd>
+ <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></dt>
+ <dd>CSS の色が境界を含む HTML でどのように使われるかを概観します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">境界画像作成ツール</a></dt>
+ <dd>境界画像 ({{cssxref("border-image")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">境界角丸作成ツール</a></dt>
+ <dd>角の丸み ({{cssxref("border-radius")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">ボックスの影作成ツール</a></dt>
+ <dd>要素の背後の影 ({{cssxref("box-shadow")}} プロパティ) を見ながら作ることができる対話型のツールです。</dd>
+</dl>
+
+<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 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..dde72afbab
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,143 @@
+---
+title: 背景画像の拡大縮小
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+  - Reference
+  - Scale
+  - Scaling
+  - Web
+  - dimensions
+  - height
+  - resize
+  - width
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>{{cssxref("background-size")}}</strong> は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。</span>こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">巨大な画像を並べて表示</h2>
+
+<p>巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 <code>background-size</code> に固定値の150ピクセルの値を使用すると、このようにすることができます。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="tiledBackground"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3] notranslate">.tiledBackground {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}</p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">画像の拡大縮小</h2>
+
+<p>以下のように、画像の水平と垂直の両方の寸法を指定することもできます。</p>
+
+<pre class="brush:css notranslate">background-size: 300px 150px;
+</pre>
+
+<p>結果は以下のようになります。</p>
+
+<p><img alt="引き伸ばされた新しい Firefox のロゴ" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 304px; width: 304px;"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像の拡大</h2>
+
+<p>一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。</p>
+
+<p><img alt="拡大された MDN ロゴ" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 300px; width: 300px;"></p>
+
+<pre class="brush: css; highlight:[5] notranslate">.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特殊な値: "contain" と "cover"</h2>
+
+<p>{{cssxref("&lt;length&gt;")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは <code>contain</code> と <code>cover</code> という二つの特殊な寸法の値を提供しています。これらを見てみましょう。</p>
+
+<h3 id="contain" name="contain">contain</h3>
+
+<p><code>contain</code> の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。</p>
+
+<h4 id="HTML_2" name="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;この要素の寸法を変更してみてください！&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2" name="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.bgSizeContain {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('contain', 250, 250) }}</p>
+
+<h3 id="cover" name="cover">cover</h3>
+
+<p><code>cover</code> の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。</p>
+
+<h4 id="HTML_3" name="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;この要素の寸法を変更してみてください！&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3" name="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.bgSizeCover {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{ EmbedLiveSample('cover', 250, 250) }}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+ <li><a href="/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds">SVG の背景画像の拡大縮小</a></li>
+</ul>
diff --git a/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..e5a24c51d9
--- /dev/null
+++ b/files/ja/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
@@ -0,0 +1,62 @@
+---
+title: 複数の背景画像の利用
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>複数の背景画像</strong>を要素に適用できます。これらは、最初に記述した背景が一番上になり、後に記述した背景がその下になるように重ね合わされます。</span>最後の背景にだけ、背景色を指定できます。</p>
+
+<p>複数の背景の指定は、下記のように簡単です。</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>{{ cssxref("background-color") }} を除いて、短縮プロパティの {{ cssxref("background") }} と個々のプロパティの両方で指定できます。つまり、下記のプロパティは背景ひとつずつに対して指定できます。<br>
+{{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、3 つの背景が重なっています。Firefox のロゴ、泡の画像、そして <a href="/ja/docs/Web/CSS/linear-gradient">linear-gradient</a> です。</p>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi-bg-example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css">.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>(CodePen で画像が表示されない場合、CSS 部分の「Tidy CSS」をクリックしてください)</p>
+
+<p>{{EmbedLiveSample('Example','600','400')}}</p>
+
+<p>ご覧のように、Firefox のロゴ ({{ cssxref("background-image") }} で最初に記載) が一番上になり、泡の画像がそれに続き、グラデーション (最後に記述) が前述の全ての画像の下に配置されています。後に続くプロパティ ({{ cssxref("background-repeat") }} と {{ cssxref("background-position") }}) はそれぞれの背景に対応して適用されています。つまり、{{ cssxref("background-repeat") }} の最初の値は最初(最前面)の画像に適用され、後に続くものも順番に適用されます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Using_CSS_gradients">CSS グラデーションの利用</a></li>
+</ul>
diff --git a/files/ja/web/css/css_basic_user_interface/index.html b/files/ja/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..c8e3a80d85
--- /dev/null
+++ b/files/ja/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,74 @@
+---
+title: CSS 基本ユーザーインターフェイス
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 基本ユーザーインターフェイス</strong><rp> (</rp><rt>CSS Basic User Interface</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> プロパティでの URL 値の使用</a></dt>
+ <dd>カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。</dd>
+</dl>
+
+<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("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
new file mode 100644
index 0000000000..98b56ee788
--- /dev/null
+++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html
@@ -0,0 +1,119 @@
+---
+title: cursor プロパティでの URL 値の使用
+slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+tags:
+  - CSS
+  - Gecko
+  - Guide
+  - NeedsUpdate
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/Mozilla/Gecko">Gecko</a> 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (<a href="/ja/docs/Mozilla/Firefox/Releases/4">Firefox 4</a>) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>基本 (CSS 2.1) の基本的な記述は次の通りです。</p>
+
+<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("&lt;url&gt;")}} , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}</pre>
+
+<p>つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 <code>auto</code> や <code>pointer</code> などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。</p>
+
+<p>例えば次のような値が有効です。</p>
+
+<pre class="brush: css notranslate">cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre>
+
+<p>始めに <em>foo.cur</em> を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 <em>bar.gif</em> を読み込もうとし、どちらも利用できない場合は <code>auto</code> が使用されます。</p>
+
+<p>Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。</p>
+
+<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("&lt;uri&gt;")}} <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> &lt;x&gt; &lt;y&gt; <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Question_mark" title="Question mark: the entity is optional">?</a> , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Values")}}
+</pre>
+
+<p>これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。</p>
+
+<pre class="brush: css; notranslate">.foo  {
+  cursor: auto;
+  cursor: url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor: pointer;
+  cursor: url(cursor2.png) 2 2, pointer;
+}
+
+/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
+</pre>
+
+<p>初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。</p>
+
+<h2 id="Limitations" name="Limitations">制限</h2>
+
+<p>Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。</p>
+</div>
+
+<p>Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。</p>
+
+<p>(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)</p>
+
+<p>Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。</p>
+
+<p>カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>Microsoft Internet Explorer 6.0 も <code>cursor</code> プロパティに対応しています。しかし、次の制限があります。</p>
+
+<ul>
+ <li>IE は CUR と ANI 形式のみに対応。</li>
+ <li>IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>ブラウザー</th>
+   <th>最初期バージョン</th>
+   <th>形式 (例)</th>
+   <th>X-Y座標有効範囲</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>6.0</strong></td>
+   <td><code>.cur | .ani</code></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko), Windows および Linux</td>
+   <td><strong>1.5</strong> (1.8)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td>1.5 (1.8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+   <td>(Gecko 2.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Safari (Webkit)</td>
+   <td><strong>3.0</strong> (522-523)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td rowspan="2">3.0 (522-523)</td>
+  </tr>
+  <tr>
+   <td colspan="2">OS X 10.5 から、 Safari (Mac) は <code>.cur</code> に対応しています。</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
new file mode 100644
index 0000000000..2cb47a5709
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html
@@ -0,0 +1,80 @@
+---
+title: ブロック、絶対配置、表レイアウトのブロック配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+tags:
+  - CSS
+  - ブロックレイアウト
+  - ボックス配置
+  - 絶対配置
+  - 表
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+---
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置仕様書</a>は、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、ボックス配置は浮動、位置指定、表要素を含むボックスレイアウトのレイアウトでどのように動作するかを明らかにします。このページはブロックレイアウトとボックス配置に固有のことを詳説するため、様々なレイアウト方法に共通のボックス配置の共通機能について説明している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを併せて読んでください。</p>
+
+<div class="note">
+<p><strong>Note</strong>: At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.</p>
+</div>
+
+<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+
+<p>The {{cssxref("justify-content")}} property does not apply to block containers or table cells.</p>
+
+<p>The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as <code>space-between</code>, <code>space-around</code> or <code>space-evenly</code> is requested then the fallback alignment will be used, as the content is treated as a single <a href="/ja/docs/Glossary/Alignment_Subject">alignment subject</a>.</p>
+
+<h2 id="justify-self">justify-self</h2>
+
+<p>The {{cssxref("justify-self")}} property is used to align an item inside its containing block on the inline axis.</p>
+
+<p>This property does not apply to floated elements or table cells.</p>
+
+<h3 id="Absolutely_positioned_elements" name="Absolutely_positioned_elements">絶対配置要素</h3>
+
+<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+
+<h2 id="align-self">align-self</h2>
+
+<p>The {{cssxref("align-self")}} property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.</p>
+
+<h3 id="Absolutely_positioned_elements_2" name="Absolutely_positioned_elements_2">絶対配置要素</h3>
+
+<p>The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to <code>stretch</code>, unless the positioned item is a replaced element, in which case it resolves to <code>start</code>.</p>
+
+<h2 id="Aligning_in_these_layout_methods_today">Aligning in these layout methods today</h2>
+
+<p>As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.</p>
+
+<p>Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A {{cssxref("margin")}} of <code>auto</code> will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:</p>
+
+<pre class="brush: css">.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<p>In table layout, you have access to the {{cssxref("vertical-align")}} property to align the contents of a cell inside that cell.</p>
+
+<p>For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<ul>
+ <li><a href="/ja/docs/Glossary/Alignment_Subject">Alignment subject</a></li>
+ <li><a href="/ja/docs/Glossary/Alignment_Container">Alignment container</a></li>
+ <li><a href="/ja/docs/Glossary/Fallback_Alignment">Fallback alignment</a></li>
+</ul>
+
+<p>{{CSSRef}}</p>
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
new file mode 100644
index 0000000000..5435419fac
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: フレックスボックスでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+tags:
+  - CSS
+  - CSS ボックス配置
+  - フレックスボックス
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>の仕様書は、さまざまなレイアウト方法で配置がどのように働くかを詳述しています。このページでは、フレックスボックスのコンテキストにおいてボックス配置がどのように働くかを探ります。このページの目的は、フレックスボックスとボックス配置として定められた事柄を詳述するためのものですので、ボックス配置の様々なレイアウト方法の間で共通の機能について詳述した、主となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページを合わせてお読みください。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>この例では、３つのフレックスアイテムが {{cssxref("justify-content")}} を使用して主軸に、 {{cssxref("align-items")}} を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された <code>align-items</code> の値を上書きし、 {{cssxref("align-self")}} で <code>center</code> に設定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="The_axes_and_flex-direction" name="The_axes_and_flex-direction">軸と flex-direction</h2>
+
+<p>フレックスボックスは文書の書字方向を尊重しますので、英語の場合で {{cssxref("justify-content")}} が <code>flex-end</code> に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 {{cssxref("flex-direction")}} が <code>row</code> に設定されていた場合、この配置はインライン方向になります。</p>
+
+<p>しかし、フレックスボックスでは <code>flex-direction</code> を <code>column</code> に設定することで、主軸を変更することができます。この場合、 <code>justify-content</code> はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差じっくについて次のように考えると最も簡単です。</p>
+
+<ul>
+ <li>主軸 = <code>flex-direction</code> で設定された向き = <code>justify-content</code> で配置</li>
+ <li>交差軸 = 主軸と交差 = <code>align-content</code>, <code>align-self</code>/<code>align-items</code> で配置</li>
+</ul>
+
+<h3 id="Main_Axis_Alignment" name="Main_Axis_Alignment">主軸の配置</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Cross_Axis_Alignment" name="Cross_Axis_Alignment">交差軸の配置</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="There_is_no_justify-self_in_Flexbox" name="There_is_no_justify-self_in_Flexbox">フレックスボックスには justify-self はない</h3>
+
+<p>主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。 <code>justify-content</code> プロパティは、どのように残りの領域を使用するかを制御します。 <code>justify-content: flex-end</code> に設定すると、余分な領域はアイテムの前に配置され、 <code>justify-content: space-around</code> に設定すると、その大きさアイテムの両側に配置される、などです。</p>
+
+<p>つまり、常にアイテムのグループ全体が動き回るよう配分されるため、 <code>justify-self</code> プロパティはフレックスボックスでは意味を持ちません。</p>
+
+<p>交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 <code>align-self</code> は意味を持ちます。</p>
+
+<h2 id="Alignment_and_auto_margins" name="Alignment_and_auto_margins">alignment および auto のマージン</h2>
+
+<p><code>justify-self</code> プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに <code>auto</code> を使用することができます。 <code>auto</code> に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを <code>auto</code> に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。</p>
+
+<p>開始点に配置された一連のフレックスアイテムのうち、１つのアイテムで {{cssxref("margin")}} を <code>auto</code> に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、スペースに収まるように縮小します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="The_gap_properties" name="The_gap_properties"><code>gap</code> プロパティ</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Creating_fixed_size_gaps_between_items" name="Creating_fixed_size_gaps_between_items">アイテム間における固定幅の間隔の作成</h3>
+
+<p>主軸では、 <code>column-gap</code> プロパティは兄弟アイテムの間に固定幅の間隔を作成します。</p>
+
+<p>交差軸では、 <code>row-gap</code> プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには <code>flex-wrap</code> を <code>wrap</code> に設定する必要があります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: Firefox 63 時点で、 Firefox がフレックスボックスで gap プロパティを実装している唯一のブラウザーです。</p>
+</div>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis", "交差軸")}}</li>
+ <li>{{Glossary("Main axis", "主軸")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーでのアイテムの配置</a></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box Alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box Alignment</a></li>
+</ul>
diff --git a/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
new file mode 100644
index 0000000000..569a5e52af
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html
@@ -0,0 +1,51 @@
+---
+title: 段組みレイアウトでのボックス配置
+slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+tags:
+  - CSS
+  - CSS ボックス配置
+  - CSS 段組みレイアウト
+  - 段組み
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>仕様書では、様々なレイアウト方法でどのように配置が動作するかを詳説しています。このページでは、<a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のコンテキストでボックス配置がどのように動作するかを探ります。このページとしての目的は、段組みレイアウトとボックス配置に特有のことを探ることですので、レイアウト方法をまたがるボックス配置の共通の機能の詳細を詳説している、中心となる<a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a>ページと併せて読んでください。</p>
+
+<p>段組みレイアウトでは、配置コンテナーは段組みコンテナーのコンテンツボックスです。配置主題は段ボックスです。段組みレイアウトに適用するプロパティは以下に説明する通りです。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 段組みレイアウトはボックス配置仕様書に先立つものです。そしてここに挙げたプロパティは、段組みレイアウトのために設定されたものであっても、ブラウザーが対応していないことがあります。</p>
+</div>
+
+<h2 id="align-content_and_justify-content" name="align-content_and_justify-content">align-content と justify-content</h2>
+
+<p>{{cssxref("align-content")}} プロパティはブロック軸に、 {{cssxref("justify-content")}} はインライン軸に適用されます。段に追加された空間は配分に使用され、段間のすき間に追加されるため、段間は {{cssxref("column-gap")}} プロパティで指定された寸法よりも大きくなることがあります。</p>
+
+<p><code>justify-content</code> に <code>normal</code> または <code>stretch</code> 以外の値を使用すると、 {{cssxref("column-width")}} が指定された段組みコンテナーに表示し、残りの余白は justify-content の値によって配分されます。</p>
+
+<h2 id="column-gap">column-gap</h2>
+
+<p>段組みレイアウト仕様書の早期の版では、 {{cssxref("column-gap")}} プロパティが定義されていましたが、ボックス配置では他のレイアウト方法の gap プロパティと統合されました。他のレイアウト方法では、 column-gap の初期値を 0 として扱うのに対し、段組みレイアウトでは、一般に段間にすき間がないようにすることはないでしょうから、 1em として扱うようになっています。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/ja/docs/Glossary/Alignment_Subject">配置主題</a></li>
+ <li><a href="/ja/docs/Glossary/Alignment_Container">配置コンテナー</a></li>
+ <li><a href="/ja/docs/Glossary/Fallback_Alignment">代替配置</a></li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_box_alignment/index.html b/files/ja/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..a220b68112
--- /dev/null
+++ b/files/ja/web/css/css_box_alignment/index.html
@@ -0,0 +1,253 @@
+---
+title: CSS ボックス配置
+slug: Web/CSS/CSS_Box_Alignment
+tags:
+  - CSS
+  - CSS ボックス配置
+  - alignment
+  - box alignment
+  - グリッドレイアウト
+  - フレックスボックス
+  - 段組みレイアウト
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby>CSS ボックス配置<rp> (</rp><rt>CSS Box Alignment</rt><rp>) </rp></ruby>モジュールは、ブロックレイアウト、表レイアウト、フレックスレイアウト、グリッドレイアウトなどの様々な CSS ボックスレイアウトにおける、ボックスの配置に関する機能を定義します。このモジュールは CSS 全体において一貫性のある配置方法を作成することを目指しています。この文書はこの仕様書にある全般的な概念を解説します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: ボックス配置がどのように適用されるかは、各レイアウト方法のドキュメントに詳しく記載されています。</p>
+</div>
+
+<h2 id="古い配置方法">古い配置方法</h2>
+
+<p>CSS は伝統的に、配置機能がとても制約されていました。 {{cssxref("text-align")}} を使用してテキストの配置を指定したり、 {{cssxref("margin")}} に auto を使用してブロックを中央揃えしたり、 {{cssxref("vertical-align")}} を使用して表やインラインブロックをレイアウトしたりしていました。テキストの配置は<a href="https://www.w3.org/TR/css-inline-3/">インラインレイアウト</a>および <a href="https://www.w3.org/TR/css-text-3/">CSS テキスト</a>モジュールによってカバーされるようになり、ボックス配置の最初で、完全な水平方向と垂直方向の配置の機能を持ちました。</p>
+
+<p>先に<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を学んでいるのであれば、これらのプロパティはフレックスボックスの使用の一部と思うかもしれませんし、一部のプロパティは実際に、フレックスボックスのレベル1に並べられています。しかし仕様書では、現在フレックスボックスにある以上の追加の機能が追加される可能性があるため、ボックス配置仕様書を参照するよう注記しています。</p>
+
+<h2 id="Basic_examples" name="Basic_examples">基本的な例</h2>
+
+<p>次の例は、ボックス配置のプロパティの一部が<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッド</a>と<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>にどのように適用されるかを示しています。</p>
+
+<h3 id="CSS_grid_layout_alignment_example" name="CSS_grid_layout_alignment_example">CSS グリッドレイアウトの配置の例</h3>
+
+<p>グリッドレイアウトを使用したこの例では、固定幅のグリッドトラックをインライン (主) 軸上にレイアウトした後に、グリッドコンテナ内に余分な空白が残っています。この空白は {{cssxref("justify-content")}} を使って分配されます。ブロック (交差) 軸上では、グリッド領域内のアイテムの配置は {{cssxref("align-items")}} で制御されます。最初のアイテムは {{cssxref("align-self")}} を <code>center</code> に設定して、グループに設定された <code>align-items</code> 値を上書きしています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Flexbox_Alignment_Example" name="Flexbox_Alignment_Example">フレックスボックスの配置の例</h3>
+
+<p>この例では、3 つのフレックスアイテムが <code>justify-content</code> を使用して主軸上に配置され、 <code>align-items</code> を使用して交差軸上に配置されています。 最初のアイテムは<code>align-self</code> を <code>center</code> に設定して、グループに設定された <code>align-items</code> を上書きしています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Key_concepts_and_terminology" name="Key_concepts_and_terminology">主要概念と用語</h2>
+
+<p>この仕様書では、個別のレイアウト方法の実装以外でこれらの整列プロパティを簡単に説明できるように、整列に関する用語を詳しく説明しています。すべてのレイアウト方法に共通する、いくつかの重要な概念もあります。</p>
+
+<h3 id="Relationship_to_writing_modes" name="Relationship_to_writing_modes">書字方向との関連</h3>
+
+<p>配置は書字方向と結びついており、アイテムを配置するとき、物理的な寸法である上下左右に配置するかどうかを考慮しません。代わりに、作業している特定の距離の開始と終了によって配置を記述します。これにより、これにより、文書がどのような書字方向であっても、配置が同じように動作することを保証します。</p>
+
+<h3 id="Two_dimensions_of_alignment" name="Two_dimensions_of_alignment">二次元の配置</h3>
+
+<p>ボックス配置プロパティを使用すると、コンテンツは二本の軸 — インライン (主) 軸、およびブロック (交差) 軸 — のうちの一本の上に配置されます。インライン軸は書字方向が使用され、文の語がこの軸に沿って流れます。 — 例えば英語では、インライン軸は水平です。ブロック軸は、段落要素などのブロックの方向の軸で、インライン軸と交差する向きにレイアウトされます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+
+<p>インライン軸上でアイテムを整列するときは、 <code>justify-</code> で始まるプロパティを使用します。</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>ブロック軸上でアイテムを整列するときは、 <code>align-</code> で始まるプロパティを使用します。</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>フレックスボックスはさらに複雑であり、 {{cssxref("flex-direction")}} が <code>row</code> に設定されている場合に上記のものが当てはまります。フレックスボックスが <code>column</code> に設定されている場合、プロパティは逆になります。したがって、フレックスボックスを使用するときは、インライン軸とブロック軸よりも、主軸と交差軸について考えるほうが簡単です。 <code>justify-</code> プロパティは常に主軸上で、 <code>align-</code> プロパティは交差軸上で配置するために使用されます。</p>
+
+<h3 id="The_alignment_subject" name="The_alignment_subject">配置対象物</h3>
+
+<p><ruby><strong>配置対象物</strong><rp> (</rp><rt>alignment subject</rt><rp>) </rp></ruby>とは、配置が行われるもののことです。 <code>justify-self</code> または <code>align-self</code> の場合、あるいは <code>justify-items</code> または <code>align-items</code> によってこれらの値をグループとして設定する場合に、このプロパティが使用されている要素のマージンボックスになります。 <code>justify-content</code> および <code>align-content</code> プロパティはレイアウト方法ごとに異なります。</p>
+
+<h3 id="The_alignment_container" name="The_alignment_container">配置コンテナー</h3>
+
+<p><ruby><strong>配置コンテナー</strong><rp> (</rp><rt>alignment container</rt><rp>) </rp></ruby>は、内側で対象物を整列させるボックスです。これはふつう、配置対象物を内包するブロックになります。配置コンテナーには一つまたは多数の配置対象物を含めることができます。</p>
+
+<p>下の画像は、内側に2つの整列対象がある配置コンテナーの例です。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="Fallback_alignment" name="Fallback_alignment">代替配置</h3>
+
+<p>実現できない配置を設定した場合、<strong>代替配置</strong>が有効になり、利用可能な空間を扱います。この代替配置はレイアウト方法ごとに個別に定義されており、それぞれのページで詳しく説明されています。</p>
+
+<h2 id="Types_of_alignment" name="Types_of_alignment">配置の種類</h2>
+
+<p>この仕様書が詳述している配置には、3つの異なる種類があります。これらはキーワード値を使用します。</p>
+
+<ul>
+ <li><ruby><strong>位置指定配置</strong><rp> (</rp><rt>Positional alignment</rt><rp>)</rp></ruby>: 配置対象物の位置を、配置コンテナーからの相対で指定します。</li>
+ <li><ruby><strong>ベースライン配置</strong><rp> (</rp><rt>Baseline alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置コンテナー内にある複数の配置対象物のベースラインの関係で配置を定義します。</li>
+ <li><ruby><strong>分配配置</strong><rp> (</rp><rt>Distributed alignment</rt><rp>)</rp></ruby>: これらのキーワードは、配置対象物間の空白の分配で配置を定義します。</li>
+</ul>
+
+<h3 id="Positional_alignment_keyword_values" name="Positional_alignment_keyword_values">位置指定配置のキーワード値</h3>
+
+<p>以下の値は位置指定配置のために定義されており、 <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> フレックスボックスのみ</li>
+ <li><code>flex-end</code> フレックスボックスのみ</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>画面の物理的な属性に関連する <code>left</code> と <code>right</code> の物理値を除いて、他のすべての値は論理値であり、内容の書字方向に関連します。</p>
+
+<p>たとえば、 CSS グリッドレイアウトで作業しているとき、英語で作業していて <code>justify-content</code> に <code>start</code> を設定すると、アイテムはインライン方向の先頭、すなわち英語の文は左端から始まるので左に移動します。右書きの言語であるアラビア語では、同じ <code>start</code> の値は、アラビア語の文がページの右側から始まるので、右に移動します。</p>
+
+<p>どちらの例も <code>justify-content: start</code> ですが、開始位置は書字方向によって異なります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Baseline_alignment" name="Baseline_alignment">ベースライン配置</h3>
+
+<p>ベースライン配置キーワードは、配置対象物のグループ間でボックスのベースラインを整列するために使用されます。これらは <code>justify-content</code> および <code>align-content</code> による内容の配置、そして <code>justify-self</code> および <code>align-self</code> による自己配置の値として使用することができます。</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p><code>justify-content</code> または <code>align-content</code> のためのベースライン配置の値を指定するベースラインのコンテンツ配置は、アイテムを行単位で整列するレイアウト方法で機能します。ボックスの内側にパディングを追加することによって、配置対象物のベースラインを相互に揃えます。</p>
+
+<p>ベースラインの自己配置では、ベースラインで配列するために、ボックスの外側にマージンを追加することによってボックスをずらします。自己配置は <code>justify-self</code> または <code>align-self</code> を使用する場合、あるいは <code>justify-items</code> または <code>align-items</code> を使用してこれらの値をグループとして設定する場合に行われます。</p>
+
+<h3 id="Distributed_alignment" name="Distributed_alignment">分配配置</h3>
+
+<p><strong>分配配置キーワード</strong> は <code>align-content</code> および <code>justify-content</code> で使用するプロパティです。これらのキーワードは、配置対象物を描画したあと、残りの空間をどう扱うか定義します。値は以下のとおりです。</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>たとえばフレックスレイアウトでは、初期値の場合アイテムを <code>flex-start</code> で整列します。英語のように水平方向で上から下への書字方向で動作する場合、 <code>flex-direction</code> が <code>row</code> のときにはアイテムは左端から始まり、アイテムを描画した余白はすべてアイテムの後に配置されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>フレックスコンテナーに <code>justify-content: space-between</code> を設定すると、余白はアイテム間に分配されます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>これらのキーワードを有効にするには、アイテムを配置する領域に余白が必要です。余白が存在しないと、分配されることはありません。</p>
+
+<h2 id="Overflow_alignment" name="Overflow_alignment">配置があふれた場合</h2>
+
+<p><code>safe</code> および <code>unsafe</code> キーワードは、配置コンテナーより配置対象物のほうが大きい場合の振る舞いを指定します。 <code>safe</code> キーワードを指定すると、指定された配置によりあふれが発生する場合、アイテムの一部が境界の外側に出て配置コンテナーがスクロールできないという「データ損失」を防ぐために、 <code>start</code> で配置します。</p>
+
+<p><code>unsafe</code> を指定した場合、データ損失が発生する可能性があっても配置が尊重されます。</p>
+
+<h2 id="Gaps_between_boxes" name="Gaps_between_boxes">ボックス間のギャップ</h2>
+
+<p>ボックス配置仕様書には、 <code>gap</code>, <code>row-gap</code>, <code>column-gap</code> も含まれています。これらのプロパティは、アイテムが配置されているあらゆるレイアウト方法で、行または列内のアイテム間で一貫したギャップを設定します。</p>
+
+<p><code>gap</code> プロパティは <code>row-gap</code> と <code>column-gap</code> の一括指定で、両プロパティを一度に設定することができます。</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>以下の例では、グリッドレイアウトで <code>gap</code> の一括指定を使用して、行トラック間に <code>10px</code> のギャップと列トラック間に <code>2em</code> のギャップを設定します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>この例では、 {{cssxref("gap")}} に加えて {{cssxref("grid-gap")}} プロパティを使用しています。 <code>gap</code> プロパティはもともとグリッドレイアウト仕様書の中で <code>grid-</code> という接頭辞をつけられていました。ブラウザーによってはこれらの接頭辞がついたバージョンにしか対応していません。</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>接頭辞がついたバージョンは接頭辞がないバージョンの別名として保持されています。 <code>grid-gap</code> プロパティの次に <code>gap</code> を同じ値で追加すれば、ベンダー接頭辞と同じように使用できます。</p>
+
+<p>また、スペース配分キーワードを使用した場合やアイテムにマージンを追加したりした場合など、表示される視覚的なギャップが広がることもあります。</p>
+
+<h2 id="Pages_detailing_individual_alignment_properties" name="Pages_detailing_individual_alignment_properties">レイアウト別の配置詳細ページ</h2>
+
+<p>CSS ボックス配置のプロパティは、相互作用する仕様に応じて様々な方法で実装されています。レイアウトの種類ごとの使用方法の詳細は、それぞれのページを参照してください。</p>
+
+<ul>
+ <li><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">CSS グリッドレイアウトでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">段組みレイアウトでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">ブロック、絶対配置、表レイアウトのブロック配置</a></li>
+</ul>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の項目</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Cross axis", "交差軸")}}</li>
+ <li>{{Glossary("Main axis", "主軸")}}</li>
+ <li>{{Glossary("Alignment container", "配置コンテナー")}}</li>
+ <li>{{Glossary("Alignment subject", "配置対象物")}}</li>
+ <li>{{Glossary("Fallback alignment", "代替配置")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
+ <li>CSS Flexbox guide: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></em></li>
+ <li>CSS Grid guide: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></em></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box alignment cheatsheet</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">CSS Grid, Flexbox and Box alignment</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Thoughts on partial implementations of Box alignment</a></li>
+</ul>
diff --git a/files/ja/web/css/css_box_model/index.html b/files/ja/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..64fc11ed1d
--- /dev/null
+++ b/files/ja/web/css/css_box_model/index.html
@@ -0,0 +1,114 @@
+---
+title: CSS 基本ボックスモデル
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS 基本ボックスモデル
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 基本ボックスモデル</strong>は CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>によって配置されます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box" name="Properties_controlling_the_flow_of_content_in_a_box">ボックス内のコンテンツの流れを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box" name="Properties_controlling_the_size_of_a_box">ボックスの寸法を制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+ <li>{{CSSxRef("max-height")}}</li>
+ <li>{{CSSxRef("max-width")}}</li>
+ <li>{{CSSxRef("min-height")}}</li>
+ <li>{{CSSxRef("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box" name="Properties_controlling_the_margins_of_a_box">ボックスのマージンを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box" name="Properties_controlling_the_paddings_of_a_box">ボックスのパディングを制御するプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("padding")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties" name="Other_properties">その他のプロパティ</h4>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS ボックスモデルの紹介</a></dt>
+ <dd>CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺の理解</a></dt>
+ <dd>2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a></dt>
+ <dd>視覚整形モデルを説明します。</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">仕様書</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 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..80bf608f4f
--- /dev/null
+++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS 基本ボックスモデル入門
+slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS 基本ボックスモデル
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<p>ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な <strong>CSS ボックスモデル</strong>に基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。</p>
+
+<p>それぞれのボックスは4つの部品 (または<em>領域</em>) から構成され、それぞれの辺について<em>コンテンツ境界 (content edge)</em>、<em>パディング境界 (padding edge)</em>、<em>ボーダー境界 (border edge)</em>、<em>マージン境界 (margin edge)</em> が定義されています。</p>
+
+<p><img alt="CSS ボックスモデル" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p id="content-area"><strong>コンテンツ領域</strong>は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法は<em>コンテンツ幅</em>（または<em>コンテンツボックスの幅</em>）と<em>コンテンツの高さ</em>（または<em>コンテンツボックスの高さ）</em>です。背景色や背景画像を持っていることがあります。</p>
+
+<p>{{cssxref("box-sizing")}} プロパティが <code>content-box</code> (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。</p>
+
+<p id="padding-area"><strong>パディング領域</strong>は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法は<em>パディングボックスの幅</em>と<em>パディングボックスの高さ</em>です。</p>
+
+<p>パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。</p>
+
+<p id="border-area"><strong>ボーダー領域</strong>は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法は<em>ボーダーボックスの幅</em>と<em>ボーダーボックスの高さ</em> になります。</p>
+
+<p>境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが <code>border-box</code> に設定されていた場合、ボーダー領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{ cssxref("height") }}, {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} 又は {{cssxref("background-image")}}）が設定されている場合、背景はボーダー境界の外枠まで拡張されます（つまり、 Z 順で境界線の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。</p>
+
+<p id="margin-area"><strong>マージン領域</strong>は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、<em>マージンボックスの幅</em>と<em>マージンボックスの高さ</em>になります。</p>
+
+<p>マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。<a href="/ja/docs/Web/CSS/margin_collapsing" title="CSS/margin_collapsing">マージンの相殺</a> (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。</p>
+
+<p>置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Containing_block">レイアウトと包含ブロック</a></li>
+ <li><a href="/ja/docs/Web/CSS/Cascade">CSS カスケードの紹介</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">仕様書</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 Box', '#intro')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>言葉遣いをより正確にしたが、有意な変更点はなし</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also_2" name="See_also_2">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..1e62749980
--- /dev/null
+++ b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,89 @@
+---
+title: マージンの相殺
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS ボックスモデル
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>ブロックの<a href="/ja/docs/Web/CSS/margin-top">先頭</a>と<a href="/ja/docs/Web/CSS/margin-bottom">末尾</a>のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (<ruby>折り畳まれる<rp> (</rp><rt>collapsed</rt><rp>)</rp></ruby>) ことがあり、<strong>マージンの相殺</strong>という動作として知られています。なお、<a href="/ja/docs/Web/CSS/float">浮動</a>要素と<a href="/ja/docs/Web/CSS/position#absolute">絶対位置指定</a>要素では折り畳まれません。</p>
+
+<p>マージンの相殺は、基本的に3つの場合に発生します。</p>
+
+<dl>
+ <dt>隣接兄弟要素</dt>
+ <dd>隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を <a href="/ja/docs/Web/CSS/clear">解除 (clear)</a> する必要がある場合を除く)。</dd>
+ <dt>親と子孫を隔てるコンテンツがない場合</dt>
+ <dd>あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>の生成、<em><a href="/ja/docs/Web/CSS/clear">浮動の解除 (clear)</a></em> のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。</dd>
+ <dt>空ブロック</dt>
+ <dd>あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。</dd>
+</dl>
+
+<p>注意すべきことがいくつかあります。</p>
+
+<ul>
+ <li>これらのケースが組み合わさると、もっと複雑な (3つ以上の) マージンの相殺が発生します。</li>
+ <li>このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。</li>
+ <li>負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。</li>
+ <li>すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;The bottom margin of this paragraph is collapsed …&lt;/p&gt;
+&lt;p&gt;… with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;I am &lt;code&gt;2rem&lt;/code&gt; below the element above.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Result" name="Result">例</h3>
+
+<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/css_charsets/index.html b/files/ja/web/css/css_charsets/index.html
new file mode 100644
index 0000000000..95b28d4558
--- /dev/null
+++ b/files/ja/web/css/css_charsets/index.html
@@ -0,0 +1,53 @@
+---
+title: CSS 文字セット
+slug: Web/CSS/CSS_Charsets
+tags:
+  - CSS
+  - CSS 文字セット
+  - CSS 構文
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Charsets
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 文字セット</strong><rp> (</rp><rt>CSS Charsets</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、スタイルシート内で使用される文字セットを指定します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@charset")}}</li>
+</ul>
+</div>
+
+<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('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="charset_規則"><code>@charset</code> 規則</h3>
+
+<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.at-rules.charset")}}</p>
+</div>
diff --git a/files/ja/web/css/css_color/index.html b/files/ja/web/css/css_color/index.html
new file mode 100644
index 0000000000..d1da1fd638
--- /dev/null
+++ b/files/ja/web/css/css_color/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS 色
+slug: Web/CSS/CSS_Color
+tags:
+  - CSS
+  - CSS 色
+  - HTML 色
+  - Reference
+  - スタイル
+  - 概要
+  - 色
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><ruby><strong>CSS 色</strong><rp> (</rp><rt>CSS Color</rt><rp>) </rp></ruby>は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。</span> {{cssxref("&lt;color&gt;")}} を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("color-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML 要素への色の適用</a></dt>
+ <dd>様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。</dd>
+</dl>
+
+<h2 id="Tools" name="Tools">ツール</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">色選択ツール</a></dt>
+ <dd>このツールは独自の色を簡単に作成、調整、実験することができます。</dd>
+</dl>
+
+<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('CSS4 Colors')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="color_プロパティ"><code>color</code> プロパティ</h3>
+
+<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.properties.color")}}</p>
+</div>
+
+<h3 id="color-adjust_プロパティ"><code>color-adjust</code> プロパティ</h3>
+
+<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.properties.color-adjust")}}</p>
+</div>
+
+<h3 id="opacity_プロパティ"><code>opacity</code> プロパティ</h3>
+
+<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.properties.opacity")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の仕様書で定義されている色に関するプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li>CSS では、グラデーションは色ではなく<a href="/ja/docs/Web/CSS/CSS_Images">画像</a>です。</li>
+</ul>
diff --git a/files/ja/web/css/css_colors/color_picker_tool/index.html b/files/ja/web/css/css_colors/color_picker_tool/index.html
new file mode 100644
index 0000000000..7375e00046
--- /dev/null
+++ b/files/ja/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3241 @@
+---
+title: 色選択ツール
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+tags:
+  - CSS
+  - CSS 色
+  - CSS 色選択
+  - CSS 色選択ツール
+  - HTML 色
+  - HTML 色選択
+  - HTML 色選択ツール
+  - color
+  - ツール
+  - 色選択
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">色選択ツール</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS 色 &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+</pre>
+</div>
+
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">このツールは、ウェブの独自の色を簡単に作成、調整、実験することができます。</span>  HEXA 色, RGB (Red/Green/Blue), HSL (Hue/Saturation/Lightness) RGB など、 <a href="/en-US/docs/Web/CSS">CSS</a> で対応している様々な<a href="/en-US/docs/Web/CSS/color_value">色形式</a>に変換することもできます。アルファチャネルの制御も、 RGB (rgba) 及び HSL (hsla) 形式で対応しています。</p>
+
+<p>色を定義するパラメーターを調整すると、３つの標準ウェブ CSS 形式すべてが表示されます。さらに、現在選択されている色に基づいて、 HSL および HSV のパレット、およびアルファが生成されます。「スポイト」スタイルのカラーピッカーボックスは、 HSL または HSV 形式の間で切り替えることができます。また、ツールの下部にあるボックスに色をドラッグし、色を重ね合わせることで、色とその重なり具合をテストすることもできます。 相対 Z インデックス値を調整して、前後に移動させることができます。</p>
+
+<p>このツールは <a href="/en-US/docs/Web/HTML">HTML</a> に適用する完全な CSS 色を識別するのに役立ちます。</p>
+
+<div>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</div>
+
+<p>上記で作成した色は、特に注意書きがない限り、 CSS や HTML のどこの色でも使用することができます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>色の使用について詳しくは、以下を参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">Changing background styles using CSS</a></li>
+ <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">色とそのコントラスト</a></li>
+</ul>
diff --git a/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html
new file mode 100644
index 0000000000..fdc6e3f42c
--- /dev/null
+++ b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html
@@ -0,0 +1,94 @@
+---
+title: 段組みの基本概念
+slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+tags:
+  - CSS
+  - CSS 段組みレイアウト
+  - Guide
+  - レイアウト
+translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby>段組みレイアウト<rp> (</rp><rt>Multiple-column Layout</rt><rp>) </rp></ruby>は、内容物を新聞のように複数の段ボックスにレイアウトする仕様です。このガイドでは、この仕様がどのように働くかを、いくつかのよくある使用例と共に説明します。</p>
+
+<h2 id="Key_Concepts_and_Terminology" name="Key_Concepts_and_Terminology">主要概念と用語</h2>
+
+<p>段組みは他のレイアウト方法とは異なり、 CSS でコンテンツを分割し、すべての子孫要素を段に含めます。これは、印刷スタイルシートを作成するのに使われる <a href="/ja/docs/Web/CSS/CSS_Pages">CSS ページ付きメディア</a>がコンテンツをページに分割するのと同様のことを行います。</p>
+
+<p>仕様書で定義されているプロパティは次の通りです。</p>
+
+<ul>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("columns")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+
+<p><code>column-count</code> 又は <code>column-width</code> を要素に追加することで、要素は<em>段組みコンテナー</em>になります。段は無名のボックスになり、仕様書上では段ボックスと呼ばれます。</p>
+
+<h2 id="Defining_columns" name="Defining_columns">段の定義</h2>
+
+<p>段組みコンテナーを作成するには、少なくとも一つの <code>column-*</code> プロパティ、つまり <code>column-count</code> か <code>column-width</code> を使用する必要があります。</p>
+
+<h3 id="The_column-count_property" name="The_column-count_property"><code>column-count</code> プロパティ</h3>
+
+<p><code>column-count</code> プロパティは、内容物を表示したい段数を指定します。ブラウザーは要求された数の段を生成するために、それぞれの段ボックスに適正な大きさの空間を割り当てます。</p>
+
+<p>以下の例では、 <code>column-count</code> プロパティを使用して <code>.container</code> 要素に3つの段を生成します。その内容は、 <code>.container</code> の子も含めて3つの段に分割されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<p>上記の例では、内容物は既定のスタイルの段落 <code>p</code> タグで囲まれています。従って、それぞれの段落の上にはマージンがあります。マージンが働いてテキストの最初の行を押し下げているのが分かるでしょう。これは、段組みコンテナーは新しいブロック整形文脈 (BFC) を作成し、つまり子要素のマージンはコンテナーのマージンと相殺されないからです。</p>
+
+<h3 id="The_column-width_property" name="The_column-width_property"><code>column-width</code> プロパティ</h3>
+
+<p><code>column-width</code> プロパティは、それぞれの段ボックスの最適な幅を設定するために使用されます。 column-width を宣言すると、ブラウザーは段組みコンテナー内にその幅の段と、段間の均等の空間が収まる数を計算します。従って、段の幅は最小幅として扱われ、段ボックスはふつう、追加の空間があるためにより広くなります。</p>
+
+<p>段ボックスは、利用できる幅が <code>column-width</code> の値よりも狭い一段組の場合に限り、宣言された段の幅よりも狭くなることがあります。</p>
+
+<p>以下の例では、 <code>column-width</code> の値を 200px にして使用しています。コンテナーに合うように200ピクセルの段が確保され、残りの空間は均等に割り当てられます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+
+<h3 id="Using_column-count_and_column-width_together" name="Using_column-count_and_column-width_together"><code>column-count</code> と <code>column-width</code> の併用</h3>
+
+<p>段組みコンテナーに両方のプロパティを指定すると、 <code>column-count</code> は最大の段数として動作します。従って、 <code>column-count</code> の段数に達するまでは、 <code>column-width</code> で宣言された通りに動作します。これを超えると、 <code>column-width</code> で指定された寸法の段を追加する余裕があっても、段は追加されず、余った空間は既存の段に均等に割り当てられます。</p>
+
+<p>両方のプロパティを併用すると、 <code>column-count</code> の値で指定されたよりも少ない数の段数になることがあります。</p>
+
+<p>次の例では、 <code>column-width</code> を 200px で <code>column-count</code> を 2 で使用しています。３段以上の空間があっても２段になります。しかし、 200px の段を２つ設置する空間の余裕がなければ、１段になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+
+<h3 id="The_columns_shorthand" name="The_columns_shorthand"><code>columns</code> 一括指定</h3>
+
+<p><code>columns</code> 一括指定で <code>column-count</code> と <code>column-width</code> を設定することができます。長さの単位を設定すると、 <code>column-width</code> に使用され、整数値を設定すると、 <code>column-count</code> に使用されます。２つの値を空白で区切って両方を設定することができます。</p>
+
+<p>この CSS は例１と同じ結果で、 <code>column-count</code> を 3 に設定します。</p>
+
+<pre>.container {
+  columns: 3;
+}</pre>
+
+<p>この CSS は例２と同じ結果で、 <code>column-width</code> を 200px に設定します。</p>
+
+<pre>.container {
+  columns: 200px;
+}</pre>
+
+<p>この CSS は例３と同じ結果で、 <code>column-count</code> と <code>column-width</code> の両方に設定します。</p>
+
+<pre>.container {
+  columns: 2 200px;
+}</pre>
+
+<h2 id="Next_Steps" name="Next_Steps">次のステップ</h2>
+
+<p>このガイドでは、段組みレイアウトの基本的な利用を学びました。次のガイドでは、 <a href="/ja/docs/Web/CSS/CSS_Columns/Styling_Columns">段のスタイル付け</a>がどれだけできるかを見てみます。</p>
diff --git a/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html
new file mode 100644
index 0000000000..d1a397801f
--- /dev/null
+++ b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html
@@ -0,0 +1,74 @@
+---
+title: 段組みにおける内容の分割の扱い
+slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+tags:
+  - CSS
+  - CSS 段組みレイアウト
+  - Guide
+  - レイアウト
+translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">段組みレイアウトでは段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。</p>
+
+<h2 id="Fragmentation_basics" name="Fragmentation_basics">断片化の基本</h2>
+
+<p><a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation specification</a> は、断片化コンテナー間、または <em>fragmentainer</em> の間でどのように内容を分割するかを詳述しています。段組みでは、 fragmentainer は段ボックスです。</p>
+
+<p>段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。</p>
+
+<p>分割を制御したくなる場所は様々なものがあります。</p>
+
+<ul>
+ <li>例えば figure 要素の内部などの、ボックス内での分割。</li>
+ <li>上記の見出しの例のような、ボックスの前後の分割。</li>
+ <li>行間の分割。</li>
+</ul>
+
+<h2 id="Breaks_inside_boxes" name="Breaks_inside_boxes">ボックス内での分割</h2>
+
+<p>ボックス内での分割を制御するには、 {{cssxref("break-inside")}} プロパティを使用します。このプロパティは以下の値を取ります。</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-page</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>avoid-region</code></li>
+</ul>
+
+<p>以下の例では、 break-inside を figure 要素に適用して、キャプションが画像から分割されることを防ぎます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p>
+
+<h2 id="Breaks_before_and_after_boxes" name="Breaks_before_and_after_boxes">ボックスの前後の分割</h2>
+
+<p>{{cssxref("break-before")}} および {{cssxref("break-after")}} プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。</p>
+
+<ul>
+ <li>auto</li>
+ <li>avoid</li>
+ <li>avoid-column</li>
+ <li>column</li>
+</ul>
+
+<p>次の例では、 <code>h2</code> 要素の前で強制的に改段しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p>
+
+<h2 id="Breaks_between_lines" name="Breaks_between_lines">行間での分割</h2>
+
+<p>{{cssxref("orphans")}} および {{cssxref("widows")}} プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。</p>
+
+<p><code>orphans</code> および <code>widows</code> プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。</p>
+
+<p>以下の例では、 <code>orphans</code> プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p>
+
+<h2 id="When_things_don’t_work_as_expected" name="When_things_don’t_work_as_expected">期待通りに動作しない場合</h2>
+
+<p>内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。</p>
+
+<p>上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できないフォールバックにより、美しくない分割が発生することが次善の策であり、レイアウトが崩れるよりましです。</p>
diff --git a/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html
new file mode 100644
index 0000000000..0840b1ef0c
--- /dev/null
+++ b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html
@@ -0,0 +1,44 @@
+---
+title: 段組みでのはみ出しの扱い
+slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。</p>
+
+<h2 id="Overflow_inside_column_boxes" name="Overflow_inside_column_boxes">段ボックス内でのはみ出し</h2>
+
+<p>はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が <code>column-width</code> の幅、または <code>column-count</code> で宣言された段数に基づく段の幅よりも広い場合に発生します。</p>
+
+<p>この場合、内容は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
+
+<p>画像を段ボックスに合うよう縮小したい場合は、 <code>max-width: 100%</code> を設定する標準的なレスポンシブ画像の解決方法で実現することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+
+<h2 id="More_columns_than_will_fit" name="More_columns_than_will_fit">より多くの段が生成される場合</h2>
+
+<p>印刷のような断片化メディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。</p>
+
+<p>断片化メディアでは、1つの断片 (例えば1ページ) が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、これはスクロールバーが出現することを意味します。</p>
+
+<p>以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+
+<p>将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。</p>
+
+<h2 id="Using_vertical_media_queries" name="Using_vertical_media_queries">垂直メディアクエリの使用</h2>
+
+<p>ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなります。これを防ぐ一つの方法が、十分な高さがあると分かった時に段組みプロパティを適用することです。</p>
+
+<p>以下の例では、 <code>min-height</code> クエリを使用して、段組みプロパティを適用する前に高さを検査します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+
+<p>このシリーズの最後のガイドでは、<a href="/ja/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">段組みが断片化仕様でどのように動作するか</a>を見て、段をまたいで内容が分割される方法を制御します。</p>
diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html
new file mode 100644
index 0000000000..e3354ed01b
--- /dev/null
+++ b/files/ja/web/css/css_columns/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS 段組みレイアウト
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS 分割
+  - CSS 段組みレイアウト
+  - Reference
+  - レイアウト
+  - 概要
+  - 段組み
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef("CSS3 Multicol")}}</div>
+
+<p><strong>CSS 段組みレイアウト</strong>は CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>以下の例では、 {{cssxref("column-count")}} プロパティをコンテナーのクラスの要素に適用しています。 <code>column-count</code> の値が <code>3</code> なので、内容物は同じ寸法の３つの段に並べられます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<h2 id="分割との関連">分割との関連</h2>
+
+<p>段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、<a href="/ja/docs/Web/CSS/CSS_Pages">ページ付きメディア</a>に密接に関連します。従って、 <a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a>仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Multiple-column_Layout_Properties" name="Multiple-column_Layout_Properties">段組みレイアウトのプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h3 id="Related_CSS_Fragmentation_Properties" name="Related_CSS_Fragmentation_Properties">関連する CSS 分割のプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みの基本概念</a></dt>
+ <dd>段組みレイアウト仕様の概要です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Columns/Styling_Columns">段のスタイル付け</a></dt>
+ <dd>段間罫と段間の空間の使い方です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Columns/Spanning_Columns">段抜きと段の均衡</a></dt>
+ <dd>すべての段にまたがる要素の作り方と、段を埋める方法の制御です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">段組みでのはみ出しの扱い</a></dt>
+ <dd>アイテムが段をあふれたときに起こることと、段内のコンテンツが多すぎてコンテナーに収まらない場合に起こることです。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">段組みにおける内容の分割の扱い</a></dt>
+ <dd>分割の仕様とどこで内容を区切るかの制御方法です。</dd>
+</dl>
+
+<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 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p>他の CSS レイアウト技術には以下のようなものがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレキシブルボックスレイアウト</a> (CSS フレックスボックス)</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+</ul>
diff --git a/files/ja/web/css/css_columns/spanning_columns/index.html b/files/ja/web/css/css_columns/spanning_columns/index.html
new file mode 100644
index 0000000000..c3f25e6453
--- /dev/null
+++ b/files/ja/web/css/css_columns/spanning_columns/index.html
@@ -0,0 +1,65 @@
+---
+title: 段抜きと段の均衡
+slug: Web/CSS/CSS_Columns/Spanning_Columns
+tags:
+  - CSS
+  - CSS 段組みレイアウト
+  - Guide
+  - レイアウト
+translation_of: Web/CSS/CSS_Columns/Spanning_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。</p>
+
+<div class="note">
+<p>このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。</p>
+</div>
+
+<h2 id="Spanning_the_Columns" name="Spanning_the_Columns">段抜き</h2>
+
+<p>アイテムを段抜きする場合は、 {{cssxref("column-span")}} プロパティの値を <code>all</code> に設定してください。これで、要素はすべての段にまたがります。</p>
+
+<p>段組みコンテナーの子孫要素は、直接の子でも間接の子でも<em><ruby>段抜き<rp> (</rp><rt>spanner</rt><rp>) </rp></ruby></em>になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができ、段組みコンテナーの中のセクションに含まれる見出しも同様です。</p>
+
+<p>以下の例では、 h2 要素が <code>column-span: all</code> に設定され、すべての段に段抜きされます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
+
+<p>次の例では、見出しが {{HTMLElement("article")}} 要素の中にありますが、期待通りにコンテンツが段抜きになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
+
+<p>段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容が段抜き要素をまたぐことはありません。</p>
+
+<h3 id="Limitations_of_column-span" name="Limitations_of_column-span">column-span の制約</h3>
+
+<p>現在の Level 1 仕様書では、 <code>column-span</code> に許可されている値は二つしかありません。 <code>none</code> の値は初期値で、アイテムを段抜きせず、段の中に収めます。 <code>all</code> の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを3段中2段に段抜きすることはできません。</p>
+
+<h3 id="Things_to_watch_out_for" name="Things_to_watch_out_for">注意すべきこと</h3>
+
+<p>段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
+
+<p>加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。</p>
+
+<h2 id="Column_Filling_and_Balancing" name="Column_Filling_and_Balancing">段の充足と均衡</h2>
+
+<p>均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。</p>
+
+<p>{{cssxref("column-fill")}} の段組みでの初期値は <code>balance</code> です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。<a href="/ja/docs/Web/CSS/CSS_Pages">ページ付きメディア</a>のような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。</p>
+
+<p>均衡を取るための第二の値は <code>balance-all</code> で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。</p>
+
+<p>この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
+
+<p> <code>column-fill</code> の他の値として <code>auto</code> があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では <code>column-fill</code> を <code>auto</code> に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
+
+<p>なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。</p>
+
+<p>次のガイドでは、<a href="/ja/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">段組みがはみ出しをどう扱うか</a>を、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。</p>
diff --git a/files/ja/web/css/css_columns/styling_columns/index.html b/files/ja/web/css/css_columns/styling_columns/index.html
new file mode 100644
index 0000000000..1f9e2b7803
--- /dev/null
+++ b/files/ja/web/css/css_columns/styling_columns/index.html
@@ -0,0 +1,52 @@
+---
+title: 段のスタイル付け
+slug: Web/CSS/CSS_Columns/Styling_Columns
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - CSS 段組みレイアウト
+  - Guide
+  - Layout
+  - レイアウト
+  - 日本語処理
+translation_of: Web/CSS/CSS_Columns/Styling_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">段組みコンテナー内に作られた段ボックスは無名ボックスなので、スタイル付けできることはわずかです。しかし、できることは少数ながらあります。このガイドは、段同士の間隔および段間罫をスタイル付けする方法を説明します。</p>
+
+<h2 id="Can_I_Style_the_Column_Boxes" name="Can_I_Style_the_Column_Boxes">段ボックスにスタイル付けできるか</h2>
+
+<p>残念ながら、現在はできません。段を構成する無名ボックスはスタイル付けの対象にする方法がないため、ボックスの背景色を変更したり、一段だけを他よりも広くしたりすることはできません。おそらく将来の版の仕様書でできるようになるでしょう。しかし現時点で、段同士の間隔と段間罫を変更することはできます。</p>
+
+<h2 id="The_column-gap_property" name="The_column-gap_property"><code>column-gap</code> プロパティ</h2>
+
+<p>段同士の間隔 (段間) は、 <code>column-gap</code> プロパティで制御されます。このプロパティはもともと段組みレイアウト仕様書で定義されていました。しかし、現在は<a href="/ja/docs//Web/CSS/CSS_Box_Alignment">ボックス配置</a>仕様書で定義され、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウト</a>などの他の仕様書におけるボックス同士の間隔と統合されました。</p>
+
+<p>段組みにおける <code>column-gap</code> の初期値は <code>1em</code> です。つまり、段同士は互いに接しません。他のレイアウト方法では、 <code>column-gap</code> の初期値は 0 です。キーワード値 “normal” を使用した場合、間隔は 1em に設定されます。</p>
+
+<p>段間は <code>column-gap</code> の値として任意の単位を使用して変更することができます。以下の例では、 <code>column-gap</code> は 40px に設定されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}</p>
+
+<p><code>column-gap</code> に許されている値は <code>&lt;length-percentage&gt;</code> であり、つまりパーセント値を使用することができます。 <code>column-gap</code> のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。</p>
+
+<h2 id="Column_rules" name="Column_rules">段間罫</h2>
+
+<p>仕様書では <code>column-rule-width</code>, <code>column-rule-style</code> <code>column-rule-color</code> と、一括指定する <code>column-rule</code> を定義しています。これらのプロパティは、 <code>border</code> プロパティとまったく同じように動作します。 <code>border-style</code> で有効な値が <code>column-rule-style</code> で使用できます。</p>
+
+<p>これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。</p>
+
+<p>次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}</p>
+
+<p>なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。そうではなく、段間罫が段間と重なります。</p>
+
+<p>次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に間隔を作るには、 gap を 40px より大きくする必要があるでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内で<a href="/ja/docs/Web/CSS/CSS_Columns/Spanning_Columns">すべての段をまたがる</a>要素の作成を見てみましょう。</p>
diff --git a/files/ja/web/css/css_columns/using_multi-column_layouts/index.html b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..f0ae1440c7
--- /dev/null
+++ b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html
@@ -0,0 +1,243 @@
+---
+title: 段組みレイアウトの使用
+slug: Web/CSS/CSS_Columns/Using_multi-column_layouts
+tags:
+  - Advanced
+  - CSS
+  - CSS Multi-column Layout
+  - Guide
+  - Layout
+  - Web
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">CSS の<ruby><strong>段組みレイアウト</strong><rp> (</rp><rt>Multi-column Layout</rt><rp>) </rp></ruby>は、<em>ブロックレイアウトモード</em>を拡張して、文章の段組みを定義しやすくするものです。</span>行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。</p>
+
+<p>残念ながら、 CSS と HTML では位置を指定してで段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。</p>
+
+<h2 id="Using_columns" name="Using_columns">段組みの使用</h2>
+
+<h3 id="Column_count_and_width" name="Column_count_and_width">段の数と幅</h3>
+
+<p>2つの CSS プロパティ、 {{cssxref("column-count")}} と {{cssxref("column-width")}} で、段組みをするかどうか、段数をいくつにするかを制御します。</p>
+
+<p><code>column-count</code> プロパティで、段数を特定の数に設定します。例えば以下のようにします。</p>
+
+<h2 id="Example_1" name="Example_1">例1</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="column_count">
+<pre class="brush: html notranslate">&lt;div id="col"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#col {
+  column-count: 2;
+}
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>コンテンツが（段組み対応のブラウザーを使用していれば）2段で表示されます。</p>
+
+<p>{{EmbedLiveSample("column_count", "100%")}}</p>
+
+<p><code>column-width</code> プロパティは最小限ほしい段の幅を設定します。 <code>column-count</code> の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。</p>
+
+<h2 id="Example_2" name="Example_2">例2</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<div id="column_width">
+<pre class="brush: html notranslate">&lt;div id="wid"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css notranslate">#wid {
+  column-width: 100px;
+}
+</pre>
+</div>
+
+<h3 id="Result_2" name="Result_2">結果</h3>
+
+<p>{{EmbedLiveSample("column_width", "100%")}}</p>
+
+<p>より厳密な詳細については、 <a class="external" href="https://www.w3.org/TR/css3-multicol/">CSS3 仕様書</a>で説明されています。</p>
+
+<p>段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。</p>
+
+<h3 id="The_columns_shorthand" name="The_columns_shorthand">一括指定の columns</h3>
+
+<p>たいていの場合、ウェブデザイナーは {{cssxref("column-count")}} と {{cssxref("column-width")}} の2つのうち1つを使用します。これらのプロパティの値は重複しないので、一括指定の {{cssxref("columns")}} を使うのがふつうは便利です。例えば以下のようにします。</p>
+
+<p>CSS 宣言の <code>column-width: 12em</code> は <code>columns: 12em</code> に置き換えることができます。</p>
+
+<h2 id="Example_3" name="Example_3">例3</h2>
+
+<h3 id="HTML_3">HTML</h3>
+
+<div id="column_short">
+<pre class="brush: html notranslate">&lt;div id="col_short"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css notranslate">#col_short {
+  columns: 12em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("column_short", "100%")}}</p>
+
+<p>CSS 宣言 の <code>column-count: 4</code> は <code>columns: 4</code> に置き換えられます。</p>
+
+<h2 id="Example_4" name="Example_4">例4</h2>
+
+<h3 id="HTML_4">HTML</h3>
+
+<div id="example_4_columns">
+<pre class="brush: html notranslate">&lt;div id="columns_4"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_4">CSS</h3>
+
+<pre class="brush: css notranslate">#columns_4 {
+  columns: 4;
+}
+</pre>
+</div>
+
+<h3 id="Result_3">Result</h3>
+
+<p>{{EmbedLiveSample("example_4_columns", "100%")}}</p>
+
+<p><code>column-width: 8em</code> と <code>column-count: 12</code> の2つの CSS 宣言は、 <code>columns: 12 8em</code> で置き換えることができます。</p>
+
+<h2 id="Example_5" name="Example_5">例5</h2>
+
+<h3 id="HTML_5">HTML</h3>
+
+<div id="example_12_columns">
+<pre class="brush: html notranslate">&lt;div id="columns_12"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_5">CSS</h3>
+
+<pre class="brush: css notranslate">#columns_12 {
+  columns: 12 8em;
+}
+</pre>
+</div>
+
+<h3 id="Result_4" name="Result_4">結果</h3>
+
+<p>{{EmbedLiveSample("example_12_columns", "100%")}}</p>
+
+<h3 id="Height_Balancing" name="Height_Balancing">高さの均衡</h3>
+
+<p>CSS3 の段組みの仕様書では、段の高さが揃っていなければならないと規定されています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。</p>
+
+<p>しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の {{cssxref("height")}} または {{cssxref("max-height")}} プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。</p>
+
+<h3 id="Column_Gaps" name="Column Gaps">段間</h3>
+
+<p>段と段の間には隙間があります。推奨される既定値は <code>1em</code> です。この寸法は段組みブロックに {{cssxref("column-gap")}} プロパティを適用することで変更することができます。</p>
+
+<h2 id="Example_6" name="Example_6">例6</h2>
+
+<h3 id="HTML_6">HTML</h3>
+
+<div id="col_gap">
+<pre class="brush: html notranslate">&lt;div id="column_gap"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_6">CSS</h3>
+
+<pre class="brush: css notranslate">#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+</pre>
+</div>
+
+<h3 id="Result_5" name="Result_5">結果</h3>
+
+<p>{{EmbedLiveSample("col_gap", "100%")}}</p>
+
+<h2 id="Graceful_Degradation" name="Graceful_Degradation">グレイスフルデグラデーション</h2>
+
+<p>段組みのプロパティは、段組みに対応していないブラウザーでは単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。</p>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>CSS3 の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。</p>
diff --git a/files/ja/web/css/css_conditional_rules/index.html b/files/ja/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..2272921aa2
--- /dev/null
+++ b/files/ja/web/css/css_conditional_rules/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS 条件付き規則
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - CSS
+  - CSS 条件付き規則
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 条件付き規則</strong><rp> (</rp><rt>CSS Conditional Rules</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、プロセッサーの能力やスタイルシートが適用される文書の条件に基づいて一連の規則を定義することができます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("@import")}}</li>
+</ul>
+</div>
+
+<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 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="document_規則"><code>@document</code> 規則</h3>
+
+<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.at-rules.document")}}</p>
+</div>
+
+<h3 id="import_規則"><code>@import</code> 規則</h3>
+
+<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.at-rules.import")}}</p>
+</div>
+
+<h3 id="media_規則"><code>@media</code> 規則</h3>
+
+<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.at-rules.media")}}</p>
+</div>
+
+<h3 id="supports_規則"><code>@supports</code> 規則</h3>
+
+<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.at-rules.supports")}}</p>
+</div>
diff --git a/files/ja/web/css/css_containment/index.html b/files/ja/web/css/css_containment/index.html
new file mode 100644
index 0000000000..f06dce4200
--- /dev/null
+++ b/files/ja/web/css/css_containment/index.html
@@ -0,0 +1,122 @@
+---
+title: CSS Containment
+slug: Web/CSS/CSS_Containment
+translation_of: Web/CSS/CSS_Containment
+---
+<p>{{CSSRef}}<br>
+ CSS Containment という仕様の目的は、開発者に Web ページの任意のサブツリーをそれ以外から独立させることでサイトパフォーマンスを向上させることです。もしブラウザがページの一部が独立していることを知っていれば、レンダリング時に最適化し、パフォーマンスを向上させることができます。この仕様は単一の CSS プロパティ {{cssxref("contain")}} を定義しています。この文書ではその仕様の基本的な目的を説明しています。</p>
+
+<h2 id="基本例">基本例</h2>
+
+<p>多くの Web ページでは、互いに独立したいくつかのセクションで構成されています。例えば記事の見出しと内容が並んだ以下のようなマークアップで紹介します。</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>各 <code>&lt;article&gt;</code> の CSS には {{cssxref("contain")}} プロパティに <code>content</code> という値が設定されています。</p>
+
+<pre class="brush: css notranslate">article {
+  contain: content;
+}</pre>
+
+<p>各 <code>&lt;article&gt;</code> は他の article タグとは独立しており、 この時 <code>contain: content</code> はブラウザにそのことを伝えるために設定されています。ブラウザは次にこの情報をコンテンツのレンダリング方法の決定に用います。例えば、表示可能な領域の外側の記事はレンダリングしない場合があります。</p>
+
+<p>各 <code>&lt;article&gt;</code> に <code>contain</code> プロパティが与えられた場合、新しい要素が追加されると、ブラウザは <code>contain</code> プロパティが設定された要素のサブツリーの外側については再レイアウトや再描画を行う必要がないと判断します。ただし、もし <code>&lt;article&gt;</code> が ( <code>height: auto</code> が設定されている時のように) そのコンテンツによってサイズが変わるようスタイリングされている場合は、ブラウザがサイズの変化に対応する必要があるかもしれません。</p>
+
+<p><code>contain</code> プロパティについて、各 <code>&lt;article&gt;</code> の要素が独立である例を用いて説明しました。</p>
+
+<p>この <code>content</code> という値は <code>contain: layout paint</code> の省略記法です。ブラウザに対して、内部で行われるレイアウト時にその他の要素と完全に区別するよう伝え、要素に関する全てがその境界の内側で描画されます。どの要素も視覚的にオーバーフローしません。</p>
+
+<p>ある要素のスタイルがその外側に影響しないようにすべきということは、web 開発者側にとってはよく知られており、実際ページを作るときにはそうします。しかし、ブラウザはそういった意図は分かりませんし、記事のスタイルがその中で閉じるように描画されるということは最初から分かりません。このプロパティはそのことをブラウザに伝えるのに有用なのです。これを使うことで、こうした知見に基づいたパフォーマンス最適化を行うことができます。</p>
+
+<h2 id="主な概念と用語">主な概念と用語</h2>
+
+<p>この仕様は {{cssxref("contain")}} というプロパティのみを定義しています。このプロパティの値には、封じ込めの種類を指定します。</p>
+
+<h3 id="レイアウトの封じ込め">レイアウトの封じ込め</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: layout;
+}</pre>
+
+<p>レイアウトは通常、ドキュメント全体がスコープになっています。つまり、ドキュメント全体の中からたった１つの要素を動かしただけで、様々なところが動かされたかのように扱われます。<code>contain: layout</code> を使うことで、ブラウザに対して必要な要素のみを伝えることができます。このプロパティを指定した要素の中の全てがその要素によって封じ込められ、その他の要素には影響せず、そしてその包含ブロックは独立したフォーマッティングコンテキストになります。</p>
+
+<p>加えて、以下の点に注意する必要があります。</p>
+
+<ul>
+ <li><code>float</code> レイアウトはこのプロパティとは独立して作用します。</li>
+ <li>マージンはレイアウトによる封じ込めの境界によって崩れることはありません。</li>
+ <li>レイアウトの封じ込めは <code>position: </code><code>absolute</code>/<code>fixed</code> が指定されたブロックの子孫要素の包含ブロックになります。</li>
+ <li>この包含ブロックはスタッキングコンテキストを作ります。なので {{cssxref("z-index")}} を使うことができます。</li>
+</ul>
+
+<h3 id="ペイントの封じ込め">ペイントの封じ込め</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: paint;
+}</pre>
+
+<p>Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for <code>paint</code> containment as <code>layout</code> containment (see above).</p>
+
+<p>Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.</p>
+
+<h3 id="サイズの封じ込め">サイズの封じ込め</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: size;
+}</pre>
+
+<p>Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.</p>
+
+<p>If you turn on <code>contain: size</code> you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.</p>
+
+<h3 id="スタイルの封じ込め">スタイルの封じ込め</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: style;
+}</pre>
+
+<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p>
+
+<p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>style</code> containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).</p>
+</div>
+
+<h3 id="特殊な値">特殊な値</h3>
+
+<p>There are two special values of contain:</p>
+
+<ul>
+ <li><code>content</code></li>
+ <li><code>strict</code></li>
+</ul>
+
+<p>We encountered the first in the example above. Using <code>contain: content</code> turns on <code>layout</code> and <code>paint</code> containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply <code>size</code> containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.</p>
+
+<p>To gain as much containment as possible use <code>contain: strict</code>, which behaves the same as <code>contain: size layout paint</code>, or perhaps the following to also add <code>style</code> containment in browsers that support it:</p>
+
+<pre class="brush: css notranslate">contain: strict;
+contain: strict style;</pre>
+
+<h2 id="参考リンク">参考リンク</h2>
+
+<h3 id="CSS_プロパティ">CSS プロパティ</h3>
+
+<ul>
+ <li>{{cssxref("contain")}}</li>
+</ul>
+
+<h2 id="外部リンク">外部リンク</h2>
+
+<ul>
+ <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li>
+</ul>
diff --git a/files/ja/web/css/css_counter_styles/index.html b/files/ja/web/css/css_counter_styles/index.html
new file mode 100644
index 0000000000..26e031f13e
--- /dev/null
+++ b/files/ja/web/css/css_counter_styles/index.html
@@ -0,0 +1,97 @@
+---
+title: CSS カウンタースタイル
+slug: Web/CSS/CSS_Counter_Styles
+tags:
+  - CSS
+  - CSS カウンタースタイル
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Counter_Styles
+---
+<div>{{cssref}}</div>
+
+<p><ruby><strong>CSS カウンタースタイル</strong><rp> (</rp><rt>CSS Counter Styles</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、独自のカウンタースタイルを定義することができます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></dt>
+ <dd>カウンターを使用して HTML 要素に番号を振る方法や、複雑なカウンターを実行する方法を説明します。</dd>
+</dl>
+
+<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 Counter Styles')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="counter-style_規則"><code>@counter-style</code> 規則</h3>
+
+<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.at-rules.counter-style")}}</p>
+
+<h3 id="counter-increment_プロパティ"><code>counter-increment</code> プロパティ</h3>
+
+<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.properties.counter-increment")}}</p>
+
+<h3 id="counter-reset_プロパティ"><code>counter-reset</code> プロパティ</h3>
+
+<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.properties.counter-reset")}}</p>
+</div>
+</div>
+</div>
diff --git a/files/ja/web/css/css_device_adaptation/index.html b/files/ja/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..c26a684631
--- /dev/null
+++ b/files/ja/web/css/css_device_adaptation/index.html
@@ -0,0 +1,52 @@
+---
+title: CSS 端末適合
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - CSS 端末適合
+  - リファレンス
+  - 概要
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 端末適合</strong><rp> (</rp><rt>CSS Device Adaptation</rt><rp>) </rp></ruby>は CSS モジュールの一つで、ビューポートの寸法、拡大率、方向を定義することができるものです。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</div>
+
+<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 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="viewport_規則"><code>@viewport</code> 規則</h3>
+
+<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.at-rules.viewport")}}</p>
+</div>
diff --git a/files/ja/web/css/css_display/index.html b/files/ja/web/css/css_display/index.html
new file mode 100644
index 0000000000..cbb02a5f07
--- /dev/null
+++ b/files/ja/web/css/css_display/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS 表示方法
+slug: Web/CSS/CSS_Display
+tags:
+  - CSS
+  - CSS 表示方法
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 表示方法</strong>は CSS のモジュールの一つで、 CSS 整形ボックスツリーがどのように文書の要素ツリーから生成されるかを定義し、制御するプロパティを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("display")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_data_types" name="CSS_data_types">CSS データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<h3 id="CSS_Flow_Layout_(display_block_display_inline)" name="CSS_Flow_Layout_(display_block_display_inline)">CSS フローレイアウト (<code style="white-space: nowrap;">display: block</code>, <code style="white-space: nowrap;">display: inline</code>)</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロックおよびインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとオーバーフロー</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外</a></li>
+</ul>
+
+<h3 id="display_flex"><code style="white-space: nowrap;">display: flex</code></h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">クロスブラウザーのフレックスボックスのミックスイン</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの順序の設定</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックスの典型的な使用例</a></li>
+</ul>
+
+<h3 id="display_grid"><code style="white-space: nowrap;">display: grid</code></h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">グリッドレイアウトと他のレイアウト方法との関係</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+</ul>
+
+<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 Display", "#the-display-properties", "display")}}</td>
+   <td>{{Spec2("CSS3 Display")}}</td>
+   <td><code style="white-space: nowrap;">run-in</code>, <code>flow</code>, <code style="white-space: nowrap;">flow-root</code>, <code>contents</code> および複数キーワードの値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "visuren.html#display-prop", "display")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>テーブルモデルの値と <code style="white-space: nowrap;">inline-block</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#display", "display")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義。基本的な値: <code>none</code>, <code>block</code>, <code>inline</code>, <code style="white-space: nowrap;">list-item</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>CSS Display 仕様書 Level 3 に加え、他の仕様書でも display の様々な値の動作を定義しています。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..7e8574e143
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,223 @@
+---
+title: フレックスコンテナー内のアイテムの配置
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+tags:
+  - Align
+  - CSS
+  - Flex
+  - Guide
+  - align-content
+  - align-items
+  - align-self
+  - alignment
+  - flexbox
+  - justify
+  - justify-content
+  - フレックスボックス
+  - 配置
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。</p>
+
+<p>ボックスを中央寄せするには、 <code>align-items</code> プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、 <code>justify-content</code> プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。</p>
+
+<p><img alt="中央寄せされたボックスをもつコンテナ要素" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p>以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Properties_that_control_alignment" name="Properties_that_control_alignment">配置を制御するプロパティ</h2>
+
+<p>本ガイドで扱うプロパティは以下のとおりです。</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。</li>
+ <li>{{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。</li>
+ <li>{{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する</li>
+ <li>{{cssxref("align-content")}} — 仕様では「<ruby>フレックス行のパッキング<rp> (</rp><rt>packing flex lines</rt><rp>) </rp></ruby>」と説明されている。交差軸上でのフレックス行間の余白を制御する。</li>
+</ul>
+
+<p>また、 auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: フレックスボックスにおける各種の配置プロパティは、そのプロパティ定義専用の仕様である <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a> にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義を置き換えることが想定されています。</p>
+</div>
+
+<h2 id="The_Cross_Axis" name="The_Cross_Axis">交差軸</h2>
+
+<p><code>align-items</code> プロパティと <code>align-self</code> プロパティは、交差軸 (cross axis: <code>flex-direction</code> が <code>row</code> のときは列に沿った、または <code>flex-direction</code> が <code>column</code> のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。</p>
+
+<p>もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。<code>display: flex</code> をコンテナに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。</p>
+
+<p><img alt="３つのアイテム中１つのアイテムにはほかのアイテムより高くなる要因となる追加のテキストが設定されている。" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="３つのアイテムとも 200 ピクセルの高さをもつ" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>アイテムが同じ高さになるのは、交差軸での配置を制御する <code>align-items</code> プロパティの初期値が <code>stretch</code> となっているためです。</p>
+
+<p>アイテムの配置をコントロールするために、以下の値を使うことができます。</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>以下の例では、<code>align-items</code> の値は <code>stretch</code> に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}</p>
+
+<h3 id="Aligning_one_item_with_align-self" name="Aligning_one_item_with_align-self"><code>align-self</code> で個別のアイテムを位置合わせ</h3>
+
+<p><code>align-items</code> プロパティはすべてのアイテムの <code>align-self</code> プロパティをまとめて設定します。つまり、<code>align-self</code> プロパティでは１つずつ個別のアイテムを対象として指定できます。<code>align-self</code> プロパティには、<code>align-items</code> プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための <code>auto</code> を使うことができます。</p>
+
+<p>次の例では、フレックスコンテナーには <code>align-items: flex-start</code> を設定していて、これはアイテムを交差軸上の始点に揃えます。<code>first-child</code> セレクタを使って最初のアイテムを対象として、 <code>align-self: stretch</code> を設定しており、また別のアイテムを <code>selected</code> クラスで選択して <code>align-self: center</code> を設定してます。 <code>align-items</code> の値を変更したり、個別のアイテムの <code>align-self</code> の値を変更して、どのように動作するかを試してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p>
+
+<h3 id="Changing_the_main_axis" name="Changing_the_main_axis">主軸の変更</h3>
+
+<p>ここまでは、 <code>flex-direction</code> が <code>row</code> で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。</p>
+
+<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。" src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p><code>flex-direction</code> を <code>column</code> に変更した場合、<code>align-items</code> と <code>align-self</code> はアイテムの左右方向での位置合わせを行うようになります。</p>
+
+<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。水平方向の軸上で位置合わせされている。" src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>次の例では <code>flex-direction: column</code> を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p>
+
+<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property" name="Aligning_content_on_the_cross_axis_—_the_align-content_property">交差軸上の位置合わせ — align-content プロパティ</h2>
+
+<p>ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、<code>align-content</code> プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「<a href="https://drafts.csswg.org/css-flexbox/#align-content-property">フレックス行のパッキング (packing flex lines)</a>」として説明されています。</p>
+
+<p><code>align-content</code> が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。</p>
+
+<p><code>align-content</code> プロパティには以下の値を設定できます。</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (フレックスボックス仕様には含まれていない)</li>
+</ul>
+
+<p>以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 <code>align-content</code> の値は <code>space-between</code> で、この場合は残る分配可能スペース (available space) はフレックス行の<em>間に</em>分配され、フレックス行自体はコンテナの交差軸上の始点と終点に密着して配置されます。</p>
+
+<p><code>align-content</code> プロパティがどのように働くか、ほかの値を設定して確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}</p>
+
+<p>列に沿った軸の時にこのプロパティの効果がどのように変わるか、<code>flex-direction</code> を <code>column</code> に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}</p>
+
+<div class="note">
+<p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p>
+</div>
+
+<p>上述の値についての詳細とブラウザー対応状況については <a href="/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p>
+
+<h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2>
+
+<p>ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは <code>justify-content</code> の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 <code>justify-content</code> では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。</p>
+
+<p>コンテナに <code>display: flex</code> を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは <code>justify-content</code> の初期値が <code>flex-start</code> であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。</p>
+
+<p><img alt="３つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナ内にある。分配可能スペースはアイテムの後ろに置かれる。" src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p><code>justify-content</code> プロパティは <code>align-content</code> と同じ値を受け付けます。</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (フレックスボックス仕様書には含まれていない)</li>
+</ul>
+
+<p>次の例では、 <code>justify-content</code> の値は <code>space-between</code> となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p>
+
+<p><code>flex-direction</code> が <code>column</code> に設定されて主軸がブロック方向となっているとき、<code>justify-content</code> はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p>
+
+<h3 id="Alignment_and_Writing_Modes" name="Alignment_and_Writing_Modes">配置と書字方向</h3>
+
+<p>上述の配置方法において、<code>flex-start</code> と <code>flex-end</code> はいずれも writing mode に対応したものとなります。<code>justify-content</code> の値が <code>flex-start</code> で、書字方向が英語のように左から右であれば、アイテムはコンテナーの左端から並べられます。</p>
+
+<p><img alt="３つのアイテムは左側に並んでいる" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。</p>
+
+<p><img alt="３つのアイテムは右側から並んでいる" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>以下の例ではフレックスアイテムを右から左に並べるために <code>direction</code> プロパティを <code>rtl</code> を設定しています。この設定を削除したり <code>justify-content</code> の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}</p>
+
+<h2 id="Alignment_and_flex-direction" name="Alignment_and_flex-direction">配置と flex-direction</h2>
+
+<p><code>flex-direction</code> プロパティを変更した場合にも、始点は変わります。例えば<code>row</code> の代わりに <code>row-reverse</code> を設定した場合などがこれにあたります。</p>
+
+<p>次の例では、<code>flex-direction: row-reverse</code> と <code>justify-content: flex-end</code> を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。<code>flex-direction: row-reverse</code> の値を <code>flex-direction: row</code> に変更してみてください。アイテムが右側に移動することがわかります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}</p>
+
+<p>こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿ってフレックスアイテムが配置されます。<code>flex-start</code> は文の中でテキストが始まる側を示すことになります。</p>
+
+<p><img alt="左から始まり右で終わることを示す図" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><code>flex-direction: column</code> を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は <code>flex-start</code> は段落が始まる先頭を示すことになります。</p>
+
+<p><img alt="上から始まり下で終わることを示す図" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。<code>flex-start</code> はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。</p>
+
+<p><img alt="右から始まり左で終わることを示す図" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="下から始まり上で終わることを示す図" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="主軸上での位置合わせに_auto_マージンを使う">主軸上での位置合わせに auto マージンを使う</h2>
+
+<p>主軸上ではアイテムは一つのグループとして扱われるため、<code>justify-items</code> プロパティや <code>justify-self</code> プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。</p>
+
+<p>よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは <code>justify-self</code> プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に <code>justify-self</code> がアイテム <em>d</em> に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム <em>e</em> の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。</p>
+
+<p><img alt="２つのグループに分かれた５つのアイテム。３つは左側にあり、２つは右側にある。" src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>4 つめのアイテムに対して <code>justify-content</code> ではなく <code>margin-left</code> に <code>auto</code> を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。</p>
+
+<p>以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、<code>margin-left: auto</code> を設定した <code>push</code> クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}</p>
+
+<h2 id="Future_alignment_features_for_Flexbox" name="Future_alignment_features_for_Flexbox">フレックスボックスの配置機能の将来</h2>
+
+<p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p>
+
+<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p>
+
+<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="https://developer.mozilla.org/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></li>
+ <li><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>
diff --git a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
new file mode 100644
index 0000000000..a93b005b5c
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -0,0 +1,123 @@
+---
+title: フレックスボックスの後方互換性
+slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+tags:
+  - '@supports'
+  - CSS
+  - CSS Tables
+  - Flexible Boxes
+  - Floats
+  - Guide
+  - fallbacks
+  - feature queries
+  - flexbox
+  - inline-block
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策やフォールバックを作成するための方法を見ていきます。</p>
+
+<h2 id="The_history_of_flexbox" name="The_history_of_flexbox">フレックスボックスの歴史</h2>
+
+<p>すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。</p>
+
+<p>過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダー接頭辞が使われました。このような接頭辞は、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。しかし、結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">2009 年の仕様</a>は、今とはだいぶ異なります。フレックスコンテナーの生成するには <code>display: box</code> を使い、数々の <code>box-*</code> プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。</p>
+
+<p><a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">仕様変更</a>によって構文が <code>display: flexbox</code> へと変わりました。これもベンダー接頭辞つきでした。</p>
+
+<p>最終的には、フレックスコンテナーの作成には <code>display: flex</code> を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。</p>
+
+<p>古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 <code>display: box</code> や <code>display: flexbox</code> ならば、それは古い情報です。</p>
+
+<h2 id="Status_in_browsers" name="Status_in_browsers">ブラウザーの状況</h2>
+
+<p>フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。</p>
+
+<ul>
+ <li>Internet Explorer 10。<code>display: flexbox</code> の仕様で実装されていて、<code>-ms-</code> の接頭辞が必要です。</li>
+ <li>UC Browser。2009 年の <code>display: box</code> の仕様のままで、<code>-webkit-</code> の接頭辞が必要です。</li>
+</ul>
+
+<p>また、Internet Explorer 11 は最新の <code>display: flex</code> の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。</p>
+
+<h2 id="Common_issues" name="Common_issues">よくある問題</h2>
+
+<p>フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。IE10 や IE11 のような古いブラウザーへの後方互換性を確保したいなら、<a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> のサイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。</p>
+
+<p>非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、<a href="https://caniuse.com/#feat=flexbox">Can I Use</a> では、ブラウザーで接頭辞が削除された時期を調べることができます。</p>
+
+<h2 id="Useful_fallback_techniques" name="Useful_fallback_techniques">有用なフォールバック方法</h2>
+
+<p>フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。</p>
+
+<h3 id="Floated_items" name="Floated_items">浮動アイテム</h3>
+
+<blockquote>
+<p>「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p>
+</blockquote>
+
+<p>下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナに <code>display: flex</code> を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。</p>
+
+<p>フォールバックの挙動を試すには、ラッパーから <code>display: flex</code> を削除してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block" name="display_inline-block">display: inline-block</h3>
+
+<p><code>inline-block</code> のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に空白が保持されるような <code>display: inline-block</code> の効果が現れなくなります。</p>
+
+<p><code>display: flex</code> を削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。これはインライン要素や <code>display: inine-block</code> を指定した要素の挙動と同じです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-" name="display_table-">display: table-</h3>
+
+<p>CSS のテーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばすことや、縦方向の中央揃えなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。</p>
+
+<p>アイテムに <code>display: table-cell</code> を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS は 2 種類の無名のボックスを作ります。ひとつは &lt;tr&gt; の、もうひとつは &lt;table&gt; の役割を果たします。このおかげで、アイテムを実際の HTML 要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。単にツリー構造を補うためのものなのです。</p>
+
+<p>親要素に <code>display: flex</code> を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。</p>
+
+<blockquote>
+<p>「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="The_vertical-align_property" name="The_vertical-align_property">vertical-align プロパティ</h3>
+
+<p>下記のライブサンプルでは、<code>display: inline-block</code> の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、<code>display: table-cell</code> と <code>display: inline-block</code> のどちらにも指定できます。<code>vertical-align</code> による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスには無視されるので、フォールバックとして <code>display: table-cell</code> や <code>display: inline-block</code> とともに使用できます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Feature_Queries_and_flexbox" name="Feature_Queries_and_flexbox">機能クエリとフレックスボックス</h2>
+
+<p>下記のように、フレックスボックスに対応しているかどうかを<a href="/ja/docs/Web/CSS/%40supports">機能クエリ</a>で検査できます。</p>
+
+<pre class="brush: css notranslate">@supports (display: flex) {
+  // 対応しているブラウザー向けのコード
+}</pre>
+
+<p>Internet Explorer 11 は機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリは UC Browser を含みます。UC Browser は機能クエリと接頭辞付きの古い構文に対応しています。</p>
+
+<pre class="brush: css notranslate">@supports (display: flex) or (display: -webkit-box) {
+  // 対応しているブラウザー向けのコード
+}</pre>
+
+<p>機能クエリについて詳しく知りたい場合は、Mozilla Hacks ブログの <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> をご覧ください。</p>
+
+<h2 id="Conclusion" name="Conclusion">終わりに</h2>
+
+<p>このガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーに対応する必要がある場合に役立ちます。</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..d73d12b7d4
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,237 @@
+---
+title: フレックスボックスの基本概念
+slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+tags:
+  - CSS
+  - Flex
+  - Guide
+  - axes
+  - concepts
+  - container
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。</p>
+
+<p>フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が行と列の二次元を同時に制御するモデルであることと対照的です。</p>
+
+<h2 id="The_two_axes_of_flexbox" name="The_two_axes_of_flexbox">フレックスボックス 2 つの軸</h2>
+
+<p>フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作ではつねにこの軸について参照することになるので、最初にその動きを理解しましょう。</p>
+
+<h3 id="The_main_axis" name="The_main_axis">主軸</h3>
+
+<p>主軸は <code>flex-direction</code> によって定義され、4 種類の値をとることができます。</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p><code>row</code> または <code>row-reverse</code> を選択した場合、主軸は<strong>インライン要素の並ぶ方向</strong>に伸びる軸となります。</p>
+
+<p><img alt="flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。" src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><code>column</code> または <code>column-reverse</code> を選んだ場合は、ページの上から下に向かって<strong>ブロック要素の並ぶ方向</strong>に伸びる軸となります。</p>
+
+<p><img alt="flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="The_cross_axis" name="The_cross_axis">交差軸</h3>
+
+<p>交差軸は主軸に垂直に交わる軸です。したがって、<code>flex-direction</code> (主軸) が <code>row</code> または <code>row-reverse</code> なら、交差軸は列に沿ったものになります。</p>
+
+<p><img alt="flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>主軸が <code>column</code> または <code>column-reverse</code> であれば、交差軸は行の方向になります。</p>
+
+<p><img alt="flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。</p>
+
+<h2 id="Start_and_end_lines" name="Start_and_end_lines">行の先頭と末尾</h2>
+
+<p>理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。</p>
+
+<p>フレックスボックスと書字方向の仕様の関係については、後に別の記事でくわしく触れますが、ここではフレックスアイテムを流し込む方向について、上下左右という言葉を使わない理由について説明します。</p>
+
+<p>もし <code>flex-direction</code> が <code>row</code> で言語が英語の場合、主軸の先頭は左で末尾は右になります。</p>
+
+<p><img alt="英語の場合、先頭は左" src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。</p>
+
+<p><img alt="右から左に書く言語では、先頭は右" src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>いずれの場合でも、両言語ともに書字方向が横書きであるため、交差軸の先頭側は上で末尾側が下になります。</p>
+
+<p>こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。</p>
+
+<h2 id="The_flex_container" name="The_flex_container">フレックスコンテナー</h2>
+
+<p>フレックスボックスを使ってレイアウトされる文書の領域は、<strong>フレックスコンテナー</strong>と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を <code>flex</code> もしくは <code>inline-flex</code> に設定します。またこれにより、このコンテナー直下の子要素が <strong>フレックスアイテム</strong>となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。</p>
+
+<ul>
+ <li>フレックスアイテムは行に沿って並んで表示されます (<code>flex-direction</code> プロパティの既定値は <code>row</code>)。</li>
+ <li>フレックスアイテムは主軸の先頭側を先頭に並びます。</li>
+ <li>フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。</li>
+ <li>フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。</li>
+ <li>{{cssxref("flex-basis")}} プロパティは <code>auto</code> に設定されます。</li>
+ <li>{{cssxref("flex-wrap")}} プロパティは <code>nowrap</code> に設定されます。</li>
+</ul>
+
+<p>その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。</p>
+
+<p>この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}</p>
+
+<h3 id="Changing_flex-direction" name="Changing_flex-direction">flex-direction の変更</h3>
+
+<p>フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 <code>flex-direction: row-reverse</code> と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。</p>
+
+<p><code>flex-direction</code> を <code>column</code> に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 <code>column-reverse</code> では、さらに先頭と末尾が入れ替わります。</p>
+
+<p>次の例では、<code>flex-direction</code> が <code>row-reverse</code> に設定されています。他の値である <code>row</code>, <code>column</code>, <code>cokumn-reverse</code> で何が起こるか確かめてみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Multi-line_flex_containers_with_flex-wrap" name="Multi-line_flex_containers_with_flex-wrap">flex-wrap による複数行のフレックスコンテナー</h2>
+
+<p>フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。スペースの分配はその行の中でのみ発生し、隣の行については参照されません。</p>
+
+<p>折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として <code>wrap</code> を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 <code>flex-wrap</code> を <code>wrap</code> に設定すると、アイテムが折り返します。初期値である <code>nowrap</code> に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 <code>nowrap</code> はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>フレックスアイテムの折り返しについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a>を参照してください。</p>
+
+<h2 id="The_flex-flow_shorthand" name="The_flex-flow_shorthand">flex-flow 一括指定プロパティ</h2>
+
+<p><code>flex-direction</code> と <code>flex-wrap</code> の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が <code>flex-direction</code> で、2 つ目の値が <code>flex-wrap</code> です。</p>
+
+<p>以下の例で、1 つ目の値を <code>flex-direction</code> に使える値 (<code>row</code>, <code>row-reverse</code>, <code>column</code>, <code>column-reverse</code> のいずれか) に変更してみてください。また、2 つ目の値を <code>wrap</code> か <code>nowrap</code> に変更してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Properties_applied_to_flex_items" name="Properties_applied_to_flex_items">フレックスアイテムに適用されるプロパティ</h2>
+
+<p>フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>本ページでは、これらのプロパティについて簡単に触れます。<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸におけるフレックスアイテムの比率の制御</a>のガイドで、より完全な情報を得られます。</p>
+
+<p>上述のプロパティについて理解する前に、<strong>分配可能スペース</strong> (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能スペースの分配のしかたを変えるということです。この分配可能スペースについての考え方は、アイテムの位置合わせについて考える時に重要になります。</p>
+
+<p>たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能スペースが残っています。初期値を変更しなかった場合フレックスボックスは、スペースを最後のアイテムの後ろに配置します。</p>
+
+<p><img alt="このフレックスコンテナーは、アイテムを配置した後に分配可能スペースがある。" src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>そうではなく、アイテムを拡大してスペースを埋めたいときには、余っているスペースをアイテムに分配する方法が必要となります。それがアイテム自体に設定する <code>flex</code> プロパティが提供する機能です。</p>
+
+<h3 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h3>
+
+<p><code>flex-basis</code> は、そのアイテムの寸法を、使用しないスペースは分配可能スペースとして残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムにサイズが設定されているかを確認します。上述の例では、すべてのアイテムが100ピクセルの幅に設定されているため、これが <code>flex-basis</code> として使われます。</p>
+
+<p>アイテムにサイズが設定されていない場合は、その内容のサイズが <code>flex-basis</code> として使われます。<code>display: flex</code> を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要なスペースのみを使用して行の中に整列していたのは、この挙動のためです。</p>
+
+<h3 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h3>
+
+<p><code>flex-grow</code> プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って <code>flex-basis</code> 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能スペースをすべて使うまで伸張するか、ほかのアイテムにも <code>flex-grow</code> が設定されていたときには一定の割合を使うように伸張するようになります。</p>
+
+<p>先ほどの例で、すべてのアイテムの <code>flex-grow</code> に 1 を設定すると、分配可能スペースはアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。</p>
+
+<p><code>flex-grow</code> プロパティは割合で余白を配分するために使うことができます。最初のアイテムの <code>flex-grow</code> に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。</p>
+
+<h3 id="The_flex-shrink_property" name="The_flex-shrink_property">flex-shrink プロパティ</h3>
+
+<p><code>flex-grow</code> プロパティが主軸上のスペースの追加を扱う一方で、<code>flex-shrink</code> はスペースの取りあげ方をコントロールします。 アイテムを配置するのに十分なスペースがコンテナーになく、<code>flex-shrink</code> に正の整数が設定されていれば、アイテムは <code>flex-basis</code> よりも小さくなります。<code>flex-grow</code> と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまりより大きな値が flex-shrink に設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも速く収縮します。</p>
+
+<p>実際の収縮幅の計算にはアイテムの最小サイズが考慮されるため、<code>flex-shrink</code> の動作は <code>flex-grow</code> に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a> の記事に書かれています。</p>
+
+<div class="note">
+<p>注意: <code>flex-grow</code> や <code>flex-shrink</code> に指定する値は割合です。一般的には、たとえばあるアイテムを他の <code>flex: 1 1 200px</code> に設定したアイテムより２倍速く拡大させたいときには、<code>flex: 2 1 200px</code> を設定します。しかし、望むならば <code>flex: 10 1 200px</code> と <code>flex: 20 1 200px</code> という書き方もできます。</p>
+</div>
+
+<h3 id="Shorthand_values_for_the_flex_properties" name="Shorthand_values_for_the_flex_properties">flex プロパティの一括指定</h3>
+
+<p><code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の各プロパティを個別に使うケースはとても珍しく、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。<code>flex</code> 一括指定プロパティは、<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の順に３つの値を設定できます。</p>
+
+<p>以下の例では、<code>flex</code> 一括指定プロパティの様々な値を試せるようになっています。 最初の値が <code>flex-grow</code> であり、正の値を指定することでアイテムが伸張できるようになります。２番目の値は <code>flex-shrink</code> です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計サイズが主軸からはみ出す場合のみ起こります。最後の値が <code>flex-basis</code> となり、アイテムが伸張・収縮する際の基準値となります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>また、ほとんどのユースケースをカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;正の数&gt;</code></li>
+</ul>
+
+<p><code>flex: initial</code> はフレックスボックスの初期値にリセットします。これは <code>flex: 0 1 auto</code> に設定することと同じです。この場合 <code>flex-grow</code> は 0 となるため、アイテムが <code>flex-basis</code> よりも大きくなることはありません。<code>flex-shrink</code> は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。<code>flex-basis</code> の値は <code>auto</code> です。アイテムに設定されている主軸に沿ったサイズか、またはアイテムの内容のサイズがフレックスアイテムのサイズとして使用されます。</p>
+
+<p><code>flex: auto</code> では、<code>flex: 1 1 auto</code> に設定することと等しくなります。<code>flex: initial</code> とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。</p>
+
+<p><code>flex: none</code> は、全く伸縮性の無い flex アイテムを作成します。これは <code>flex: 0 0 auto </code>と同じです。アイテムは伸張も収縮もせずに、<code>flex-basis: auto</code> のフレックスボックスとして配置されます。</p>
+
+<p>チュートリアル内では、<code>flex: 1</code> や <code>flex: 2</code> のような設定をよく目にするでしょう。これは <code>flex: 1 1 0</code> を使うのと同様、<code>flex-basis</code> が 0 の状態から伸び縮みします。</p>
+
+<p>これらの短縮値について、以下の例でためしてみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignment_justification_and_distribution_of_free_space_between_items" name="Alignment_justification_and_distribution_of_free_space_between_items">アイテム間での位置合わせ、端揃え、スペース分配</h2>
+
+<p>フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間でのスペースの分配ができる点にあります。</p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。</p>
+
+<p>このプロパティの初期値は <code>stretch</code> であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。</p>
+
+<p>アイテムをフレックスコンテナーの先頭側に揃えるためには <code>align-items</code> に <code>flex-start</code> を設定し、末尾側に揃えるためには <code>flex-end</code> を、中央揃えにするには <code>center</code> を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。<code>align-items</code> に以下の値を設定したときにそれぞれ何が起こるか確認してください。</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり <code>flex-direction</code> で設定された方向における位置合わせを行います。初期値は <code>flex-start</code> で、コンテナーの先頭側からアイテムが並べられます。<code>flex-end</code> を設定することで末尾から、<code>center</code> を設定することで中央に並べることもできます。</p>
+
+<p>また、<code>space-between</code> を使用して、アイテムを配置したあとの残りのスペースのすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけのスペースを空けるには、<code>space-around</code> を使用します。<code>space-around</code> では、コンテナーの両端には、アイテム間の半分のサイズのスペースが設けられます。両端にも同じだけのスペースを設けるには、<code>space-evenly</code> を使用します。この場合はコンテナの両端にフルサイズ (アイテム間と同じサイズ) のスペースが設けられます。</p>
+
+<p>例で、以下の <code>justify-content</code> の値を試してみましょう。</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内でのアイテムの配置</a>の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどのユースケースで役に立つでしょう。</p>
+
+<h2 id="Next_steps" name="Next_steps">次のステップ</h2>
+
+<p>この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">この仕様が他の CSS レイアウトメソッドとどのような関係にあるか</a>を見ていきます。</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html
new file mode 100644
index 0000000000..379eb2ab8d
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html
@@ -0,0 +1,204 @@
+---
+title: 主軸に沿ったフレックスアイテムの比率の制御
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+tags:
+  - Basis
+  - CSS
+  - Flex
+  - Guide
+  - flexbox
+  - free space
+  - grow
+  - max-content
+  - min-content
+  - shrink
+  - space
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティを見ていきます。 — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} です。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。</p>
+
+<h2 id="A_first_look" name="A_first_look">最初に見てみる</h2>
+
+<p>三つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。</p>
+
+<ul>
+ <li><code>flex-grow</code>: このアイテムがどれだけ余白を得るか。</li>
+ <li><code>flex-shrink</code>: このアイテムからどれだけ余白を削除できるか。</li>
+ <li><code>flex-basis</code>: 伸長や縮小が発生する前のアイテムの寸法はいくつか。</li>
+</ul>
+
+<p>プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは <code>flex-grow</code> プロパティを <code>2</code> に、 <code>flex-shrink</code> を <code>1</code> に、 <code>flex-basis</code> を <code>auto</code> に設定します。</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}</pre>
+
+<p>すでに<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。</p>
+
+<h2 id="Important_concepts_when_working_on_the_main_axis" name="Important_concepts_when_working_on_the_main_axis">主軸に合わせて動作する重要概念</h2>
+
+<p>There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p>
+
+<h3 id="Flex_item_sizing" name="Flex_item_sizing">フレックスアイテムの寸法の変更</h3>
+
+<p>In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?</p>
+
+<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/ja/docs/Web/CSS/length">length unit</a>.</p>
+
+<p>In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of <code>min-content</code>. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p>
+
+<p>The second paragraph has a value of <code>max-content</code> and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.</p>
+
+<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p>
+
+<h3 id="Positive_and_negative_free_space" name="Positive_and_negative_free_space">正と負のフリースペース</h3>
+
+<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is <code>row</code>, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.</p>
+
+<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.</p>
+
+<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.</p>
+
+<p>In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with <code>flex-direction: column</code>. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.</p>
+
+<h2 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h2>
+
+<p>The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case <code>200px</code> would be the <code>flex-basis</code> for this item.</p>
+
+<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p>
+
+<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p>
+
+<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at <code>flex-grow</code>.</p>
+
+<h2 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h2>
+
+<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.</p>
+
+<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.</p>
+
+<h3 id="Combining_flex-grow_and_flex-basis" name="Combining_flex-grow_and_flex-basis"><code>flex-grow</code> と <code>flex-basis</code> を組み合わせる</h3>
+
+<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:</p>
+
+<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>We are working with a <code>flex-basis</code> equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:</p>
+
+<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p>
+
+<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Giving_items_different_flex-grow_factors" name="Giving_items_different_flex-grow_factors">アイテムに別の flex-grow 要素を与える</h3>
+
+<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p>
+
+<ul>
+ <li><code>1</code> for the first item.</li>
+ <li><code>1</code> for the second item.</li>
+ <li><code>2</code> for the third item.</li>
+</ul>
+
+<p>Working from a <code>flex-basis</code> of <code>0</code> this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p>
+
+<h2 id="The_flex-shrink_property" name="The_flex-shrink_property"><code>flex-shrink</code> プロパティ</h2>
+
+<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p>
+
+<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p>
+
+<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p>
+
+<p>In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>Change the <code>flex-shrink</code> value to <code>1</code> and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.</p>
+
+<h3 id="Combining_flex-shrink_and_flex-basis" name="Combining_flex-shrink_and_flex-basis"><code>flex-shrink</code> と <code>flex-basis</code> を組み合わせる</h3>
+
+<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p>
+
+<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p>
+
+<blockquote>
+<p>“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”</p>
+</blockquote>
+
+<p>The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p>
+
+<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.</p>
+
+<h3 id="Giving_items_different_flex-shrink_factors" name="Giving_items_different_flex-shrink_factors">アイテムに別の <code>flex-shrink</code> 要素を与える</h3>
+
+<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.</p>
+
+<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Mastering_sizing_of_flex_items" name="Mastering_sizing_of_flex_items">flex アイテムのサイズ設定をマスターする</h2>
+
+<p>The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:</p>
+
+<h3 id="What_sets_the_base_size_of_the_item" name="What_sets_the_base_size_of_the_item">アイテムの基本サイズを何がセットするか？</h3>
+
+<ol>
+ <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li>
+ <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li>
+ <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li>
+ <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li>
+</ol>
+
+<h3 id="Do_we_have_available_space" name="Do_we_have_available_space">利用できるスペースが残っているか？</h3>
+
+<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p>
+
+<ol>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li>
+</ol>
+
+<h3 id="Other_ways_to_distribute_space" name="Other_ways_to_distribute_space">スペースを配分する別の方法</h3>
+
+<p>If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.</p>
+
+<p>With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/index.html b/files/ja/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..efe2e9fa39
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS フレックスボックスレイアウト
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Guide
+  - Overview
+  - Reference
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><strong>CSS フレックスボックスレイアウト</strong><rp> (</rp><rt>CSS Flexible Box Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+
+<p>以下の例では、コンテナーに <code>display: flex</code> に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 <code>justify-content</code> の値は、主軸上に均等に配置するため、 <code>space-between</code> に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 <code>align-items</code> の既定値は <code>stretch</code> なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Alignment_Properties" name="Alignment_Properties">配置プロパティ</h3>
+
+<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_entries" name="Glossary_entries">用語集の項目</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Flexbox", "フレックスボックス", 1)}}</li>
+ <li>{{Glossary("Flex Container", "フレックスコンテナー", 1)}}</li>
+ <li>{{Glossary("Flex Item", "フレックスアイテム", 1)}}</li>
+ <li>{{Glossary("Main Axis", "主軸", 1)}}</li>
+ <li>{{Glossary("Cross Axis", "交差軸", 1)}}</li>
+ <li>{{Glossary("Flex", "フレックス", 1)}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></dt>
+ <dd>フレックスボックスの機能の概要</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a></dt>
+ <dd>フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーにおけるアイテムの配置</a></dt>
+ <dd>ボックス配置プロパティがどのようにフレックスボックスに働くか</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの順序</a></dt>
+ <dd>アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の操作</a></dt>
+ <dd>flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></dt>
+ <dd>複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">典型的なフレックスボックスの用途</a></dt>
+ <dd>典型的なフレックスボックスの用途の一般的なデザインパターン。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></dt>
+ <dd>フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応</dd>
+</dl>
+
+<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 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
+ <dd>コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">ブラウザーに依存しないフレックスボックスのミックスイン</a></dt>
+ <dd>この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。</dd>
+</dl>
diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
new file mode 100644
index 0000000000..ef3f6ed3d9
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -0,0 +1,92 @@
+---
+title: フレックスアイテムの折り返しのマスター
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p>
+
+<h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2>
+
+<p>The initial value of the {{cssxref("flex-wrap")}} property is <code>nowrap</code>. This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the <code>flex-wrap</code> property with a value of <code>wrap</code>, or use the shorthand {{cssxref("flex-flow")}} with values of <code>row wrap</code> or <code>column wrap</code>.</p>
+
+<p>Items will then wrap in the container. In the next example I have ten items all with a <code>flex-basis</code> of <code>160px</code> and the ability to grow and shrink. Once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. As the items can grow, they will expand larger than 160 px in order to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>We can see the same thing happening with columns. The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Wrapping_and_flex-direction" name="Wrapping_and_flex-direction">折り返しと flex-direction</h2>
+
+<p>Wrapping works as you might expect when combined with <code>flex-direction</code>. If <code>flex-direction</code> is set to <code>row-reverse</code> then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren’t reversing in both directions, starting from the bottom coming up the container!</p>
+
+<h2 id="Single-dimensional_layout_explained" name="Single-dimensional_layout_explained">一次元のレイアウトの説明</h2>
+
+<p>As we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.</p>
+
+<p>There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.</p>
+
+<p>If you want layout in two dimensions then you probably want Grid Layout. We can compare our wrapped row example above with the CSS Grid version of that layout to see the difference. The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns. However, in this case the items stay in their grid and don’t stretch out when there are fewer of them on the final row.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>This is the difference between one and two-dimensional layout. In a one dimensional method like flexbox, we only control the row or column. In two dimensional layout like grid we control both at the same time. If you want the space distribution row by row, use flexbox. If you don’t, use Grid.</p>
+
+<h2 id="How_do_flexbox-based_grid_systems_work" name="How_do_flexbox-based_grid_systems_work">フレックスボックスベースのグリッドシステムはどのように動作するか</h2>
+
+<p>Typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. If you assign percentage widths to flex items — either as <code>flex-basis</code> or by adding a width to the item itself leaving the value of <code>flex-basis</code> as <code>auto</code> — you can get the impression of a two dimensional layout. You can see this working in the example below.</p>
+
+<p>Here I have set <code>flex-grow</code> and <code>flex-shrink</code> to <code>0</code> to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>If you need flex items to line up in the cross axis, controlling the width in this way will achieve that. In most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.</p>
+
+<h2 id="Creating_gutters_between_items" name="Creating_gutters_between_items">アイテム間の溝の作成</h2>
+
+<p>When wrapping flex items, the need to space them out is likely to arise. At the current time we do not have any implementations of the gap properties from the <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a> for Flexbox. In the future we will be able to simply use <code>row-gap</code> and <code>column-gap</code> for flexbox as we do for CSS Grid. At the current time you will need to use margins to achieve this.</p>
+
+<p>You can see from the live example below that in order to create gaps that do not also create a gap at the edges of the container, we need to use negative margins on the flex container itself. Any border on the flex container is then moved to a second wrapper in order that the negative margin can pull the items up to that wrapper element.</p>
+
+<p>It is this requirement that the gap properties, once implemented, will solve for us. Proper gaps only happen on the inside edges of items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="Collapsed_items" name="Collapsed_items">アイテムの折りたたみ</h2>
+
+<p>The flexbox specification details what should happen if a flex item is collapsed by setting <code>visibility: collapse</code> on an item. See the MDN documentation for the {{cssxref("visibility")}} property. The specification describes the behaviour as follows:</p>
+
+<blockquote>
+<p>“Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Collapsed items</a></p>
+</blockquote>
+
+<p>This behaviour is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern.</p>
+
+<p>In the following live example I have a non-wrapped flex container. The third item has more content than the others yet is set to <code>visibility: collapse</code> and therefore the flex container is retaining a <em>strut</em> of the height required to display this item. If you remove <code>visibility: collapse</code> from the CSS or change the value to <code>visible</code>, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done <em>after</em> collapsing. So the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction.</p>
+
+<p>This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row.</p>
+
+<p>I have created this behaviour in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can’t shift rows.</p>
+
+<h3 id="The_difference_between_visibility_hidden_and_display_none" name="The_difference_between_visibility_hidden_and_display_none"><code>visibility: hidden</code> と <code>display: none</code> の違い</h3>
+
+<p>When you set an item to <code>display: none</code> in order to hide it, the item is removed from the formatting structure of the page. What this means in practice is that counters ignore it, and things like transitions do not run. Using <code>visibility: hidden</code> keeps the box in the formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can’t see it.</p>
+
+<p>{{CSSRef}}</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html
new file mode 100644
index 0000000000..42426babe4
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/mixins/index.html
@@ -0,0 +1,368 @@
+---
+title: クロスブラウザのフレックスボックスのミックスイン
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - ミックスイン
+  - リファレンス
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+---
+<div>{{cssref}}</div>
+
+<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p>
+
+<p>このセットは次のものを使用します。</p>
+
+<ul>
+ <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li>
+ <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li>
+</ul>
+
+<p>原文:</p>
+
+<ul>
+ <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
+</ul>
+
+<p>参考文献:</p>
+
+<ul>
+ <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li>
+ <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
+ <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li>
+ <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li>
+ <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li>
+</ul>
+
+<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div>
+
+<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3>
+
+<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p>
+
+<ul>
+ <li>値: <code>flex</code> | <code>inline-flex</code></li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li>
+</ul>
+
+<pre class="brush: css">@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+//Using this mixin
+%flexbox { @include flexbox; }</pre>
+
+<div>
+<pre class="brush: css">@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }</pre>
+</div>
+
+<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3>
+
+<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p>
+
+<ul>
+ <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Shorter version:
+@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
+</div>
+
+<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3>
+
+<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p>
+
+<ul>
+ <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}</pre>
+</div>
+
+<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3>
+
+<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p>
+
+<ul>
+ <li>値: <code>row</code> (default) | <code>nowrap</code></li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}</pre>
+</div>
+
+<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3>
+
+<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p>
+
+<ul>
+ <li>Value: any integer (0 is the default)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}</pre>
+</div>
+
+<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3>
+
+<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p>
+
+<ul>
+ <li>Value: any integer (0 is the default)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}</pre>
+</div>
+
+<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3>
+
+<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p>
+
+<ul>
+ <li>Value: any integer (0 is the default)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}</pre>
+</div>
+
+<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3>
+
+<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p>
+
+<ul>
+ <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}</pre>
+</div>
+
+<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3>
+
+<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p>
+
+<ul>
+ <li>値: See the {{cssxref("flex")}} reference for values and default</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flexbox: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}</pre>
+</div>
+
+<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3>
+
+<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p>
+</div>
+
+<ul>
+ <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Shorter version:
+  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
+</div>
+
+<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3>
+
+<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p>
+
+<ul>
+ <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}</pre>
+</div>
+
+<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3>
+
+<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p>
+
+<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p>
+
+<div>
+<pre class="brush: css">@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}</pre>
+</div>
+
+<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3>
+
+<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p>
+
+<ul>
+ <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li>
+ <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li>
+</ul>
+
+<div>
+<pre class="brush: css">@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}</pre>
+</div>
diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html
new file mode 100644
index 0000000000..8a2a488baa
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html
@@ -0,0 +1,144 @@
+---
+title: フレックスアイテムの並べ替え
+slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+tags:
+  - Accessibility
+  - CSS
+  - Flex
+  - Guide
+  - direction
+  - flexbox
+  - order
+  - reverse
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p>フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。</p>
+
+<h2 id="Reverse_the_display_of_the_items" name="Reverse_the_display_of_the_items">アイテムを逆順に表示する</h2>
+
+<p>{{cssxref("flex-direction")}} プロパティは以下の４つの値から一つを設定できます。</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>column</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>上２つの値は、アイテムの順序を文書のソースに現れる順と同じ順序で、始点から連続して表示します。</p>
+
+<p><img alt="左から始まり一行に表示されるアイテム" src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="上から始まり一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>下２つの値は始点と終点を入れ替えて、アイテムを逆順に表示します。</p>
+
+<p><img alt="右側から逆順に表示されるアイテム" src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="下側から逆順に一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>始点は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、<code>row</code> と <code>row-reverse</code> が英語のような左から右の言語においてどのように作用するかを示しています。アラビア語のような右から左の言語を使用している場合には、<code>row</code> では右から始まり <code>row-reverse</code> では左から始まります。</p>
+
+<p><img alt="アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー" src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>これは、アイテムが<em>表示上</em>でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。</p>
+
+<blockquote>
+<p>“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p>
+
+<p>(注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。 <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a> より引用)</p>
+</blockquote>
+
+<p>仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。</p>
+
+<p>逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。</p>
+
+<blockquote>
+<p>“Authors <em>must not</em> use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”</p>
+
+<p>(文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の <em>-reverse</em> 値をソース順序の修正の代用として利用してはいけません。)</p>
+</blockquote>
+
+<div class="note">
+<p><strong>注</strong>: 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。</p>
+</div>
+
+<p>以下の例ではリンクからリンクにタブ移動した際に、どれがハイライトされているかわかりやすいように focus スタイルを加えています。<code>flex-direction</code> を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p><code>flex-direction</code> の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。</p>
+
+<h2 id="The_order_property" name="The_order_property">order プロパティ</h2>
+
+<p>フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。</p>
+
+<p><code>order</code> プロパティはアイテムのレイアウトを<em>数字で順序づけたグループ</em>にレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。</p>
+
+<p>例として、５つのアイテムに対して以下のように <code>order</code> を割り当てます。</p>
+
+<ul>
+ <li>ソース上で１番目のアイテム: <code>order: 2</code></li>
+ <li>ソース上で２番目のアイテム: <code>order: 3</code></li>
+ <li>ソース上で３番目のアイテム: <code>order: 1</code></li>
+ <li>ソース上で４番目のアイテム: <code>order: 3</code></li>
+ <li>ソース上で５番目のアイテム: <code>order: 1</code></li>
+</ul>
+
+<p>このときアイテムは以下の順序でページ上に表示されます。</p>
+
+<ul>
+ <li>ソース上で３番目のアイテム: <code>order: 1</code></li>
+ <li>ソース上で５番目のアイテム: <code>order: 1</code></li>
+ <li>ソース上で１番目のアイテム: <code>order: 2</code></li>
+ <li>ソース上で２番目のアイテム: <code>order: 3</code></li>
+ <li>ソース上で４番目のアイテム: <code>order: 3</code></li>
+</ul>
+
+<p><img alt="ソース上の順序を示す番号を表示している順序変更されたアイテム" src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>以下の例で値を変更して、表示順がどのように変わるか試してみてください。また <code>flex-direction</code> を <code>row-reverse</code> に変えたときに何が起こるか、つまり始点が変わるために反対側から並べられることを確かめましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>フレックスアイテムのデフォルトの <code>order</code> は <code>0</code> です。したがって 0 より大きい <code>order</code> をもつアイテムは、明示的に <code>order</code> を指定されていないアイテムの後ろに表示されます。</p>
+
+<p><code>order</code> には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに <code>order: -1</code> を設定することで、0 より小さい <code>order</code> のこのアイテムが常に先頭に表示されるようになります。</p>
+
+<p>以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている <code>active</code> クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>アイテムは仕様の中で <em>order-modified document order</em> として述べられているものに従って表示されます。アイテムが表示される前に、<code>order</code> プロパティの値が考慮されます。</p>
+
+<p><code>order</code> はアイテムの描画順についても変更します。<code>order</code> の値が小さいものから先に描画され、大きくなる順に描画されていきます。</p>
+
+<h2 id="The_order_property_and_accessibility" name="The_order_property_and_accessibility">order プロパティとアクセシビリティ</h2>
+
+<p><code>order</code> プロパティの使用は、<code>flex-direction</code> による方向の変更と同様のアクセシビリティに対する影響があります。<code>order</code> は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。</p>
+
+<p>この記事中の例でタブ移動を試すことで、<code>order</code> がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li>
+ <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">The Responsive Order Conflict for Keyboard Focus</a></li>
+</ul>
+
+<h2 id="Use_cases_for_order" name="Use_cases_for_order">order の利用場面</h2>
+
+<p>フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば <code>order</code> プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。</p>
+
+<p>例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。</p>
+
+<p><img alt="日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント" src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを <code>order</code> プロパティで実現することができます。</p>
+
+<p>カードをフレックスコンテナーとして、<code>flex-direction</code> を <code>column</code> に設定します。そして、日付に <code>order: -1</code> を設定します。これによって見出しの上に日付を引き上げることができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p>この例のような細かな調整は <code>order</code> プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして <code>order</code> プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチスクリーンではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html
new file mode 100644
index 0000000000..1eeaa99bbb
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html
@@ -0,0 +1,137 @@
+---
+title: フレックスボックスと他のレイアウト方法の関係
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - Guide
+  - Writing Mode
+  - box alignment
+  - contents
+  - display
+  - flexbox
+  - grid
+  - フレックスボックス
+  - ボックス配置
+  - 書字方向
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: CSS のバージョン 1 とバージョン 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。</p>
+</div>
+
+<h2 id="The_box_alignment_module" name="The_box_alignment_module">ボックス配置モジュール</h2>
+
+<p>多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。</p>
+
+<p>これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では <a href="https://www.w3.org/TR/css-align-3/">Box Alignment Specification</a> の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿ったスペースの分配についても扱っています。</p>
+
+<p>ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。</p>
+
+<blockquote>
+<p>メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。</p>
+
+<p>(訳注: <a href="https://www.w3.org/TR/css-flexbox-1/#alignment">https://www.w3.org/TR/css-flexbox-1/#alignment</a> より引用)</p>
+</blockquote>
+
+<p>このガイドの後の記事「フレックスコンテナーでのアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。</p>
+
+<h3 id="The_gap_properties" name="The_gap_properties">gap プロパティ</h3>
+
+<p>ボックス配置仕様書に最近追加されたものが、 {{cssxref("row-gap")}} プロパティ と {{cssxref("column-gap")}} プロパティ、およびこれらの一括指定プロパティ {{cssxref("gap")}} です。これらのプロパティは、はじめは CSS Grid 仕様の中で、それぞれ <code>grid-row-gap</code>, <code>grid-column-gap</code>, <code>grid-gap</code> として定義されていましたが、フレックスボックスを含めたすべてのレイアウト方法で使用できるように名前が変更され Box Alignment に移動されました。各ブラウザーがフレックスボックスの <code>gap</code> プロパティを実装するまでは、アイテム間にギャップを作るには {{cssxref("margin")}} プロパティを使うことになります。</p>
+
+<h2 id="Writing_Modes" name="Writing_Modes">書字方向</h2>
+
+<p>「<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>」の記事で、フレックスボックスが<strong>書字方向対応</strong>であることに触れました。書字方向については CSS の <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes specification</a> で詳細に記されており、国によって異なる様々な書字方向をどのように CSS がサポートしているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。 <strong>block</strong> 方向と <strong>inline</strong> 方向について理解することが、新しいレイアウト方法の鍵となります。</p>
+
+<p>コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、<a href="https://24ways.org/2016/css-writing-modes/">この記事</a>を参照してください。</p>
+
+<h3 id="Writing_mode" name="Writing_mode">書字方向</h3>
+
+<p>Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
+
+<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p>
+
+<p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p>
+
+<h2 id="Flexbox_and_other_layout_methods" name="Flexbox_and_other_layout_methods">フレックスボックスと他のレイアウト方法</h2>
+
+<p>フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に<a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">起こることの定義</a>が含まれています。例えば <code>float</code> 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。</p>
+
+<p><code>display: flex</code> に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。</p>
+
+<p>フレックスアイテムについては、ある要素は浮動 (<code>float</code>) や解除 (<code>clear</code>) が設定されていて、その上で親要素に <code>display: flex</code> が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。<code>inline-block</code> やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。</p>
+
+<p>次の例では、子要素は浮動設定されており、コンテナーには <code>display: flex</code> が設定されています。<code>display: flex</code> を削除すると、解除が適用されていないため <code>.box</code> が折りたたまれます。再度 <code>display: flex</code> を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
+
+<h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2>
+
+<p><a href="/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p>
+
+<p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p>
+
+<h3 id="Flex_and_grid_—_whats_the_difference" name="Flex_and_grid_—_what's_the_difference">フレックスとグリッドの違いは？</h3>
+
+<p>フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜ所々同じことをしているように見える２つの仕様がわざわざあるのか？というのはよくある疑問です。</p>
+
+<p>この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。スペースの分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
+
+<p>同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
+
+<p>これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。</p>
+
+<p>場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。</p>
+
+<p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p>
+
+<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p>
+
+<h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2>
+
+<p>{{cssxref("display")}} プロパティの値 <code>contents</code> は、仕様書の中で以下のように述べられている新しい値です。</p>
+
+<blockquote>
+<p>「要素自体はボックスを生成しませんが、その子要素や疑似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や疑似要素によって置き換えられたように扱わなければなりません」</p>
+
+<p>(訳注: <a href="https://www.w3.org/TR/css-display-3/#box-generation">https://www.w3.org/TR/css-display-3/#box-generation</a> より引用)</p>
+</blockquote>
+
+<p><code>display</code> のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。</p>
+
+<p>以下の例では、フレックスコンテナーに３つの子要素があります。そのうちの１にはさらに２つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。</p>
+
+<p>ここで <code>display: contents</code> をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、２つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。<code>display: contents</code> を削除してみると元に戻ることを確認できます。</p>
+
+<p>レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。</p>
+
+<div class="warning">
+<p><strong>警告</strong>: <code>display: contents</code> を利用すると、要素がアクセシビリティツリーからも削除されます。 – 読み上げソフトは中身を見ず、 <code>display: none</code> を使用したのと同様になります。 <code>contents</code> は表示のためだけのものであり、コンテンツや要素ではありません。</p>
+</div>
+
+<p>また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において <code>display: contents</code> を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
+
+<p><code>display:contents</code> のブラウザー対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに <code>display: contents</code> をサポートしており、 Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
new file mode 100644
index 0000000000..4c3c468afc
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
@@ -0,0 +1,142 @@
+---
+title: フレックスボックスの典型的な使用例
+slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+tags:
+  - CSS
+  - Flexible Box
+  - Guide
+  - common uses
+  - flexbox
+  - patterns
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。</p>
+
+<h2 id="Why_choose_flexbox" name="Why_choose_flexbox">なぜフレックスボックスを選ぶのか？</h2>
+
+<p>ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a> をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。</p>
+
+<p>現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。</p>
+
+<h2 id="Navigation" name="Navigation">ナビゲーション</h2>
+
+<p>ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。</p>
+
+<p>アイテムを水平に表示する際に、空白が必要になる場合があります。その空白をどうするか。2 つの選択肢があります。アイテムの外側に置く場合は、アイテム同士の間やアイテムの周囲に空白を配置することになります。アイテムの内側に入れる場合は、アイテムが空白を受け入れてサイズが広がるようにする方法が必要です。</p>
+
+<h3 id="Space_distributed_outside_the_items" name="Space_distributed_outside_the_items">空白を外側に配置</h3>
+
+<p>アイテム間や周囲に空白を置くには、フレックスボックスの整列系のプロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナにおけるアイテムの位置合わせ</a> をご覧ください。そこでは、主軸 (横軸) でのアイテムの整列について説明しています。</p>
+
+<p>下記のライブサンプルでは、アイテムをそれぞれ本来のサイズで表示しています。また、<code>justify-content: space-between</code> によって、同じ幅の空白をアイテム同士の間に配置しています。値に <code>space-around</code> や、ブラウザーが対応している場合は <code>space-evenly</code> を指定することで、空白の配置方法を変えることができます。<code>flex-start</code> で空白をアイテム群の後ろに配置し、<code>flex-end</code> で空白をアイテム群の前に配置し、<code>center</code> でアイテム群をナビゲーションの中央に配置することもできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="Space_distributed_within_the_items" name="Space_distributed_within_the_items">空白を内側に配置</h3>
+
+<p>ナビゲーションでの別のパターンは、空白をアイテム同士の間ではなく、アイテム自身の内部に配置することです。この場合は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> に書かれているように、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮できます。</p>
+
+<p>ナビゲーションのアイテムの幅を同じにしたいなら、<code>flex: auto</code> を指定します。これは <code>flex: 1 1 auto</code> の短縮版です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める領域も他より多くなります。</p>
+
+<p>下記のライブサンプルの <code>flex: auto</code> を <code>flex: 1</code> に変えてみてください。これは <code>flex: 1 1 0</code> の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="Split_navigation" name="Split_navigation">ナビゲーションの分割</h2>
+
+<p>主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。</p>
+
+<p>下記の例では、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">主軸上での位置合わせに auto マージンを使う</a> に書かれている自動マージンの技法を使っています。アイテムは <code>flex-start</code> によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。</p>
+
+<p>下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある <code>gap</code> プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Center_item" name="Center_item">アイテムの中央揃え</h2>
+
+<p>フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。</p>
+
+<p>下記のコード内の <code>center</code> の代わりに、先頭に揃える <code>flex-start</code> や末尾に揃える <code>flex-end</code> を指定して、整列の挙動を試してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに <code>align-items</code> を指定するか、フレックスアイテム自身に <code>align-self</code> を指定してください。</p>
+
+<h2 id="Card_layout_pushing_footer_down" name="Card_layout_pushing_footer_down">フッターが下端に張り付くカード</h2>
+
+<p>フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。</p>
+
+<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}<code>: column</code> を指定します。そしてカードの本文エリアに <code>flex: 1</code> を指定します。これは <code>flex: 1 1 0</code> の短縮版です。アイテムは <code>0</code> の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから <code>flex</code> プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Media_objects" name="Media_objects">メディアオブジェクト</h2>
+
+<p>メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。</p>
+
+<p>このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。</p>
+
+<p>下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の <code>flex-start</code> に揃えて、<code>.content</code> を指定したフレックスアイテムに <code>flex: 1</code> を指定しています。先述のカード内の縦方向の配置と同じく、<code>flex: 1</code> はその要素を引き伸ばせることを意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？</p>
+
+<p>画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では <code>flex-basis</code> は auto なので、画像の {{cssxref("width")}} や max-width が <code>flex-basis</code> となります。</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>両方のエリアの比率を維持したまま伸縮させることもできます。両者に <code>flex: 1</code> を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために <code>flex: auto</code> を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには <code>flex: 1</code>、文章エリアには <code>flex: 3</code> というように。これは、両者に <code>0</code> の <code>flex-basis</code> が適用されますが、指定された <code>flex-grow</code> に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> で詳しく説明されています。</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Flipping_the_media_object" name="Flipping_the_media_object">メディアオブジェクトを反転させる</h3>
+
+<p>画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、<code>flex-direction</code> プロパティに <code>row-reverse</code> を指定します。下記のライブサンプルでは、<code>.flipped</code> のクラスを <code>.media</code> の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Form_controls" name="Form_controls">フォームコントロール</h2>
+
+<p>フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。</p>
+
+<p>フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と <code>display: flex</code> を指定したラッパーの中に <code>&lt;button&gt;</code> と <code>&lt;input&gt;</code> フィールドを入れています。<code>&lt;input&gt;</code> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。</p>
+
+<h2 id="Conclusion" name="Conclusion">終わりに</h2>
+
+<p>上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。</p>
+
+<p>コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。</p>
diff --git a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html
new file mode 100644
index 0000000000..83ec871366
--- /dev/null
+++ b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html
@@ -0,0 +1,190 @@
+---
+title: Web アプリケーションのレイアウトに flexbox を使用する
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
+tags:
+  - Advanced
+  - CSS
+  - CSS Flexible Boxes
+  - Example
+  - Guide
+  - Web
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p>
+
+<ul>
+ <li>ページの中央に要素を置きたい場合。</li>
+ <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li>
+ <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li>
+</ul>
+
+<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p>
+
+<h2 id="Basics" name="Basics">基本</h2>
+
+<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p>
+
+<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p>
+
+<ul>
+ <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li>
+ <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li>
+ <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li>
+</ul>
+
+<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p>
+
+<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2>
+
+<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p>
+
+<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2>
+
+<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p>
+
+<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3>
+
+<pre class="brush: css;highlight:[8,14]">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Result_2" name="Result_2">結果</h3>
+
+<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p>
+
+<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p>
+
+<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2>
+
+<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p>
+
+<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3>
+
+<pre class="brush: css;highlight:[4]">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
+&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
+</pre>
+
+<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Result_3" name="Result_3">結果</h3>
+
+<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li>
+</ul>
diff --git a/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
new file mode 100644
index 0000000000..71f345c3d8
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html
@@ -0,0 +1,128 @@
+---
+title: 通常フローでのブロック及びインラインレイアウト
+slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+tags:
+  - CSS
+  - CSS Flow Layout
+  - CSS フローレイアウト
+  - Guide
+  - Intermediate
+  - Layout
+  - Margins
+  - flow
+  - ガイド
+  - マージン
+  - レイアウト
+  - 中級者
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、通常フローの中でブロック及びインライン要素がどのように動作するかの基本を見てみます。</p>
+
+<p>通常フローは <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 仕様書</a>で定義されており、通常フロー内のあらゆるボックスが<em>整形コンテキスト</em>の一部になることを説明しています。ブロックかインラインのどちらかになることができますが、同時に両方になることはできません。<em>ブロック整形コンテキスト</em>に参加するものをブロックレベルボックス、<em>インライン整形コンテキスト</em>に参加するものをインラインレベルボックスと呼んでいます。</p>
+
+<p>ブロックまたはインライン整形コンテキストを持つ要素の動作は、この仕様書でも定義されています。ブロック整形コンテキストを持つ要素については、仕様書では以下にように言っています。</p>
+
+<blockquote>
+<p>“ブロック整形コンテキストでは、ボックスは次々と垂直に、包含ブロックの上からレイアウトされます。二つの兄弟ボックスの間の垂直距離は、 'margin' プロパティで指定されます。ブロック整形コンテキストにおいて、隣り合うブロックレベルボックスの間の垂直マージンは相殺されます。<br>
+ <br>
+ ブロック整形コンテキストの中では、それぞれのボックスの左外側の端は、包含ブロックの左端に接します (右書きの整形では、右端が接します)。” - 9.4.1</p>
+</blockquote>
+
+<p>インライン整形コンテキストを持つ要素については以下の通りです。</p>
+
+<blockquote>
+<p>“インライン整形コンテキストでは、ボックスは包含ブロックの上から次々と水平に、レイアウトされます。これらのボックスの間では、水平マージン、境界、パディングが尊重されます。ボックスは垂直方向には様々な方法で配置されます。下や上に配置されたり、テキストのベースラインに配置されたりします。1行を形成するボックスを含む矩形の領域は行ボックスと呼ばれます。” - 9.4.2</p>
+</blockquote>
+
+<p>なお、 CSS 2.1 仕様書では、横書きで上から下へ向かう書字方向の文書を説明しています。例えば、ブロックボックス間を垂直距離によって説明しています。ブロックおよびインライン要素の動作は、縦書きの書字方向でも同様に動作するものであり、今後のフローレイアウトと書字方向のガイドで明らかにする予定です。</p>
+
+<h2 id="Elements_participating_in_a_block_formatting_context" name="Elements_participating_in_a_block_formatting_context">ブロック整形コンテキストに参加する要素</h2>
+
+<p>英語のように書字方向が横書きのブロック要素は、垂直方向に、1つずつ下方向にレイアウトされます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>書字方向が縦書きである場合は、水平方向にレイアウトされるでしょう。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>このガイドでは、英語、すなわち横書きモードでの作業となります。しかし、文書が縦書きの場合でも、説明したことはすべて同じように動作するはずです。</p>
+
+<p>仕様書で定義されているように、2つのブロックボックスの間のマージンは、要素間に区切りを作るものです。2つの段落から成るとても単純なレイアウトで、境界を追加したところに見ることができます。既定ののブラウザースタイルシートでは、上下にマージンを追加することで、段落間の間隔が追加されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>段落要素のマージンを <code>0</code> にすると、境界線が接触します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>既定では、ブロック要素はインライン方向の空間をすべて消費するので、段落は広がり、包含ブロックの中で可能な限り大きくなります。ブロック要素に幅を設定した場合、段落が横に並ぶ空間があったとしても、段落は下へ下へと配置されます。それぞれは包含ブロックの先頭側の反対側から始まりますので、その書字方向で文章が始まる場所になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h3>
+
+<p>仕様書では、ブロック要素間のマージンは<em>相殺される</em>と説明されています。つまり、上マージンを持つ要素がに下マージンを持つ要素の直後に来た場合、空間の合計はこれら2つのマージンの合計になるのではなく、マージンが相殺され、本質的には2つのマージンのうち大きい方のマージンと同じくらいの大きさになるということです。</p>
+
+<p>下記の例では、段落の上マージンが <code>20px</code>、下マージンが <code>40px</code> となっています。段落間のマージンの大きさは、2段落目の小さい上マージンが1段目の大きい下マージンで相殺されるため、 <code>40px</code> になります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>マージンの相殺については、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a>の記事で詳しく解説しています。</p>
+
+<div class="note">
+<p>注: マージンが相殺されているかどうか分からない場合は、ブラウザーのの DevTools でボックスモデルの値を確認してください。これにより、マージンの実際のサイズが表示されるので、何が起こっているかを特定するのに役立ちます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Elements_participating_in_an_inline_formatting_context" name="Elements_participating_in_an_inline_formatting_context">インライン整形コンテキストに参加する要素</h2>
+
+<p>インライン要素は、その特定の書字方向で文章が進む方向に次々と表示されます。インライン要素がボックスを持っていると考えることはあまりありませんが、 CSS のすべての要素と同様にボックスを持っています。これらのインラインボックスは、次から次へと配置されています。すべてのボックスを含むブロックに十分な空間がない場合、ボックスは新しい行に分割されます。生成された行は行ボックスと呼ばれています。</p>
+
+<p>以下の例では、段落の内部に {{HTMLElement("strong")}} 要素があることで生成された3つのインラインボックスがあります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p><code>&lt;strong&gt;</code> 要素の前と <code>&lt;strong&gt;</code> 要素の後の言葉の周りのボックスは無名ボックスと呼ばれ、すべてがボックスに含まれていることを保証するために導入されていますが、私たちが直接ターゲットにすることはできません。</p>
+
+<p>行ボックスのブロック方向の寸法 (すなわち英語で作業しているときは高さ) は、その中の最も高さが高いボックスによって定義されます。次の例では、 <code>&lt;strong&gt;</code> 要素に 300% に設定しました。その内容がその行の行ボックスの高さを定義するようになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>ブロックボックスとインラインボックスの動作についての詳細は、<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>のガイドを参照してください。</p>
+
+<h2 id="The_display_property_and_flow_layout" name="The_display_property_and_flow_layout">display プロパティとフローレイアウト</h2>
+
+<p>CSS 2.1 に存在する規則に加えて、新しい水準の CSS では、ブロックボックスとインラインボックスの動作がさらに記述されています。 {{cssxref("display")}} プロパティは、ボックスとその中のボックスの動作を定義します。 CSS Display Model Level 3 では、 <code>display</code> プロパティがどのようにボックスや生成されるボックスの動作を変えるのかを知ることができます。</p>
+
+<p>要素の表示種別は、外部表示型として、ボックスが同じ整形コンテキスト内の他の要素とどのように並んで表示されるかを定義します。また、内部表示型として、この要素内のボックスがどのように動作するかを決定します。フレックスボックスレイアウトを考えると、このことがよくわかります。下の例には {{HTMLElement("div")}} があり、それに <code>display: flex</code> を指定しています。フレックスコンテナーはブロック要素のように動作しており、新しい行に表示されてインライン方向に取ることができるすべての空間を取っています。これは外部表示型が <code>block</code> であるということです。</p>
+
+<p>フレックスアイテムはフレックス整形コンテキストに参加しています。これは、その親は <code>display: flex</code> を持つ要素であり、これは <code>flex</code> の内部表示型を持っているため、直接の子にフレックス整形コンテキストを確立しているためです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>したがって、 CSS のすべてのボックスはこのように動作していると考えることができます。ボックス自体は外部表示型を持っているので、どのように他のボックスと並ぶよう動作するかを知っています。次に、ボックスは内部表示型を持ち、子ボックスの動作を変更します。これらの子も、外部と内部の表示型を持っています。前の例でフレックスアイテムはフレックスレベルのボックスになるので、フレックス整形コンテキストの一部として外部表示型が指定されます。しかし、これらのアイテムの内部表示型は<em>フロー</em>であり、子アイテムは通常フローに参加します。フレックスアイテムの内部に含まれているアイテムは、何か表示型が変更されない限り、ブロックおよびインライン要素として配置されます。</p>
+
+<p>外部と内部の表示型というこの概念は、フレックスボックス (<code>display: flex</code>) やグリッドレイアウト (<code>display: grid</code>) などのレイアウト方法を使用しているコンテナーも、外部表示型が <code>block</code> であるために、ブロックとインラインのレイアウトに参加しているということを教えてくれるので重要です。</p>
+
+<h3 id="Changing_the_Formatting_Context_an_element_participates_in" name="Changing_the_Formatting_Context_an_element_participates_in">要素が参加する整形コンテキストの変更</h3>
+
+<p>ブラウザーはアイテムを、その要素が通常ブロックやインラインの整形コンテキストの一部としての意味を持つものとして表示します。例えば、 {{HTMLElement("strong")}} 要素は単語を強調するために使用され、ブラウザーでは太字で表示されます。一般には、 <code>&lt;strong&gt;</code> 要素がブロックレベルの要素として表示され、改行して表示されるという意味は持ちません。すべての <code>&lt;strong&gt;</code> 要素をブロック要素として表示したい場合は、 <code>&lt;strong&gt;</code> に <code>display: block</code> を設定することで実現できます。これは、コンテンツのマークアップにほとんど意味に応じて HTML 要素を使用し、表示方法を変更するのに CSS を使用することができることを意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、通常のフローで要素がブロック要素やインライン要素として、どのように表示されるかを見てきました。これらの要素の既定の動作により、 CSS のスタイリングが全くない HTML 文書は、読みやすい形で表示されます。通常のフローがどのように機能するかを理解することで、要素の表示方法を変更するための出発点を理解し、レイアウトを容易にすることができるようになります。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">CSS 基本ボックスモデル</a></li>
+ <li><em><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></em> - レイアウトの学習</li>
+ <li><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a></li>
+ <li><a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a></li>
+</ul>
diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html
new file mode 100644
index 0000000000..bb13c91fb5
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/flow_layout_and_overflow/index.html
@@ -0,0 +1,73 @@
+---
+title: フローレイアウトとオーバーフロー
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+tags:
+  - CSS
+  - overflow
+  - text-overflow
+  - ガイド
+  - フローレイアウト
+  - レイアウト
+  - 中級者
+  - 可視性
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<p class="summary">コンテナーに収まらない量のコンテンツがある場合、オーバーフローが発生します。どのようにオーバーフローが動作するかを理解することは、 CSS で制約された寸法で要素を扱うのに重要です。このガイドでは、通常フローで作業中にオーバーフローがどのように起こるかを説明します。</p>
+
+<h2 id="What_is_overflow" name="What_is_overflow">オーバーフローとは</h2>
+
+<p>Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the <code><a href="/ja/docs//Web/CSS/overflow">overflow</a></code> property which has an initial value of <code>visible</code>. This is why we can see the overflow content.</p>
+
+<h2 id="Controlling_overflow" name="Controlling_overflow">オーバーフローの制御</h2>
+
+<p>There are other values that control how overflow content behaves. To hide overflowing content use a value of <code>hidden</code>. This may cause some of your content to not be visible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>scroll</code> contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p>Using a value of <code>auto</code> will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for <code>overflow: scroll</code> you should see <code>overflow scroll</code> has horizontal and vertical scrollbars when it only needs vertical scrolling. The <code>auto</code> example below only adds the scrollbar in the direct we need to scroll.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>As we have already learned, using any of these values, other than the default of <code>visible,</code> will create a new Block Formatting Context.</p>
+
+<p>Note: In the <a href="https://www.w3.org/TR/css-overflow-3/">Working Draft of Overflow Level 3</a>, there is an additional value <code>overflow: clip</code>. This will act like <code>overflow: hidden</code> however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.</p>
+
+<p>The overflow property is in reality a shorthand for the <code><a href="/ja/docs/Web/CSS/overflow-x">overflow-x</a></code> and <code><a href="/ja/docs/Web/CSS/overflow-y">overflow-y</a></code> properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for <code>overflow-x</code> and therefore the horizontal direction, and the second for <code>overflow-y</code> and the vertical direction. In the below example, I have only specified <code>overflow-y: scroll</code> so we do not get the unwanted horizontal scrollbar.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="Flow_Relative_Properties" name="Flow_Relative_Properties">フロー関係のプロパティ</h2>
+
+<p>In the guide to <a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Writing Modes and Flow Layout</a>, we looked at the newer properties of <code>block-size</code> and <code>inline-size</code> which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - <code><a href="/ja/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> and <code><a href="/ja/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. These correspond to <code>overflow-x</code> and <code>overflow-y</code> but the mapping depends on the writing mode of the document.</p>
+
+<p>These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.</p>
+
+<h2 id="Indicating_Overflow" name="Indicating_Overflow">オーバーフローの指示</h2>
+
+<p>In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.</p>
+
+<h3 id="Inline-Axis_Overflow" name="Inline-Axis_Overflow">インライン軸のオーバーフロー</h3>
+
+<p>The <code><a href="/ja/docs/Web/CSS/text-overflow">text-overflow</a></code> property deals with text overflowing in the inline direction. It takes one of two values <code>clip</code>, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have <code>ellipsis</code> which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="Block-Axis_Overflow" name="Block-Axis_Overflow">ブロック軸のオーバーフロー</h3>
+
+<p>There is also a proposal for a <code>block-overflow</code> property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.</p>
+
+<p>This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.</p>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
new file mode 100644
index 0000000000..56ef206cbd
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html
@@ -0,0 +1,93 @@
+---
+title: フローレイアウトと書字方向
+slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+tags:
+  - CSS 書字方向
+  - ガイド
+  - フローレイアウト
+  - 方向
+  - 日本語処理
+  - 書字方向
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">通常フローの動きについて詳細を説明している CSS 2.1 仕様書は、横書きを想定しています。<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">レイアウト</a>プロパティは縦書きモードでも同様に動作するべきです。このガイドでは、異なる文書の書字方向が使われた場合のフローレイアウトの動作を見てみましょう。</p>
+
+<p>これは CSS での書字方向の使用に関する包括的なガイドではなく、ここでの目的は、フローレイアウトと書字方向の起こりうる相互作用が予想できないような領域を文書化することです。この文書の<a href="#External_Resources">外部リソース</a>や<a href="#See_Also">関連情報</a>の節で、書字方向に関するより多くのリソースを紹介します。</p>
+
+<h2 id="The_Writing_Modes_Specification" name="The_Writing_Modes_Specification">書字方向の仕様書</h2>
+
+<p>CSS Writing Modes Level 3 仕様書では、フローレイアウトで文書の書字方向が変更された時の影響を定義しています。<a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">仕様書</a>の書字方向の導入部では、以下のように書かれています。</p>
+
+<blockquote>
+<p>“CSS の書字方向は {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} プロパティによって決められます。これは主にインラインベース方向とブロックフロー方向から決まります。”</p>
+</blockquote>
+
+<p>仕様書では<em>インラインベース方向</em>を、行内でコンテンツが並べられる方向として定義しています。ここでは、インライン方向の始点と終点を定義しています。始点は文が始まるところであり、終点はテキストの行が終わり、新しい行への折り返しが始まる前です。</p>
+
+<p><em>ブロックフロー方向</em>は、段落などのボックスが、その書字方向で積み重なる方向です。 CSS の writing-mode プロパティは、ブロックフロー方向を制御します。ページまたはページの一部を <code>vertical-lr</code> に変更したい場合、要素に <code>writing-mode: vertical-lr</code> と設定し、これがブロックの方向を変更して、従ってインライン方向も同様に変更します。</p>
+
+<p>特定の言語では書字方向やテキストの方向が使用されますが、これらの方向を創造的な効果として、例えば見出しを縦書きにするために使用することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="The_writing-mode_property_and_block_flow" name="The_writing-mode_property_and_block_flow"><code>writing-mode</code> プロパティとブロックフロー</h2>
+
+<p>{{cssxref("writing-mode")}} プロパティは <code>horizontal-tb</code>, <code>vertical-rl</code>, <code>vertical-lr</code> の値を受け入れます。これらの値はページのブロックフローの方向を制御します。初期値は <code>horizontal-tb</code> で、ブロックフロー方向は上から下で、インライン方向は横書きとなります。英語のような左書きの言語、アラビア語のような右書きの言語は、すべて <code>horizontal-tb</code> です。</p>
+
+<p>以下の例は <code>horizontal-tb</code> を使用したブロックを示しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>vertical-rl の値は、次の例に見られるように、ブロックフロー方向は右から左で、インライン方向は縦書きになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>最後の例では <code>writing-mode</code> の第三の値である <code>vertical-lr</code> を紹介します。ブロックフロー方向は左から右で、インライン方向は縦書きになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="Boxes_with_a_different_writing_mode_to_their_parent" name="Boxes_with_a_different_writing_mode_to_their_parent">書字方向が親と異なるボックス</h2>
+
+<p>親とは書字方向が異なる内部のボックスを作成した場合、インラインレベルボックスは <code>display: inline-block</code> であるかのように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>ブロックレベルボックスは新しいブロック整形コンテキストを生成し、つまり内部の display 種別が <code>flow</code> であれば、 display 種別の計算値は <code>flow-root</code> になります。次の例では、親が新しいブロック整形コンテキストを確立するため、 <code>horizontal-tb</code> で表示される浮動要素を含むボックスがどこに表示されるかを確認できます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2>
+
+<p>画像などの置換要素は、 <code>writing-mode</code> プロパティによって方向が変更されません。しかし、テキストを含むフォームコントロールのような置換要素は、使用中の書字方向に一致するでしょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="Logical_Properties_and_Values" name="Logical_Properties_and_Values">論理プロパティと値</h2>
+
+<p>書字方向を <code>horizontal-tb</code> 以外にして作業をすると、画面の物理的な寸法に合わせられた多くのプロパティと値はおかしく見えます。例えば、 <code>horizontal-tb</code> の中でボックスの幅を 100px に設定すると、インライン方向の寸法を制御することになります。 <code>vertical-lr</code> では、ブロック方向の寸法を制御することになり、テキストに合わせて回転するわけではありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>従って、新しいプロパティ {{cssxref("block-size")}} および {{cssxref("inline-size")}} ができました。ブロックの <code>inline-size</code> を 100px に設定すると、書字方向が横書きか縦書きかに関わらず、 <code>inline-size</code> は常にインライン方向の寸法を意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティと値</a>の仕様書は、マージン、パディング、境界の制御や、その他の通常は物理的な方向を使用して指定するものの論理バージョンのプロパティを含んでいます。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>多くの場合、フローレイアウトは文書や文書の一部の書字方向を変更したときに、期待通りに動作するでしょう。これはふつう、縦書きの言語や創造的な理由で使用することができます。 CSS は論理プロパティと値を導入することで、縦書き時にインラインやブロック方向に基づいて寸法を決めやすくしています。これはどの書字方向でも動作するコンポーネントを作成するのに便利です。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
+</ul>
+
+<h2 id="External_Resources" name="External_Resources">外部リソース</h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a></em>, Jen Simmons on 24 Ways</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html
new file mode 100644
index 0000000000..cdccf842c6
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html
@@ -0,0 +1,64 @@
+---
+title: フロー内とフローの外
+slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">前のガイド</a>では、通常フロー内でのブロック及びインラインレイアウトを説明しました。フロー内のすべての要素は、この方法を使用して配置されます。</p>
+
+<p>以下の例では、見出し、段落、リスト、そして <code>strong</code> 要素を含む最後の段落があります。見出しと段落はブロックレベルで、 <code>strong</code> 要素はインラインです。リストはフレックスボックスを使用してアイテムを1行に配置していますが、ブロックレイアウトとインラインレイアウトの両方に対応しています。 - コンテナーは外側で <code>display</code> が <code>block</code> になっています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>すべての要素がフローの中にあるといえます。ページ上にはソース内にある順序で出現しています。</p>
+
+<h2 id="Taking_an_item_out_of_flow" name="Taking_an_item_out_of_flow">項目のフローの外への持ち出し</h2>
+
+<p>以下のものを除いて、すべての要素がフロー内にあります。</p>
+
+<ul>
+ <li>浮動アイテム</li>
+ <li><code>position: absolute</code> のアイテム (同様に機能する <code>position: fixed</code> を含む)</li>
+ <li>ルート要素 (<code>html</code>)</li>
+</ul>
+
+<p>フローの外のアイテムは、新しいブロック整形コンテキスト (BFC) を作成するので、その中のものはページの残りから独立して、小さなレイアウトのように見えます。したがってルート要素はフローの外で、文書内のすべてのコンテナーとして、文書のブロック整形コンテキストを確立します。</p>
+
+<h3 id="Floated_Items" name="Floated_Items">浮動アイテム</h3>
+
+<p>この例では1つの <code>div</code> と、それから2つの段落があります。段落には背景色を塗っており、 <code>div</code> を左側に浮動させました。 <code>div</code> はフローの外になりました。</p>
+
+<p>浮動アイテムとして、最初は通常のフローであるようにレイアウトされますが、そのあとでフローから取り出され、左側のできるだけ遠くに移動されました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>次の段落の背景色が下層に表示されているのが見えます。その段落の行ボックスだけが短縮され、浮動アイテムの周りでコンテンツを折り返す効果があります。段落のボックスは、通常のフローの規則に従って表示されます。このため、行ボックスから距離を置くために浮動アイテムの周りに間隔を作るには、アイテムにマージンを追加する必要があります。このために以下のフロー内のコンテンツに追加することができるものはありません。</p>
+
+<h3 id="Absolute_Positioning" name="Absolute_Positioning">絶対位置指定</h3>
+
+<p>アイテムに <code>position: absolute</code> または <code>position: fixed</code> を与えると、アイテムをフローから外し、アイテムが占めるはずだった空間も除去されます。次の例では、3つの段落要素を用い、2番目の要素は <code>position</code> を <code>absolute</code> にし、オフセット値を <code>top: 30px</code> および <code>right: 30px</code> としています。アイテムは文書フローから除去されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p><code>position: fixed</code> を使用しても、アイテムをフローから除去しますが、オフセットは包含ブロックではなくビューポートからのものになります。</p>
+
+<p>位置指定してアイテムをフローの外に持ち出す場合、コンテンツが重複する可能性を管理する必要があります。フローの外ということは、基本的にページ内の他の要素が、その要素が存在することを知ることがなく、従って影響を与えないことを意味します。</p>
+
+<h3 id="Relative_Positioning_and_Flow" name="Relative_Positioning_and_Flow">相対位置指定とフロー</h3>
+
+<p>アイテムに <code>position: relative</code> によって相対位置を与えた場合、フロー内には残りますが、周囲を押し広げるためにオフセット値を使用することができます。しかし、以下の例のように、通常フローで配置するはずだった空間は予約されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>アイテムを除去するために何かをしたり、アイテムを通常フローで配置される場所からずらしたりした場合は、重ならないようにコンテンツやコンテンツの周囲を管理する必要が出てくる可能性があります。浮動をクリアしたり、要素に <code>position: absolute</code> を設定して他のコンテンツの上に来ないようにします。このため、フロー内の要素を除去する方法は、このような影響を理解したうえで使用する必要があります。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、特定の種類の位置指定を実現するために、要素をフローの外に持ち出す方法を紹介しました。次のガイドでは、 <a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a> の中で、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を作成する上での関連する問題を見てみます。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>レイアウトの学習: <em><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></em></li>
+</ul>
diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..a16c0cbd4f
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/index.html
@@ -0,0 +1,51 @@
+---
+title: CSS フローレイアウト
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - Reference
+  - ガイド
+  - フロー
+  - フローレイアウト
+  - レイアウト
+  - 中級者
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><em>通常フロー</em><rp> (</rp><rt>Normal Flow</rt><rp>) </rp></ruby>、またはフローレイアウトは、レイアウトに変更が加えられる前にブロック要素やインライン要素がページに表示される方法です。このフローは本質的に、共に動作するすべてのものの組み合わせで、レイアウトの中で互いについてを知っています。いったん何かが<em>フローの外</em>に出ると、独立して動作します。</p>
+
+<p>通常フローでは、<strong>インライン</strong>要素はインライン方向、つまり文書の書字方向に従って、文の中で言葉が表示される方向に表示されます。<strong>ブロック</strong>要素は、文書の<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>の中で、段落として一つが他の物の後に表示されます。従って英語では、インライン要素は左から始まり、一つが他の物の後に表示され、ブロック要素は上から始まり、ページの下に向かいます。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+
+<p>以下の例はブロック及びインラインレベルボックスの例を示します。緑色の枠線がある二つの要素がブロックレベルで、他の物の下に表示されます。</p>
+
+<p>最初の文は青い背景をもつ span 要素を含んでいます。これはインラインレベルで、文の中に表示されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロック及びインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとオーバーフロー</a></li>
+</ul>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Glossary_Entries" name="Glossary_Entries">用語集の記事</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
new file mode 100644
index 0000000000..fcdc556b13
--- /dev/null
+++ b/files/ja/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
@@ -0,0 +1,100 @@
+---
+title: 整形コンテキストの紹介
+slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+tags:
+  - BFC
+  - Block Formatting Context
+  - CSS
+  - Formatting contexts
+  - Guide
+  - Intermediate
+  - Layout
+  - flow
+  - ガイド
+  - ブロック整形コンテキスト
+  - 中級者
+  - 整形コンテキスト
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。</span></p>
+
+<p>ページ上のすべてのものが<strong>整形コンテキスト</strong>、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。<strong>ブロック整形コンテキスト</strong> (<abbr title="Block Formatting Context">BFC</abbr>) は、子要素をブロックレイアウトの規則に則って配置し、<strong>フレックス整形コンテキスト</strong>は、子要素を{{Glossary("flex item", "フレックスアイテム")}}として配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。</p>
+
+<h2 id="The_Block_Formatting_Context" name="The_Block_Formatting_Context">ブロック整形コンテキスト</h2>
+
+<p>ブロックレイアウト規則を使用する文書の中で一番外側の要素は、最初の、あるいは<strong>初期ブロック整形コンテキスト</strong>を確立します。これは、 <code>&lt;html&gt;</code> 要素のブロック内のすべての要素が、ブロックおよびインラインレイアウトの規則に従って、通常のフローに従ってレイアウトされることを意味します。ブロック整形コンテキスト (<abbr title="Block Formatting Context">BFC</abbr>) に参加する要素は、 CSS ボックスモデルによって概説された規則を使用します。これは、要素のマージン、境界、パディングが同じコンテキスト内の他のブロックとどのように相互作用するかを定義します。</p>
+
+<h3 id="Creating_a_new_block_formatting_context" name="Creating_a_new_block_formatting_context">新しいブロック整形コンテキストの生成</h3>
+
+<p>{{HTMLElement("html")}} 要素がブロック整形コンテキストを生成できる唯一の要素ではありません。どのブロックレベルの要素でも、特定の CSS プロパティを適用することで BFC を生成することができます。</p>
+
+<p>新しい BFC は以下のような場面で生成されます。</p>
+
+<ul>
+ <li>{{cssxref("float")}} を使用して浮動状態になった要素</li>
+ <li>絶対位置指定の要素 ({{cssxref("position", "position: fixed", "#fixed")}} または {{cssxref("position", "position: sticky", "#sticky")}} を含む)</li>
+ <li>{{cssxref("display", "display: inline-block", "#inline-block")}} の要素</li>
+ <li>表のセル、または <code>display: table-cell</code> が指定された要素で、 <code>display: table-*</code> プロパティを使用して生成された無名の表のセルを含む</li>
+ <li>テーブルのキャプション、または <code>display: table-caption</code> が付いた要素</li>
+ <li><code>overflow</code> が <code>visible</code> 以外の値であるブロック要素</li>
+ <li><code>display: flow-root</code> または <code>display: flow-root list-item </code> の要素</li>
+ <li>{{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, <code>strict</code> のいずれかの要素</li>
+ <li>{{Glossary("flex item", "フレックスアイテム")}}</li>
+ <li>グリッドアイテム</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">段組みコンテナー</a></li>
+ <li>{{cssxref("column-span")}} が <code>all</code> に設定された要素</li>
+</ul>
+
+<p>これは、新しい BFC がメインレイアウトの中でミニレイアウトとなり、一番外側の文書のように動作するので便利です。 BFC はその中にすべてを含み、 {{cssxref("float")}} と {{cssxref("clear")}} は同じ整形コンテキスト内の項目にのみ適用され、マージンは同じ書式設定コンテキスト内の要素間でのみ相殺されます。</p>
+
+<h3 id="BFC_creation_examples" name="BFC_creation_examples">BFC が生成される例</h3>
+
+<p>新しい <abbr title="Block Formatting Context">BFC</abbr> を生成する効果を見るために、いくつかの例を見てみましょう。</p>
+
+<p>下の例では、境界が適用された <code>&lt;div&gt;</code> の中に浮動要素があります。その <code>&lt;div&gt;</code> の内容は、その浮動要素の横に並んでいます。その浮動要素の内容は、その横にある内容よりも高さが高いため、 <code>&lt;div&gt;</code> の境界線がその浮動要素を通過するようになりました。<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフローの外のガイド</a>で説明されているように、浮動要素はフローから外れているので、 <code>&lt;div&gt;</code> の背景と境界には内容だけが含まれ、浮動要素は含まれません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>新しい <abbr title="Block Formatting Context">BFC</abbr> を生成すると浮動要素が収まります。これまでよく使われてきた方法は、 <code>overflow: auto</code> または初期値である <code>overflow: visible</code> 以外の値を設定することでした。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p><code>overflow: auto</code> を設定することで、浮動要素を含む新しい <abbr title="Block Formatting Context">BFC</abbr> を生成しました。 <code>&lt;div&gt;</code> はレイアウト内のミニレイアウトになりました。すべての子要素はその中に収まります。</p>
+
+<p><code>overflow</code> を使って新しい <abbr title="Block Formatting Context">BFC</abbr> を生成する場合の問題点は、 <code>overflow</code> プロパティは、あふれた内容をどのように処理したいかをブラウザーに伝えるためのものだということです。このプロパティを純粋に BFC を作成するために使用した場合、意図せずにスクロールバーが現れたり、影がクリッピングされたりすることに気づくこともあるでしょう。さらに、 <code>overflow</code> を使用した理由が明らかにならないこともあるかもしれないので、将来の開発者からは理解しやすくない可能性があります。このような場合は、コードにコメントをつけて説明するのが良いでしょう。</p>
+
+<h3 id="Explicitly_creating_a_BFC_using_display_flow-root" name="Explicitly_creating_a_BFC_using_display_flow-root">display: flow-root を使用した明示的な BFC の生成</h3>
+
+<p>包含ブロックに <code>display: flow-root</code> (または <code>display: flow-root list-item</code>) を使用すると、問題を起こす副作用が発生することなく新しい <abbr title="Block Formatting Context">BFC</abbr> を生成することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p><code>display: flow-root</code> を {{HTMLElement("div")}} に指定すると、コンテナー内のすべてのものがそのコンテナーのブロック整形コンテキストに参加し、浮動要素が要素の底から飛び出すことはなくなります。</p>
+
+<p><code>flow-root</code> キーワードの名前は、新しいコンテキストがどのように作成され、そのフローレイアウト機能がどのように機能するかを考えると、本質的には ({{HTMLElement("html")}} にように) 新しいルート要素のような役割を果たすものを生成しているという事実を示しています。</p>
+
+<h2 id="Inline_formatting_contexts" name="Inline_formatting_contexts">インライン整形コンテキスト</h2>
+
+<p>インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で {{HTMLElement("strong")}}, {{HTMLElement("a")}}, {{HTMLElement("span")}} などの要素が使われた場合のようなインライン整形コンテキストを作成します。</p>
+
+<p>ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Other_formatting_contexts" name="Other_formatting_contexts">その他の整形コンテキスト</h2>
+
+<p>このガイドはフローレイアウトを対象としているため、他のありうる整形コンテキストについては言及していません。そのため、どのような種類の整形コンテキストを作成しても、その整形コンテキスト内の要素の動作が変わることを理解しておくと便利です。この動作は常に仕様書に記述されており、ここ、 MDN にも記述されています。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (<abbr title="Block Formatting Context">BFC</abbr>) を生成することの重要な目的を見てきました。次のガイドでは、<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">通常フローがどのように様々な所持方向に対応するか</a>を見ていきます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト (BFC)</a></li>
+ <li><a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">CSS ボックスモデル</a></li>
+</ul>
diff --git a/files/ja/web/css/css_fonts/index.html b/files/ja/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..c1584ac37f
--- /dev/null
+++ b/files/ja/web/css/css_fonts/index.html
@@ -0,0 +1,141 @@
+---
+title: CSS フォント
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CSS
+  - CSS フォント
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS フォント</strong>は CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。</p>
+
+<pre class="brush: css">p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}</pre>
+
+<pre class="brush: html">&lt;p&gt;Three hundred years ago&lt;br&gt;
+  I thought I might get some sleep&lt;br&gt;
+  I stretched myself out onna antique bed&lt;br&gt;
+  An' my spirit did a midnite creep&lt;/p&gt;</pre>
+
+<p>結果は以下のようになります。</p>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', '200')}}</p>
+
+<h2 id="Variable_fonts_examples" name="Variable_fonts_examples">可変フォントの例</h2>
+
+<p>たくさんの可変フォントの例を <a href="https://v-fonts.com/">v-fonts.com</a> および <a href="https://www.axis-praxis.org/">axis-praxis.org</a> で見ることができます。詳しい情報と使い方の情報は、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a>も参照してください。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-optical-sizing")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variation-settings")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">テキストとフォントのスタイル付けの基礎</a></dt>
+ <dd>この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType フォント特性ガイド</a></dt>
+ <dd>フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a></dt>
+ <dd><strong>可変フォント</strong>は OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。</dd>
+</dl>
+
+<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('CSS4 Fonts')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td><code>font-variation-settings</code> (および関連する高水準プロパティ) および <code>font-optical-sizing</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td><code>font-feature-settings</code> (および関連する高水準プロパティ)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>({{cssxref("font-weight")}} や {{cssxref("font-style")}} など) 基本フォントプロパティの多くはブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。</p>
diff --git a/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html
new file mode 100644
index 0000000000..bdc63c3739
--- /dev/null
+++ b/files/ja/web/css/css_fonts/opentype_fonts_guide/index.html
@@ -0,0 +1,235 @@
+---
+title: OpenTypeフォント機能の手引き
+slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide
+tags:
+  - CSS
+  - Fonts
+  - Text
+translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide
+---
+<p>{{CSSRef}}</p>
+
+<p>フォントの機能及び派生とは，OpenTypeフォントに含まれる異なるグリフや文字様式を指します。これらには合字（「fi」又は「ffl」といった文字を組み合わせた特殊なグリフ），文字詰め（特定の字形の組の間隔の調整），分数，数字様式，及びその他多数が含まれます。これらは全てOpenType機能と呼ばれており，Web上での利用には特定のプロパティ郡及び低級制御プロパティの一つを介します――{{cssxref("font-feature-settings")}}。本稿ではCSSにおけるOpenTypeフォント機能の利用について，知っていなければならない全てを提供します。</p>
+
+<p>幾つかのフォントでは，前述の機能の内一つ又は複数個が既定で有効です（一般的な例: 字詰め及び既定合字）が，他の機能については，デザイナー又は開発者に，個別の事案で有効にするか否かの選択肢が委ねられています。</p>
+
+<p>In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.</p>
+
+<div class="warning">
+<p><strong>注意</strong>: There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level {{cssxref("font-feature-settings")}} property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with simply using <code>font-feature-settings</code> for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with {{cssxref("font-variation-settings")}}).</p>
+</div>
+
+<h2 id="フォント機能の可用性を知る">フォント機能の可用性を知る</h2>
+
+<p>This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit <a href="https://wakamaifondue.com">wakamaifondue.com</a>, drop your font file on the circle where instructed and in a few moments you'll have a full report on all the capabilities and features of your font. <a href="https://axis-praxis.org">Axis-praxis.org</a> also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.</p>
+
+<h2 id="機能を利用する理由">機能を利用する理由</h2>
+
+<p>Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:</p>
+
+<ul>
+ <li><strong>Ligatures</strong> like 'ff' or 'fi' make letter spacing and reading more even and smooth.</li>
+ <li><strong>Fractions</strong> can make home improvement and recipe sites much easier to read and understand.</li>
+ <li><strong>Numerals</strong> within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words.</li>
+</ul>
+
+<p>While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.</p>
+
+<blockquote>
+<p>OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。<cite>――</cite><em><a href="https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html">OpenType機能の使用</a> - アドビ</em></p>
+</blockquote>
+
+<h3 id="単なる様式ではなく，意味が丸ごと変わる場合も">単なる様式ではなく，意味が丸ごと変わる場合も</h3>
+
+<p>時として――{{cssxref("font-variant-east-asian")}}のように――OpenType機能は或る種のグリフ異形を用いるのに直接結び付いており，意味や可読性に影響を与える可能性があります。そのような場合，OpenType機能は単に細かな見栄えを調整する以上の，寧ろ内容そのものに不可欠な部分を役めます。</p>
+
+<h2 id="フォント機能">フォント機能</h2>
+
+<p>There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).</p>
+</div>
+
+<h3 id="字詰め_cssxreffont-kerning">字詰め ({{cssxref("font-kerning")}})</h3>
+
+<p>This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if {{cssxref("letter-spacing")}} is also set on your text, that is applied after kerning.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div>
+
+<h3 id="代替_cssxreffont-variant-alternates">代替 ({{cssxref("font-variant-alternates")}})</h3>
+
+<p>Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div>
+
+<p>In this case, <code>@stylistic(alternates)</code> will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying <code>@styleset(alt-a)</code> only changes the lower case 'a'.</p>
+
+<p>Try changing the line</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre>
+
+<p>to</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-g);
+</pre>
+
+<p>and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.</p>
+
+<h4 id="代替フォントについての詳細">代替フォントについての詳細</h4>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates</a>
+
+  <ul>
+   <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates">https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates</a></li>
+  </ul>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates">https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates</a></li>
+</ul>
+
+<h3 id="合字_cssxreffont-variant-ligatures">合字 ({{cssxref("font-variant-ligatures")}})</h3>
+
+<p>Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.</p>
+
+<p>While more common in script typefaces, in the below example they are used to create arrows:</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div>
+
+<h3 id="位置_cssxreffont-variant-position">位置 ({{cssxref("font-variant-position")}})</h3>
+
+<p>Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is one of the key benefits over using the {{htmlelement("sub")}} or {{cssxref("sup")}} elements.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div>
+
+<h3 id="大・小文字_cssxreffont-variant-caps">大・小文字 ({{cssxref("font-variant-caps")}})</h3>
+
+<p><span class="st">OpenType機能のより一般的な使用例の一つに，小英大文字の適切な使用があります。小英大文字とは，大文字を，小文字列の内でより適切に収まるような大きさにしたものであり，一般に頭文字及び略語に対して用います。</span></p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div>
+
+<h3 id="数字_cssxreffont-variant-numeric">数字 ({{cssxref("font-variant-numeric")}})</h3>
+
+<p>フォントに一般的に含まれる数字には，幾つか異なる様式があります。</p>
+
+<ul>
+ <li>'Lining'〔線引き〕数字は，全ての数字の高さと基底線が揃っています。</li>
+ <li>'Oldstyle'〔旧式の〕数字は高さが揃っておらず，周囲の小文字と同様のアセンダ及びディセンダを外見に持つよう設計されています。原稿の行内での使用を目的に設計されている為，数字と周囲のグリフとが，<span class="st">小英大文字</span>と似た方式で，視覚的に融和します。</li>
+</ul>
+
+<p>There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.</p>
+
+<p>本プロパティは二種類の分数に対応しています:</p>
+
+<ul>
+ <li>斜線分数</li>
+ <li>縦積み分数</li>
+</ul>
+
+<p>序数にも対応しており（「1st」や「3rd」など），斜線付きゼロがフォントに存在するならば数字のゼロはそれになります。</p>
+
+<h4 id="線引き及び旧式の数字">線引き及び旧式の数字</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div>
+
+<h4 id="分数・序数・及び斜線付きゼロ">分数・序数・及び斜線付きゼロ</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div>
+
+<h3 id="東亜_cssxreffont-variant-east-asian">東亜 ({{cssxref("font-variant-east-asian")}})</h3>
+
+<p>この機能を使ってフォント内の種々の代替形式グリフを参照できます。次の例ではOpenType文字集合'jis78'のみが有効化されたグリフの文字列を示しています。<span class="st">チェック欄のチェックを外すとより多くの文字が表示されます。</span></p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div>
+
+<div class="note">
+<p><strong>注意</strong>: これらのグリフはフォント見本から複製したものであり，意味を成す文を意図していません。</p>
+</div>
+
+<h3 id="フォント変種（簡略構文）Cssxreffont-variant">フォント変種（簡略構文）({{Cssxref("font-variant")}})</h3>
+
+<p>This is the shorthand syntax for defining all of the above. Setting a value of <code>normal</code> resets all properties to their initial value. Setting a value of <code>none</code> sets <code>font-variant-ligatures</code> to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of <code>none</code> being supplied here.)</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div>
+
+<h2 id="フォント機能の設定">フォント機能の設定</h2>
+
+<p>{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS custom properties</a> to set the values). Because of this, it's best to use the standard properties shown above wherever possible.</p>
+
+<p>There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.</p>
+
+<p>The general syntax looks like this:</p>
+
+<pre class="brush: css">.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+</pre>
+
+<p>According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:</p>
+
+<pre class="brush: css">.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}</pre>
+
+<h4 class="brush: css" id="font-feature-settingsプロパティの詳細">font-feature-settingsプロパティの詳細</h4>
+
+<ul>
+ <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">'The Complete CSS Demo for OpenType Features'</a> (can't vouch for the truth of the name, but it's pretty big)</li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">A list of OpenType features on Wikipedia</a></li>
+</ul>
+
+<h2 id="実装に対してCSS機能検出を用いる">実装に対してCSS機能検出を用いる</h2>
+
+<p>Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.</p>
+
+<p>For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with <code>font-feature-settings</code> versus a single property value using {{cssxref("font-variant-caps")}}.</p>
+
+<pre class="brush: css">.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+</pre>
+
+<h2 id="関連項目">関連項目</h2>
+
+<h3 id="CSSによるCSSのOpenType機能の実演">CSSによるCSSのOpenType機能の実演</h3>
+
+<ul>
+ <li><a href="https://sparanoid.com/lab/opentype-features/">The Complete CSS Demo for OpenType Features</a></li>
+</ul>
+
+<h3 id="Webフォント解析ツール">Webフォント解析ツール</h3>
+
+<ul>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue</a></li>
+ <li><a href="https://axis-praxis.org">Axis Praxis</a></li>
+</ul>
+
+<h3 id="W3C標準">W3C標準:</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Font Feature Properties in CSS Fonts Module Level 3</a>
+
+  <ul>
+   <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts-ja.html#font-rend-desc">CSSフォントモジュール水準3におけるフォント特能プロパティ</a></li>
+  </ul>
+ </li>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">font-variant-alternatives in CSS Fonts Module Level 4</a>
+  <ul>
+   <li>〔日本語訳〕<a href="https://triple-underscore.github.io/css-fonts4-ja.html#propdef-font-variant-alternates">CSSフォントモジュール水準4におけるfont-variant-alternatives</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="その他の文献">その他の文献</h3>
+
+<ul>
+ <li><a href="https://helpx.adobe.com/jp/fonts/using/use-open-type-features.html">OpenType機能の使用</a> - アドビ</li>
+ <li><a href="https://helpx.adobe.com/jp/fonts/using/open-type-syntax.html">CSSでのOpenType機能の構文</a> - アドビ</li>
+</ul>
diff --git a/files/ja/web/css/css_fonts/variable_fonts_guide/index.html b/files/ja/web/css/css_fonts/variable_fonts_guide/index.html
new file mode 100644
index 0000000000..f5be8ef59b
--- /dev/null
+++ b/files/ja/web/css/css_fonts/variable_fonts_guide/index.html
@@ -0,0 +1,262 @@
+---
+title: バリアブルフォントガイド
+slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+tags:
+  - CSS
+  - Fonts
+  - Guide
+  - Text
+  - variable fonts
+  - web fonts
+translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>バリアブルフォント</strong>は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の {{cssxref("@font-face")}} 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、バリアブルフォントの使用を開始するために知っておく必要があるすべての内容を説明します。</p>
+
+<div class="warning">
+<p><strong>警告</strong>: OS でバリアブルフォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS はバリアブルフォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できません。</p>
+</div>
+
+<h2 id="Variable_Fonts_what_they_are_and_how_they_differ" name="Variable_Fonts_what_they_are_and_how_they_differ">バリアブルフォント: 何であるか、何が違うのか</h2>
+
+<p>バリアブルフォントの違いをよりよく理解するためには、バリアブルでないフォントが何であり、どのように比較するかを確認するのがいいでしょう。</p>
+
+<h3 id="Standard_or_Static_fonts" name="Standard_or_Static_fonts">標準 (または静的) フォント</h3>
+
+<p>以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20～30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。</p>
+
+<p>このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。</p>
+
+<h3 id="Variable_fonts" name="Variable_fonts">バリアブルフォント</h3>
+
+<p>バリアブルフォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。バリアブルフォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。</p>
+
+<p>これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で10～15種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。</p>
+
+<h4 id="A_note_about_font_families_weights_and_variants" name="A_note_about_font_families_weights_and_variants">フォントファミリ、太さ、バリアントについての注意</h4>
+
+<p>それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーが合成することに頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、バリアブルではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。</p>
+
+<p>また、バリアブルフォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の {{cssxref("font-family")}} 名でそれらをリンクさせることができるので、同じ <code>font-family</code> と適切な {{cssxref("font-style")}} を使ってそれらを呼び出すことができます。</p>
+
+<h2 id="Introducing_the_variation_axis" name="Introducing_the_variation_axis">「バリエーション軸」の紹介</h2>
+
+<p>新しい可変フォントフォーマットの中核をなすのは、書体デザインの特定の側面の許容範囲を記述する<strong>バリエーション軸</strong>の概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。</p>
+
+<p>As defined in the specification, there are two kinds of axes: <strong>registered</strong> and <strong>custom</strong>:</p>
+
+<ul>
+ <li>
+  <p>Registered axes are simply those that are most frequently encountered, and common enough that the authors of the specification felt it was worth standardizing. The five currently registered axes are weight, width, slant, italic, and optical size. The W3C has undertaken mapping them to existing CSS attributes, and in one case introduced a new one, which you'll see below.</p>
+ </li>
+ <li>
+  <p>Custom axes are in fact limitless: the typeface designer can define and scope any axis they like, and are just required to give it a four-letter <strong>tag</strong> to identify it within the font file format itself. You can use these four-letter tags in CSS to specify a point along that axis of variation, as will be show in the code examples below.</p>
+ </li>
+</ul>
+
+<h3 id="Registered_axes_and_existing_CSS_attributes" name="Registered_axes_and_existing_CSS_attributes">登録済みの軸と既存の CSS 属性</h3>
+
+<p>In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ({{cssxref("font-variation-settings")}}) was the first mechanism implemented in order to test the early implementations of variable font support, and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C’s intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of <code>font-variation-settings</code> only being used to set values or axes not available otherwise.</p>
+
+<h4 id="Notes" name="Notes">注</h4>
+
+<ol>
+ <li>
+  <p>When using <code>font-variation-settings</code> it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example:</p>
+
+  <pre class="brush: css notranslate">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre>
+
+  <p><code>wght</code> (weight) is a registered axis, and <code>GRAD</code> (grade) is a custom one.</p>
+ </li>
+ <li>
+  <p>If you have set values using <code>font-variation-settings</code> and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using {{cssxref("font-feature-settings")}}). You can work around this limitation by using <a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS Custom Properties</a> (CSS variables) for the individual values, and simply modifying the value of an individual custom property. Example code follows at the end of the guide.</p>
+ </li>
+</ol>
+
+<h3 id="Weight" name="Weight">太さ</h3>
+
+<p>Weight (represented by the <code>wght</code> tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the {{cssxref("font-weight")}} property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like <code>normal</code> or <code>bold</code>, which are simply aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.</p>
+
+<p>It should be noted that at this point there is no way in the <code>@font-face</code> declaration to 'map' a specific point on the variation axis of a variable font to the keyword <code>bold</code> (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:</p>
+
+<pre class="brush: css notranslate">font-weight: 375;
+
+font-variation-settings: 'wght' 375;</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with font weight values.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="Width" name="Width">幅</h3>
+
+<p>Width (represented by the <code>wdth</code> tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the {{cssxref("font-stretch")}} property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.</p>
+
+<div class="note">
+<p><strong>注</strong>: The % symbol is not used when utilizing <code>font-variation-settings</code>.</p>
+</div>
+
+<pre class="brush: css notranslate">font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with font width values.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div>
+
+<h3 id="Italic" name="Italic">イタリック</h3>
+
+<p>The Italic (<code>ital</code>) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, a number of glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are actually quite different. Oblique is defined in this context with the term <code>slant</code> (see the below section), and a typeface would typically have one or the other, but not both.</p>
+
+<p>In CSS, both italic and oblique are applied to text using the {{cssxref("font-style")}} property. Also note the introduction of <code>font-synthesis: none;</code>—which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.</p>
+
+<pre class="brush: css notranslate">font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with font italics.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div>
+
+<h3 id="Slant" name="Slant">傾き</h3>
+
+<p>Slant (represented by the <code>slnt</code> tag), or as it's often referred to, 'oblique' — is different to true italics in that it changes the angle of the letterforms but doesn’t perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90–90 degrees is valid.</p>
+
+<div class="note">
+<p><strong>注</strong>: The <code>deg</code> keyword is not used when utilizing <code>font-variation-settings</code>.</p>
+</div>
+
+<pre class="brush: css notranslate">font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with font slant/oblique values.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<h3 id="Optical_size" name="Optical_size">Optical size</h3>
+
+<p>This is something new to digital fonts and CSS, but is actually a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.</p>
+
+<p>While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.</p>
+
+<p>Optical size values are generally intended to be automatically applied corresponding to <code>font-size</code>, but can also be manipulated using the lower-level <code>font-variation-settings</code> syntax.</p>
+
+<p>There is a new attribute, {{cssxref("font-optical-sizing")}}, created to support variable fonts in CSS. When using <code>font-optical-sizing</code>, the only allowed values are <code>auto</code> or <code>none</code> — so this attribute only allows for turning optical sizing on or off. However when using <code>font-variation-settings: 'opsz' &lt;num&gt;</code>, you can supply a numeric value. In most cases you would want to match the <code>font-size</code> (the physical size the type is being rendered) with the <code>opsz</code> value (which is how optical sizing is intended to be applied when using <code>auto</code>). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.</p>
+
+<pre class="brush: css notranslate">font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with optical size values.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div>
+
+<h3 id="Custom_axes" name="Custom_axes">カスタム軸</h3>
+
+<p>Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.</p>
+
+<h3 id="Grade" name="Grade">グレード</h3>
+
+<p>Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.</p>
+
+<pre class="brush: css notranslate">font-variation-settings: 'GRAD' 88;</pre>
+
+<p>The following live example's CSS can be edited to allow you to play with font grade values.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div>
+
+<h3 id="Using_a_variable_font_font-face_changes" name="Using_a_variable_font_font-face_changes">バリアブルフォントの使用: @font-face の変更</h3>
+
+<p>The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional {{cssxref("@font-face")}} syntax now available in modern browsers.</p>
+
+<p>The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like <code>font-weight</code> and <code>font-stretch</code> can be supplied, rather than named according to the font file being loaded.</p>
+
+<h4 id="Example_for_a_standard_upright_Roman_font" name="Example_for_a_standard_upright_Roman_font">標準の直立の (ローマン) フォントの例</h4>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+</pre>
+
+<h4 id="Example_for_a_font_that_includes_both_upright_and_italics" name="Example_for_a_font_that_includes_both_upright_and_italics">Example for a font that includes both upright and italics:</h4>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}</pre>
+
+<div class="note">
+<p><strong>注:</strong> there is no set specific value for the upper-end degree measurement in this case; they simply indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)</p>
+</div>
+
+<h4 id="Example_for_a_font_that_contains_only_italics_and_no_upright_characters" name="Example_for_a_font_that_contains_only_italics_and_no_upright_characters">Example for a font that contains only italics and no upright characters:</h4>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}</pre>
+
+<h4 id="Example_for_a_font_that_contains_an_oblique_slant_axis" name="Example_for_a_font_that_contains_an_oblique_slant_axis">Example for a font that contains an oblique (slant) axis:</h4>
+
+<pre class="brush: css notranslate">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}</pre>
+
+<div class="note">
+<p><strong>注</strong>: Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. <code>woff2</code> instead of <code>woff2-variations</code>), but it’s best to use the proper syntax if possible.</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: Supplying value ranges for <code>font-weight</code>, <code>font-stretch</code>, and <code>font-style</code> will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. <code>font-weight</code> or <code>font-stretch</code>), but will not block you from supplying an invalid value via <code>font-variation-settings</code>, so use with care.</p>
+</div>
+
+<h2 id="Working_with_older_browsers" name="Working_with_older_browsers">古いブラウザーでの作業</h2>
+
+<p>Variable font support can be checked with CSS Feature Queries (see {{cssxref("@supports")}}), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.</p>
+
+<pre class="brush: css notranslate">h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}</pre>
+
+<h2 id="Sample_pages" name="Sample_pages">サンプルページ</h2>
+
+<p>The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a <code>font-variation-settings</code> string, and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the <code>h2</code>, which only alters the grade axis custom property value.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div>
+
+<h2 id="Resources" name="Resources">リソース</h2>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-4">W3C CSS Fonts Module 4 Specification</a> (editor’s draft)</li>
+ <li><a href="https://github.com/w3c/csswg-drafts/issues">W3C Github issue queue</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Microsoft Open Type Variations introduction</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Microsoft OpenType Design-Variation Axis Tag Registry</a></li>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue</a> (a site that will tell you what your font can do via a simple drag-and-drop inspection interface)</li>
+ <li><a href="https://www.axis-praxis.org">Axis Praxis</a> (the original variable fonts playground site)</li>
+ <li><a href="https://v-fonts.com">V-Fonts.com</a> (a catalog of variable fonts and where to get them)</li>
+ <li><a href="https://play.typedetail.com">Font Playground</a> (another playground for variable fonts with some very unique approaches to user interface)</li>
+</ul>
diff --git a/files/ja/web/css/css_fragmentation/index.html b/files/ja/web/css/css_fragmentation/index.html
new file mode 100644
index 0000000000..be4cb944d8
--- /dev/null
+++ b/files/ja/web/css/css_fragmentation/index.html
@@ -0,0 +1,47 @@
+---
+title: CSS 分割
+slug: Web/CSS/CSS_Fragmentation
+tags:
+  - CSS
+  - CSS 分割
+  - Overview
+  - リファレンス
+translation_of: Web/CSS/CSS_Fragmentation
+---
+<div>{{cssref}}</div>
+
+<p><strong>CSS 分割</strong>は CSS のモジュールの一つで、コンテンツが<a href="/ja/docs/Web/CSS/Paged_Media">ページ</a>、領域、<a href="/ja/docs/Web/CSS/CSS_Columns">段</a>をまたがって分割された (断片化が発生した) ときにどのように表示するかを定義します。</p>
+
+<p>分割が発生するのは、インラインボックスが複数の行に渡る場合です。また、ブロックが段組みレイアウトコンテナーの中で複数の段にまたがる場合や、印刷時にページにまたがる場合です。いずれの要素の表示される断片も分割と呼ばれています。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<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 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_functions/index.html b/files/ja/web/css/css_functions/index.html
new file mode 100644
index 0000000000..6e50bcb257
--- /dev/null
+++ b/files/ja/web/css/css_functions/index.html
@@ -0,0 +1,255 @@
+---
+title: CSS 関数表記法
+slug: Web/CSS/CSS_Functions
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Function
+  - Functional Notation
+  - Functions
+  - Reference
+  - Types
+  - data types
+translation_of: Web/CSS/CSS_Functions
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 関数表記法</strong>は <a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値</a>の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">selector {
+  property: functional-notation( [argument]? [, argument]! );
+}</pre>
+
+<p>構文は、<strong>関数表記の名前</strong>から始まり、左括弧 <code>(</code> で始まります。次に記法の引数が続き、関数は閉じ括弧 <code>)</code> で終わります。</p>
+
+<p>関数は CSS のプロパティ値と同様の形式で複数の引数を取ることができます。ホワイトスペースは許可されていますが、括弧内では省略可能です。関数表記によって、複数の引数がカンマで区切られていたり、空白を使用していたりします。</p>
+
+<h2 id="Index" name="Index">索引</h2>
+
+<p>一連の CSS 仕様書で定義されている関数表記は以下のとおりです。</p>
+
+<div class="index"><span>A</span>
+
+<ul>
+ <li>{{CSSxRef("abs", "abs()")}} (math)</li>
+ <li>{{CSSxRef("acos", "acos()")}} (math)</li>
+ <li>{{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)</li>
+ <li>{{CSSxRef("asin", "asin()")}} (math)</li>
+ <li>{{CSSxRef("atan", "atan()")}} (math)</li>
+ <li>{{CSSxRef("atan2", "atan2()")}} (math)</li>
+ <li>{{CSSxRef("attr")}}</li>
+</ul>
+<span>B</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/blur", "blur()")}} (filter)</li>
+ <li>{{CSSxRef("filter-function/brightness", "brightness()")}} (filter)</li>
+</ul>
+<span>C</span>
+
+<ul>
+ <li>{{CSSxRef("calc")}} (math)</li>
+ <li>{{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)</li>
+ <li>{{CSSxRef("circle", "circle()")}} (shape)</li>
+ <li>{{CSSxRef("clamp")}} (math)</li>
+ <li>{{CSSxRef("color()")}} (colors)</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("cos", "cos()")}} (math)</li>
+ <li>{{CSSxRef("counter")}}</li>
+ <li>{{CSSxRef("counters")}}</li>
+ <li>{{CSSxRef("filter-function/contrast", "contrast()")}} (filter)</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+ <li>{{CSSxRef("cubic-bezier", "cubic-bezier()")}}</li>
+</ul>
+<span>D</span>
+
+<ul>
+ <li>{{CSSxRef("device-cmyk", "device-cmyk()")}} (colors)</li>
+ <li>{{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)</li>
+</ul>
+<span>E</span>
+
+<ul>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("env")}}</li>
+ <li>{{CSSxRef("ellipse", "ellipse()")}} (shape)</li>
+ <li>{{CSSxRef("exp", "exp()")}} (math)</li>
+</ul>
+<span>F</span>
+
+<ul>
+ <li>{{CSSxRef("fit-content")}}</li>
+ <li>{{CSSxRef("format", "format()")}}</li>
+</ul>
+<span>G</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)</li>
+</ul>
+<span>H</span>
+
+<ul>
+ <li>{{CSSxRef("hsl", "hsl()")}} (colors)</li>
+ <li>{{CSSxRef("hsla", "hsla()")}} (colors)</li>
+ <li>{{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)</li>
+ <li>{{CSSxRef("hwb", "hwb()")}} (colors)</li>
+ <li>{{CSSxRef("hypot", "hypot()")}} (math)</li>
+</ul>
+<span>I</span>
+
+<ul>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("inset()")}} (shape)</li>
+ <li>{{CSSxRef("filter-function/invert", "invert()")}} (filter)</li>
+</ul>
+<span>L</span>
+
+<ul>
+ <li>{{CSSxRef("lab", "lab()")}} (colors)</li>
+ <li>{{CSSxRef("lch", "lch()")}} (colors)</li>
+ <li>{{CSSxRef("leader", "leader()")}}</li>
+ <li>{{CSSxRef("linear-gradient")}}</li>
+ <li>{{CSSxRef("local", "local()")}}</li>
+ <li>{{CSSxRef("log", "log()")}} (math)</li>
+</ul>
+<span>M</span>
+
+<ul>
+ <li>{{CSSxRef("transform-function/matrix", "matrix()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)</li>
+ <li>{{CSSxRef("max")}} (math)</li>
+ <li>{{CSSxRef("min")}} (math)</li>
+ <li>{{CSSxRef("minmax")}} (math)</li>
+ <li>{{CSSxRef("mod", "mod()")}} (math)</li>
+</ul>
+<span>O</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/opacity", "opacity()")}} (filter)</li>
+ <li>{{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)</li>
+</ul>
+<span>P</span>
+
+<ul>
+ <li>{{CSSxRef("paint")}}</li>
+ <li>{{CSSxRef("path", "path()")}} (shape)</li>
+ <li>{{CSSxRef("transform-function/perspective", "perspective()")}} (transform)</li>
+ <li>{{CSSxRef("polygon", "polygon()")}} (shape)</li>
+ <li>{{CSSxRef("pow", "pow()")}} (math)</li>
+</ul>
+<span>R</span>
+
+<ul>
+ <li>{{CSSxRef("radial-gradient")}}</li>
+ <li>{{CSSxRef("rem", "rem()")}} (math)</li>
+ <li>{{CSSxRef("repeat")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient")}}</li>
+ <li>rgb() (colors)</li>
+ <li>rgba() (colors)</li>
+ <li>{{CSSxRef("transform-function/rotate", "rotate()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)</li>
+ <li>{{CSSxRef("round", "round()")}} (math)</li>
+</ul>
+<span>S</span>
+
+<ul>
+ <li>{{CSSxRef("filter-function/saturate", "saturate()")}} (filter)</li>
+ <li>{{CSSxRef("transform-function/scale", "scale()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)</li>
+ <li>{{CSSxRef("filter-function/sepia", "sepia()")}} (filter)</li>
+ <li>{{CSSxRef("sign", "sign()")}} (math)</li>
+ <li>{{CSSxRef("sin", "sin()")}} (math)</li>
+ <li>{{CSSxRef("transform-function/skew", "skew()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/skewX", "skewX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/skewY", "skewY()")}} (transform)</li>
+ <li>{{CSSxRef("sqrt", "sqrt()")}} (math)</li>
+ <li>{{CSSxRef("steps", "steps()")}}</li>
+ <li>{{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)</li>
+ <li>{{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)</li>
+ <li>{{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)</li>
+ <li>{{CSSxRef("symbols", "symbols()")}}</li>
+</ul>
+<span>T</span>
+
+<ul>
+ <li>{{CSSxRef("tan", "tan()")}} (math)</li>
+ <li>{{CSSxRef("target-counter", "target-counter()")}}</li>
+ <li>{{CSSxRef("target-counters", "target-counters()")}}</li>
+ <li>{{CSSxRef("target-text", "target-text()")}}</li>
+ <li>{{CSSxRef("toggle", "toggle()")}}</li>
+ <li>{{CSSxRef("transform-function/translate", "translate()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateX", "translateX()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateY", "translateY()")}} (transform)</li>
+ <li>{{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)</li>
+</ul>
+<span>U</span>
+
+<ul>
+ <li>{{CSSxRef("url()", "url()")}}</li>
+</ul>
+<span>V</span>
+
+<ul>
+ <li>{{CSSxRef("var")}}</li>
+</ul>
+</div>
+
+<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("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td><code>toggle()</code>, <code>attr()</code>, <code>calc()</code>, <code>min()</code>, <code>max()</code>, <code>clamp()</code>, <code>round()</code>, <code>mod()</code>, <code>rem()</code>, <code>mod()</code>, <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>, <code>pow()</code>, <code>sqrt()</code>, <code>hypot()</code>, <code>log()</code>, <code>exp()</code>, <code>abs()</code>, <code>sign()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td><code>calc()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数表記にカンマなしの構文を追加。<br>
+    <code>rgb()</code> と <code>hsl()</code> にアルファ値を許可し、 <code>rgba()</code> と <code>hsla()</code> をそれらの (非推奨の) 別名とした。<br>
+    <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 関数を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td><code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> の関数表記を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td><code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code> の関数表記を追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
+</ul>
diff --git a/files/ja/web/css/css_generated_content/index.html b/files/ja/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..a3b5e37910
--- /dev/null
+++ b/files/ja/web/css/css_generated_content/index.html
@@ -0,0 +1,62 @@
+---
+title: CSS 生成コンテンツ
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - CSS
+  - CSS Generated Content
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Generated_Content
+---
+<p>{{CSSRef}}</p>
+
+<p><ruby><strong>CSS 生成コンテンツ</strong><rp> (</rp><rt>CSS Generated Content</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、要素にコンテンツを追加する方法を定義します。生成されたコンテンツは、無名で置換された要素にコンテンツを追加したり、非常に限られた状況で DOM ノードのコンテンツを生成された値で置き換えたりするために使用することができます。</p>
+
+<p>詳しくは<a href="/ja/docs/Learn/CSS/Howto/Generated_content">生成コンテンツのハウツーガイド</a>や、実装情報については {{cssxref("content")}} および {{cssxref("quotes")}} プロパティをご覧ください。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+</ul>
+</div>
+
+<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 Content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Howto/Generated_content">CSS 生成コンテンツの使用</a></li>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
new file mode 100644
index 0000000000..b6a71891c9
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html
@@ -0,0 +1,613 @@
+---
+title: CSS グリッドレイアウトでの自動配置
+slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+---
+<p>CSS グリッドレイアウト仕様書には、作成したグリッド上にアイテムを正確に配置する機能に加えて、グリッドを作成したときに子アイテムの一部またはすべてを配置しなかった場合の動作を制御するルールが含まれています。一連のアイテムでグリッドを作成することで、最も簡単な方法で自動配置を確認することができます。アイテムに配置情報を与えない場合、アイテムはグリッド上の各セルに1つずつ配置されます。</p>
+
+<div id="placement_1">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p>
+</div>
+
+<h2 id="Default_rules_for_auto-placement" name="Default_rules_for_auto-placement">自動配置の既定のルール</h2>
+
+<p>上記の例でわかるように、グリッドを作成すると、すべての子アイテムが各グリッドセルに1つずつ配置されます。既定のフローでは、行ごとにアイテムを配置します。グリッドは、それぞれのアイテムを1行目のそれぞれのセルに配置します。 <code>grid-template-rows</code> プロパティを使用して追加の行を作成した場合は、グリッドはこれらの行にアイテムを配置し続けます。明示的なグリッドにすべてのアイテムを配置するのに十分な行がない場合は、新たに<em>暗黙の</em>行が作成されます。</p>
+
+<h3 id="Sizing_rows_in_the_implicit_grid" name="Sizing_rows_in_the_implicit_grid">暗黙のグリッド内での行の大きさ</h3>
+
+<p>暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっています。これは、あふれることなく、それらに追加されたコンテンツを含むことを意味します。</p>
+
+<p>しかし、<code>grid-auto-rows</code>プロパティを使用することで、これらの行の大きさを制御することができます。例えば、全ての作成された行を100ピクセルの高さにするには、次のように使います:</p>
+
+<div id="placement_2">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div&gt;One&lt;/div&gt;
+    &lt;div&gt;Two&lt;/div&gt;
+    &lt;div&gt;Three&lt;/div&gt;
+    &lt;div&gt;Four&lt;/div&gt;
+    &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p>
+</div>
+
+<p>You can use {{cssxref("minmax","minmax()")}} in your value for {{cssxref("grid-auto-rows")}} enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.</p>
+
+<div id="placement_3">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+     &lt;div&gt;One&lt;/div&gt;
+     &lt;div&gt;Two&lt;/div&gt;
+     &lt;div&gt;Three&lt;/div&gt;
+     &lt;div&gt;Four
+     &lt;br&gt;This cell
+     &lt;br&gt;Has extra
+     &lt;br&gt;content.
+     &lt;br&gt;Max is auto
+     &lt;br&gt;so the row expands.
+     &lt;/div&gt;
+     &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p>
+</div>
+
+<p>You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as <code>200px</code>. This will continue for as long as content is added to the implicit grid.</p>
+
+<div id="placement_4">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p>
+</div>
+
+<h3 id="Auto-placement_by_column" name="Auto-placement_by_column">Auto-placement by column</h3>
+
+<p>You can also ask grid to auto-place items by column. Using the property {{cssxref("grid-auto-flow")}} with a value of <code>column</code>. In this case grid will add items in rows that you have defined using {{cssxref("grid-template-rows")}}. When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with {{cssxref("grid-auto-columns")}}, this works in the same way as {{cssxref("grid-auto-rows")}}.</p>
+
+<p>In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.</p>
+
+<div id="placement_5">
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p>
+</div>
+
+<h2 id="The_order_of_auto_placed_items" name="The_order_of_auto_placed_items">The order of auto placed items</h2>
+
+<p>A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">Grid item placement algorithm</a>, however for most of us we just need to remember a few simple rules for our items.</p>
+
+<h3 id="Order_modified_document_order" name="Order_modified_document_order">Order modified document order</h3>
+
+<p>Grid places items that have not been given a grid position in what is described in the specification as “order modified document order”. This means that if you have used the <code>order</code> property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.</p>
+
+<h3 id="Items_with_placement_properties" name="Items_with_placement_properties">Items with placement properties</h3>
+
+<p>The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don’t start after the position of a placed item that comes before them.</p>
+
+<div id="placement_6">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p>
+</div>
+
+<h3 id="Deal_with_items_that_span_tracks" name="Deal_with_items_that_span_tracks">Deal with items that span tracks</h3>
+
+<p>You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the {{cssxref("grid-column-end")}} and {{cssxref("grid-row-end")}} properties and setting the value of this to <code>span 2</code>. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.</p>
+
+<p>You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a track, it will move to the next row until it finds a space the item can fit in.</p>
+
+<div id="placement_7">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p>
+</div>
+
+<h3 id="Filling_in_the_gaps" name="Filling_in_the_gaps">Filling in the gaps</h3>
+
+<p>So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don’t have a logical order and we would like to create a layout that doesn’t have gaps in it.</p>
+
+<p>To do this, add the property {{cssxref("grid-auto-flow")}} with a value of <code>dense</code> to the container. This is the same property you use to change the flow order to <code>column</code>, so if you were working in columns you would add both values <code>grid-auto-flow: column dense</code>.</p>
+
+<p>Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.</p>
+
+<div id="placement_8">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Seven&lt;/div&gt;
+   &lt;div&gt;Eight&lt;/div&gt;
+   &lt;div&gt;Nine&lt;/div&gt;
+   &lt;div&gt;Ten&lt;/div&gt;
+   &lt;div&gt;Eleven&lt;/div&gt;
+   &lt;div&gt;Twelve&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p>
+</div>
+
+<h3 id="Anonymous_grid_items" name="Anonymous_grid_items">Anonymous grid items</h3>
+
+<p>There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of <code>grid</code> to <code>display: grid</code>. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.</p>
+
+<pre class="brush: css notranslate">&lt;div class="grid"&gt;
+  I am a string and will become an anonymous item
+  &lt;div&gt;A grid item&lt;/div&gt;
+  &lt;div&gt;A grid item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.</p>
+
+<h3 id="Use_cases_for_auto-placement" name="Use_cases_for_auto-placement">Use cases for auto-placement</h3>
+
+<p>Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of <code>landscape</code> to span two column tracks. I then use <code>grid-auto-flow: dense</code> to create a densely packed grid.</p>
+
+<div id="placement_9">
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;ul class="wrapper"&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="https://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="https://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="https://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li class="landscape"&gt;&lt;img src="https://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;img src="https://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p>
+</div>
+
+<p>Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of <code>dt</code> and <code>dd</code> items. In my example I am allowing auto-placement to place the items, however I have classes that start a <code>dt</code> in column 1, and <code>dd</code> in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.</p>
+
+<div id="placement_10">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;dl&gt;
+       &lt;dt&gt;Mammals&lt;/dt&gt;
+       &lt;dd&gt;Cat&lt;/dd&gt;
+       &lt;dd&gt;Dog&lt;/dd&gt;
+       &lt;dd&gt;Mouse&lt;/dd&gt;
+       &lt;dt&gt;Fish&lt;/dt&gt;
+       &lt;dd&gt;Guppy&lt;/dd&gt;
+       &lt;dt&gt;Birds&lt;/dt&gt;
+       &lt;dd&gt;Pied Wagtail&lt;/dd&gt;
+       &lt;dd&gt;Owl&lt;/dd&gt;
+   &lt;/dl&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+</pre>
+
+<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p>
+</div>
+
+<h2 id="What_can’t_we_do_with_auto-placement_yet">What can’t we do with auto-placement (yet)?</h2>
+
+<p>There are a couple of things that often come up as questions. Currently we can’t do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said “auto-place items against the next line named “n”, and grid would then skip other lines.There is <a href="https://github.com/w3c/csswg-drafts/issues/796">an issue raised about this</a> on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.</p>
+
+<p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関連</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトの自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトと進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..0037394932
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,734 @@
+---
+title: グリッドレイアウトの基本概念
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+  - Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>は、二次元グリッドシステムを CSS にもたらします。グリッドは、主要なページ領域や小さなユーザーインターフェース要素のレイアウトに利用できます。この記事では、 CSS グリッドレイアウトと、 CSS Grid Layout Level 1 仕様の一部の用語について紹介します。この記事では、その概要を紹介し、この一連のガイドの残りで詳細を説明します。</p>
+
+<h2 id="What_is_a_grid" name="What_is_a_grid">グリッドとは何か？</h2>
+
+<p>グリッドは、列と行を定義する水平線と垂直線の集合が交差したものです。要素をグリッド上の行と列の中に配置することができます。 CSS グリッドレイアウトには次のような特徴があります。</p>
+
+<h3 id="Fixed_and_flexible_track_sizes" name="Fixed_and_flexible_track_sizes">固定と可変のトラックサイズ</h3>
+
+<p>例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます。これであるグリッドに所望のレイアウトに合うようなピクセルを設定できます。また、可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された <code>fr</code> 単位を使用することができます。</p>
+
+<h3 id="Item_placement" name="Item_placement">アイテムの配置</h3>
+
+<p>グリッドの線の番号や名前を使ってグリッドのある位置を指定してアイテムを配置することができます。グリッドには、位置が明示されていないアイテムの配置を制御するアルゴリズムも含まれています。</p>
+
+<h3 id="Creation_of_additional_tracks_to_hold_content" name="Creation_of_additional_tracks_to_hold_content">コンテンツを保持する為の追加のトラックの作成</h3>
+
+<p>グリッドレイアウトでは、明快にグリッドを定義することができます。グリッドレイアウトの仕様では必要に応じて柔軟に行や列を追加できるようになっています。「コンテナーに収まるだけ多い数の列」を追加するような機能もあります。</p>
+
+<h3 id="Alignment_control" name="Alignment_control">整列の制御</h3>
+
+<p>グリッドには整列機能が含まれており、あるグリッドエリア内でアイテムがどのように整列するのかと、グリッド全体がどのように整列するかを制御できます。</p>
+
+<h3 id="Control_of_overlapping_content" name="Control_of_overlapping_content">オーバーラップコンテンツの制御</h3>
+
+<p>グリッドセルやグリッドエリア内には複数のアイテムも配置でき、それらはお互いに部分的にオーバーラップできます。この階層化は、 {{cssxref("z-index")}} プロパティで制御できます。</p>
+
+<p>グリッドは強力な仕様であり、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>など CSS の他の部品と組み合わせると、以前は CSS での構築が不可能であったレイアウトを作成できます。これはすべて、<strong>グリッドコンテナー</strong>にグリッドを作成することから始まります。</p>
+
+<h2 id="The_Grid_container" name="The_Grid_container">グリッドコンテナー</h2>
+
+<p><em>グリッドコンテナー</em>を作成するには、要素に対して <code>display: grid</code> か <code>display: inline-grid</code> を指定します。グリッドコンテナーを作成すると、すべての<em>直接の</em>子要素が<em>グリッドアイテム</em>へと変わります。</p>
+
+<p>この例では、 wrapper クラスの div を親要素として、その内部には 5 個の子要素が含まれます。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><code>.wrapper</code> をグリッドコンテナー化します。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p>
+
+<p>すべての直接の子要素がグリッド要素になりました。それらの要素をグリッドにする前とウェブブラウザー上での見た目に変化は無いでしょう。グリッドには単一列のグリッドが作成されただけだからです。この時点で、 Firefox の開発者ツールの一つである <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> 機能が便利であることを確認できます。上記の例を Firefox で表示してグリッドを調査すると、<code>grid</code> 値の隣に小さなアイコンが表示されているでしょう。これをクリックすると、その要素上のグリッドがブラウザーウィンドウ内にオーバーレイ表示されます。</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>CSS グリッドレイアウトについて学び、使っていく中で、このツールは、グリッドに何が起こっているかを視覚的に理解する助けになるでしょう。</p>
+
+<p>この例をさらにグリッドらしくする為には、列トラックを追加する必要があります。</p>
+
+<h2 id="Grid_Tracks" name="Grid_Tracks">グリッドトラック</h2>
+
+<p>ここでは、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使用してグリッド上に行と列を定義します。これらはグリッドトラックを定義します。<em>グリッドトラック</em>は、グリッド上の任意の2本の線の間にあるスペースです。下の画像で、グリッド内の最初の行トラックががハイライトされているのを確認できるでしょう。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>先述の例に対して <code>grid-template-columns</code> プロパティを追加すると、列トラックのサイズが定義できます。</p>
+
+<p>3本の200ピクセル幅の列トラックを持つグリッドを作成しましょう。子要素はこのグリッドの各グリッドセルに 1 個ずつ配置されます。</p>
+
+<div id="grid_first">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="The_fr_Unit" name="The_fr_Unit">fr 単位</h3>
+
+<p>トラックは、どの長さの単位でも定義できます。グリッドには、柔軟なグリッドトラックを作成できるようにするため、追加の長さの単位が導入されています。新しい <code>fr</code> 単位は、グリッドコンテナー内の利用可能な空間の分数 (a fraction) を表します。次のグリッド定義は、利用可能なスペースに応じて伸縮する、幅が 3 等分されたトラックを作成します。</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>この次の例では、1 つの <code>2fr</code> トラックと 2 つの <code>1fr</code> トラックの定義を作成します。利用可能な空間は、4 つに分割されます。そのうち 2 つが最初のトラックに与えられ、残りはそれぞれ次の 2 トラックに与えられます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>最後の例では、絶対サイズのトラックを分数単位と混ぜて使用します。最初のトラックは 500px なので、この固定幅は利用可能な空間から除外されます。残りの領域は 3 つに分割され、比率に応じて 2 つの変動幅のトラックに割り当てられます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Track_listings_with_repeat_notation" name="Track_listings_with_repeat_notation">repeat() 記法によるトラック列挙</h3>
+
+<p>多くのトラックを持つ大きなグリッドのため、<code>repeat()</code> 記法を使用して、トラック列挙のすべてまたは一部を繰り返すことができます。例えば、以下のグリッド定義は:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>次のように書くこともできます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>繰り返し記法は、トラック列挙の一部にも使えます。この次の例では、はじめに 20px のトラックを持ち、続けて 6 つの <code>1fr</code> トラックのセクション、最後に 20px のトラックを持つグリッドを作成します。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できます。この次の例で、グリッドは10 のトラックで構成されており、それは<code>1fr</code> トラックに <code>2fr</code> トラックが続くパターンを5回繰り返したものです。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的と明示的なグリッド</h3>
+
+<p>上でグリッドの例を作成した時、私達は列トラックを {{cssxref("grid-template-columns")}} プロパティで具体的に定義しましたが、グリッドは勝手に行も作っていました。これらの行は暗黙的のグリッドの一部です。一方、明示的なグリッドは、{{cssxref("grid-template-columns")}} または {{cssxref("grid-template-rows")}} で定義された行と列から構成されます。</p>
+
+<p>定義されたグリッドの外側に何かを配置した場合（またはコンテンツの量のために、より多くのグリッドトラックが必要な場合）、グリッドは暗黙的なグリッドに行と列を作成します。これらのトラックは、デフォルトで自動サイズ調整されるため、サイズはトラック内のコンテンツに基づいて決まります。</p>
+
+<p>{{cssxref("grid-auto-rows")}} と {{cssxref("grid-auto-columns")}} プロパティで、暗黙的なグリッドに作成されたトラックのセットサイズを定義することもできます。</p>
+
+<p>下の例では、<code>grid-auto-rows</code> を使用して、暗黙的なグリッド内に作成されたトラックが 200px の高さになることを保証しています。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '230', '420') }}</p>
+
+<h3 id="Track_sizing_and_minmax" name="Track_sizing_and_minmax">トラックのサイズ指定と minmax()</h3>
+
+<p>明示的なグリッドのセットアップ時または自動生成された行や列のサイズを定義する時、最小サイズのトラックを与えておき、追加されたコンテンツに合わせて広げられるようにしたいでしょう。例えば、行を 100 px より小さくしたくないが、コンテンツの高さが 300 px に引き伸ばされた場合は行の高さをそのサイズに引き伸ばしたい場合です。</p>
+
+<p>グリッドでは、それを {{cssxref("minmax", "minmax()")}} 関数で解決できます。この次の例では、{{cssxref("grid-auto-rows")}} の値に <code>minmax()</code> を使用しています。自動生成された行の高さの最小値は 100px、最大値は <code>auto</code> になります。値に <code>auto</code> を使うと、この行のセルがコンテンツのサイズに応じて空間が引き伸ばされ、その高さに合わせられます。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+    &lt;p&gt;I have some more content in.&lt;/p&gt;
+    &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Track_sizing_and_minmax', '240', '470') }}</p>
+
+<h2 id="Grid_lines" name="Grid_lines">グリッド線</h2>
+
+<p>私たちがグリッドを定義する時、グリッドトラックを定義するのであり、グリッド線ではないことに注意しなければなりません。グリッドには、アイテムの配置時に使用する番号の付いた線が与えられます。3 列 2 行のグリッドには、4 本の縦線があります。</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>グリッド線の番号は、ドキュメントの書字方向に従って付けられます。左から右 (left-to-right) に書く言語では、線 1 はグリッドの左手側にあり、右から左 (right-to-left) に書く言語では、グリッドの右手側にあります。グリッド線には名前を付けることもできます。この方法については後のガイドで解説します。</p>
+
+<h3 id="Positioning_items_against_lines" name="Positioning_items_against_lines">グリッド線に対するアイテムの配置</h3>
+
+<p>グリッド線を基にした配置の詳細は、後の記事で解説します。次の例は、その簡単な方法のデモンストレーションです。アイテムの配置する時、私たちはトラックではなくグリッド線を対象にします。</p>
+
+<p>以下の例では、最初の 2 つのアイテムを、{{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の各プロパティを使用して 3 列トラックのグリッド上に配置します。左から右へ向かって、最初のアイテムは列の線 1 から列の線 4 に対して、右端のグリッド線まで配置されます。また、行の線 1 から始まり、行の線 3 で終わる 2 行のトラックに及びます。</p>
+
+<p>2 番目のアイテムは、グリッド列の線 1 から始まり、1 トラックの幅になります。これはデフォルトであるため、終わりの線を指定する必要がありません。また、行の線 3 から 5 まで、2 行トラックに及びます。他のアイテムは、それぞれグリッド上の空スペースに配置されます。</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_items_against_lines', '230', '420') }}</p>
+
+<p>Firefox の開発者ツールで <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> が使えることを忘れないでください。アイテムがグリッド線に対してどのように配置されるか知ることができます。</p>
+
+<h2 id="Grid_cells" name="Grid_cells">グリッドセル</h2>
+
+<p><em>グリッドセル</em> は、グリッド上の最も小さな単位です。コンセプトとしては、表のセルのようなものです。先述の例で、親要素のグリッドが定義されると、子アイテムが定義されたグリッドの各セルにレイアウトされる様を見てきました。下の画像では、グリッドの最初のセルをハイライトしています。</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid_areas" name="Grid_areas">グリッドエリア</h2>
+
+<p>アイテムは、行と列の複数のセルにまたがって配置でき、<em>グリッドエリア</em> を作ることができます。グリッドエリアは四角形でなければなりません。例えば L 字型の領域は作れません。ハイライトされた領域は、2 行と 2 列にまたがるトラックです。</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Gutters" name="Gutters">セル間隔</h2>
+
+<p>グリッドセル間の <em>溝</em> (Gutters) または <em>小路</em> (alleys) は、 {{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティを使用するか、短縮プロパティの {{cssxref("gap")}} で作成できます。下の例では、列間 10px、行間 <code>1em</code> の溝を作っています。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 10px;
+  row-gap: 1em;
+}
+</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> グリッドが最初にブラウザーに実装されたとき、 {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} に <code>grid-</code> の接頭辞がつき、それぞれ {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}} のようになっていました。</p>
+
+<p>ブラウザーは接頭辞を外すよう更新されつつありますが、接頭辞付きの版も安全に利用できるよう保守されるでしょう。</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  column-gap: 10px;
+  row-gap: 1em;
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Gutters') }}</p>
+
+<p>領域の前に占める溝による空間は、柔軟な長さの <code>fr</code> トラックに割り当てられ、通常のグリッドトラックのようにサイズ設定のために用いられます。しかしながら、溝の内側に何かを配置することはできません。グリッド線を基準にした配置では、溝は太線のように扱われます。</p>
+
+<h2 id="Nesting_grids" name="Nesting_grids">入れ子状のグリッド</h2>
+
+<p>グリッドアイテムはグリッドコンテナーにもなります。次の例は以前作成したもので、2 個のアイテムが配置指定された 3 列のグリッドです。この例では、最初のアイテムにサブアイテムが含まれています。これらのアイテムはグリッドの直接の子ではないので、グリッドレイアウトに関係しない通常のドキュメントフローで表示されています。</p>
+
+<div id="nesting">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>この <code>box1</code> に <code>display: grid</code> を設定すると、トラック定義を与えてグリッドにすることができます。これらは新しいグリッド上にレイアウトされます。</p>
+
+<pre class="brush: css notranslate">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.box1 {
+  grid-column: 1 / 4;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>この場合の入れ子状のグリッドは、親グリッドと関係しません。例で表示されているように、親グリッドの {{cssxref("grid-gap")}} を継承せず、入れ子状のグリッド内の線は親グリッドの線に沿いません。</p>
+
+<h3 id="Subgrid" name="Subgrid">サブグリッド</h3>
+
+<p>Level 2 のグリッド仕様書の草稿では、<ruby>サブグリッド<rp> (</rp><rt>subgrid</rt><rp>) </rp></ruby>と呼ばれる機能があり、親グリッドのトラック定義を利用した入れ子状のグリッドを作成できます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: この機能は Firefox 71 で初めて搭載され、これがサブグリッドを実装している唯一のブラウザーです。</p>
+</div>
+
+<p>現在の仕様書では、入れ子上のグリッドの例を編集して、 <code>grid-template-columns: repeat(3, 1fr)</code> のトラック定義を <code>grid-template-columns: subgrid</code> へ変更します。入れ子状のグリッドは親グリッドのトラックを利用してアイテムをレイアウトします。</p>
+
+<pre class="brush: css notranslate">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+</pre>
+
+<h2 id="Layering_items_with_z-index" name="Layering_items_with_z-index"><code>z-index</code> による項目のレイヤー化</h2>
+
+<p>グリッドアイテムは、同じセルを占有できます。行番号によるアイテム配置の例に戻り、2 個のアイテムがオーバーラップするように変更しましょう。</p>
+
+<div id="l_ex">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>アイテム <code>box2</code> が <code>box1</code> に重なり、ソースコードに書かれた順に、後のものが先のものの上に表示されます。</p>
+
+<h3 id="Controlling_the_order" name="Controlling_the_order">順序の制御</h3>
+
+<p>アイテムを上に積む順序は、配置が指定されたアイテムと同様に、<code>z-index</code> プロパティを使用して制御できます。<code>box2</code> に <code>box1</code> より下位の <code>z-index</code> 値を与えると、<code>box1</code> の奥に表示されるようになります。</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Controlling_the_order', '230', '420') }}</p>
+
+<h2 id="Next_Steps" name="Next_Steps">次のステップへ</h2>
+
+<p>この記事では、グリッドレイアウト仕様の要点だけを見てきました。コードの例を試してみてから、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">CSS グリッドレイアウトの詳細を掘り下げることの本当のスタートである、このガイドの次のステップへ</a>進んでください。</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><strong><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></strong></li>
+ <li class="toggle">
+  <details open><summary>ガイド</summary>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよびプログレッシブエンハンスメント</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">サブグリッド</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">マソンリーレイアウト</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>プロパティ</summary>
+  <ol>
+   <li><code><a href="/ja/docs/Web/CSS/align-tracks">align-tracks</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="/ja/docs/Web/CSS/column-gap">column-gap</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/gap">gap</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid">grid</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/justify-tracks">justify-tracks</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="/ja/docs/Web/CSS/masonry-auto-flow">masonry-auto-flow</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="/ja/docs/Web/CSS/row-gap">row-gap</a></code></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>用語集</summary>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+  </details>
+ </li>
+</ol>
+</section>
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
new file mode 100644
index 0000000000..2ca01d4bc6
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html
@@ -0,0 +1,713 @@
+---
+title: CSS グリッドレイアウトのボックス配置
+slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+tags:
+  - CSS グリッド
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<p>CSS グリッドレイアウトは <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a> 仕様を実装します。これはそのフレックスコンテナの中でアイテム配置のために使う <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox (ブレックスボックス)</a>  と同じ仕様です。この仕様には、異なるレイアウトメソッドすべての配置方法の詳細があります。レイアウトメソッドは、可能なら仕様に準拠し、その違い（機能と制約）に基づいて個々の振る舞いを実装します。現在、仕様書にはすべてのレイアウトメソッドの詳細がありますが、ブラウザーの実装は完全ではありません。しかしながら、CSS グリッドレイアウトメソッドは広く実装されています。</p>
+
+<p><span class="seoSummary">このガイドでは、グリッドレイアウトにおけるボックス配置がどのように機能するのか説明します。フレックスボックスのプロパティと値の機能と多くの類似点があります。</span>しかし、グリッドは二次元、フレックスボックスは一次元であるため、いくつか小さな違いがあることに気をつけてください。それではグリッド内のものを配置するときに使う 2 つの軸について見ていきましょう。</p>
+
+<h2 id="グリッドレイアウトの_2_つの軸">グリッドレイアウトの 2 つの軸</h2>
+
+<p>グリッドレイアウトでは、<em>ブロック軸</em>と<em>インライン軸</em>という 2 つの軸を利用できます。ブロック軸は、ブロックレイアウトでブロックが配置される軸です。ページ内に 2 つのパラグラフがある場合、上から下に向かって並べられますので、この方向がブロック軸となります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15963/Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p><em>インライン軸</em>はブロック軸に交差する軸です。通常、テキストはインライン方向に向かって並べられます。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>中身はグリッドエリアの中に並べることができ、グリッドトラック自体が 2 つの軸の上にあります。</p>
+
+<h2 id="ブロック軸上でのアイテムの配置">ブロック軸上でのアイテムの配置</h2>
+
+<p>{{cssxref("align-self")}} と {{cssxref("align-items")}} プロパティは、ブロック軸上の配置をコントロールします。これらはグリッドエリアの中のアイテムの配置を変更します。</p>
+
+<p>以下の例には、4 つのグリッドエリアがあります。グリッドコンテナ上で {{cssxref("align-items")}} プロパティと次の値の一つを使い、アイテムを配置しています。</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<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>{{cssxref("align-items")}} プロパティはすべての子グリッドアイテムに {{cssxref("align-self")}} プロパティを設定します。これは、グリッドアイテム上で <code>align-self</code> を使えばプロパティを個別に設定できるということです。</p>
+
+<p>次の例では、<code>align-self</code> プロパティを使い、様々な配置の値を実験します。最初のエリアで見られるのは <code>align-self</code> のデフォルトの振る舞いで、引き伸ばされています。2 つ目のアイテムは <code>align-self</code> が <code>start</code> 値を持っており、3 つ目は <code>end</code> 、4 つ目は <code>center</code> です。</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p>
+</div>
+
+<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>
+
+<h2 id="インライン軸上のアイテムの位置揃え">インライン軸上のアイテムの位置揃え</h2>
+
+<p>{{cssxref("align-items")}} と {{cssxref("align-self")}} がブロック軸上でアイテムの配置を処理するように、{{cssxref("justify-items")}} と {{cssxref("justify-self")}} は、インライン軸上で同じ動作をします。選べる値は <code>align-self</code> と同じです。</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>以下では、{{cssxref("align-items")}} と同様の例を見ることができます。今回は {{cssxref("justify-self")}} を適用しています。</p>
+
+<p>ここでもデフォルトは、固有のアスペクト比を持つアイテム以外、<code>stretch</code> です。配置の設定を変更しない場合、グリッドアイテムはグリッドエリアをカバーします。例の最初のアイテムはデフォルトの配置を表しています。</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p>
+</div>
+
+<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>
+
+<h3 id="ショートハンドプロパティ">ショートハンドプロパティ</h3>
+
+<p>{{CSSxRef("place-items")}} プロパティは {{CSSxRef("align-items")}} と {{CSSxRef("justify-items")}} のショートハンドであり、{{CSSxRef("place-self")}} は {{CSSxRef("align-self")}} と {{CSSxRef("justify-self")}} のショートハンドです。</p>
+
+<h2 id="エリア内のアイテムを中央に揃える">エリア内のアイテムを中央に揃える</h2>
+
+<p>align プロパティと justify プロパティを組み合わせると、グリッドエリアの中でアイテムを簡単に中央揃えすることができます。</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p>
+</div>
+
+<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>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>以下の例では 500 ピクセル × 500 ピクセルのグリッドコンテナがあります。3 つの行トラックと列トラックがあり、それぞれ、幅 100 ピクセル、溝 10 ピクセルです。これはグリッドコンテナ内でブロックとインラインどちらの方向にも空間があることを意味します。</p>
+
+<p><code>align-content</code> プロパティはグリッド全体のグリッドコンテナに適用されます。グリッドレイアウトでのデフォルトの振る舞いは <code>start</code> で、これにより、グリッドトラックはグリッドの左上隅にあり、グリッドラインの始まりに対して整列しています。</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p>
+
+<p>コンテナに <code>align-content</code> を追加し、値を <code>end</code> に設定すると、トラックは、すべてブロック方向の中でグリッドコンテナが終わるラインに移動します。</p>
+</div>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p>
+</div>
+
+<p>フレックスボックスのようにスペース配分する値、<code>space-between</code> 、<code>space-around</code> 、<code>space-evenly</code> を使うこともできます。{{cssxref("align-content")}} を <code>space-between</code> に更新すると、グリッド上の要素がどう配置されるかを確認できます。</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p>
+</div>
+
+<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><img alt="space-between を使用したときアイテムがどのように大きくなるかのデモ。" src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="インライン軸上のグリッドトラックの位置揃え">インライン軸上のグリッドトラックの位置揃え</h2>
+
+<p>ブロック軸で {{cssxref("align-content")}} を使うのと同様に、インライン軸では {{cssxref("justify-content")}} を使うことができます。</p>
+
+<p>同じ例を使って、{{cssxref("justify-content")}} に <code>space-around</code> を設定してみましょう。やはり、1 つ以上の列トラックにまたがるトラックが余分なスペースを得ることになります。</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p>
+</div>
+
+<h2 id="配置と自動マージン">配置と自動マージン</h2>
+
+<p>エリアの中でアイテムを配置する別の方法は、自動マージンを使用することです。コンテナブロックの左右のマージンを <code>auto</code> に設定すると、ビューポート内でレイアウトを中央に配置できます。既に知っているように、自動マージンは空きスペースのすべてを吸収します。両側のマージンを <code>auto</code> に設定すると、両マージンはスペースのすべてを取るよう試みるため、ブロックは中央に押し込まれます。</p>
+
+<p>次の例では、Item 1 に <code>auto</code> の左マージンを与えます。自動マージンは、そのアイテムのコンテンツ用の空間が割り当てられた後に残りのスペースを取るため、コンテンツがエリアの右側に押し出されます。どのように押し出されるか見てみましょう。</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  height: 500px;
+  width: 500px;
+  gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Item 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Item 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Item 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Item 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p>
+</div>
+
+<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> を使って、どのようにアイテムが整列されるか見てみましょう。</p>
+
+<p><img alt="Grid Highlighter を使って自動マージンを見ている画像。" src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="整列と書字方向">整列と書字方向</h2>
+
+<p>ここまでのすべての例は英語を使ったものであり、これは左から右へ書く言語です。物理方向で考えるとき、行の始点はグリッドの左上になります。</p>
+
+<p>CSS グリッドレイアウトとボックス配置の仕様は、CSS の書字方向と共に機能するようデザインされています。アラビア語などの右から左へ書く言語で作業する場合、グリッドの始点は右上になり、<code>justify-content: start</code> のデフォルトはグリッドトラックがグリッドの右手側から始まるようになるでしょう。</p>
+
+<p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関連</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトの自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトと進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">Masonry layout</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/align-tracks">align-tracks</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/column-gap">column-gap</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/gap">gap</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid">grid</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-area">grid-area</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column">grid-column</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row">grid-row</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template">grid-template</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></code></li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/justify-tracks">justify-tracks</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/masonry-auto-flow">masonry-auto-flow</a></code>{{Experimental_Inline}}</li>
+   <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/row-gap">row-gap</a></code></li>
+   <li></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..77237096cf
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/index.html
@@ -0,0 +1,271 @@
+---
+title: CSS グリッドレイアウト
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - Guide
+  - Layout
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS グリッドレイアウト</strong>は、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。</p>
+
+<p>表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>次の例では、最小値100ピクセル、最大値 auto で作成された列を含む、3つの行を表示します。要素は line-based placement に従ってグリッド上に配置されます。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", "440")}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("grid-template-columns")}}</li>
+ <li>{{CSSxRef("grid-template-rows")}}</li>
+ <li>{{CSSxRef("grid-template-areas")}}</li>
+ <li>{{CSSxRef("grid-template")}}</li>
+ <li>{{CSSxRef("grid-auto-columns")}}</li>
+ <li>{{CSSxRef("grid-auto-rows")}}</li>
+ <li>{{CSSxRef("grid-auto-flow")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+ <li>{{CSSxRef("grid-row-start")}}</li>
+ <li>{{CSSxRef("grid-column-start")}}</li>
+ <li>{{CSSxRef("grid-row-end")}}</li>
+ <li>{{CSSxRef("grid-column-end")}}</li>
+ <li>{{CSSxRef("grid-row")}}</li>
+ <li>{{CSSxRef("grid-column")}}</li>
+ <li>{{CSSxRef("grid-area")}}</li>
+ <li>{{CSSxRef("row-gap")}}</li>
+ <li>{{CSSxRef("column-gap")}}</li>
+ <li>{{CSSxRef("gap")}}</li>
+ <li>{{CSSxRef("masonry-auto-flow")}}</li>
+ <li>{{CSSxRef("align-tracks")}}</li>
+ <li>{{CSSxRef("justify-tracks")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_functions" name="CSS_functions">CSS 関数</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("repeat", "repeat()")}}</li>
+ <li>{{CSSxRef("minmax", "minmax()")}}</li>
+ <li>{{CSSxRef("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_data_types" name="CSS_data_types">CSS データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="Glossary_entries" name="Glossary_entries">用語集</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Lines">グリッド線</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Tracks">グリッドトラック</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Cell">グリッドセル</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Areas">グリッド領域</a></li>
+ <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Rows">グリッド行</a></li>
+ <li><a href="/ja/docs/Glossary/Grid_Column">グリッド列</a></li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置を使用したレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドと進歩的な拡張</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">サブグリッド</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">メーソンリーレイアウト</a></li>
+</ul>
+</div>
+
+<h2 id="External_resources" name="External_resources">外部リソース</h2>
+
+<ul>
+ <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">CSS Grid and IE11</a> (<a href="https://github.com/motine/css_grid_annotator">polyfill</a>)</li>
+ <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+ <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li>
+</ul>
+
+<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("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">サブグリッド</a>の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Subnav">Subnav</h2>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><strong><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></strong></li>
+ <li class="toggle">
+  <details open><summary>ガイド</summary>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>プロパティ</summary>
+  <ol>
+   <li><code><a href="/ja/docs/Web/CSS/column-gap">column-gap</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/gap">gap</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid">grid</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></code></li>
+   <li><code><a href="/ja/docs/Web/CSS/row-gap">row-gap</a></code></li>
+  </ol>
+  </details>
+ </li>
+ <li class="toggle">
+  <details open><summary>用語集</summary>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+  </details>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
new file mode 100644
index 0000000000..6358de6b22
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -0,0 +1,495 @@
+---
+title: 名前付きグリッド線を使用したレイアウト
+slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<p>前のガイドでは、グリッドトラックを定義することによって作られた線に沿ってアイテムを配置する様子と、名前の付いたテンプレート領域を使用してアイテムを配置する方法を見てきました。このガイドでは、名前付きの線を使用したときにこれら2つが共にどのように動作するかを見てみます。線に名前をつけるととても便利ですが、名前とトラックの寸法の組み合わせではもっと難解なグリッドの構文になります。いくつかの例を使ってみることで、動作がより明確かつ易しくなるでしょう。</p>
+
+<h2 id="Naming_lines_when_defining_a_grid" name="Naming_lines_when_defining_a_grid">グリッドを定義した場合の線の名前付け</h2>
+
+<p>You can assign some or all of the lines in your grid a name when you define your grid with the <code>grid-template-rows</code> and <code>grid-template-columns</code> properties. To demonstrate I’ll use the simple layout created in the guide on line-based placement. This time I’ll create the grid using named lines.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the centre block of the grid as <code>content-start</code> and <code>content-end</code> again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>Once the lines have names, we can use the name to place the item rather than the line number.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p>
+</div>
+
+<p>Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.</p>
+
+<h3 id="Giving_lines_multiple_names" name="Giving_lines_multiple_names">線に複数の名前を付ける</h3>
+
+<p>You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them <code>[sidebar-end main-start]</code>. You can then refer to that line by either of the names.</p>
+
+<h2 id="Implicit_grid_areas_from_named_lines" name="Implicit_grid_areas_from_named_lines">名前付きの行の暗黙的なグリッド領域</h2>
+
+<p>When naming the lines, I mentioned that you can name these anything you like. The name is a <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a>, an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as <code>span</code>. Idents are not quoted.</p>
+
+<p>While you can choose any name, if you append <code>-start</code> and <code>-end</code> to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have <code>content-start</code> and <code>content-end</code> both for rows and for columns. This means I get a grid area named <code>content</code>, and could place something in that area should I wish to.</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>I’m using the same grid definitions as above, however this time I am going to place a single item into the named area <code>content</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;I am placed in an area named content.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p>
+</div>
+
+<p>We don’t need to define where our areas are with <code>grid-template-areas</code> as our named lines have created an area for us.</p>
+
+<h2 id="Implicit_Grid_lines_from_named_areas" name="Implicit_Grid_lines_from_named_areas">名前付き領域からの暗黙のグリッド線</h2>
+
+<p>We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.</p>
+
+<p>In this example I have added an extra div with a class of <code>overlay</code>. We have named areas created using the <code>grid-area</code> property, then a layout created in <code>grid-template-areas</code>. The area names are:</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>This gives us column and row lines:</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>You can see the named lines in the image, note that some lines have two names - for example <code>sd-end</code> and <code>main-start</code> refer to the same column line.</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>To position <code>overlay</code> using these implicit named lines is the same as positioning an item using lines that we have named.</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;Header&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+  &lt;div class="content"&gt;Content&lt;/div&gt;
+  &lt;div class="footer"&gt;Footer&lt;/div&gt;
+  &lt;div class="overlay"&gt;Overlay&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p>
+</div>
+
+<p>Given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.</p>
+
+<h2 id="Multiple_lines_with_the_same_name_with_repeat" name="Multiple_lines_with_the_same_name_with_repeat">repeat() による同じ名前を持つ複数の線</h2>
+
+<p>If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.</p>
+
+<p>In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of <code>[col-start]</code>. This means that we will end up with a grid that has 12 column lines all named <code>col-start</code> before a <code>1fr</code> width column.</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>Once you have created the grid you can place items onto it. As we have multiple lines named <code>col-start</code> if you place an item to start after line <code>col-start</code> grid uses the first line named <code>col-start</code>, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>You can also use the <code>span</code> keyword here. My next item will be placed from the 7th line named <code>col-start</code> and span 3 lines.</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<p class="brush: html"></p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col-start line 1 to col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col-start line 7 spanning 3 lines&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p>
+</div>
+
+<p>If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower <code>1fr</code> width column named <code>col1-start</code> followed by a wider <code>3fr</code> column named <code>col2-start</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four <code>1fr</code> tracks, which each have a start and end line.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>If we write this definition out without using repeat notation it would look like this.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>If you have used a track list then you can use the <code>span</code> keyword not just to span a number of lines but also to span a number of lines of a certain name.</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col1-start line 1 to col2-start line 2&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col1-start line 2 spanning 2 lines named col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p>
+</div>
+
+<p>Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don’t need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.</p>
+
+<p>If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid “framework” is:</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;I am the header&lt;/header&gt;
+  &lt;aside class="side1"&gt;I am sidebar 1&lt;/aside&gt;
+  &lt;article class="content"&gt;I am the main article&lt;/article&gt;
+  &lt;aside class="side2"&gt;I am sidebar 2&lt;/aside&gt;
+  &lt;footer class="main-footer"&gt;I am the footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>I could then place this on my grid layout framework like this.</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p>
+
+<p>Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関連</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトの自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトと進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html
new file mode 100644
index 0000000000..2650339665
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -0,0 +1,633 @@
+---
+title: グリッドレイアウトと他のレイアウト方法との関係
+slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p>CSS グリッドレイアウトはレイアウトを行うための完全なシステムの一部として、 CSS の他の機能と一緒に動作するよう設計されました。このガイドでは、既に使われている他の技術と、どうのようにグリッドが適合するかを説明します。</p>
+
+<h2 id="Grid_and_flexbox" name="Grid_and_flexbox">グリッドとフレックスボックス</h2>
+
+<p>CSS グリッドレイアウトと<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a>の基本的な違いは、フレックスボックスは一次元 - 一列<em>又は</em>一行 - のレイアウトのために設計されたという点です。グリッドは二次元 - 行と列が同時 - のレイアウトのために設計されました。しかし、２つの仕様書はいくつかの共通の機能を共有しており、すでにフレックスボックスの使い方を学んでいるのであれば、類似性がグリッドの手がかりを助けるでしょう。</p>
+
+<h3 id="One-dimensional_vs._two-dimensional_layout" name="One-dimensional_vs._two-dimensional_layout">一次元 vs. ニ次元レイアウト</h3>
+
+<p>一次元と二次元のレイアウトの違いを示すことができる単純な例です。</p>
+
+<p>最初の例では、一連のボックスを配置するためにフレックスボックスを使用しています。コンテナーの中には五つの子項目があり、 flex プロパティ値を与えて150ピクセルの flex-basis から伸縮できるようにしています。</p>
+
+<p>{{cssxref("flex-wrap")}} プロパティを <code>wrap</code> に設定して、コンテナーの大きさが細くなりすぎて flex basis を維持することができなくなったら、項目が次の行へ折り返されるようにしています。</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 150px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>図では、2つの項目が新しい行へ折り返されているのがわかると思います。これらの項目は利用可能なスペースを共有していますが、上記の項目の下には整列してはいません。フレックスアイテムが折り返しをした時、新しい行（もしくは列として機能している時は列）のそれぞれがフレックスコンテナーになるからです。スペースの配分は行をまたがって起こります。</p>
+
+<p>よくある質問はそれらのアイテムをどのようにして並べるかです。2次元レイアウトメソッドが必要な場所では、行またはカラムによるアラインメントのコントロールが必要で、グリッドが得意な場面です。</p>
+
+<h3 id="The_same_layout_with_CSS_grids" name="The_same_layout_with_CSS_grids">CSS グリッドによる同様のレイアウト</h3>
+
+<p>次の例では、グリッドを使って同様のレイアウトを構築します。今回は3つの <code>1fr</code> 列トラックを持ちます。項目自体には何もセットする必要はりません。構築されたグリッドのセルそれぞれに項目を一つずつ配置していきます。厳格なグリッドに項目が配置されているため、行と列は整列しています。5つの項目があるので、二つ目の行にある終わりには隙間があります。</p>
+
+<div id="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>グリッドとフレックスボックスのどちらを使うかを決めるシンプルな質問です。</p>
+
+<ul>
+ <li>行<u>又は</u>列のみによってレイアウトを制御する必要がありますか。 – フレックスボックスを使いましょう</li>
+ <li>行<u>及び</u>列によりレイアウトを制御する必要がありますか。 - グリッドを使いましょう</li>
+</ul>
+
+<h3 id="Content_out_or_layout_in" name="Content_out_or_layout_in">コンテンツ外かレイアウト内か？</h3>
+
+<p>1次元 vs 2次元の区別に加えて、レイアウトのためにフレックスボックス又はグリッドを使わなければならないかどうかを決める別の方法があります。フレックスボックスはコンテンツ外から機能します。フレックスボックスの理想的な使用例は、コンテナー内で項目に等しくスペースを設定したいような場合です。コンテンツのサイズはそれぞれの項目がどのくらい個々のスペースを占めるかにより決定されます。もし項目が新しい行へ折り返されたら、行のサイズと利用可能なスペースをもとに項目の間隔が算出されます。</p>
+
+<p>グリッドはレイアウトの外から機能します。 CSS グリッドレイアウトを使ってレイアウトを作った際、自動配置ルールでアイテムを厳格なグリッドによるセルへ配置させることができます。それらはコンテンツのサイズに応じたトラックを作ることができます。しかしながら、全体のトラックも変わるでしょう。</p>
+
+<p>もしフレックスボックスを使っていていくつかの柔軟性が欠けていたら、おそらく CSS グリッドレイアウトを使う必要性を感じるでしょう。例えばフレックスアイテムの幅をパーセンテージで設定し、ある行へその他の項目とともに整列させていたら、その場合にはグリッドはより良い選択肢になるでしょう。</p>
+
+<h3 id="Box_alignment" name="Box_alignment">ボックス配置</h3>
+
+<p>フレックスボックスの最も素晴らしい特徴は、我々に適切な配置制御を与えてくれる最初のものということでした。これによりページの真ん中にボックスを置くことが簡単になりました。フレックス要素はフレックスコンテナーの高さに引き伸ばすことができ、これはつまり、同じ高さの列が可能ということです。これらは私たちが長い間求めてきたもので、少なくとも視覚効果を実現するためのさまざまな種類のハックが考え出されてきました。</p>
+
+<p>フレックスボックスの仕様による配置プロパティは <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a> と呼ばれる新しい仕様に追加されました。これはつまり、グリッドレイアウトを含む他の仕様でも使用できるということです。将来的には、他のレイアウト手法にも適用できるようになるでしょう。</p>
+
+<p>この一連のガイドの後、ボックス配置と、それがグリッドレイアウトの中でどのように動作するのかを見ていきます。今回の場合、フレックスボックスと grid の簡単な比較例を挙げます。</p>
+
+<p>一つ目のフレックスボックスを利用する例では、３つの要素を持つコンテナがあります。コンテナである<code>wrapper</code>には{{cssxref("min-height")}}が設定され、これはフレックスコンテナーの高さを決めています。コンテナには {{cssxref("align-items")}} を <code>flex-end</code> に設定してコンテナの終端に要素が並ぶようにしました。また、<code>box1</code>の{{cssxref("align-self")}}プロパティをcontainerの高さに合わせるよう<code>streach</code>へ上書きし、<code>box2</code>もコンテナの始まりから整列するにように上書きしています。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Box_alignment', '300', '230') }}</p>
+
+<h3 id="CSSグリッド上でのアラインメント">CSSグリッド上でのアラインメント</h3>
+
+<p>二つ目の例ではグリッドを使って同じレイアウトを作りましょう。今回はグリッドレイアウトを使うため、ボックスアラインメントプロパティを使います。従って、<code>flex-start</code>と<code>flex-end</code>ではなく<code>start</code>と<code>end</code>を使ってアラインメントします。グリッドレイアウトのケースでは、グリッド領域の中にアイテムをアラインメントしていきます。今回のケースでは単一のグリッドセルを作成していますが、これは複数のグリッドセルで構成された領域にもなることが可能です。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}</p>
+
+<h3 id="The_fr_unit_and_flex-basis" name="The_fr_unit_and_flex-basis"><code>fr</code> 単位と <code>flex-basis</code></h3>
+
+<p>We have already seen how the <code>fr</code> unit works to assign a proportion of available space in the grid container to our grid tracks. The <code>fr</code> unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the <code>flex</code> properties in flexbox while still enabling the creation of a layout in two dimensions.</p>
+
+<p>If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.</p>
+
+<p>In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.</p>
+
+<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4>
+
+<p>We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the <code>auto-fill</code> and <code>auto-fit</code> properties.</p>
+
+<p>In this next example, I have used the <code>auto-fill</code> keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p>
+
+<h3 id="A_flexible_number_of_tracks" name="A_flexible_number_of_tracks">柔軟なトラック数</h3>
+
+<p>This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining <code>auto-fit</code> and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with <code>minmax</code>. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be <code>1fr</code>. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the <code>1fr</code> maximum as an instruction to share out the remaining space between the items.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p>
+
+<p>We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.</p>
+
+<h2 id="Grid_and_absolutely_positioned_elements" name="Grid_and_absolutely_positioned_elements">グリッドと絶対位置指定された要素</h2>
+
+<p>Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.</p>
+
+<h3 id="A_grid_container_as_containing_block" name="A_grid_container_as_containing_block">含有ブロックとしてのグリッドコンテナ</h3>
+
+<p>To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item <code>position: absolute</code> it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.</p>
+
+<p>In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has <code>position: relative</code> and so becomes the positioning context of this item.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}</p>
+
+<p>You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.</p>
+
+<p>If we remove <code>position:</code> <code>absolute</code> from the rules for <code>.box3</code> you can see how it would display without the positioning.</p>
+
+<h3 id="A_grid_container_as_parent" name="A_grid_container_as_parent">親としてのグリッドコンテナ</h3>
+
+<p>If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove <code>position:</code> <code>relative</code> from the wrapper above, positioning context is from the viewport, as shown in this image.</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.</p>
+
+<h3 id="With_a_grid_area_as_the_parent">With a grid area as the parent</h3>
+
+<p>If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside <code>.box3</code> of the grid.</p>
+
+<p>I have given <code>.box3</code> position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three
+    &lt;div class="abspos"&gt;
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}</p>
+
+<h2 id="Grid_and_display_contents" name="Grid_and_display_contents">グリッドと <code>display: contents</code></h2>
+
+<p>A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and <code>display: contents</code>. The <code>contents</code> value of the display property is a new value that is described in the <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> as follows:</p>
+
+<blockquote>
+<p>“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”</p>
+</blockquote>
+
+<p>If you set an item to <code>display:</code> <code>contents</code> the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>If I now add <code>display:</code> <code>contents</code> to the rules for <code>box1</code>, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use <code>display:</code> <code>contents</code> in a similar way with flexbox to enable nested items to become flex items.</p>
+
+<p>As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックスガイド</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/css_grid_layout/subgrid/index.html b/files/ja/web/css/css_grid_layout/subgrid/index.html
new file mode 100644
index 0000000000..386ce3ca83
--- /dev/null
+++ b/files/ja/web/css/css_grid_layout/subgrid/index.html
@@ -0,0 +1,120 @@
+---
+title: Subgrid
+slug: Web/CSS/CSS_Grid_Layout/Subgrid
+tags:
+  - CSS
+  - CSS Display
+  - CSS Grid
+  - Guide
+  - subgrid
+translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
+---
+<p>{{CSSRef}}</p>
+
+<p>CSS Grid Layout の Level 2 は、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に <code>subgrid</code> 値を含みます。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。</p>
+
+<div class="blockIndicator warning">
+<p><strong>重要</strong>: この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装する唯一のブラウザーです。</p>
+</div>
+
+<h2 id="Introduction_to_subgrid" name="Introduction_to_subgrid">サブグリッドの導入</h2>
+
+<p>グリッドコンテナーに <code>display: grid</code> を追加する場合、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。</p>
+
+<p>グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にできます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。</p>
+
+<p><code>grid-template-columns</code> および <code>grid-template-rows</code> の両方またはどちらかに <code>subgrid</code> 値を設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。</p>
+
+<p>例えば、<code>grid-template-columns: subgrid</code> を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。ライン名は親からサブグリッドへ渡されますが、サブグリッドが独自のライン名を定義することもできます。</p>
+
+<h2 id="Subgrid_for_columns" name="Subgrid_for_columns">列のサブグリッド</h2>
+
+<p>以下の例では、幅 <code>1fr</code> の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。</p>
+
+<p>このグリッドの 2 から 7 番の列ライン、2 から 4 番の行ラインに <code>.item</code> を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に <code>.subitem</code> を置きます。</p>
+
+<p>この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+
+<p>サブグリッド内のライン番号は再び 1 番から始まるので注意してください。サブグリッド内の列ライン 1 番は、サブグリッドの最初のラインです。サブグリッド化された要素は親グリッドのライン番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上のライン番号が常に同じであることが分かります。</p>
+
+<h2 id="Subgrid_for_rows" name="Subgrid_for_rows">行のサブグリッド</h2>
+
+<p>次の例は、上記と同じ設定で、<code>grid-template-rows</code> の値に <code>subgrid</code> を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+
+<h2 id="A_subgrid_in_both_dimensions" name="A_subgrid_in_both_dimensions">列と行のサブグリッド</h2>
+
+<p>もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+
+<h3 id="No_implicit_grid_in_a_subgridded_dimension" name="No_implicit_grid_in_a_subgridded_dimension">サブグリッド化された範囲に暗黙のグリッドはありません</h3>
+
+<p>アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。</p>
+
+<p>次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+
+<p><code>grid-template-rows</code> の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+
+<h2 id="The_gap_properties_and_subgrid" name="The_gap_properties_and_subgrid">gap プロパティとサブグリッド</h2>
+
+<p>親グリッドに {{cssxref("gap")}} または {{cssxref("column-gap")}}, {{cssxref("row-gap")}} が指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに <code>gap-*</code> プロパティを使用することにより達成できます。</p>
+
+<p>これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは <code>row-gap</code> の値に <code>0</code> を設定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+
+<p>これを Firefox のグリッドインスペクターで調査すると、グリッドのラインが gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでのスペースが与えられます。</p>
+
+<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
+
+<h2 id="Named_grid_lines" name="Named_grid_lines">名付けられたグリッドライン</h2>
+
+<p>CSS のグリッドを利用する時、そのグリッドのラインに名前を付けて、ライン番号ではなく、これらの名前でアイテムを配置できます。親グリッドのライン名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親のラインに <code>col-start</code> および <code>col-end</code> という名前を付けました。これらはサブアイテムの配置に使用されます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+
+<p>また、サブグリッドにもライン名を指定できます。<code>subgrid</code> キーワードの後のラインのリストに、角括弧で囲まれたライン名を追加します。サブグリッドに 4 本のラインがある場合、次の構文ですべてのラインに名前を付けられます: <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code></p>
+
+<p>サブグリッドに指定されたラインは親で指定された任意のラインに追加されるため、そのライン名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親ラインを利用して配置し、もう一つはサブグリッドのラインを利用しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+
+<h2 id="Using_subgrids" name="Using_subgrids">サブグリッドの利用</h2>
+
+<p>サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。</p>
+
+<p>subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、<code>grid-template-rows</code> の <code>subgrid</code> 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために <code>grid-auto-rows</code> に値を与えることだけです。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">サブグリッド</a>の初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>Mozilla Developer YouTube チャンネル上の動画、<a href="https://www.youtube.com/watch?v=gmQlK3kRft4">Laying out forms using subgrid</a> と <a href="https://www.youtube.com/watch?v=lLnFtK1LNu4">Don't Wait To Use Subgrid For Better Card Layouts</a> をご覧ください。</li>
+ <li>CSSConf.eu でのプレゼンテーション <a href="https://noti.st/rachelandrew/i6gUcF/hello-subgrid">Hello Subgrid!</a></li>
+</ul>
diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..acef249aad
--- /dev/null
+++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,56 @@
+---
+title: CSS での画像スプライトの実装
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Advanced
+  - CSS
+  - CSS Images
+  - Graphics
+  - Guide
+  - NeedsContent
+  - Sprites
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<p>{{cssRef}}</p>
+
+<p><strong>画像スプライト</strong>は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。</p>
+</div>
+
+<h2 id="Implementation" name="Implementation">実装</h2>
+
+<p>例えば、 <code>toolbtn</code> クラスを持つすべてのアイテムに画像が与えられるとします。</p>
+
+<pre class="brush:css notranslate">.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。</p>
+
+<pre class="brush:css notranslate">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には <code>toolbtn</code> クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。</p>
+
+<p>同様に、ホバー状態にすることもできます。</p>
+
+<pre class="brush:css notranslate">#btn:hover {
+  background-position: <var>&lt;右方向へずらすピクセル数&gt;</var>px <var>&lt;下方向へずらすピクセル数&gt;</var>px;
+}</pre>
+
+<h2 id="See_also" name="See_also">関連記事</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li>
+</ul>
diff --git a/files/ja/web/css/css_images/index.html b/files/ja/web/css/css_images/index.html
new file mode 100644
index 0000000000..a55ff99d7d
--- /dev/null
+++ b/files/ja/web/css/css_images/index.html
@@ -0,0 +1,106 @@
+---
+title: CSS 画像
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS 画像
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><strong>CSS 画像</strong><rp> (</rp><rt>CSS Images</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-orientation")}}</li>
+ <li>{{CSSxRef("image-rendering")}}</li>
+ <li>{{CSSxRef("image-resolution")}}</li>
+ <li>{{CSSxRef("object-fit")}}</li>
+ <li>{{CSSxRef("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Functions" name="Functions">関数</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+ <li>{{CSSxRef("url", "url()")}}</li>
+ <li>{{CSSxRef("element", "element()")}}</li>
+ <li>{{CSSxRef("_image", "image()")}}</li>
+ <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></dt>
+ <dd>特殊な CSS 画像型である<em>グラデーション</em>と、その作り方や使い方を紹介します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS での画像スプライトの実装</a></dt>
+ <dd>単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。</dd>
+</dl>
+
+<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("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
+   <td>{{Spec2("Compat")}}</td>
+   <td><code>-webkit</code> の接頭辞が付いたグラデーション値の関数を標準化</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_images/using_css_gradients/index.html b/files/ja/web/css/css_images/using_css_gradients/index.html
new file mode 100644
index 0000000000..1136b5077b
--- /dev/null
+++ b/files/ja/web/css/css_images/using_css_gradients/index.html
@@ -0,0 +1,750 @@
+---
+title: CSS グラデーションの使用
+slug: Web/CSS/CSS_Images/Using_CSS_gradients
+tags:
+  - Advanced
+  - CSS
+  - CSS Images
+  - Example
+  - Gradients
+  - Guide
+  - Web
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS グラデーション</strong>は {{cssxref("&lt;gradient&gt;")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("&lt;image&gt;")}} の特殊型です。グラデーションは3種類から選択することができます。<ruby>線形<rp> (</rp><rt>linear</rt><rp>)</rp></ruby> ({{cssxref("linear-gradient")}} 関数によって生成)、<ruby>放射<rp> (</rp><rt>radial</rt><rp>)</rp></ruby> ({{cssxref("radial-gradient")}} 関数によって生成)、<ruby>扇形<rp> (</rp><rt>conic</rt><rp>)</rp></ruby> ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。</p>
+
+<p>グラデーションは、例えば背景など、 <code>&lt;image&gt;</code> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。</p>
+
+<p>最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。</p>
+
+<h2 id="Using_linear_gradients" name="Using_linear_gradients">線形グラデーションの使用</h2>
+
+<p>線形グラデーションは、直線に沿った色の帯の変化を生成します。</p>
+
+<div>
+<h3 id="A_basic_linear_gradient" name="A_basic_linear_gradient">基本的な線形グラデーション</h3>
+
+<p>グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは<ruby>色経由点<rp> (</rp><rt>color stops</rt><rp>) </rp></ruby>と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Changing_the_direction" name="Changing_the_direction">方向の変更</h3>
+
+<p>既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Diagonal_gradients" name="Diagonal_gradients">対角グラデーション</h3>
+
+<p>グラデーションを角から角へ、対角に作成することもできます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p>
+</div>
+
+<div>
+<h3 id="Using_angles" name="Using_angles">角度の指定</h3>
+
+<p>方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p>
+
+<p>角度を指定した場合、 <code>0deg</code> は下から上への垂直グラデーションを生成し、 <code>90deg</code> は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+</div>
+
+<h2 id="Declaring_colors_creating_effects" name="Declaring_colors_creating_effects">色の宣言と効果の生成</h2>
+
+<p>すべての<span class="js-about-item-abstr">CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。</span></p>
+
+<div>
+<h3 id="Using_more_than_two_colors" name="Using_more_than_two_colors">3つ以上の色の使用</h3>
+
+<p>2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Positioning_color_stops" name="Positioning_color_stops">色経由点の配置</h3>
+
+<p>色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 <code>0%</code> が開始点を示し、 <code>100%</code> が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は <code>0%</code> に、最後の色経由点は <code>100%</code> になり、他の色経由点は隣の色経由点の間の中間点になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Creating_hard_lines" name="Creating_hard_lines">不連続線の生成</h3>
+
+<p>2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である <code>50%</code> の色経由点を共有しています。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Gradient_hints" name="Gradient_hints">グラデーションのヒント</h3>
+
+<p>既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px; float: left; margin-right: 10px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Creating_color_bands_stripes" name="Creating_color_bands_stripes">色の帯と縞の生成</h3>
+
+<p>グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p>
+
+<p>上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。</p>
+
+<p>第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。</p>
+
+<p>いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。</p>
+</div>
+
+<div>
+<h3 id="Controlling_the_progression_of_a_gradient" name="Controlling_the_progression_of_a_gradient">グラデーションの進行の制御</h3>
+
+<p>既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p>
+</div>
+
+<h3 id="Overlaying_gradients" name="Overlaying_gradients">グラデーションの重ね合わせ</h3>
+
+<p>グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="layered-image"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 300px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p>
+
+<h3 id="Stacked_gradients" name="Stacked_gradients">グラデーションの積み重ね</h3>
+
+<p>グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p>
+
+<h2 id="Using_radial_gradients" name="Using_radial_gradients">放射グラデーションの使用</h2>
+
+<p>放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。</p>
+
+<h3 id="A_basic_radial_gradient" name="A_basic_radial_gradient">基本的な放射グラデーション</h3>
+
+<p>線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p>
+
+<h3 id="Positioning_radial_color_stops" name="Positioning_radial_color_stops">放射色経由点の配置</h3>
+
+<p>ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p>
+
+<h3 id="Positioning_the_center_of_the_gradient" name="Positioning_the_center_of_the_gradient">グラデーションの中心の配置</h3>
+
+<p>グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p>
+
+<h3 id="Sizing_radial_gradients" name="Sizing_radial_gradients">放射グラデーションの大きさの変更</h3>
+
+<p>線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。</p>
+
+<h4 id="Example_closest-side_for_ellipses" name="Example_closest-side_for_ellipses">例: 楕円の closest-side</h4>
+
+<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_farthest-corner_for_ellipses" name="Example_farthest-corner_for_ellipses">例: 楕円の farthest-corner</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_closest-side_for_circles" name="Example_closest-side_for_circles">例: 縁の closest-side</h4>
+
+<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p>
+
+<h3 id="Stacked_radial_gradients" name="Stacked_radial_gradients">放射グラデーションの積み重ね</h3>
+
+<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p>
+
+<h2 id="Using_conic_gradients" name="Using_conic_gradients">扇形グラデーションの使用</h2>
+
+<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。</p>
+
+<p>扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。</p>
+
+<p>In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.</p>
+
+<div>
+<h3 id="A_basic_conic_gradient" name="A_basic_conic_gradient">基本的な扇形グラデーション</h3>
+
+<p>As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Positioning_the_conic_center" name="Positioning_the_conic_center">扇形の中央の配置</h3>
+
+<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Changing_the_angle" name="Changing_the_angle">角度の変更</h3>
+
+<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}</p>
+</div>
+
+<h2 id="Using_repeating_gradients" name="Using_repeating_gradients">反復グラデーションの使用</h2>
+
+<p>The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.</p>
+
+<p>The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.</p>
+
+<div>
+<h3 id="Repeating_linear_gradients" name="Repeating_linear_gradients">反復線形グラデーション</h3>
+
+<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Multiple_repeating_linear_gradients" name="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3>
+
+<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p>
+
+<p>In this case the gradient lines are 300px, 230px, and 300px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p>
+</div>
+
+<h3 id="Plaid_gradient" name="Plaid_gradient">格子縞のグラデーション</h3>
+
+<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p>
+
+<h3 id="Repeating_radial_gradients" name="Repeating_radial_gradients">反復放射グラデーション</h3>
+
+<p>この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p>
+
+<h3 id="複数の反復放射グラデーション">複数の反復放射グラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p>
+
+<h2 id="See_also" name="See_also">関連記事</h2>
+
+<ul>
+ <li>グラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>グラデーション関連の CSS データ型: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+ <li>グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li>
+ <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li>
+</ul>
diff --git a/files/ja/web/css/css_lists_and_counters/index.html b/files/ja/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..465a46e0a0
--- /dev/null
+++ b/files/ja/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS リスト
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS リスト
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS リスト</strong><rp> (</rp><rt>CSS List</rt><rp>) </rp></ruby>は CSS モジュールの一つで、リストのレイアウトとスタイル付け方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">一貫したリストのインデント</a></dt>
+ <dd>異なるブラウザー同士でも一貫したリストのインデントを実現する方法を説明します。</dd>
+ <dt><a href="//docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンターの使用</a></dt>
+ <dd>リストのカウンターを制御するために CSS カウンタープロパティを使用する方法を説明します。</dd>
+</dl>
+
+<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 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html
new file mode 100644
index 0000000000..aae2a7cc94
--- /dev/null
+++ b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -0,0 +1,147 @@
+---
+title: CSS カウンターの使用
+slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+tags:
+  - Advanced
+  - CSS
+  - CSS Counter Styles
+  - Guide
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS カウンター</strong>では、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。</p>
+
+<h2 id="Using_counters" name="Using_counters">カウンターの使用</h2>
+
+<h3 id="Manipulating_a_counters_value" name="Manipulating_a_counter's_value">カウンターの値の操作</h3>
+
+<p>カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は <code>0</code>)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。</p>
+
+<h3 id="Displaying_a_counter" name="Displaying_a_counter">カウンターの表示</h3>
+
+<p>カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter", "counter()")}} または {{cssxref("counters", "counters()")}} 関数を使用して表示することができます。</p>
+
+<p><code>counter()</code> には 'counter(<var>name</var>)' または 'counter(<var>name</var>, <var>style</var>)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は <code>decimal</code> です)。</p>
+
+<p><code>counters()</code> 関数にも、 'counters(<var>name</var>, <var>string</var>)' または 'counters(<var>name</var>, <var>string</var>, <var>style</var>)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は <code>decimal</code> です)。</p>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<p>この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  counter-reset: section;                     /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
+}
+
+h3::before {
+  counter-increment: section;                 /* section カウンターの値に1を加算 */
+  content: counter(section);                  /* section カウンターの値を表示 */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Body&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>
+
+<h2 id="Nesting_counters" name="Nesting_counters">カウンターの入れ子</h2>
+
+<p>CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。</p>
+
+<h3 id="Example_of_a_nested_counter" name="Example_of_a_nested_counter">入れ子になったカウンターの例</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ol {
+  counter-reset: section;                /* それぞれの ol 要素に、 section
+                                            カウンターの新しいインスタンスを
+                                            生成 */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* section カウンターのこのインスタンス
+                                            のみを加算 */
+  content: counters(section, ".") " ";   /* section カウンターのすべての
+                                            インスタンスの値を、ピリオドで区切って
+                                            結合 */
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</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 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/ja/web/css/css_logical_properties/basic_concepts/index.html b/files/ja/web/css/css_logical_properties/basic_concepts/index.html
new file mode 100644
index 0000000000..e190281ba3
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/basic_concepts/index.html
@@ -0,0 +1,77 @@
+---
+title: 論理的プロパティと値の基本概念
+slug: Web/CSS/CSS_Logical_Properties/Basic_concepts
+tags:
+  - CSS
+  - CSS 論理的プロパティ
+  - Guide
+  - 書字方向
+  - 概念
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">「論理的プロパティと値」仕様書では、 CSS のたくさんのプロパティや値のフローに関する対応付けを紹介しています。この記事はこの仕様書を紹介し、フローに関するプロパティと値を説明します。</p>
+
+<h2 id="Why_do_we_need_logical_properties" name="Why_do_we_need_logical_properties">なぜ論理的プロパティが必要なのか</h2>
+
+<p>CSS は従来、画面の物理的な方向に沿って寸法を取っていました。従って、ボックスを {{CSSxRef("width")}} および {{CSSxRef("height")}} を用いて記述したり、アイテムを <code>top</code> および <code>left</code> で配置したり、 left で浮動させたり、境界、マージン、パディングを <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> で割り当てたりします。<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a>はこれらの物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義します。 — 例えば <code>start</code> と <code>end</code> は <code>left</code> と <code>right</code>/<code>top</code> と <code>bottom</code> に対応します。</p>
+
+<p>なぜこれらの対応付けが必要なのかは以下の通りです。 CSS グリッドを使用したレイアウトがあり、グリッドコンテナーに幅が設定されていて、アイテムを配置するために {{CSSxRef("align-self")}} および {{CSSxRef("justify-self")}} を使用していたとします。これらのプロパティはフローに相対的です。 — <code>justify-self: start</code> はインライン方向の始点にアイテムを配置し、 <code>align-self: start</code> はブロック方向の始点にアイテムを配置します。</p>
+
+<p><img alt="横書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>このコンポーネントの書字方向を、 <code>vertical-rl</code> を {{CSSxRef("writing-mode")}} プロパティに設定することで変更すると、配置は同様の方向で動作し続けます。インライン方向は垂直になり、ブロック方向は水平になります。しかし、幅がコンテナーの水平の寸法で割り当てられており、寸法が論理的またはテキストの流れではなく物理的な方向に結び付けられているため、グリッドは同じようには見えません。</p>
+
+<p><img alt="縦書きモードでのグリッド" src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p><code>width</code> プロパティの代わりに論理的プロパティである {{CSSxRef("inline-size")}} を使用すれば、コンポーネントは表示される書字方向が何であっても同じように動作するようになります。</p>
+
+<p><img alt="縦書きモードでのグリッドレイアウト" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>以下のライブデモを試してみることができます。 <code>.box</code> の <code>writing-mode</code> を <code>vertical-rl</code> から <code>horizontal-tb</code> へ変更して、プロパティが変わるとどのようにレイアウトが変わるかを確認することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p>When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.</p>
+
+<h2 id="Block_and_inline_dimensions" name="Block_and_inline_dimensions">ブロック方向とインライン方向</h2>
+
+<p>A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of <code>block</code> and <code>inline</code> rather than <code>right</code> and <code>left</code>/<code>top</code> and <code>bottom</code> when aligning items.</p>
+
+<p>The <code>inline</code> dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is <em>horizontal</em>. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now <em>vertical</em>, as lines in that writing mode run vertically.</p>
+
+<p>The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.</p>
+
+<p>The below diagram shows the inline and block directions in a horizontal writing mode:</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>This diagram shows block and inline in a vertical writing mode:</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Browser_support" name="Browser_support">ブラウザーの互換性</h2>
+
+<p>Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the <a href="/ja/docs/Web/CSS/CSS_Logical_Properties#Reference">reference here on MDN</a> you will see that Edge is the only modern browser currently missing these.</p>
+
+<p>There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse <code>margin</code> for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p>
+</div>
+
+<h3 id="Testing_for_browser_support" name="Testing_for_browser_support">ブラウザーの互換性のテスト</h3>
+
+<p>You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the <code>width</code> to <code>auto</code> and the <code>inline-size</code> to the original <code>width</code> value.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスレイアウトのボックス配置</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Understanding Logical Properties and Values</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">書字方向</a></li>
+</ul>
diff --git a/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html
new file mode 100644
index 0000000000..c245570080
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/floating_and_positioning/index.html
@@ -0,0 +1,139 @@
+---
+title: 浮動と位置指定の論理的プロパティ
+slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+tags:
+  - CSS
+  - CSS 論理的プロパティ
+  - Guide
+  - ガイド
+  - 位置指定
+  - 浮動
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>には、 {{cssxref("float")}} および {{cssxref("clear")}} の物理的な値の論理的な対応付けと、<a href="/ja/docs/Web/CSS/CSS_Positioning">位置指定レイアウト</a>で使用する位置指定プロパティを含んでいます。このガイドはこれらの使い方を見てみます。</p>
+
+<h2 id="Mapped_properties_and_values" name="Mapped_properties_and_values">マッピングされるプロパティと値</h2>
+
+<p>以下の表はこのガイドで物理的なマッピングに沿って議論されるプロパティや値を説明しています。水平方向の {{cssxref("writing-mode")}} は、左書きを想定しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">論理的プロパティまたは値</th>
+   <th scope="col">物理的プロパティまたは値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("float")}}: inline-start</td>
+   <td>{{cssxref("float")}}: left</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("float")}}: inline-end</td>
+   <td>{{cssxref("float")}}: right</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}: inline-start</td>
+   <td>{{cssxref("clear")}}: left</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}: inline-end</td>
+   <td>{{cssxref("clear")}}: right</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-start")}}</td>
+   <td>{{cssxref("left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-end")}}</td>
+   <td>{{cssxref("right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-start")}}</td>
+   <td>{{cssxref("top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-end")}}</td>
+   <td>{{cssxref("bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}: start</td>
+   <td>{{cssxref("text-align")}}: left</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}: end</td>
+   <td>{{cssxref("text-align")}}: right</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>これらの対応付けられたプロパティに加えて、ブロック方向やインライン方向を示すことができる一括指定プロパティがいくつかあります。これらは {{cssxref("inset")}} プロパティを除いて物理的なプロパティに対応付けられていません。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">論理的プロパティ</th>
+   <th scope="col">目的</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("inset-inline")}}</td>
+   <td>上記のインライン方向における両方の inset 値を同時に設定します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block")}}</td>
+   <td>上記のブロック方向における両方の inset 値を同時に設定します。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset")}}</td>
+   <td>4つの inset 値をすべて同時に設定し、複数値の物理的な対応付けを行います。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Float_and_clear_example" name="Float_and_clear_example">浮動と解除の例</h2>
+
+<p>{{cssxref("float")}} および {{cssxref("clear")}} プロパティで用いられる物理的な値 <code>left</code>, <code>right</code>, <code>both</code> です。論理的プロパティの仕様書は、 <code>inline-start</code> および <code>inline-end</code> の値を <code>left</code> および <code>right</code> に対応付けて定義しています。</p>
+
+<p>下記の例では、二つのボックスがあります。 — 一つ目は <code>float: left</code> で、二つ目は <code>float: inline-start</code> で浮動させています。 <code>writing-mode</code> を <code>vertical-rl</code> に変更したり、 <code>direction</code> を <code>rtl</code> に変更したりすると、 left で浮動させたボックスは常に左にくっつきますが、 <code>inline-start</code> で浮動させたアイテムは <code>direction</code> や <code>writing-mode</code> に従います。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
+
+<h2 id="Example_Inset_properties_for_positioned_layout" name="Example_Inset_properties_for_positioned_layout">例: 位置指定レイアウトにおける inset プロパティ</h2>
+
+<p>一般的に位置指定では、要素を含むブロックに対して相対的に要素を配置することができます。基本的に、通常のフローに基づいてアイテムが配置された場所に対して相対的にアイテムを挿入します。これを行うために、歴史的には {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} の物理的なプロパティを使用してきました。</p>
+
+<p>これらのプロパティは、長さまたはパーセント値を値として取り、ユーザーの画面寸法に関連します。</p>
+
+<p>論理的プロパティの仕様書では、指定した書字方向におけるテキストの流れに関連した位置合わせを行いたい場合のために、新しいプロパティが作成されました。これらは {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} になります。</p>
+
+<p>以下の例では、 <code>inset-block-start</code> と <code>inset-inline-end</code> プロパティを使用して、青枠を灰色の点線で囲まれた領域 (<code>position: relative</code>) の内側に絶対位置を使用して配置しています 。 <code>writing-mode</code> プロパティを <code>vertical-rl</code> に変更するか、 <code>direction: rtl</code> を追加して、フロー相対ボックスがテキストの方向に従う様子を見てみましょう。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
+
+<h2 id="New_two-_and_four-value_shorthands" name="New_two-_and_four-value_shorthands">新しい2または4値の一括指定</h2>
+
+<p>仕様書の他のプロパティと同様に、いくつかの新しい一括指定プロパティがあり、一度に 2 つまたは 4 つの値を設定することができます。</p>
+
+<ul>
+ <li>{{cssxref("inset")}} — 物理的な対応付けを使用して四辺をすべて設定します。</li>
+ <li>{{cssxref("inset-inline")}} — 論理的なインライン方向の内側の距離を両方設定します。</li>
+ <li>{{cssxref("inset-block")}} — 論理的なブロック方向の内側の距離を両方設定します。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 論理的プロパティ仕様書をを実装しているブラウザーは、これまでのところ直接マッピングを実装しており、新しい一括指定は実装していません。詳細については、各プロパティページのリファレンスにあるブラウザーの互換性データの節を参照してください。</p>
+</div>
+
+<h2 id="Example_Logical_values_for_text-align" name="Example_Logical_values_for_text-align">例: text-align の論理値</h2>
+
+<p>{{cssxref("text-align")}} プロパティは、テキストの方向に関連する論理値を持っています。 <code>left</code> と <code>right</code> に代わり、 <code>start</code> と <code>end</code> を使用することができます。以下の例では、最初のブロックで <code>text-align: right</code>、2番目のブロックで <code>text-align: end</code> を設定しています。</p>
+
+<p><code>direction</code> の値を <code>rtl</code> に変更すると、最初のブロックでは配置が右に留まりますが、2番目のブロックでは論理的な末尾が左になることがわかります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
+
+<p>これは、物理的な方向ではなく、先頭と末尾を使用したボックス配置を使用した場合に、より一貫性のある方法で動作します。</p>
diff --git a/files/ja/web/css/css_logical_properties/index.html b/files/ja/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..71c78974aa
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/index.html
@@ -0,0 +1,178 @@
+---
+title: CSS 論理的プロパティと値
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logical Properties
+  - CSS 論理的プロパティ
+  - Landing
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><ruby><strong>CSS 論理的プロパティと値</strong><rp> (</rp><rt>CSS Logical Properties and Values</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> のモジュールの一つで、論理的プロパティと値を導入して、物理的ではなく論理的に方向や寸法をマッピングして、レイアウトを制御することができるようにします。</p>
+
+<p>このモジュールは以前に <abbr title="Cascading Stylesheets">CSS</abbr> 2.1 で定義されたプロパティについて、論理的なプロパティと値を定義します。論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になります。</p>
+
+<h3 id="Block_vs._inline" name="Block_vs._inline">ブロックとインライン</h3>
+
+<p>論理プロパティと値は、<em>ブロック</em>と<em>インライン</em>という抽象的な用語を使用して、流れに対する方向を記述します。これらの用語の物理的な意味は、<a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a>に依存します。</p>
+
+<dl>
+ <dt id="block-dimension">ブロック方向</dt>
+ <dd>行内のテキストの流れとは垂直の方向、つまり、横書きでは垂直方向、縦書きでは水平方向です。標準的な英語のテキストでは、垂直方向になります。</dd>
+ <dt id="inline-dimension">インライン方向</dt>
+ <dd>行内のテキストの流れと平行の方向、つまり、横書きでは水平方向、縦書きでは垂直方向です。標準的な英語のテキストでは、水平方向になります。</dd>
+</dl>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties_for_sizing" name="Properties_for_sizing">寸法のプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}}</li>
+ <li>{{CSSxRef("inline-size")}}</li>
+ <li>{{CSSxRef("max-block-size")}}</li>
+ <li>{{CSSxRef("max-inline-size")}}</li>
+ <li>{{CSSxRef("min-block-size")}}</li>
+ <li>{{CSSxRef("min-inline-size")}}</li>
+</ul>
+</div>
+
+<h3 id="Properties_for_margins_borders_and_padding" name="Properties_for_margins_borders_and_padding">マージン、境界、パディングのプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}}</li>
+ <li>{{CSSxRef("border-block-color")}}</li>
+ <li>{{CSSxRef("border-block-end")}}</li>
+ <li>{{CSSxRef("border-block-end-color")}}</li>
+ <li>{{CSSxRef("border-block-end-style")}}</li>
+ <li>{{CSSxRef("border-block-end-width")}}</li>
+ <li>{{CSSxRef("border-block-start")}}</li>
+ <li>{{CSSxRef("border-block-start-color")}}</li>
+ <li>{{CSSxRef("border-block-start-style")}}</li>
+ <li>{{CSSxRef("border-block-start-width")}}</li>
+ <li>{{CSSxRef("border-block-style")}}</li>
+ <li>{{CSSxRef("border-block-width")}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
+ <li>{{CSSxRef("border-inline")}}</li>
+ <li>{{CSSxRef("border-inline-color")}}</li>
+ <li>{{CSSxRef("border-inline-end")}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}}</li>
+ <li>{{CSSxRef("border-inline-start")}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}}</li>
+ <li>{{CSSxRef("border-inline-style")}}</li>
+ <li>{{CSSxRef("border-inline-width")}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
+ <li>{{CSSxRef("margin-block")}}</li>
+ <li>{{CSSxRef("margin-block-end")}}</li>
+ <li>{{CSSxRef("margin-block-start")}}</li>
+ <li>{{CSSxRef("margin-inline")}}</li>
+ <li>{{CSSxRef("margin-inline-end")}}</li>
+ <li>{{CSSxRef("margin-inline-start")}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} キーワード)</span></li>
+ <li>{{CSSxRef("padding-block")}}</li>
+ <li>{{CSSxRef("padding-block-end")}}</li>
+ <li>{{CSSxRef("padding-block-start")}}</li>
+ <li>{{CSSxRef("padding-inline")}}</li>
+ <li>{{CSSxRef("padding-inline-end")}}</li>
+ <li>{{CSSxRef("padding-inline-start")}}</li>
+</ul>
+</div>
+
+<h3 id="Properties_for_floating_and_positioning" name="Properties_for_floating_and_positioning">浮動と位置指定のプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
+ <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
+ <li>{{CSSxRef("inset")}}</li>
+ <li>{{CSSxRef("inset-block")}}</li>
+ <li>{{CSSxRef("inset-block-end")}}</li>
+ <li>{{CSSxRef("inset-block-start")}}</li>
+ <li>{{CSSxRef("inset-inline")}}</li>
+ <li>{{CSSxRef("inset-inline-end")}}</li>
+ <li>{{CSSxRef("inset-inline-start")}}</li>
+</ul>
+</div>
+
+<h3 id="Other_properties" name="Other_properties">その他のプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> および <span style="white-space: nowrap;"><code>inline-start</code> キーワード)</span></li>
+ <li>{{CSSxRef("overflow-block")}}</li>
+ <li>{{CSSxRef("overflow-inline")}}</li>
+ <li>{{CSSxRef("overscroll-behavior-block")}}</li>
+ <li>{{CSSxRef("overscroll-behavior-inline")}}</li>
+ <li>{{CSSxRef("resize")}} (<code>block</code> and <span style="white-space: nowrap;"><code>inline</code> keywords)</span></li>
+ <li>{{CSSxRef("text-align")}} (<code>end</code> および <span style="white-space: nowrap;"><code>start</code> キーワード)</span></li>
+</ul>
+</div>
+
+<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨になったプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-end")}} {{Experimental_Inline}} に置き換え)</span></li>
+ <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-block-start")}} {{Experimental_Inline}} に置き換え)</span></li>
+ <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-end")}} {{Experimental_Inline}} に置き換え)</span></li>
+ <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">({{CSSxRef("inset-inline-start")}} {{Experimental_Inline}} に置き換え)</span></li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">論理的プロパティと値の基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Sizing">寸法の論理的プロパティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding">マージン、境界、パディングの論理的プロパティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning">浮動と位置指定の論理的プロパティ</a></li>
+</ul>
+
+<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("CSS Logical Properties")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>全般的な対応:</p>
+
+<ul>
+ <li>Firefox はプロパティの対応付けに対応しています。 — 物理的なものに論理的なものに直接対応付けます。</li>
+ <li>Chrome はバージョン69から、プロパティの対応付けに対応しました。</li>
+ <li>Edge はバージョン79から Chrome と同様に対応しています。</li>
+ <li>Firefox 66 は二つの値の一括指定の対応を導入し、 Chrome ではフラグで隠しています。</li>
+ <li>Internet Explorer は対応していません。</li>
+</ul>
+
+<p>互換性情報全体は、それぞれのプロパティページを参照してください。</p>
diff --git a/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html
new file mode 100644
index 0000000000..cf4cf1ac51
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/margins_borders_padding/index.html
@@ -0,0 +1,298 @@
+---
+title: マージン、境界、パディングの論理的プロパティ
+slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+tags:
+  - CSS
+  - CSS 論理的プロパティ
+  - ガイド
+  - 書字方向
+  - 概念
+translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><ruby><a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値仕様書</a><rp> (</rp><rt>Logical Properties and Values specification</rt><rp>) </rp></ruby>では、それぞれのマージン、境界、パディングのプロパティおよびその一括指定について、フローに関連する対応付けを定義します。</p>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティと値</a>のメインページを見ると、たくさんのプロパティが並んでいます。これは多くがマージン、境界、パディングのそれぞれの辺についての4つの個別指定値と、すべてを一括指定するものであるためです。</p>
+
+<h2 id="Mappings_for_margins_borders_and_padding" name="Mappings_for_margins_borders_and_padding">マージン、境界、パティングの対応付け</h2>
+
+<p>The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the {{cssxref("writing-mode")}} in use is <code>horizontal-tb</code> — with a left to right direction. The inline direction therefore runs horizontally — left to right — and {{cssxref("margin-inline-start")}} would be equivalent to {{cssxref("margin-left")}}.</p>
+
+<p>If you were using a <code>horizontal-tb</code> writing mode with a right-to-left text direction then {{cssxref("margin-inline-start")}} would be the same as {{cssxref("margin-right")}}, and in a vertical writing mode it would be the same as using {{cssxref("margin-top")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">論理的プロパティ</th>
+   <th scope="col">物理的プロパティ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block-end")}}</td>
+   <td>{{cssxref("border-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-color")}}</td>
+   <td>{{cssxref("border-bottom-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-style")}}</td>
+   <td>{{cssxref("border-bottom-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-width")}}</td>
+   <td>{{cssxref("border-bottom-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start")}}</td>
+   <td>{{cssxref("border-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-color")}}</td>
+   <td>{{cssxref("border-top-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-style")}}</td>
+   <td>{{cssxref("border-top-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-width")}}</td>
+   <td>{{cssxref("border-top-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end")}}</td>
+   <td>{{cssxref("border-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-color")}}</td>
+   <td>{{cssxref("border-right-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-style")}}</td>
+   <td>{{cssxref("border-right-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-width")}}</td>
+   <td>{{cssxref("border-right-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start")}}</td>
+   <td>{{cssxref("border-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-color")}}</td>
+   <td>{{cssxref("border-left-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-style")}}</td>
+   <td>{{cssxref("border-left-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-width")}}</td>
+   <td>{{cssxref("border-left-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-start-radius")}}</td>
+   <td>{{cssxref("border-top-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-start-radius")}}</td>
+   <td>{{cssxref("border-top-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-end")}}</td>
+   <td>{{cssxref("margin-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-start")}}</td>
+   <td>{{cssxref("margin-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-end")}}</td>
+   <td>{{cssxref("margin-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-start")}}</td>
+   <td>{{cssxref("margin-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-end")}}</td>
+   <td>{{cssxref("padding-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-start")}}</td>
+   <td>{{cssxref("padding-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-end")}}</td>
+   <td>{{cssxref("padding-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-start")}}</td>
+   <td>{{cssxref("padding-left")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There are also some additional shorthands, made possible because we have the ability to target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">プロパティ</th>
+   <th scope="col">目的</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block")}}</td>
+   <td>Sets {{cssxref("border-color")}}, {{cssxref("border-style")}}, and {{cssxref("border-width")}} for both block borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-color")}}</td>
+   <td>Sets <code>border-color</code> for both block borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-style")}}</td>
+   <td>Sets <code>border-style</code> for both block borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-width")}}</td>
+   <td>Sets <code>border-width</code> for both block borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline")}}</td>
+   <td>Sets <code>border-color</code>, <code>-style</code>, and <code>-width</code> for both inline borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-color")}}</td>
+   <td>Sets <code>border-color</code> for both inline borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-style")}}</td>
+   <td>Sets <code>border-style</code> for both inline borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-width")}}</td>
+   <td>Sets <code>border-width</code> for both inline borders.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block")}}</td>
+   <td>Sets all the block {{cssxref("margin")}}s.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline")}}</td>
+   <td>Sets all the inline <code>margin</code>s.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block")}}</td>
+   <td>Sets the block {{cssxref("padding")}}.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline")}}</td>
+   <td>Sets the inline <code>padding</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Margin_examples" name="Margin_examples">マージンの例</h2>
+
+<p>The mapped margin properties of {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, and {{cssxref("margin-inline-end")}} can be used instead of their physical counterparts.</p>
+
+<p>In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border in order to make the margin more obvious to see.</p>
+
+<p>One box uses physical properties and the other logical properties. Try changing the {{cssxref("direction")}} property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.</p>
+
+<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Margin_shorthands" name="Margin_shorthands">マージンの一括指定</h3>
+
+<p>As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, {{cssxref("margin-inline")}} and {{cssxref("margin-block")}}, which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.</p>
+
+<p>In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.</p>
+
+<pre class="brush: css">.box {
+  margin-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The shorthand properties <code>margin-inline</code> and <code>margin-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p>
+</div>
+
+<h2 id="Padding_examples" name="Padding_examples">パディングの例</h2>
+
+<p>The mapped padding properties of {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, and {{cssxref("padding-inline-end")}} can be used instead of their physical counterparts.</p>
+
+<p>In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a <code>writing-mode</code> of <code>horizontal-tb</code>, both boxes should appear the same.</p>
+
+<p>Try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.</p>
+
+<p>You can also try changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>. Again, notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Padding_shorthands" name="Padding_shorthands">パディングの一括指定</h3>
+
+<p>As with margin, there are two-value shorthands for padding — {{cssxref("padding-inline")}} and {{cssxref("padding-block")}} — which allow you to set the padding of the two inline, and two block dimensions, respectively.</p>
+
+<p>In a horizontal <code>writing-mode</code> this CSS would apply <code>5px</code> of padding to the top of the box and 10px of padding to the bottom:</p>
+
+<pre class="brush: css">.box {
+  padding-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The shorthand properties <code>padding-inline</code> and <code>padding-block</code> shipped in Firefox 66. As these are new properties check browser support before using.</p>
+</div>
+
+<h2 id="Border_examples" name="Border_examples">境界の例</h2>
+
+<p>The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.</p>
+
+<p>The demo below uses some longhands and three shorthand values. As with the other demos try changing the <code>direction</code> property to <code>rtl</code> to cause the boxes to display in a right-to-left direction, or changing the <code>writing-mode</code> from <code>horizontal-tb</code> to <code>vertical-rl</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+
+<h3 id="New_border_shorthands" name="New_border_shorthands">新しい境界の一括指定</h3>
+
+<p>There are two-value shorthands to set the width, style and, color of the block or inline dimension, and two-value shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.</p>
+
+<pre class="brush: css">.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: these two value shorthands shipped in Firefox 66, check browser support before using as other browsers may not have implemented them yet.</p>
+</div>
+
+<h3 id="Flow_relative_border-radius_properties" name="Flow_relative_border-radius_properties">フローに関連した border-radius プロパティ</h3>
+
+<p>The specification has fairly recently added flow-relative values for the {{cssxref("border-radius")}} longhands. These have not yet been implemented by any browser. The below example, in a horizontal <code>writing-mode</code>, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.</p>
+
+<pre class="brush: css">.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}</pre>
+
+<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax" name="Indicating_logical_values_for_the_4-value_shorthand_syntax">4つの値の一括指定構文についての論理値による指定</h2>
+
+<p>The specification makes a suggestion for the four-value shorthands such as the <code>margin</code> property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in <a href="https://github.com/w3c/csswg-drafts/issues/1282">this issue</a>.</p>
+
+<p>Using any four-value shorthand such as margin, padding, or border will currently use the physical versions, so if following the flow of the document is important, use the longhand properties for the time being.</p>
diff --git a/files/ja/web/css/css_logical_properties/sizing/index.html b/files/ja/web/css/css_logical_properties/sizing/index.html
new file mode 100644
index 0000000000..d6cbf58fb6
--- /dev/null
+++ b/files/ja/web/css/css_logical_properties/sizing/index.html
@@ -0,0 +1,93 @@
+---
+title: 寸法の論理的プロパティ
+slug: Web/CSS/CSS_Logical_Properties/Sizing
+tags:
+  - CSS
+  - CSS 論理的プロパティ
+  - Guide
+  - 寸法
+  - 書字方向
+translation_of: Web/CSS/CSS_Logical_Properties/Sizing
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、ページ上の要素の寸法の設定に使用する、物理的な方向のプロパティと論理的なプロパティのフローに関連した対応付けを説明します。</p>
+
+<p>アイテムの寸法を指定するときに、<a href="https://drafts.csswg.org/css-logical/">論理的プロパティと値</a>仕様書により、水平・垂直の物理的な長さ (左や右など) に関連する物理的な寸法ではなく、テキストの流れ (インラインとブロック) に関連した寸法を示すことができます。これらのフローに関連した対応付けは、私たちの大多数にとって普通であることもあるので、デザインでは物理的・論理的の両方の寸法を使用することができます。書字方向がどうであっても物理的な長さに関連した機能が使用したい場合もあるでしょう。</p>
+
+<h2 id="Mappings_for_dimensions" name="Mappings_for_dimensions">長さへの対応付け</h2>
+
+<p>以下の表は、論理的なプロパティと物理的なプロパティの対応付けを示しています。この対応付けは、英語やアラビア語のような <code>horizontal-tb</code> の書字方向を想定しており、この場合は {{CSSxRef("width")}} が {{CSSxRef("inline-size")}} に対応付けられます。</p>
+
+<p>縦書きモードの場合は、 {{CSSxRef("inline-size")}} は {{CSSxRef("height")}} に対応付けられます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">論理的プロパティ</th>
+   <th scope="col">物理的プロパティ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("inline-size")}}</td>
+   <td>{{CSSxRef("width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("block-size")}}</td>
+   <td>{{CSSxRef("height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-inline-size")}}</td>
+   <td>{{CSSxRef("min-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-block-size")}}</td>
+   <td>{{CSSxRef("min-height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-inline-size")}}</td>
+   <td>{{CSSxRef("max-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-block-size")}}</td>
+   <td>{{CSSxRef("max-height")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Width_and_height_example" name="Width_and_height_example">幅と高さの例</h2>
+
+<p>{{CSSxRef("width")}} と {{CSSxRef("height")}} の論理的な対応付けでは、 {{CSSxRef("inline-size")}} がインライン方向の長さを設定し、 {{CSSxRef("block-size")}} がブロック方向の長さを設定します。英語の場合は、 <code>width</code> を <code>inline-size</code> で、 <code>height</code> を <code>block-size</code> で置き換えると同じレイアウトになります。</p>
+
+<p>以下のライブデモでは、書字方向を <code>horizontal-tb</code> に設定しました。これを <code>vertical-rl</code> に変更すると、最初の例 — <code>width</code> と <code>height</code> を使用したもの — では、テキストが縦書きになるにもかかわらず、それぞれの方向が同じ寸法です。二番目の例 — <code>inline-size</code> と <code>block-size</code> を使用したもの — は、ブロック全体が回転したようにテキストの方向に従います。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+
+<h2 id="Min-width_and_min-height_example" name="Min-width_and_min-height_example">最小幅と最小高さの例</h2>
+
+<p>{{CSSxRef("min-width")}} と {{CSSxRef("min-height")}} も、 {{CSSxRef("min-inline-size")}} と {{CSSxRef("min-block-size")}} に対応付けられます。これらは <code>inline-size</code> および <code>block-size</code> プロパティと同様に動作しますが、固定の寸法ではなく最小寸法を設定します。</p>
+
+<p>最初の例のように、以下の例を <code>vertical-rl</code> に変更してみて、その作用を確認してみてください。最初の例では <code>min-height</code> を使用しており、二番目の例では <code>min-block-size</code> を使用しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+
+<h2 id="Max-width_and_max-height_example" name="Max-width_and_max-height_example">最大幅と最大高さの例</h2>
+
+<p>最後に {{CSSxRef("max-inline-size")}} と {{CSSxRef("max-block-size")}} を、 {{CSSxRef("max-width")}} と {{CSSxRef("max-height")}} の論理的な置き換えとして使用することができます。以下の例を前と同様に操作してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+
+<h2 id="Logical_keywords_for_resize" name="Logical_keywords_for_resize">大きさ変更の論理キーワード</h2>
+
+<p>{{CSSxRef("resize")}} プロパティは、アイテムの大きさが変わるかどうかを物理的な値である <code>horizontal</code> および <code>vertical</code> で指定します。 <code>resize</code> プロパティは論理的なキーワード値にも対応しています。 <code>resize: inline</code> を使用すると、インライン方向の大きさが変わることを許可し、 <code>resize: block</code> を使用すると、ブロック方向の大きさが変わることを許可します。</p>
+
+<p>both のキーワード値は物理的または論理的に考えて動作します。これは両方を同時に設定します。以下の例を実行してみてください。</p>
+
+
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+
+<div class="blockIndicator warning">
+<p>なお、現在のところ大きさ変更の論理的プロパティは Firefox のみが対応しています。</p>
+</div>
diff --git a/files/ja/web/css/css_masking/index.html b/files/ja/web/css/css_masking/index.html
new file mode 100644
index 0000000000..4f61247d07
--- /dev/null
+++ b/files/ja/web/css/css_masking/index.html
@@ -0,0 +1,77 @@
+---
+title: CSS マスク
+slug: Web/CSS/CSS_Masking
+tags:
+  - CSS
+  - CSS マスク
+  - Overview
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Masking
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS マスク</strong><rp> (</rp><rt>CSS Masking</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、マスク、クリップを含め、可視要素の一部または全部のを隠すための方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("clip")}} {{deprecated_inline}}</li>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("clip-rule")}}</li>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-border")}}</li>
+ <li>{{cssxref("mask-border-mode")}}</li>
+ <li>{{cssxref("mask-border-outset")}}</li>
+ <li>{{cssxref("mask-border-repeat")}}</li>
+ <li>{{cssxref("mask-border-slice")}}</li>
+ <li>{{cssxref("mask-border-source")}}</li>
+ <li>{{cssxref("mask-border-width")}}</li>
+ <li>{{cssxref("mask-clip")}}</li>
+ <li>{{cssxref("mask-composite")}}</li>
+ <li>{{cssxref("mask-image")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+ <li>{{cssxref("mask-origin")}}</li>
+ <li>{{cssxref("mask-position")}}</li>
+ <li>{{cssxref("mask-repeat")}}</li>
+ <li>{{cssxref("mask-size")}}</li>
+ <li>{{cssxref("mask-type")}}</li>
+</ul>
+</div>
+
+<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("CSS Masks")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="mask_プロパティ"><code>mask</code> プロパティ</h3>
+
+<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.properties.mask")}}</p>
+</div>
diff --git a/files/ja/web/css/css_miscellaneous/index.html b/files/ja/web/css/css_miscellaneous/index.html
new file mode 100644
index 0000000000..2a3fbf6c93
--- /dev/null
+++ b/files/ja/web/css/css_miscellaneous/index.html
@@ -0,0 +1,37 @@
+---
+title: CSS雑題
+slug: Web/CSS/CSS_Miscellaneous
+tags:
+  - CSS
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Miscellaneous
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">このページでは、非常に実験的または他の分類に適合しない CSS プロパティを扱います。</span></p>
+
+
+
+<h2 id="Reference" name="Reference">参照</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("all")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">手引き</h2>
+
+<p><em>なし。</em></p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p><em>上掲のプロパティは互いにほとんど無関係です。仕様は個々の記事を参照して下さい。</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p><em>上掲のプロパティは互いにほとんど無関係です。ブラウザーで利用できるかは個々の記事を参照して下さい。</em></p>
diff --git a/files/ja/web/css/css_motion_path/index.html b/files/ja/web/css/css_motion_path/index.html
new file mode 100644
index 0000000000..c1d5dbeb21
--- /dev/null
+++ b/files/ja/web/css/css_motion_path/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS モーションパス
+slug: Web/CSS/CSS_Motion_Path
+tags:
+  - CSS
+  - CSS Motion Path
+  - Experimental
+  - Guide
+  - Motion Path
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Motion_Path
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p><ruby><strong>モーションパス</strong><rp> (</rp><rt>Mortion Path</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、任意のグラフィックオブジェクトを独自の経路に沿って動作させるためのものです。</p>
+
+<p>この概念は、ある経路に従って動作する要素をアニメーションさせたい場合、以前は裁量権がアニメーションの推移や位置などしかなかったのですが、これは理想的はなく、単純な動作しかできませんでした。 {{cssxref("offset-path")}} によって、任意の形状の特定の経路を定義することができます。そして、 {{cssxref("offset-distance")}} により経路に沿って動かすことができ、 {{cssxref("offset-rotate")}} を用いて任意の位置での向きを選択することができます。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<p>{{EmbedLiveSample('Basic_example', '100%', 150)}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-anchor")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-path")}}</li>
+ <li>{{cssxref("offset-position")}}</li>
+ <li>{{cssxref("offset-rotate")}}</li>
+</ul>
+</div>
+
+<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('Motion Path Level 1')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<h3 id="offset_property" name="offset_property">offset プロパティ</h3>
+
+<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.properties.offset-path")}}</p>
+</div>
diff --git a/files/ja/web/css/css_namespaces/index.html b/files/ja/web/css/css_namespaces/index.html
new file mode 100644
index 0000000000..e008415c5d
--- /dev/null
+++ b/files/ja/web/css/css_namespaces/index.html
@@ -0,0 +1,55 @@
+---
+title: CSS 名前空間
+slug: Web/CSS/CSS_Namespaces
+tags:
+  - CSS
+  - CSS 名前空間
+  - Reference
+  - Web
+  - XML
+  - ウェブ
+  - 概要
+translation_of: Web/CSS/CSS_Namespaces
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 名前空間</strong><rp> (</rp><rt>CSS Namespaces</rt><rp>) </rp></ruby>は、 CSS の中で <a href="/ja/docs/Namespaces">XML 名前空間</a>を指定できるようにするための CSS モジュールです。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@namespace")}}</li>
+</ul>
+</div>
+
+<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 Namespaces")}}</td>
+   <td>{{Spec2("CSS3 Namespaces")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="namespace_規則"><code>@namespace</code> 規則</h3>
+
+<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.at-rules.namespace")}}</p>
+</div>
diff --git a/files/ja/web/css/css_overflow/index.html b/files/ja/web/css/css_overflow/index.html
new file mode 100644
index 0000000000..b34d3a40a6
--- /dev/null
+++ b/files/ja/web/css/css_overflow/index.html
@@ -0,0 +1,87 @@
+---
+title: CSS Overflow
+slug: Web/CSS/CSS_Overflow
+tags:
+  - CSS
+  - Guide
+  - overflow
+  - scrollbars
+  - scrolling
+translation_of: Web/CSS/CSS_Overflow
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Overflow</strong> モジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。</p>
+
+<h2 id="Ink_overflow_and_scrollable_overflow" name="Ink_overflow_and_scrollable_overflow">インクオーバーフローとスクロール可能なオーバーフロー</h2>
+
+<p>CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。1つ目は<strong>インクオーバーフロー</strong>と呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出したグリフ、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。</p>
+
+<p>CSS で時に管理しなければならないオーバーフローを<strong>スクロール可能なオーバーフロー</strong>と呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。</p>
+
+<h2 id="Basic_example" name="Basic_example">基本的な例</h2>
+
+<p>次のインタラクティブなデモでは、 <code>overflow</code> プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-block")}}</li>
+ <li>{{CSSxRef("overflow-inline")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("block-overflow")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("line-clamp")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("continue")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Non-standard_properties" name="Non-standard_properties">標準外のプロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li>
+</ul>
+</div>
+
+<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 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>
+    <p>構文を1つだけでなく1つまたは2つのキーワードに変更した</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>スクロールバーの外見を制御する {{CSSxRef("scrollbar-width")}} および {{CSSxRef("scrollbar-color")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/css_pages/index.html b/files/ja/web/css/css_pages/index.html
new file mode 100644
index 0000000000..59b983eca7
--- /dev/null
+++ b/files/ja/web/css/css_pages/index.html
@@ -0,0 +1,75 @@
+---
+title: CSS ページ化メディア
+slug: Web/CSS/CSS_Pages
+tags:
+  - CSS
+  - CSS ページ付きメディア
+  - CSS ページ化メディア
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Pages
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS ページ化メディア</strong><rp> (</rp><rt>CSS Paged Media</rt><rp>) </rp></ruby>は、ページ切り替えを扱う方法を定義する CSS のモジュールです。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li> </li>
+</ul>
+</div>
+
+<h3 id="At-rules" name="At-rules">@-規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref('@page')}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-classes" name="Pseudo-classes">疑似クラス</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref(':blank')}}</li>
+ <li>{{cssxref(':first')}}</li>
+ <li>{{cssxref(':left')}}</li>
+ <li>{{cssxref(':right')}}</li>
+</ul>
+</div>
+
+<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 Paged Media')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_positioning/index.html b/files/ja/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..fbfc022492
--- /dev/null
+++ b/files/ja/web/css/css_positioning/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS 位置指定レイアウト
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS 位置指定レイアウト
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 位置指定レイアウト</strong><rp> (</rp><rt>CSS Positioned Layout</rt><rp>) </rp></ruby>は CSS モジュールの一つで、ページ上での要素の位置指定方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></dt>
+ <dd>重ね合わせコンテキストの記述法と Z 順の動作方法の説明を、いくつかの例と共に紹介します。</dd>
+</dl>
+
+<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 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..db4d102e1b
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,164 @@
+---
+title: z-index の使用
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Reference
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{cssref}}</div>
+
+<p>この記事の最初の部分、<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>は、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、<a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素に {{cssxref("z-index")}} プロパティを使用して行うことができます。</p>
+
+<p><code>z-index</code> プロパティは整数値 (正の数、ゼロ、負の数) で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。</p>
+
+<ul>
+ <li>最下位レイヤー <em>(観ている人から一番遠い)</em></li>
+ <li>...</li>
+ <li>Layer -3</li>
+ <li>Layer -2</li>
+ <li>Layer -1</li>
+ <li>Layer 0 <em>(既定の描画レイヤー)</em></li>
+ <li>Layer 1</li>
+ <li>Layer 2</li>
+ <li>Layer 3</li>
+ <li>...</li>
+ <li>最上位レイヤー <em>(観ている人に一番近い)</em></li>
+</ul>
+
+<div class="note">
+<p><strong>注:</strong></p>
+
+<ul>
+ <li>z-index プロパティが定義されていなければ、要素は既定の描画レイヤー 0 (ゼロ) に描画されます。</li>
+ <li>同じ <code>z-index</code> 値を持つ要素が複数あれば (＝同じレイヤー上にある場合)、 <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>で説明した重ね合わせ規則が当てはまります。</li>
+</ul>
+</div>
+
+<p>次の例では、レイヤーの重なり順が <code>z-index</code> を使って決め直されています。#5 の <code>z-index</code> は 、位置指定要素でないため効果を持ちません。</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a> : 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2014 年 11 月 3 日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..cd1337f9a5
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,49 @@
+---
+title: CSS の z-index を理解する
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Reference
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<div>{{cssref}}</div>
+
+<p>最も基本的な場合では、 <a href="/ja/docs/Web/HTML">HTML</a> のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。<span class="seoSummary"> {{cssxref("z-index")}} 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。</span></p>
+
+<blockquote>
+<p><em>CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。</em></p>
+</blockquote>
+
+<p>(<a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a> より)</p>
+
+<p>これは、 CSS のスタイル規則によって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の重ね合わせ順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の <code>z-index</code> プロパティで制御できます。</p>
+
+<p><code>z-index</code> を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振舞いをします。しかし、 <code>z-index</code> を HTML 要素の複雑な階層に適用するとき、その振舞いは理解や予測がしづらくなることがあります。これは重ね合わせの規則が複雑であるためです。実際、 CSS 仕様書ではこれらの規則をもっと分かりやすく説明するために、専用の章である <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> が占められています。</p>
+
+<p>この記事では、単純化といくつかの例によって、こうした規則の説明を行なってみます。</p>
+
+<ol>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li>
+</ol>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2005年7月9日</li>
+</ul>
+
+<p><small><em>著者のメモ: Wladimir Palant と Rod Whiteley、レビューありがとう。</em></small></p>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
new file mode 100644
index 0000000000..375d11f2a4
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
@@ -0,0 +1,148 @@
+---
+title: 浮動ブロックの重ね合わせ
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Reference
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<div>{{cssref}}</div>
+
+<p><ruby>浮動<rp> (</rp><rt>floated</rt><rp>) </rp></ruby>ブロックについては、重ね合わせ順序が少し異なります。浮動ブロックは位置指定なしのブロックと位置指定ブロックの間に配置されます。</p>
+
+<ol>
+ <li>ルート要素の背景と境界</li>
+ <li><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のブロックの子孫、 HTML 内での出現順</li>
+ <li><em>浮動ブロック</em></li>
+ <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li>
+</ol>
+
+<p>実際、以下の例に見られるように、位置指定なしのブロック (DIV #4) の背景と境界は、完全に浮動ブロックの影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。</p>
+
+<ol>
+ <li>ルート要素の背景と境界</li>
+ <li><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のブロックの子孫、 HTML 内での出現順</li>
+ <li>浮動ブロック</li>
+ <li><em><a href="/ja/docs/Web/CSS/position#static">位置指定なし</a>のインライン要素の子孫</em></li>
+ <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li>
+</ol>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 250)}}</p>
+
+<div class="note">
+<p><strong>注:</strong> 位置指定なしのブロック (DIV #4) の <code>opacity</code> の値を変更すると、そのブロックの背景と境界が、浮動ブロックや位置指定ブロックの上に飛び出し、おかしな結果になります。これは、仕様書の中で、 <code>opacity</code> の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです (<a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> を参照してください)。</p>
+</div>
+
+<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="flo1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+
+&lt;div id="flo2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #6&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+} </pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">z-index なしの重ね合わせ</a>: <code>z-index</code> が使用されない場合の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2014 年 11 月 3 日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..430a63eca1
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,138 @@
+---
+title: 重ね合わせコンテキストの例 1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Understanding_CSS_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></p>
+
+<h2 id="Stacking_context_example_1" name="Stacking_context_example_1">重ね合わせコンテキストの例 1</h2>
+
+<p>基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。</p>
+
+<p>唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。</p>
+
+<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p>DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。</p>
+
+<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p>さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。</p>
+
+<p><img alt="重ね合わせコンテキストの例 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p>最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #3 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。</p>
+
+<p>重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:</p>
+
+<ul>
+ <li>ルートの重ね合わせコンテキスト
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>注:</strong> DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2005年7月9日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
new file mode 100644
index 0000000000..a99befee8d
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
@@ -0,0 +1,143 @@
+---
+title: 重ね合わせコンテキストの例 2
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Understanding_CSS_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/Understanding_z_index">CSS の z-index を理解する</a></p>
+
+<h2 id="Stacking_context_example_2" name="Stacking_context_example_2">重ね合わせコンテキストの例 2</h2>
+
+<p>これはとても簡単な例ですが、<em>重ね合わせコンテキスト</em>の概念を理解するカギになります。前の例には同じ 4 つの DIV 要素がありましたが、今度は両方の階層構造で <code>z-index</code> プロパティが設定されています。</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '352', '270') }}</p>
+
+<p>DIV #2 (z-index: 2) が DIV #3 (z-index: 1) よりも上にあることがわかります。これは、どちらも同じ重ね合わせコンテキスト（ルートのもの）に属していて、z-index 値が要素の重なり方を決めているからです。</p>
+
+<p>変に思えるかもしれないのは、<code>z-index</code> の値に関わらず、DIV #2 (z-index: 2) が DIV #4 (z-index: 10) よりも上にあることです。この理由は、これらの要素が同一の重ね合わせコンテキストに属していないためです。DIV #4 は DIV #3 によって作られた重ね合わせコンテキストに所属していて、以前の説明にあるように DIV #3 (とその内部にあるものすべて) は DIV #2 よりも下にあります。</p>
+
+<p>状況をもっとよく理解するために、重ね合わせコンテキストの階層構造をご覧ください:</p>
+
+<ul>
+ <li>ルートの重ね合わせコンテキスト
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>注:</strong> 一般に、 HTML の階層構造は重ね合わせコンテキストの階層構造と異なることを忘れないほうが良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。</div>
+
+<h2 id="Example_source_code" name="Example_source_code">例のソースコード</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div1"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #1&lt;/span&gt;&lt;br /&gt;
+        position: relative;
+        &lt;div id="div2"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #2&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 2;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;br /&gt;
+
+    &lt;div id="div3"&gt;&lt;br /&gt;
+        &lt;span class="bold"&gt;DIV #3&lt;/span&gt;&lt;br /&gt;
+        position: relative;&lt;br /&gt;
+        z-index: 1;
+        &lt;div id="div4"&gt;&lt;br /&gt;
+            &lt;span class="bold"&gt;DIV #4&lt;/span&gt;&lt;br /&gt;
+            position: absolute;&lt;br /&gt;
+            z-index: 10;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2005年7月9日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
new file mode 100644
index 0000000000..ab325c9242
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
@@ -0,0 +1,191 @@
+---
+title: 重ね合わせコンテキストの例 3
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Understanding_CSS_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<div>{{cssref}}</div>
+
+<p>« <a href="/ja/docs/Web/CSS">CSS</a> « <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS の z-index を理解する</a></p>
+
+<h2 id="Stacking_context_example_3" name="Stacking_context_example_3">重ね合わせコンテキストの例 3</h2>
+
+<p>この最後の例では、複数の階層を持つ HTML 構造内で、位置指定された要素を組み合わせたときと、 <code>z-index</code> がクラスセレクターを使って設定されたとき、発生する問題を示します。</p>
+
+<p>位置指定された DIV 要素で作られた、三階層の階層メニューを一例として見てみましょう。第二階層と第三階層の DIV 要素は、マウスが親要素をホバーしたり、クリックしたりすると現れます。通常この種類のメニューはクライアントサイドかサーバーサイドのどちらかでスクリプトにより生成されます。このためスタイルルールは id セレクターではなく、クラスセレクターで割り当てられます。</p>
+
+<p>もし 3 つのメニュー階層が部分的に重なると、重なりの管理が問題になるかもしれません。</p>
+
+<p>{{ EmbedLiveSample('Example_source_code', '320', '330') }}</p>
+
+<p>第一階層のメニューは relative で位置指定されているだけなので、重ね合わせコンテキストは作られません。</p>
+
+<p>第二階層のメニューは、親要素内で absolute で位置指定されています。これを第一階層のすべてのメニューより上に置くために、<code>z-index</code> が使われています。問題は第二階層のメニューそれぞれに重ね合わせコンテキストが作られることと、第三階層のメニューが自分の親要素に属していることです。</p>
+
+<p>したがって第三階層のメニューは後ろにある第二階層のメニューより下に重なりますが、これは第二階層のメニューがすべて同一の <code>z-index</code> 値を持っていて、デフォルトの重ね合わせ規則が適用されるからです。</p>
+
+<p>状況をもっとよく理解できるよう、重ね合わせコンテキストの階層図を用意しました。</p>
+
+<ul>
+ <li>ルートの重ね合わせコンテキスト
+  <ul>
+   <li>LEVEL #1
+    <ul>
+     <li>LEVEL #2 (z-index: 1)
+      <ul>
+       <li>LEVEL #3</li>
+       <li>...</li>
+       <li>LEVEL #3</li>
+      </ul>
+     </li>
+     <li>LEVEL #2 (z-index: 1)</li>
+     <li>...</li>
+     <li>LEVEL #2 (z-index: 1)</li>
+    </ul>
+   </li>
+   <li>LEVEL #1</li>
+   <li>...</li>
+   <li>LEVEL #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) <code>z-index</code> 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。</p>
+
+<div class="note"><strong>注:</strong> ソースコードを見ると、absolute で位置指定されたコンテナーとなる要素内に、第二階層と第三階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。</div>
+
+<h2 id="Example_source_code" name="Example_source_code">例のソースコード</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+
+   &lt;div id="container1"&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+
+         &lt;div id="container2"&gt;
+
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+
+         &lt;/div&gt;
+
+      &lt;/div&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+      &lt;/div&gt;
+
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2005年7月9日</li>
+</ul>
+</div>
+
+<p><strong>注</strong>: 実は、サンプル画像は間違っているようです。第二階層が第三階層に重複しているのは、第二階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。</p>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..b076f8b7c2
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,127 @@
+---
+title: z-index なしの重ね合わせ
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Reference
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<div>{{cssref}}</div>
+
+<p>どの要素にも {{cssxref("z-index")}} プロパティが指定されていない場合、要素は以下の順序に (下から上に) 重ね合わせられます。</p>
+
+<ol>
+ <li>ルート要素の背景と境界</li>
+ <li><a href="/ja/docs/Web/CSS/position#static">位置指定なしの</a>ブロックの子孫、 HTML 内での出現順</li>
+ <li><a href="/ja/docs/Web/CSS/position#Types_of_positioning">位置指定</a>要素、 HTML 内での出現順</li>
+</ol>
+
+<p>{{cssxref("order")}} プロパティによって {{cssxref("flex")}} コンテナーの中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。</p>
+
+<p>以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の4つの要素の下に描かれます。</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Source_code_for_the_example" name="Source_code_for_the_example">例のソースコード</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="abs1" class="absolute"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="rel1" class="relative"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="rel2" class="relative"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="abs2" class="absolute"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="sta1" class="static"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: static;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の追加</a>: <code>z-index</code> を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>: 重ね合わせコンテキストについてのメモ</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの z-index</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の z-index</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2014 年 11 月 3 日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..57daec3c78
--- /dev/null
+++ b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,241 @@
+---
+title: 重ね合わせコンテキスト
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+tags:
+  - Advanced
+  - CSS
+  - Reference
+  - z-index
+  - ガイド
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{cssref}}</div>
+
+<p><ruby><strong>重ね合わせコンテキスト</strong><rp> (</rp><rt>Stacking context</rt><rp>) </rp></ruby>は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有します。</p>
+
+<h2 id="The_stacking_context" name="The_stacking_context">重ね合わせコンテキスト</h2>
+
+<p>この記事の前の部分である <a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index の使用</a>では、ある要素の描画順はそれらの <code>z-index</code> の値に影響を受けていました。これは、要素が<em>重ね合わせコンテキスト</em>を生じさせる特別なプロパティを持っていたからです。</p>
+
+<p>重ね合わせコンテキストは以下のような場面で、文書の随所に様々な要素によって構成されます。</p>
+
+<ul>
+ <li>文書のルート要素 (<code>&lt;html&gt;</code>)</li>
+ <li>{{cssxref("position")}} の値が <code>absolute</code> または <code>relative</code> であり、かつ {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素</li>
+ <li>{{cssxref("position")}} の値が <code>fixed</code> または <code>sticky</code> の要素 (sticky はすべてのモバイルブラウザーにありますが、古いデスクトップブラウザーにはありません)。</li>
+ <li>フレックス ({{cssxref("flexbox")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素。</li>
+ <li>グリッド ({{cssxref("grid")}}) コンテナーの子であり、 {{cssxref("z-index")}} の値が <code>auto</code> 以外の要素。</li>
+ <li>{{cssxref("opacity")}} の値が <code>1</code> 未満である要素 (<a href="http://www.w3.org/TR/css3-color/#transparency">不透明度の仕様</a>をご覧ください)。</li>
+ <li>{{cssxref("mix-blend-mode")}} の値が <code>normal</code> 以外の要素</li>
+ <li>以下のプロパティ値が <code>none</code> 以外の要素。
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("isolation")}} の値が <code>isolate</code> である要素。</li>
+ <li>{{cssxref("-webkit-overflow-scrolling")}} の値が <code>touch</code> である要素。</li>
+ <li>{{cssxref("will-change")}} の値が、初期値以外で重ね合わせコンテキストを作成する任意のプロパティを指定している要素 (<a href="https://dev.opera.com/articles/ja/css-will-change-property/">この記事</a>を参照)。</li>
+ <li>{{cssxref("contain")}} の値が <code>layout</code> または <code>paint</code> であるか、これらのどちらかを含む複合値 (すなわち <code>contain: strict</code>, <code>contain: content</code>) を持つ要素。</li>
+</ul>
+
+<p>重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の <code>z-index</code> 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。</p>
+
+<p>まとめると、</p>
+
+<ul>
+ <li>重ね合わせコンテキストは他の重ね合わせコンテキストに含めることができ、その結果重ね合わせコンテキストの階層構造ができます。</li>
+ <li>重ね合わせコンテキストはすべて、その兄弟要素と完全に独立しています。重ね合わせ処理では、子孫要素だけが考慮されます。</li>
+ <li>重ね合わせコンテキストははめ込み式です。要素の中身が重ねられた後、その要素がまるごと、今度は親の重ね合わせコンテキストの重ね合わせ順の中にあるとみなされます。</li>
+</ul>
+
+<div class="note"><strong>注:</strong> 重ね合わせコンテキストを作れるのが一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに<em>同化される</em>、と言えます。</div>
+
+<h2 id="The_example" name="The_example">例</h2>
+
+<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>この例では、配置要素はすべて、位置と <code>z-index</code> の値によって、それ自身の重ね合わせコンテキストを作ります。重ね合わせコンテキストの階層構造が、次のように構成されます。</p>
+
+<ul>
+ <li>ルート要素
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>重要なのは、 DIV #4, DIV #5, DIV #6 は DIV #3 の子要素なので、DIV #3 の内側で重なり方が完全に決まることです。一旦 DIV #3 内部の重ね合わせと描画が終われば、DIV #3 はルート要素に丸ごと渡され、兄弟要素との重ね合わせ処理が行われます。</p>
+
+<div class="note">
+<p><strong>注:</strong></p>
+
+<ul>
+ <li>DIV #4 は DIV #1 の下に描画されます。これは、DIV #1 の z-index (5) はルート要素の重ね合わせコンテキストでだけ有効な値で、DIV #4 の z-index (6) は DIV #3 の重ね合わせコンテキストでだけ有効な値だからです。DIV #4 は DIV #3 の内部にあり、DIV #3 は DIV #1 よりも小さな z-index 値を持っているので、DIV #4 は DIV #1 の下になります。</li>
+ <li>同じ理由で DIV #2 (z-index 2) は DIV #5 (z-index 1) の下に描画されます。これは DIV #5 が DIV #3 に含まれていて、DIV #3は DIV #2 より高い z-index 値を持っているからです。</li>
+ <li>DIV #3 の z-index は 4 ですが、この値は DIV #4、DIV #5、DIV #6 の z-index とは独立しています。異なる重ね合わせコンテキストに含まれるためです。</li>
+ <li>Z軸方向に重なった要素の<em>描画順序</em>の簡単な計算方法は、それがバージョン番号のようなものを持っていると考えることです。親要素のメジャーバージョン番号の下に、子要素のマイナーバージョン番号があるものとします。この方法で、 z-index 1 を持つ要素 (DIV #5) がどうやって z-index 2 を持つ要素 (DIV #2) の上になるのか、そして、 z-index 6 を持つ要素 (DIV #4) がどうやって z-index 5 を持つ要素 (DIV #1) の下になるのか、簡単にわかります。用意した例では次のようになります (以下は最終的な描画順に並べています)。
+  <ul>
+   <li>ルート要素
+    <ul>
+     <li>DIV #2 - z-index は 2</li>
+     <li>DIV #3 - z-index は 4
+      <ul>
+       <li>DIV #5 - z-index は 1、描画順は 4.1 なので、 z-index が 4 である要素の下に重なる</li>
+       <li>DIV #6 - z-index は 3、描画順は 4.3 なので、 z-index が 4 である要素の下に重なる</li>
+       <li>DIV #4 - z-index は 6、描画順は 4.6 なので、 z-index が 4 である要素の下に重なる</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index は 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3>
+
+<pre class="brush: css notranslate">* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index"><code>z-index</code> なしの重ね合わせ</a>: 既定の重ね合わせ規則</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">浮動ブロックの重ね合わせ</a>: 浮動要素が重ね合わせでどのように扱われるか</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index"><code>z-index</code> の使用</a>: z-index を使って既定の重ね合わせ変更する方法</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">重ね合わせコンテキストの例 1</a>: 2階層の HTML 構造で、最終階層の <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">重ね合わせコンテキストの例 2</a>: 2階層の HTML 構造、全レベルの <code>z-index</code></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">重ね合わせコンテキストの例 3</a>: 3階層の HTML 構造、第2階層の <code>z-index</code></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">原典情報</h2>
+
+<ul>
+ <li>原著者: Paolo Lombardi</li>
+ <li>この記事は原著者が <a class="external" href="http://www.yappy.it">YappY</a> のためにイタリア語で書いた記事の英訳の邦訳です。<a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> の条件に従う限り、全内容の共有を認めます。</li>
+ <li>最終更新日: 2005年7月9日</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_properties_reference/index.html b/files/ja/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..bfec5f1653
--- /dev/null
+++ b/files/ja/web/css/css_properties_reference/index.html
@@ -0,0 +1,312 @@
+---
+title: CSS プロパティリファレンス
+slug: Web/CSS/CSS_Properties_Reference
+tags:
+  - CSS
+  - スタイル
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<h2 id="Common_CSS_Properties_Reference" name="Common_CSS_Properties_Reference">一般的な CSS プロパティリファレンス</h2>
+
+<p>下記は最も一般的な CSS プロパティと、 JavaScript からアクセスする際に使用される等価な DOM 表記の基本的な一覧です。</p>
+
+<div class="note"><strong>メモ:</strong> このリストは完全ではありません。 CSS プロパティについては<a class="internal" href="/ja/docs/Web/CSS/Reference">主要な CSS リファレンス</a>と <a class="internal" href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a>をご覧ください。リファレンス記事はすべてのプロパティの使い方の例も含んでいます。</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>background</td>
+   <td>background</td>
+  </tr>
+  <tr>
+   <td>background-attachment</td>
+   <td>backgroundAttachment</td>
+  </tr>
+  <tr>
+   <td>background-color</td>
+   <td>backgroundColor</td>
+  </tr>
+  <tr>
+   <td>background-image</td>
+   <td>backgroundImage</td>
+  </tr>
+  <tr>
+   <td>background-position</td>
+   <td>backgroundPosition</td>
+  </tr>
+  <tr>
+   <td>background-repeat</td>
+   <td>backgroundRepeat</td>
+  </tr>
+  <tr>
+   <td>border</td>
+   <td>border</td>
+  </tr>
+  <tr>
+   <td>border-bottom</td>
+   <td>borderBottom</td>
+  </tr>
+  <tr>
+   <td>border-bottom-color</td>
+   <td>borderBottomColor</td>
+  </tr>
+  <tr>
+   <td>border-bottom-style</td>
+   <td>borderBottomStyle</td>
+  </tr>
+  <tr>
+   <td>border-bottom-width</td>
+   <td>borderBottomWidth</td>
+  </tr>
+  <tr>
+   <td>border-color</td>
+   <td>borderColor</td>
+  </tr>
+  <tr>
+   <td>border-left</td>
+   <td>borderLeft</td>
+  </tr>
+  <tr>
+   <td>border-left-color</td>
+   <td>borderLeftColor</td>
+  </tr>
+  <tr>
+   <td>border-left-style</td>
+   <td>borderLeftStyle</td>
+  </tr>
+  <tr>
+   <td>border-left-width</td>
+   <td>borderLeftWidth</td>
+  </tr>
+  <tr>
+   <td>border-right</td>
+   <td>borderRight</td>
+  </tr>
+  <tr>
+   <td>border-right-color</td>
+   <td>borderRightColor</td>
+  </tr>
+  <tr>
+   <td>border-right-style</td>
+   <td>borderRightStyle</td>
+  </tr>
+  <tr>
+   <td>border-right-width</td>
+   <td>borderRightWidth</td>
+  </tr>
+  <tr>
+   <td>border-style</td>
+   <td>borderStyle</td>
+  </tr>
+  <tr>
+   <td>border-top</td>
+   <td>borderTop</td>
+  </tr>
+  <tr>
+   <td>border-top-color</td>
+   <td>borderTopColor</td>
+  </tr>
+  <tr>
+   <td>border-top-style</td>
+   <td>borderTopStyle</td>
+  </tr>
+  <tr>
+   <td>border-top-width</td>
+   <td>borderTopWidth</td>
+  </tr>
+  <tr>
+   <td>border-width</td>
+   <td>borderWidth</td>
+  </tr>
+  <tr>
+   <td>clear</td>
+   <td>clear</td>
+  </tr>
+  <tr>
+   <td>clip</td>
+   <td>clip</td>
+  </tr>
+  <tr>
+   <td>color</td>
+   <td>color</td>
+  </tr>
+  <tr>
+   <td>cursor</td>
+   <td>cursor</td>
+  </tr>
+  <tr>
+   <td>display</td>
+   <td>display</td>
+  </tr>
+  <tr>
+   <td>filter</td>
+   <td>filter</td>
+  </tr>
+  <tr>
+   <td>float</td>
+   <td>cssFloat</td>
+  </tr>
+  <tr>
+   <td>font</td>
+   <td>font</td>
+  </tr>
+  <tr>
+   <td>font-family</td>
+   <td>fontFamily</td>
+  </tr>
+  <tr>
+   <td>font-size</td>
+   <td>fontSize</td>
+  </tr>
+  <tr>
+   <td>font-variant</td>
+   <td>fontVariant</td>
+  </tr>
+  <tr>
+   <td>font-weight</td>
+   <td>fontWeight</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>height</td>
+  </tr>
+  <tr>
+   <td>left</td>
+   <td>left</td>
+  </tr>
+  <tr>
+   <td>letter-spacing</td>
+   <td>letterSpacing</td>
+  </tr>
+  <tr>
+   <td>line-height</td>
+   <td>lineHeight</td>
+  </tr>
+  <tr>
+   <td>list-style</td>
+   <td>listStyle</td>
+  </tr>
+  <tr>
+   <td>list-style-image</td>
+   <td>listStyleImage</td>
+  </tr>
+  <tr>
+   <td>list-style-position</td>
+   <td>listStylePosition</td>
+  </tr>
+  <tr>
+   <td>list-style-type</td>
+   <td>listStyleType</td>
+  </tr>
+  <tr>
+   <td>margin</td>
+   <td>margin</td>
+  </tr>
+  <tr>
+   <td>margin-bottom</td>
+   <td>marginBottom</td>
+  </tr>
+  <tr>
+   <td>margin-left</td>
+   <td>marginLeft</td>
+  </tr>
+  <tr>
+   <td>margin-right</td>
+   <td>marginRight</td>
+  </tr>
+  <tr>
+   <td>margin-top</td>
+   <td>marginTop</td>
+  </tr>
+  <tr>
+   <td>overflow</td>
+   <td>overflow</td>
+  </tr>
+  <tr>
+   <td>padding</td>
+   <td>padding</td>
+  </tr>
+  <tr>
+   <td>padding-bottom</td>
+   <td>paddingBottom</td>
+  </tr>
+  <tr>
+   <td>padding-left</td>
+   <td>paddingLeft</td>
+  </tr>
+  <tr>
+   <td>padding-right</td>
+   <td>paddingRight</td>
+  </tr>
+  <tr>
+   <td>padding-top</td>
+   <td>paddingTop</td>
+  </tr>
+  <tr>
+   <td>page-break-after</td>
+   <td>pageBreakAfter</td>
+  </tr>
+  <tr>
+   <td>page-break-before</td>
+   <td>pageBreakBefore</td>
+  </tr>
+  <tr>
+   <td>position</td>
+   <td>position</td>
+  </tr>
+  <tr>
+   <td>stroke-dasharray</td>
+   <td>strokeDasharray</td>
+  </tr>
+  <tr>
+   <td>stroke-dashoffset</td>
+   <td>strokeDashoffset</td>
+  </tr>
+  <tr>
+   <td>stroke-width</td>
+   <td>strokeWidth</td>
+  </tr>
+  <tr>
+   <td>text-align</td>
+   <td>textAlign</td>
+  </tr>
+  <tr>
+   <td>text-decoration</td>
+   <td>textDecoration</td>
+  </tr>
+  <tr>
+   <td>text-indent</td>
+   <td>textIndent</td>
+  </tr>
+  <tr>
+   <td>text-transform</td>
+   <td>textTransform</td>
+  </tr>
+  <tr>
+   <td>top</td>
+   <td>top</td>
+  </tr>
+  <tr>
+   <td>vertical-align</td>
+   <td>verticalAlign</td>
+  </tr>
+  <tr>
+   <td>visibility</td>
+   <td>visibility</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>width</td>
+  </tr>
+  <tr>
+   <td>z-index</td>
+   <td>zIndex</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_ruby/index.html b/files/ja/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..2884e88cd3
--- /dev/null
+++ b/files/ja/web/css/css_ruby/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS ルビレイアウト
+slug: Web/CSS/CSS_Ruby
+tags:
+  - CSS
+  - CSS ルビレイアウト
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS ルビレイアウト</strong><rp> (</rp><rt>CSS Ruby Layout</rt><rp>) </rp></ruby>は <a href="/en-US/docs/Web/CSS">CSS</a> のモジュールの一つで、ルビ表記の表示に関するレンダリングモデルや整形の制御を提供します。ルビ表記は行間の表記の一種で、ベーステキストに沿った短いテキストで構成されます。これらはふつう東アジアの文書で、発音を示したり、短い説明を提供したりするために使用されます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<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 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="ruby-align_プロパティ"><code>ruby-align</code> プロパティ</h3>
+
+<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.properties.ruby-align")}}</p>
+
+<h3 id="ruby-position_プロパティ"><code>ruby-position</code> プロパティ</h3>
+
+<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.properties.ruby-position")}}</p>
+</div>
+</div>
diff --git a/files/ja/web/css/css_scroll_snap/browser_compat/index.html b/files/ja/web/css/css_scroll_snap/browser_compat/index.html
new file mode 100644
index 0000000000..e4e1a3473a
--- /dev/null
+++ b/files/ja/web/css/css_scroll_snap/browser_compat/index.html
@@ -0,0 +1,47 @@
+---
+title: ブラウザーの互換性とスクロールスナップ
+slug: Web/CSS/CSS_Scroll_Snap/Browser_compat
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - CSS スクロールスナップ
+  - Guide
+  - browser compat
+  - compat
+  - 互換性
+translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Firefox は当初、初期版のスクロールスナップの仕様書、いわゆる<ruby>スクロールスナップ点<rp> (</rp><rt>Scroll Snap Points</rt><rp>) </rp></ruby>を実装していました。 Firefox 68 では仕様の新しいバージョンが採用され、これらの古いプロパティは削除されました。</p>
+
+<h2 id="What_should_I_do_if_I_used_the_old_Firefox_implementation" name="What_should_I_do_if_I_used_the_old_Firefox_implementation">古い Firefox の実装を使用していた場合はどうすればよいのか</h2>
+
+<p>もし古い Firefox における仕様の実装のみ、すなわちスクロールスナップ点で設定されたプロパティのみを使用している場合は、新しい仕様を使うようにコードを更新してください。これでスクロールスナップが Firefox を含めたこの仕様を実装したすべてのブラウザーで動作することを保証することができます。そうしなければ、スクロールスナップは Firefox 68 以降では動作しなくなります。</p>
+
+<p>主に以下のようなことに注意してください。</p>
+
+<ul>
+ <li>{{CSSxRef("scroll-snap-type-x")}} および {{CSSxRef("scroll-snap-type-y")}} プロパティが削除された</li>
+ <li>{{CSSxRef("scroll-snap-type")}} プロパティが個別指定となり、 <code>scroll-snap-type:mandatory</code> のような古い一括指定の構文が動作しなくなった</li>
+</ul>
+
+<h2 id="Can_I_use_the_old_implementation_as_a_fallback" name="Can_I_use_the_old_implementation_as_a_fallback">フォールバックとして古い実装を使用することができるか</h2>
+
+<p>既に古い仕様をフォールバックとして使用していたり、古い Firefox (または -webkit プリフィックス付きの Safari) のユーザーに対応したいと思うのであれば、以下の例で概説している古い仕様の使用を続けても構いません。</p>
+
+<p>この最初の例の中では、スクロールスナップのいずれかの形式に対応しているすべてのブラウザーで動作するように、現在の仕様に加えて古い仕様も使用しています。</p>
+
+<p>この例では、非推奨となった {{CSSxRef("scroll-snap-points-y")}} および {{CSSxRef("scroll-snap-destination")}} プロパティを追加して、 Firefox で動作するスクロールスナップを実装します。 {{CSSxRef("scroll-snap-type")}} プロパティを二回追加しており、一つは新しい仕様書に対応するブラウザーに必要な <code>y</code> 軸の値を伴い、もう一つは Firefox 68 以前で、 <code>y</code> 値のないプロパティに対応しているもののためです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p>
+
+<h2 id="Do_you_need_to_use_both_specs" name="Do_you_need_to_use_both_specs">両方の仕様書を使用する必要があるか</h2>
+
+<p>スクロールスナップは、 CSS の中で強化された機能を使用しなければ、代替手段がうまく行く部分の一つです。この点では、フォールバック版を使用することで利益を享受する膨大な数のユーザーに見せるデータがない限り、新しい仕様のみを実装することをお勧めします。</p>
+
+<p>新しい仕様書に対応していることを、<a href="/ja/docs/Web/CSS/@supports">特性クエリ</a>を使用して確認したいのであれば、 {{CSSxRef("scroll-snap-align")}} を確認すれば、このプロパティは古い実装には存在しません。しかし、ブラウザーが理解できないと単に無視するのが CSS の流儀なので、これらのプロパティは、対応していないブラウザーでは何の問題も起こしません。</p>
+
+<h2 id="Why_do_we_have_two_versions" name="Why_do_we_have_two_versions">なぜ二つの版があるのか</h2>
+
+<p>最後に、なぜ二つの版が存在するというシナリオになったのか、疑問に思うかもしれません。これは新しい CSS を開発することの現実です。 — ブラウザーの実装から離れて無から開発することはできません。ある時点で、ブラウザーはそれが機能することを示すために仕様を実装する必要があり、仕様が実在する他のプロパティと一緒に使用されているときにのみ明らかになる問題を発見する必要があります。 このような場合、ブラウザーが更新の途中である間に、新しいバージョンと並んで古いバージョンの実装が利用可能になる可能性があるのです。</p>
diff --git a/files/ja/web/css/css_scroll_snap/index.html b/files/ja/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..57af06183b
--- /dev/null
+++ b/files/ja/web/css/css_scroll_snap/index.html
@@ -0,0 +1,75 @@
+---
+title: CSS スクロールスナップ
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS スクロールスナップ</strong>は CSS モジュールの一つで、スクロール操作の完了後にスクロールコンテナーのスクロールポートが終了するスクロール位置を強制する、スクロールスナップ位置を導入します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 以前のバージョンのスクロールスナップはスクロールスナップ点と呼ばれており、非推奨になりました。このバージョンが現行です。</p>
+</div>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties_on_Containers" name="CSS_Properties_on_Containers">コンテナーの CSS プロパティ</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="CSS_Properties_on_Children" name="CSS_Properties_on_Children">子の CSS プロパティ</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
diff --git a/files/ja/web/css/css_scroll_snap_points/index.html b/files/ja/web/css/css_scroll_snap_points/index.html
new file mode 100644
index 0000000000..3a08306114
--- /dev/null
+++ b/files/ja/web/css/css_scroll_snap_points/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS スクロールスナップ点
+slug: Web/CSS/CSS_Scroll_Snap_Points
+tags:
+  - CSS
+  - CSS スクロールスナップ点
+  - Overview
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSS_Scroll_Snap_Points
+---
+<div>{{CSSRef}} {{deprecated_header}}</div>
+
+<p><ruby><strong>CSS スクロールスナップ点</strong><rp> (</rp><rt>CSS Scroll Snap Points</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、スクロールのスナップ位置を導入します。これは、スクロールの実行が終了した後にコンテナーのスクロール領域が停止する位置を明示的に決定します。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: <a href="/ja/docs/Web/CSS/CSS_Scroll_Snap">CSS スクロールスナップ</a>がこの機能を定義する最新の仕様書です。</p>
+</div>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-snap-coordinate")}}</li>
+ <li>{{cssxref("scroll-snap-destination")}}</li>
+ <li>{{cssxref("scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}</li>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+</ul>
+</div>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="scroll-snap-coordinate_プロパティ"><code>scroll-snap-coordinate</code> プロパティ</h3>
+
+<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.properties.scroll-snap-coordinate")}}</p>
+</div>
diff --git a/files/ja/web/css/css_scrollbars/index.html b/files/ja/web/css/css_scrollbars/index.html
new file mode 100644
index 0000000000..50285c8342
--- /dev/null
+++ b/files/ja/web/css/css_scrollbars/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS スクロールバー
+slug: Web/CSS/CSS_Scrollbars
+tags:
+  - CSS
+  - CSS スクロールバー
+  - Overview
+  - 概要
+translation_of: Web/CSS/CSS_Scrollbars
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p class="summary"><span class="seoSummary"><ruby><strong>CSS スクロールバー</strong><rp> (</rp><rt>CSS Scrollbars</rt><rp>) </rp></ruby>は、2000年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。</span></p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+
+<p>この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。</p>
+
+<div id="Example">
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;
+Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
+welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+Dandelion cucumber earthnut pea peanut soko zucchini.
+&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+</div>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("scrollbar-width")}}</li>
+ <li>{{CSSxRef("scrollbar-color")}}</li>
+</ul>
+</div>
+
+<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("CSS Scrollbars")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。</p>
+
+<ul>
+ <li><a href="http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html">Baseline Rules for Scrollbar Usability | Adrian Roselli</a></li>
+</ul>
+
+<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>
+
+<h3 id="scrollbar-width">scrollbar-width</h3>
+
+<div>{{Compat("css.properties.scrollbar-width")}}</div>
+
+<h3 id="scrollbar-color">scrollbar-color</h3>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+</ul>
diff --git a/files/ja/web/css/css_selectors/index.html b/files/ja/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..f1b00fa844
--- /dev/null
+++ b/files/ja/web/css/css_selectors/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS セレクター
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - Selectors
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>CSS セレクター</strong>は、一連の CSS の規則が適用される要素を定義します。</span></p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。</p>
+</div>
+
+<h2 id="Basic_selectors" name="Basic_selectors">基本セレクター</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></dt>
+ <dd>すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。<br>
+ <strong>構文:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>例:</strong> <code>*</code> は文書のすべての要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a></dt>
+ <dd>指定されたノード名を持つすべての要素を選択します。<br>
+ <strong>構文:</strong> <code><var>elementname</var></code><br>
+ <strong>例:</strong> <code>input</code> はあらゆる {{HTMLElement("input")}} 要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></dt>
+ <dd>指定された <code>class</code> 属性を持つすべての要素を選択します。<br>
+ <strong>構文:</strong> <code>.<var>classname</var></code><br>
+ <strong>例:</strong> <code>.index</code> は "index" クラスを持つあらゆる要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></dt>
+ <dd><code>id</code> 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。<br>
+ <strong>構文:</strong> <code>#<var>idname</var></code><br>
+ <strong>例:</strong> <code>#toc</code> は "toc" という ID を持つ要素を選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></dt>
+ <dd>指定された属性を持つ要素をすべて選択します。<br>
+ <strong>構文:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
+ <strong>例:</strong> <code>[autoplay]</code> は <code>autoplay</code> 属性が（どんな値でも）設定されているすべての要素を選択します。</dd>
+</dl>
+
+<h2 id="グループ化セレクター">グループ化セレクター</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a></dt>
+ <dd><code>,</code> はグループ化の手段であり、一致するすべてのノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
+ <strong>例:</strong> <code>div, span</code> は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。</dd>
+</dl>
+
+<h2 id="Combinators" name="Combinators">結合子</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></dt>
+ <dd><code> </code> (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
+ <strong>例:</strong> <code>div span</code> は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></dt>
+ <dd><code>&gt;</code> 結合子は、第1の要素の直接の子に当たるノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
+ <strong>例:</strong> <code>ul &gt; li</code> は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></dt>
+ <dd><code>~</code> 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
+ <strong>例:</strong> <code>p ~ span</code> は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></dt>
+ <dd><code>+</code> 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
+ <strong>例:</strong> <code>h2 + p</code> は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> {{Experimental_Inline}}</dt>
+ <dd><code>||</code> 結合子は列に所属するノードを選択します。<br>
+ <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
+ <strong>例:</strong> <code>col || td</code> は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。</dd>
+</dl>
+
+<h2 id="Pseudo" name="Pseudo">擬似表記</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></dt>
+ <dd><code>:</code> 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。<br>
+ <strong>例:</strong> <code>a:visited</code> はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a></dt>
+ <dt><code>::</code> 表記は、 HTML に含まれていないエンティティを表現します。</dt>
+ <dd><strong>例:</strong> <code>p::first-line</code> はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。</dd>
+</dl>
+
+<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("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td><code>||</code> 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td><code>~</code> 一般兄弟結合子、およびツリー構造の疑似クラスを追加。<br>
+    疑似要素に二重コロン <code>::</code> の接頭辞を用いるようにした。追加の属性セレクター。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>子結合子 <code>&gt;</code> および隣接兄弟結合子 <code>+</code> を追加。<br>
+    <strong>全称セレクター</strong>と<strong>属性セレクター</strong>を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/ja/docs/Web/CSS/Pseudo-classes#Specifications">疑似クラス</a>および<a href="/ja/docs/Web/CSS/Pseudo-elements#Specifications">疑似要素</a>の詳細は、それぞれの仕様書一覧表をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Specificity">CSS 詳細度</a></li>
+</ul>
diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..bec8180372
--- /dev/null
+++ b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,68 @@
+---
+title: 'セレクターでの :target 疑似クラスの利用'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+tags:
+  - ':target'
+  - CSS
+  - ガイド
+  - セレクター
+  - リファレンス
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。</p>
+
+<h2 id="Picking_a_Target" name="Picking_a_Target">ターゲットの選択</h2>
+
+<p>{{cssxref(":target")}} <a href="/ja/CSS/Pseudo-classes">疑似クラス</a>は、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 <code><span class="nowiki">http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example</span></code> という URL はフラグメント識別子 <code>#example</code> を含んでいます。 HTML では、 <code>id</code> 及び <code>name</code> 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。</p>
+
+<p>おそらく URL のターゲットになる <code>h2</code> 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。</p>
+
+<pre class="brush: css">h2:target { font-weight: bold; }</pre>
+
+<p>文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 <code>#example</code> フラグメントに枠を追加するには、以下の書きます。</p>
+
+<pre class="brush: css">#example:target { border: 1px solid black; }</pre>
+
+<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">すべての要素を対象にする</h2>
+
+<p>インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。</p>
+
+<pre class="brush: css">:target { color: red; }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <code>&lt;h1 id="one"&gt;</code> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。</p>
+
+<div id="example">
+<pre class="brush: html">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">まとめ</h2>
+
+<p>フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。</p>
+
+<h2 id="Related_Links" name="Related_Links">関連項目</h2>
+
+<ul>
+ <li>{{cssxref(":target")}}</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">原典情報</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>メモ: この記事はもともと DevEdge サイトの一部だったものを再構成したものです。</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/css_shapes/basic_shapes/index.html b/files/ja/web/css/css_shapes/basic_shapes/index.html
new file mode 100644
index 0000000000..cc24d1ced2
--- /dev/null
+++ b/files/ja/web/css/css_shapes/basic_shapes/index.html
@@ -0,0 +1,143 @@
+---
+title: 基本シェイプ
+slug: Web/CSS/CSS_Shapes/Basic_Shapes
+tags:
+  - CSS
+  - CSS Shapes
+  - CSS シェイプ
+  - Guide
+  - Reference
+  - ガイド
+translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">CSS のシェイプは {{cssxref("&lt;basic-shape&gt;")}} 型を使用して定義することができ、このガイドでは、この方で受け入れられる様々な値のそれぞれが、どのように動作するかを説明します。単純な円から複雑な多角形までがあります。</p>
+
+<p>シェイプについて見る前に、これらのシェイプを実現するために一緒に使われる二つの情報を理解しておくことに価値があります。</p>
+
+<ul>
+ <li><code>&lt;basic-shape&gt;</code> 型</li>
+ <li>参照ボックス</li>
+</ul>
+
+<h2 id="The_&lt;basic-shape>_type" name="The_&lt;basic-shape>_type">&lt;basic-shape&gt; 型</h2>
+
+<p><code>&lt;basic-shape&gt;</code> 型は、すべての基本シェイプを値として使用します。この方は関数表記を使用します。シェイプ型の後に括弧が続き、中にシェイプを説明する追加の値があります。</p>
+
+<p>受け付ける引数は、作成しようとしているシェイプによって様々です。これらは以下の例で説明します。</p>
+
+<h2 id="The_reference_box" name="The_reference_box">参照ボックス</h2>
+
+<p>CSS シェイプで使用される参照ボックスを理解することは、これがそれぞれのシェイプの座標システムを定義するので、基本シェイプを使用するときには重要です。参照ボックスは既に<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からシェイプを作成するガイド</a>で、直接参照ボックスを使用してシェイプを作成するのを見たことがありますね。</p>
+
+<p>The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using <code>shape-outside: circle(50%)</code>. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a Basic Shape the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+
+<p>You can add the various Box Values after your Basic Shape definition. Therefore the default behaviour is as if you have defined.</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) margin-box;
+}
+</pre>
+
+<p>You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) border-box;
+}
+</pre>
+
+<p>What is worth noting is that the <code>margin-box</code> will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.</p>
+
+<p>For an excellent description of references boxes as they apply to CSS Shapes see <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Understanding Reference Boxes for CSS Shapes</a>.</p>
+
+<h2 id="inset()">inset()</h2>
+
+<p>The <code>inset()</code> type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it. However the <code>inset()</code> types enables the definition of offsets, thus pulling the content in over the shape.</p>
+
+<p>Therefore <code>inset()</code> takes four values for the top, right, bottom and left values plus a final value for <code>border-radius</code>. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+</pre>
+
+<p>Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}</pre>
+
+<p>In the example below we have an <code>inset()</code> shape used to pull content over the floated element. Change the offset values to see how the shape changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+
+<p>You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from <code>margin-box</code> to <code>border-box</code>, <code>padding-box</code> or <code>content-box</code> to see how the reference box used as the starting point before offsets are calculated changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+
+<h2 id="circle()">circle()</h2>
+
+<p>The <code>circle()</code> value for <code>shape-outside</code> can accept two possible arguments. The first is the <code>shape-radius</code>.</p>
+
+<p>Both <code>circle()</code> and <code>ellipse()</code> values for <code>shape-outside</code> are specified as accepting this argument of <code>&lt;shape-radius&gt;</code>. This argument can be a length or percentage but can also be one of the keywords <code>closest-side</code> or <code>farthest-side</code>.</p>
+
+<p>The keyword <code><strong>closest-side</strong></code> uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.</p>
+
+<p>The keyword <code><strong>farthest-side</strong></code> uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.</p>
+
+<p>The second argument is a <code>position</code>. If omitted this will be set to <code>center</code>. However you can use any valid position here to indicate the position of the centre of the circle.</p>
+
+<p>Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword <strong>at</strong> followed by a position value.</p>
+
+<p>In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+
+<p>In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for <code>inset()</code>.</p>
+
+<p>As an additional example, if you use the keywords <code>top left</code> for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+
+<h3 id="The_shape_will_be_clipped_by_the_margin_box" name="The_shape_will_be_clipped_by_the_margin_box">シェイプはマージンボックスで切り取られる</h3>
+
+<p>When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the centre of our circle towards the content by setting the position to 60%. The centre of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.</p>
+
+<pre class="brush: css">img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+</pre>
+
+<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+
+<h2 id="ellipse()">ellipse()</h2>
+
+<p>An ellipse is essentially a squashed circle and so <code>ellipse()</code> acts in a very similar way to <code>circle()</code> except that we have to specify two radii x and y in that order.</p>
+
+<p>These may then be followed by position values as with <code>circle()</code> to move the centre of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+
+<p>The keyword values of <code>closest-side</code> and <code>farthest-side</code> are useful to create a quick ellipse based on the size of the floated element reference box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+
+<h2 id="polygon()">polygon()</h2>
+
+<p>The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a <code>polygon()</code>. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.</p>
+
+<p>In the example below I have created a shape for text to follow using the <code>polygon()</code>, you can change any of the values to see how the shape is changed.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+
+<p>You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.</p>
+
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+
+<p>Another useful resource is <a href="http://bennettfeely.com/clippy/">Clippy</a> - a tool for creating shapes for <code>clip-path</code>, as the values for Basic Shapes are the same as those used for <code>clip-path</code>.</p>
diff --git a/files/ja/web/css/css_shapes/from_box_values/index.html b/files/ja/web/css/css_shapes/from_box_values/index.html
new file mode 100644
index 0000000000..d61ef23ffd
--- /dev/null
+++ b/files/ja/web/css/css_shapes/from_box_values/index.html
@@ -0,0 +1,80 @@
+---
+title: ボックス値からのシェイプ
+slug: Web/CSS/CSS_Shapes/From_box_values
+tags:
+  - Boundaries
+  - Boxes
+  - CSS
+  - CSS Shapes
+  - Guide
+  - Margins
+  - border-box
+  - border-radius
+  - box values
+  - content-box
+  - float
+  - margin-box
+  - padding-box
+  - shapes
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">シェイプを作るのに直接的な方法が、 CSS ボックスモデルの値を使用することです。この記事では、これを行う方法を説明します。</p>
+
+<p>シェイプの値として許可されている<a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">ボックス値</a>は次の通りです。</p>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p><code>border-radius</code> の値にも対応しており、これはページに丸い縁を持った物を作ることができ、シェイプは作成されたシェイプに従うことができます。</p>
+
+<h2 id="CSS_box_model" name="CSS_box_model">CSS ボックスモデル</h2>
+
+<p>上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。</p>
+
+<p><img alt="ボックスモデルはマージン、境界、パディング、コンテンツの各ボックスから成ります。" src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。</p>
+
+<h3 id="margin-box">margin-box</h3>
+
+<p><code>margin-box</code> は外側のマージンの縁と、要素の定義で {{cssxref("border-radius")}} を使用することで、シェイプの角の半径によって定義されます。</p>
+
+<p>以下の例では、高さ、幅、背景色を設定した {{htmlelement("div")}} である紫色の丸いアイテムが表示されます。 <code>border-radius</code> プロパティを使用して丸を作成しており、 <code>border-radius: 50%</code> と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box">border-box</h3>
+
+<p><code>border-box</code> の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS の {{cssxref("border")}} プロパティを使用していなくても、境界は存在します。この場合、境界は <code>padding-box</code> と同じになり、シェイプはパディングの縁の外側として定義されます。</p>
+
+<p>次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界寸法を変更すると、コンテンツがそれに従います。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box">padding-box</h3>
+
+<p><code>padding-box</code> の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、 <code>padding-box</code> は <code>content-box</code> と同じです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box">content-box</h3>
+
+<p><code>content-box</code> の値は、コンテンツの外側の縁で囲まれたシェイプを定義します。このボックスにおけるそれぞれの角の丸めは、0または border-radius − border-width − padding より大きくなります。つまり、ここでは負の数を取ることはできません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<h2 id="When_to_use_the_box_values" name="When_to_use_the_box_values">ボックス値を使用する場面</h2>
+
+<p>シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されている <code>border-radius</code> プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。 border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。</p>
+
+<p>いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に2つのフロート状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を100%に設定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>もっと複雑なシェイプについては、この章の他のガイドにあるように、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプ</a>のうちの一つを値として使用するか、画像からシェイプを定義するかする必要があります。</p>
diff --git a/files/ja/web/css/css_shapes/index.html b/files/ja/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..4cabef851a
--- /dev/null
+++ b/files/ja/web/css/css_shapes/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS シェイプ
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS シェイプ
+  - Reference
+  - wrapping
+  - シェイプ
+  - リファレンス
+  - 境界
+  - 概要
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>CSS シェイプ</strong>は、 CSS で使用する幾何学的な図形を記述します。 <a href="https://drafts.csswg.org/css-shapes/">レベル１の仕様書</a>では、 CSS シェイプは浮動状態の要素に適用されます。</span>仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+
+<p>以下の例では、左に浮動状態の画像を表示し、 <code>shape-outside</code> プロパティを <code>circle(50%)</code> の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からのシェイプ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像からのシェイプ</a></li>
+ <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">CSS でのシェイプのパスの編集 — Firefox 開発ツール</a></li>
+</ul>
+
+<h2 id="外部リソース">外部リソース</h2>
+
+<ul>
+ <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">A list of CSS Shapes resources</a></li>
+ <li><a href="https://alistapart.com/article/css-shapes-101">CSS Shapes 101</a></li>
+ <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes</a></li>
+ <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498">How To Use CSS Shapes In Your Web Design</a></li>
+ <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How To Get Started With CSS Shapes</a></li>
+ <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5">What I Learned In One Weekend With CSS Shapes</a></li>
+ <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/">CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</a></li>
+</ul>
+
+<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("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<h3 id="shape-outside">shape-outside</h3>
+
+<p>{{Compat("css.properties.shape-outside")}}</p>
+
+<h3 id="shape-margin">shape-margin</h3>
+
+<p>{{Compat("css.properties.shape-margin")}}</p>
+
+<h3 id="shape-image-threshold">shape-image-threshold</h3>
+
+<p>{{Compat("css.properties.shape-image-threshold")}}</p>
diff --git a/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html
new file mode 100644
index 0000000000..419a72fb93
--- /dev/null
+++ b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html
@@ -0,0 +1,125 @@
+---
+title: CSS シェイプの概要
+slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+tags:
+  - CSS
+  - CSS シェイプ
+  - シェイプ
+  - 概要
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://www.w3.org/TR/css-shapes/">CSS シェイプレベル１仕様書</a>は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル１は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。</p>
+
+<p>例えば、アイテムを左にフロートした状態にすると、テキストがアイテムの右と下に矩形に回り込みます。円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。</p>
+
+<p>これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。</p>
+
+<h2 id="What_does_the_specification_define" name="What_does_the_specification_define">仕様書は何を定義しているのか</h2>
+
+<p>仕様書では、三つの新しいプロパティを定義しています。</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} — 基本的なシェイプを定義することができます</li>
+ <li>{{cssxref("shape-image-threshold")}} — 透過性のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。</li>
+ <li>{{cssxref("shape-margin")}} — 定義されたシェイプの周囲のマージンを設定します。</li>
+</ul>
+
+<h2 id="Defining_basic_shapes" name="Defining_basic_shapes">基本シェイプの定義</h2>
+
+<p><code>shape-outside</code> プロパティで、シェイプを定義することができます。これは様々な値を取り、 {{cssxref("&lt;basic-shape&gt;")}} データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。</p>
+
+<p>次の例では、左に浮動状態にした画像があります。それから <code>shape-outside</code> プロパティを <code>circle(50%)</code> の値で適用しています。その結果として、コンテンツは画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>仕様書のこのレベルでは、要素は <code>&lt;basic-shape&gt;</code> を適用するために浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁をコンテンツが回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。</p>
+
+<h3 id="Basic_Shapes" name="Basic_Shapes">基本的なシェイプ</h3>
+
+<p><code>circle(50%)</code> の値は基本的なシェイプの例の一つです。仕様書では次のように、４つの <code>&lt;basic-shape&gt;</code> 値を定義しています。</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p><code>inset()</code> の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲のコンテンツの行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。</p>
+
+<p>すでに <code>circle()</code> が円形のシェイプを作成するのを見てきました。 <code>ellipse()</code> は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 <code>polygon()</code> を作成して好きなだけ複雑なシェイプにすることができます。</p>
+
+<p>この章の<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプのガイド</a>で、利用できるそれぞれの基本シェイプとその作成方法を紹介します。</p>
+
+<h3 id="Shapes_from_the_Box_Value" name="Shapes_from_the_Box_Value">ボックス値からのシェイプの作成</h3>
+
+<p>シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>次の例では、 <code>border-box</code> の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>ボックス値についてより詳しく知るには、<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からのシェイプの作成</a>を参照してください。</p>
+
+<h3 id="Shapes_from_images" name="Shapes_from_images">画像からのシェイプの作成</h3>
+
+<p>パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りのコンテンツの回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。</p>
+
+<p>なお、この方法で使用される画像は <a href="/ja/docs/Web/HTTP/CORS">CORS に互換性がある</a>必要があり、そうでなければ <code>shape-outside</code> は値として <code>none</code> が指定されたかのように動作し、シェイプを得ることはできません。</p>
+
+<p>次の例では、完全に透過した領域がある画像を用い、この画像を <code>shape-outside</code> の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold" name="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p><code>shape-image-threshold</code> プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 <code>shape-image-threshold</code> が <code>0.0</code> (初期値) である場合、領域は完全に透過になります。値が <code>1.0</code> である場合は完全に不等価になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。</p>
+
+<p>シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>画像からのシェイプの作成については、このガイドの<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像からのシェイプ</a>でより深く見てみます。</p>
+
+<h2 id="The_shape-margin_property" name="The_shape-margin_property"><code>shape-margin</code> プロパティ</h2>
+
+<p>{{cssxref("shape-margin")}} プロパティは <code>shape-outside</code> にマージンを追加します。これにより、シェイプを囲むコンテンツの行ボックスがシェイプから引き離されるため、短くなります。</p>
+
+<p>次の例では、基本的なシェイプに <code>shape-margin</code> を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="Using_Generated_Content_as_the_floated_item" name="Using_Generated_Content_as_the_floated_item">作成されたコンテンツの浮動状態のアイテムとしての使用</h2>
+
+<p>上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の {{htmlelement("div")}} 又は {{htmlelement("span")}} のような冗長な要素を挿入することで実現できますが、おすすめは生成コンテンツを使うことです。つまり、 CSS のスタイルを使用して実現することができます。</p>
+
+<p>次の例では、高さと幅が150pxの要素を挿入するために生成コンテンツを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="Relationship_to_clip-path" name="Relationship_to_clip-path"><code>clip-path</code> との関係</h2>
+
+<p>シェイプを作成するために使われる基本シェイプとボックス値は、 {{cssxref("clip-path")}} の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。</p>
+
+<p>以下の画像は青い背景の四角い画像です。 <code>shape-outside: ellipse(40% 50%);</code> 及び <code>clip-path: ellipse(40% 50%);</code> を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="Developer_Tools_for_Shapes" name="Developer_Tools_for_Shapes">シェイプのための開発者ツール</h2>
+
+<p>ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内で<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">シェイプパスエディター</a>を公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。</p>
+
+<p>シェイプパスエディターは、 Firefox 60 で <code>clip-path</code> から生成されるシェイプと共に既定で有効になる予定です。 <code>shape-outside</code> で生成されるシェイプを使用することもできますが、 <code>layout.css.shape-outside.enabled</code> の設定を有効にした場合のみです。</p>
+
+<h2 id="Future_CSS_Shapes_Features" name="Future_CSS_Shapes_Features">将来の CSS シェイプ機能</h2>
+
+<p>当初のシェイプ仕様書には、要素内にシェイプを作成するための <code>shape-inside</code> プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書の<a href="https://drafts.csswg.org/css-shapes-2/">レベル２</a>に移動されました。当初は <code>shape-inside</code> が仕様書のレベル１に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。</p>
diff --git a/files/ja/web/css/css_shapes/shapes_from_images/index.html b/files/ja/web/css/css_shapes/shapes_from_images/index.html
new file mode 100644
index 0000000000..843fc47ceb
--- /dev/null
+++ b/files/ja/web/css/css_shapes/shapes_from_images/index.html
@@ -0,0 +1,62 @@
+---
+title: 画像からのシェイプの作成
+slug: Web/CSS/CSS_Shapes/Shapes_From_Images
+tags:
+  - CSS シェイプ
+translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、アルファチャンネルを含む画像ファイルから、または CSS グラデーションから、シェイプを作成する方法を見ていきます。これはシェイプを作成するためのとても柔軟な方法です。 CSS で複雑なポリゴンを持つパスを描画するのではなく、グラフィックプログラムでシェイプを作成し、しきい値よりも透明度の低いピクセルによって作成されたパスを使用することができます。</p>
+
+<h2 id="A_simple_shape_from_an_image" name="A_simple_shape_from_an_image">画像をもとにした単純なシェイプ</h2>
+
+<p>シェイプの画像を使用するには、完全に不透明ではない領域があるアルファチャンネルが必要です。 {{cssxref("shape-image-threshold")}} プロパティは、この不透明度のしきい値を設定するために使用されます。この値よりも透明度の低いピクセルは、シェイプの範囲を計算するために使用されます。</p>
+
+<p>簡単な例として、赤い塗りつぶしの星形の領域と、完全に透明な領域のある画像があります。 {{cssxref("shape-outside")}} プロパティの値として、画像ファイルへのパスを使用します。コンテンツは星形の図形で折り返されるようになりました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+
+<p>シェイプからテキストを離すために {{cssxref("shape-margin")}} を使用することができ、作成されたシェイプの周囲と、テキストとの間のマージンを指定します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+
+<h2 id="CORS_compatibility" name="CORS_compatibility">CORS の互換性</h2>
+
+<p>画像からシェイプを作成する際には、使用する画像が <a href="/ja/docs/Web/HTTP/CORS">CORS 互換</a>である必要があります。サイトと同じドメインにホスティングされている画像は動作しますが、画像が CDN などの別のドメインでホスティングされている場合は、正しいヘッダーを送信してシェイプで利用できるようにする必要があります。この CORS 互換画像の要件のため、ローカルのウェブサーバーを使用せずにローカルでファイルをプレビューすると、シェイプは機能しません。</p>
+
+<h3 id="Is_it_a_CORS_issue" name="Is_it_a_CORS_issue">CORS の問題かどうか</h3>
+
+<p>開発者ツールは CORS エラーを特定するのに役立ちます。 Chrome では、コンソールから CORS の問題が通知されます。 Firefox では、プロパティを調べると、イメージを読み込めないという警告が表示されます。これは、画像が CORS のためにシェイプのソースとして使用できないという事実を警告するはずです。</p>
+
+<h2 id="Setting_a_threshold" name="Setting_a_threshold">しきい値の設定</h2>
+
+<p>{{cssxref("shape-image-threshold")}} プロパティを使用すると、完全な透明ではない領域からシェイプを作成することができます。 <code>shape-image-threshold</code> の値が <code>0.0</code> (初期値) の場合、領域は完全に透明になります。値が <code>1.0</code> の場合は完全に不透明です。中間の値は、半透明領域を定義領域として設定できることを意味します。</p>
+
+<p>次の例では、最初の例と同様の画像を使用していますが、この画像では、星の背景が完全に透明ではなく、グラフィックプログラムで20％の不透明度が作成されています。 <code>shape-image-threshold</code> を <code>0.3</code> に設定すると図形が表示され、 <code>0.2</code> より小さい値に設定すると、図形がなくなります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+
+<h2 id="Using_images_with_generated_content" name="Using_images_with_generated_content">生成されたコンテンツの画像を使用</h2>
+
+<p>上記の例では、画像を {{cssxref("shape-outside")}} の値として使用し、ページにも追加しました。多くのデモでは、従っているシェイプを見せるためにこれを行っていますが、 <code>shape-outside</code> プロパティはページに表示される画像とは関係がないため、画像を使用してシェイプを作成するために、画像を表示する必要はありません。</p>
+
+<p>何かを浮動状態にする必要がありますが、以下の例のように生成されたコンテンツを使用することもできます。ここでは生成されたコンテンツを浮動状態にし、大きな星形の画像を使ってコンテンツを整形していますが、ページ上には何も画像を表示していません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+
+<h2 id="Creating_shapes_using_a_gradient" name="Creating_shapes_using_a_gradient">グラデーションを用いたシェイプの作成</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーション</a>は画像として扱われるので、透過や半透過の領域をグラデーションの一部として持つことで、グラデーションを使ってシェイプを作ることができます。</p>
+
+<p>次の例では、直線グラデーションの背景画像によって与えられた生成された浮動状態のコンテンツを使用しています。 {{cssxref("shape-outside")}} の値と同じ値を使用しています。直線グラデーションは紫色から透明に変化しますので、 {{cssxref("shape-image-threshold")}} の値を変更すると、どれくらいのピクセルがシェイプを作成するのに必要かを決めることができます。以下の例で値を操作することで、その値に応じてシェイプを横切る対角線がどれだけ移動するかを確認することができます。</p>
+
+<p>背景画像を完全に削除してみることもでき、そうすればグラデーションは純粋にシェイプを作成するために使用され、ページには全く表示されません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+
+<p>次の例では、楕円形の放射状のグラデーションを使用し、グラデーションの透過部分を再利用してシェイプを作成しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+
+<p>これらのライブサンプルで直接実験して、グラデーションを変更するとシェイプのパスがどのように変化するかを確認することができます。</p>
diff --git a/files/ja/web/css/css_table/index.html b/files/ja/web/css/css_table/index.html
new file mode 100644
index 0000000000..8c1b45c427
--- /dev/null
+++ b/files/ja/web/css/css_table/index.html
@@ -0,0 +1,47 @@
+---
+title: CSS 表
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS 表
+  - リファレンス
+  - 概要
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 表</strong><rp> (</rp><rt>CSS Table</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、表データをレイアウトする方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<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("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_text/index.html b/files/ja/web/css/css_text/index.html
new file mode 100644
index 0000000000..d92efd6b04
--- /dev/null
+++ b/files/ja/web/css/css_text/index.html
@@ -0,0 +1,70 @@
+---
+title: CSS テキスト
+slug: Web/CSS/CSS_Text
+tags:
+  - CSS
+  - CSS テキスト
+  - 概要
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS テキスト</strong><rp> (</rp><rt>CSS Text</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのようにテキストの操作を行うかを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hanging-punctuation")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-justify")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<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('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>一部のプロパティを、テキストの書字方向から独立するように更新。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_text_decoration/index.html b/files/ja/web/css/css_text_decoration/index.html
new file mode 100644
index 0000000000..5dd4da31f6
--- /dev/null
+++ b/files/ja/web/css/css_text_decoration/index.html
@@ -0,0 +1,126 @@
+---
+title: CSS テキスト装飾
+slug: Web/CSS/CSS_Text_Decoration
+tags:
+  - CSS
+  - CSS Text Decoration
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS テキスト装飾</strong><rp> (</rp><rt>Text Decoration</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-offset")}}</li>
+ <li>{{cssxref("text-decoration-skip-ink")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-decoration-thickness")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis-position")}}</li>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<p><em>なし。</em></p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p class="under"&gt;This text has a line underneath it.&lt;/p&gt;
+&lt;p class="over"&gt;This text has a line over it.&lt;/p&gt;
+&lt;p class="line"&gt;This text has a line going through it.&lt;/p&gt;
+&lt;p&gt;This &lt;a class="plain" href="#"&gt;link will not be underlined&lt;/a&gt;,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.&lt;/p&gt;
+&lt;p class="underover"&gt;This text has lines above &lt;em&gt;and&lt;/em&gt; below it.&lt;/p&gt;
+&lt;p class="thick"&gt;This text has a really thick purple underline in supporting browsers.&lt;/p&gt;
+&lt;p class="blink"&gt;This text might blink for you,
+    depending on the browser you use.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples','auto','320')}}</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('CSS4 Text Decoration')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_transforms/index.html b/files/ja/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..55de83ba04
--- /dev/null
+++ b/files/ja/web/css/css_transforms/index.html
@@ -0,0 +1,72 @@
+---
+title: CSS 変形
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Transforms
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 変形</strong><rp> (</rp><rt>CSS Transforms</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、 CSS でスタイル付けされた要素をどのように二次元または三次元空間に変形できるかを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></dt>
+ <dd>CSS でスタイル付けされた要素をどのように変形するかについての手順を追ったチュートリアルです。</dd>
+</dl>
+
+<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('CSS Transforms 2') }}</td>
+   <td>{{ Spec2('CSS Transforms 2') }}</td>
+   <td>独立した変形を追加。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_transforms/using_css_transforms/index.html b/files/ja/web/css/css_transforms/using_css_transforms/index.html
new file mode 100644
index 0000000000..da27f0240b
--- /dev/null
+++ b/files/ja/web/css/css_transforms/using_css_transforms/index.html
@@ -0,0 +1,89 @@
+---
+title: CSS 変形の使用
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+tags:
+  - 3D
+  - Advanced
+  - CSS
+  - CSS Transforms
+  - Graphics
+  - Guide
+  - Rotate
+  - Scale
+  - Scaling
+  - perspective
+  - rotation
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>座標空間を編集することで、 <strong>CSS 変形</strong> (transform) は通常のフロー処理を混乱させずに、影響下にあるコンテンツの位置を変えることができます。このガイドは変形の使用についての解説を行ないます。</p>
+
+<p>CSS 変形は、アフィン線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変形には回転 (rotation)、傾斜 (skewing)、拡大縮小 (scaling)、平行移動 (translation) が含まれており、二次元と三次元空間の両方の平行移動 (translation) があります。</p>
+
+<div class="warning">
+<p><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>によって配置された要素のみが <code>transform</code> を実行できます。言うまでもなく、 <code>display: block</code> である要素がボックスモデルで配置されます。</p>
+</div>
+
+<h2 id="CSS_transforms_properties" name="CSS_transforms_properties">CSS 変形のプロパティ</h2>
+
+<p>CSS 変形の定義に使われる重要なプロパティが 2 つあります。 {{cssxref("transform")}} と {{cssxref("transform-origin")}} です。</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>原点位置を指定します。既定では、これは要素の中央ですが、移動することができます。回転、拡大縮小や傾斜など決まった点が引数として必要な変形で使用されれます。</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>要素に適用する変形を指定します。変形の空白区切りのリストで、合成操作の要求された順番で適用されます。変換の合成は右から左の順に適用されます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>これが変形前の MDN ロゴの画像です。</p>
+
+<p><img alt="MDN ロゴ" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Rotating" name="Rotating">回転</h3>
+
+<p>ここでは MDN ロゴを、左下の角から90度回転させます。</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Rotating', 'auto', 240) }}</p>
+
+<h3 id="Skewing_and_translating" name="Skewing_and_translating">傾斜と平行移動</h3>
+
+<p>この例は div 要素を10度傾斜させ、 X 軸に沿って 150 ピクセル平行移動します。</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Skewing_and_translating') }}</p>
+
+<h2 id="3D_specific_CSS_properties" name="3D_specific_CSS_properties">3D 特有の CSS プロパティ</h2>
+
+<p>立体空間で CSS 変形 を行うのは、もう少し複雑になります。遠近感を与えて 3D 空間の環境設定を行うことから始める必要があり、それから 2D の要素がその空間でとる挙動を設定しなければなりません。</p>
+
+<h3 id="Perspective" name="Perspective">遠近感</h3>
+
+<p>設定する最初の要素は遠近感 (perspective) です。遠近感は 3D の印象を与えるものです。見る人から遠ざかるほど、ものが小さくなります。</p>
+
+<p>{{page("/ja/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p>
+
+<p>二つ目の設定要素は見る人の位置で、 {{cssxref("perspective-origin")}} プロパティを使います。既定では遠近感は見る人の中央に合わせられますが、いつも妥当であるとは限りません。</p>
+
+<p>{{page("/ja/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p>
+
+<p>ここまで完了すれば、 3D 空間で要素に働きかけることができます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">端末の向きと 3D 変形の併用</a></li>
+ <li><a href="http://desandro.github.com/3dtransforms/" title="http://desandro.github.com/3dtransforms/">Intro to CSS 3D transforms</a> (David DeSandro によるブログ記事)</li>
+ <li><a href="https://css-transform.moro.es/">CSS Transform Playground</a> (CSS 変形機能を視覚化するオンラインツール)</li>
+</ul>
diff --git a/files/ja/web/css/css_transitions/index.html b/files/ja/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..a179d1d939
--- /dev/null
+++ b/files/ja/web/css/css_transitions/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS トランジション
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Transitions
+  - Experimental
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS トランジション</strong><rp> (</rp><rt>CSS Transition</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、特定の CSS プロパティの値の間でスムーズな変化を作り出す方法を定義します。タイミング関数を使って、ただ作り出すだけでなく、その進化を定義することもできます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide" name="Guide">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの使用</a></dt>
+ <dd>CSS を使ってスムーズな変化を作る方法についての、ステップ・バイ・ステップのチュートリアルです。この記事では関連する各 CSS プロパティと、それらがどのように作用するかを解説します。</dd>
+</dl>
+
+<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')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS トランジションに関連して、<a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>では、より細かいプロパティの動きの制御を提供します。</li>
+</ul>
diff --git a/files/ja/web/css/css_transitions/using_css_transitions/index.html b/files/ja/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..d01fba6005
--- /dev/null
+++ b/files/ja/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,1072 @@
+---
+title: CSS トランジションの使用
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+tags:
+  - Advanced
+  - CSS
+  - CSS Transitions
+  - CSS3 Transitions
+  - Guide
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<p>{{CSSref}}</p>
+
+<p><span class="seoSummary"><strong>CSS トランジション</strong>は、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。</span>例えば、ある要素の前景色を白色から黒色に変更した場合、通常は即座に前景色が替わります。 CSS トランジションを有効にすると、加速カーブに従った時間間隔で変更が行われ、その変化のすべてをカスタマイズすることができます。</p>
+
+<p>2つの状態間のトランジションを含むアニメーションは、開始状態と最終状態の間の状態がブラウザーによって暗黙的に定義されるため、<em>暗黙的なトランジション</em>と呼ばれることがあります。</p>
+
+<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>CSS トランジションは、アニメーションを開始する場合 (<em>遅延</em>を設定することで)、トランジションをどの程度持続するか (<em>持続時間</em>を設定することによって)、およびトランジションをどのように実行するか (<em>タイミング関数</em>を定義することによって、例えば、直線的または最初は速く、最後に遅くなど) を、 (明示的にリストすることによって) アニメーションするためのプロパティを決定させます。</p>
+
+<h2 id="Which_CSS_properties_can_be_transitioned" name="Which_CSS_properties_can_be_transitioned">トランジション可能な CSS プロパティとは</h2>
+
+<p>ウェブサイトの作成者はどのプロパティを、どのようにアニメーションさせるのかを定義できます。これにより複雑な遷移を起こすことが可能です。プロパティによってはアニメーションさせることに意味がない場合があるので、<a href="/ja/docs/Web/CSS/CSS_animated_properties">アニメーション可能なプロパティ</a>は限られています。</p>
+
+<div class="note">注: アニメーションさせることのできるプロパティは仕様改定により変わっています。</div>
+
+<p class="note"><code>auto</code> の値はしばしばとても複雑になります。仕様書では開始及び終了値が <code>auto</code> の場合はアニメーションしないよう推奨しています。 Gecko を利用したものなど、一部のユーザーエージェントはこの要件を実装しており、 WebKit を利用したものなどではより制約が少なくなります。 <code>auto</code> でアニメーションを利用すると、ブラウザーやそのバージョンによって予測できない結果になる可能性があるため、避けるべきです。</p>
+
+<h2 id="Defining_transitions" name="Defining_transitions">トランジションの定義</h2>
+
+<p>CSS トランジションは一括指定の {{cssxref("transition")}} プロパティを使用して制御されます。トランジションを設定する上で最も良い方法で、パラメータを列挙する数がずれてしまって、とってもイライラしながら CSS のデバッグを多大な時間を使って行うことを防いでくれます。</p>
+
+<p>それぞれのトランジションコンポーネントに対しては以下のサブプロパティを用いてコントロールできます。</p>
+
+<p><strong>(なお、以下のトランジションは、サンプルをお見せするために無限ループさせています。 CSS のトランジションは、プロパティの変更を始点から終点まで視覚化するだけです。ループさせる必要がある場合は、 CSS の <code><a href="/en-US/docs/CSS/animation">animation</a></code> プロパティを参照してください。)</strong></p>
+
+<dl>
+ <dt>{{cssxref("transition-property")}}</dt>
+ <dd>トランジションを適用する CSS プロパティの名前を指定します。ここに指定したプロパティだけが、トランジションによりアニメーションします。通常、それ以外のプロパティの変更は即座に反映されます。</dd>
+ <dt>{{cssxref("transition-duration")}}</dt>
+ <dd>トランジションの実行にかかる所要時間を指定します。単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用されます。または複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができます。
+ <div>
+ <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
+ </div>
+
+ <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-timing-function")}}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">プロパティの中間の値を計算する方法を定義する関数を指定します。<em>タイミング関数</em>はトランジションの中間の値がどのように計算されるかを定義します。多くの<a href="/ja/docs/Web/CSS/timing-function">タイミング関数</a>は対応する関数のグラフを提供することで指定され、これは三次ベジェ関数を定義する4つの点で定義されます。 <a href="http://easings.net/">Easing Functions Cheat Sheet</a> からイージングを選択することもできます。.
+ <div class="cleared">
+ <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: ease</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: linear</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: step-end</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: steps(4, end)</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-delay")}}</dt>
+ <dd>プロパティが変化した時点から、トランジションが実際に始まるまでの待ち時間を定義します。
+ <div>
+ <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css notranslate">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>一括指定の CSS の構文は以下のように書きます。</p>
+
+<pre class="brush: css notranslate">div {
+    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_example" name="Simple_example">単純な例</h3>
+
+<p>この例では4秒間のフォントの大きさのトランジションを行い、ユーザーがマウスを要素上に移動してからアニメーション効果が始まるまで2秒間の遅延を行います。</p>
+
+<pre class="brush: css notranslate">#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+</pre>
+
+<h3 id="Multiple_animated_properties_example" name="Multiple_animated_properties_example">複数のアニメーションするプロパティの例</h3>
+
+<div class="hidden">
+<h4 id="HTML_Content">HTML Content</h4>
+
+<pre class="brush: html; highlight:[3] notranslate">&lt;body&gt;
+    &lt;p&gt;The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.&lt;/p&gt;
+    &lt;div class="box"&gt;Sample&lt;/div&gt;
+&lt;/body&gt;</pre>
+</div>
+
+<h4 id="CSS_Content">CSS Content</h4>
+
+<pre class="brush: css; highlight:[8,9] notranslate">.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+    background-color: #FFCCCC;
+    width: 200px;
+    height: 200px;
+    transform: rotate(180deg);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Multiple_animated_properties_example', 600, 300)}}</p>
+
+<h3 id="When_property_value_lists_are_of_different_lengths" name="When_property_value_lists_are_of_different_lengths">プロパティ値のリストの長さが異なる場合</h3>
+
+<p>何れかのプロパティで、値のリストが他よりも短い場合、以下のように、他と一致するまで繰り返されます。</p>
+
+<pre class="brush: css notranslate">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>以下ののようであるかのように扱われます。</p>
+
+<pre class="brush: css notranslate">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>同様に、何れかのプロパティで値のリストが {{cssxref("transition-property")}} のリストよりも長い場合は切り詰められますので、以下の CSS のようになります。</p>
+
+<pre class="brush: css notranslate">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>これは以下のように解釈されます。</p>
+
+<pre class="brush: css notranslate">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h3 id="Using_transitions_when_highlighting_menus" name="Using_transitions_when_highlighting_menus">メニューのハイライトにトランジションを用いる</h3>
+
+<p>CSS の一般的な使い方として、メニューのアイテムにマウスポインターを乗せたときに、そのアイテムをハイライトさせることがあります。より魅力的な効果を出すためにトランジションを使うことは、簡単にできます。</p>
+
+<p>コードの断片を見る前に、<a href="https://codepen.io/anon/pen/WOEpva">ライブデモ</a>をご覧になるとよいでしょう (ご利用のブラウザーがトランジションに対応している場合)。</p>
+
+<p>まずは、 HTML でメニューを作成します。</p>
+
+<pre class="brush: html notranslate">&lt;nav&gt;
+  &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;a href="#"&gt;About&lt;/a&gt;
+  &lt;a href="#"&gt;Contact Us&lt;/a&gt;
+  &lt;a href="#"&gt;Links&lt;/a&gt;
+&lt;/nav&gt;</pre>
+
+<p>そして、メニューのルック＆フィールを実装するために CSS を作成します。関連のある部分を以下に示します。</p>
+
+<pre class="brush: css notranslate">a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+</pre>
+
+<p>この CSS は、メニューの外見を決めています。また、要素が {{cssxref(":hover")}} および {{cssxref(":focus")}} の状態であるときに、背景色と前景色を変化させています。</p>
+
+<h2 id="JavaScript_examples" name="JavaScript_examples">JavaScript の例</h2>
+
+<div class="note">
+<p>次のような場合の直後にトランジションを使用する場合は注意してください。</p>
+
+<ul>
+ <li><code>.appendChild()</code> を使用して DOM に要素を追加したとき</li>
+ <li>要素の <code>display: none;</code> プロパティを外したとき</li>
+</ul>
+
+<p>この場合、初期の状態が発生せず、要素が常に最後の状態であるかのように扱われます。この制限を会計つする簡単な方法は、トランジションを行いたい CSS プロパティを変更する前に、数ミリ秒の <code>window.setTimeout()</code> を適用することです。</p>
+</div>
+
+<h3 id="Using_transitions_to_make_JavaScript_functionality_smooth" name="Using_transitions_to_make_JavaScript_functionality_smooth">JavaScript の機能をスムーズにするためのトランジション</h3>
+
+<p>トランジションは、 JavaScript による機能に対して何も行うことなしに、よりスムーズにさせることができる素晴らしいツールです。以下の例をご覧ください。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>JavaScript を使用して、ある場所にボールを移動させる効果を作ることができます。</p>
+
+<pre class="brush: js notranslate">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+</pre>
+
+<p>CSS により余分な努力をせずに、上記の効果をスムーズにさせることができます。単に要素へトランジションを追加すると、変化がスムーズに発生するようになります。</p>
+
+<pre class="brush: css notranslate">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+</pre>
+
+<p>この例は、 <a href="http://jsfiddle.net/9h261pzo/291/">http://jsfiddle.net/9h261pzo/291/</a> で実行することができます。</p>
+
+<h3 id="Detecting_the_start_and_completion_of_a_transition" name="Detecting_the_start_and_completion_of_a_transition">トランジションの開始と完了の検出</h3>
+
+<p>{{event("transitionend")}} イベントを使用することでで、アニメーションの実行が終了したことを検出することができます。これは {{domxref("TransitionEvent")}} オブジェクトで、通常の {{domxref("Event")}} オブジェクトに二つのプロパティを追加したものです。</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>文字列で、トランジションが完了した CSS プロパティの名前を示します。</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>浮動小数点値で、イベントが発火してからトランジションが実行された時間を示します。この値は {{cssxref("transition-delay")}} の値に影響されません。</dd>
+</dl>
+
+<p>通常は、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用してこのイベントを監視することができます。</p>
+
+<pre class="brush: js notranslate">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<p>トランジションの開始は {{event("transitionrun")}} (遅延の前に発火) および {{event("transitionstart")}} (遅延の後に発火) を使用して、同じ形で検出することができます。</p>
+
+<pre class="brush: js notranslate">el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);</pre>
+
+<div class="note"><strong>注</strong>: <code>transitionend</code> イベントは、要素に {{cssxref("display")}}<code>: none</code> が適用されたりアニメーション中のプロパティの値が変更されたりして、トランジションが完了する前に中止された場合は発火しません。</div>
+
+<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', '', '')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("TransitionEvent")}} インターフェイスと {{event("transitionend")}} イベント</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使い方</a></li>
+</ul>
diff --git a/files/ja/web/css/css_types/index.html b/files/ja/web/css/css_types/index.html
new file mode 100644
index 0000000000..bbe03843cc
--- /dev/null
+++ b/files/ja/web/css/css_types/index.html
@@ -0,0 +1,171 @@
+---
+title: CSS データ型
+slug: Web/CSS/CSS_Types
+tags:
+  - CSS
+  - CSS Data Type
+  - Guide
+  - Index
+  - Overview
+  - Reference
+  - Syntax
+  - Types
+  - data types
+  - list
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CssRef}}</div>
+
+<p><span class="seoSummary"><strong>CSS データ型</strong>は、 CSS のプロパティや関数で使用される具体的な値 (キーワードや単位を含む) を定義します。これは<a href="https://www.w3.org/TR/css3-values/#component-types">コンポーネント値型</a>の特殊な種類です。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>CSS の形式文法では、データ型は "<code>&lt;</code>" と "<code>&gt;</code>" の不等号で囲まれたキーワードで表記されます。</p>
+
+<h2 id="Index" name="Index">索引</h2>
+
+<p>一連の CSS 仕様書で定義されているデータ型には、以下のようなものがあります。</p>
+
+<div class="index"><span>A</span>
+
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-hint&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-fallback&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-name&gt;")}}</li>
+</ul>
+<span>B</span>
+
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+</ul>
+<span>C</span>
+
+<ul>
+ <li>{{cssxref("&lt;calc-product&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-sum&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-value&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop-angle&gt;")}}</li>
+ <li>{{cssxref("&lt;counter-style&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+</ul>
+<span>D</span>
+
+<ul>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+</ul>
+<span>F</span>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+</ul>
+<span>G</span>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+</ul>
+<span>I</span>
+
+<ul>
+ <li>{{cssxref("&lt;ident&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
+<span>L</span>
+
+<ul>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;length-percentage&gt;")}}</li>
+</ul>
+<span>N</span>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;number-percentage&gt;")}}</li>
+</ul>
+<span>P</span>
+
+<ul>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+</ul>
+<span>Q</span>
+
+<ul>
+ <li>{{cssxref("&lt;quote&gt;")}}</li>
+</ul>
+<span>R</span>
+
+<ul>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+</ul>
+<span>S</span>
+
+<ul>
+ <li>{{cssxref("&lt;shape&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-radius&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+</ul>
+<span>T</span>
+
+<ul>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;toggle-value&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;type-or-unit&gt;")}}</li>
+</ul>
+<span>U</span>
+
+<ul>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+ <li>{{cssxref("&lt;url-modifier&gt;")}}</li>
+</ul>
+<span>Z</span>
+
+<ul>
+ <li>{{cssxref("&lt;zero&gt;")}}</li>
+</ul>
+</div>
+
+<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('CSS4 Values') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
+</ul>
diff --git a/files/ja/web/css/css_values_and_units/index.html b/files/ja/web/css/css_values_and_units/index.html
new file mode 100644
index 0000000000..3b8916285b
--- /dev/null
+++ b/files/ja/web/css/css_values_and_units/index.html
@@ -0,0 +1,499 @@
+---
+title: CSS 値と単位
+slug: Web/CSS/CSS_Values_and_Units
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - values and units
+translation_of: Web/CSS/CSS_Values_and_Units
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">CSS 宣言はすべて、プロパティと値の組を含みます。プロパティによって、値は単純な整数やキーワードから、一連のキーワードや単位つき・単位なしの値などを含みます。CSS プロパティには受け付けるデータ型の組み合わせ -- 値と単位 -- があります。以下ではデータ型の大部分を概観します。より詳しい情報は、それぞれのデータ型のページを参照してください。</p>
+
+<h2 id="Textual_data_types" name="Textual_data_types">テキストのデータ型</h2>
+
+<ul>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li><code>&lt;ident&gt;</code> として定義済みのキーワード</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+
+<p>テキストデータ型は、引用符で囲まれた文字の並びである <code>&lt;string&gt;</code> と、引用符で囲まれていない文字列、すなわち「CSS 識別子」である <code>&lt;ident&gt;</code> のどちらかです。 <code>&lt;string&gt;</code> は単一引用符か二重引用符のどちらかで囲まれます。仕様書で <code>&lt;ident&gt;</code> または <code>&lt;custom-ident&gt;</code> として挙げられている CSS 識別子は、引用符で囲んではいけません。</p>
+
+<p>CSS の仕様では、ウェブ開発者が定義できる値には、アニメーションのキーフレームやフォントファミリーの名前、グリッドエリアなどがあり、これらは {{cssxref("&lt;custom-ident&gt;")}} または {{cssxref("&lt;string&gt;")}} またはその両方の形式で記述します。</p>
+
+<p>ユーザーが定義するテキスト値のうち、引用符があってもなくてもよい箇所では、仕様書には <code>&lt;custom-ident&gt; | &lt;string&gt;</code> のように記してあります。これは、例えばアニメーション名のように、引用符が任意だということです。</p>
+
+<pre class="brush: css notranslate">@keyframe validIdent {
+  /* ここにキーフレーム */
+}
+@keyframe 'validString' {
+  /* ここにキーフレーム */
+}</pre>
+
+<p>引用符で囲んではいけないテキスト値もあります。たとえば {{cssxref("grid-area")}} の値は <code>&lt;custom-ident&gt;</code> なので、もし <code>content</code> という名前のグリッドエリアがあれば、それは引用符なしで書きます。</p>
+
+<pre class="brush: css notranslate">.item {
+  grid-area: content;
+}
+</pre>
+
+<p>いっぽう、 {{cssxref("&lt;string&gt;")}} のデータ型、たとえば {{cssxref("content")}} プロパティの文字列値には引用符が必要です。</p>
+
+<pre class="brush: css notranslate">.item::after {
+    content: "This is my content.";
+}
+</pre>
+
+<p>どんな名前でも (絵文字を含んでいるものでも) 一般的には作れますが、識別子については <code>none</code>、<code>unset</code>、 <code>initial</code>、<code>inherit</code> にはできず、先頭を数字や二重ダッシュにすることもできません。また、一般的に CSS のそのほかの定義済みキーワードを使用することは避けるのが好ましいです。詳しくは {{cssxref("&lt;custom-ident&gt;")}} と {{cssxref("&lt;string&gt;")}} のリファレンスページを参照してください。</p>
+
+<h3 id="Pre-defined_keywords" name="Pre-defined_keywords">定義済みキーワード値</h3>
+
+<p>定義済みキーワードは、特定のプロパティ用に仕様で定義されているテキスト値です。これらのキーワードは CSS 識別子でもあるので、引用符なしで使用します。</p>
+
+<p>CSS の仕様書や MDN のプロパティページで、CSS プロパティの値の構文を見ると、そこに書けるキーワードは次のような形式で列挙されているでしょう。以下の値は、{{cssxref("float")}} で使用できる定義済みキーワードです。</p>
+
+<pre class="syntaxbox notranslate">left <a href="/ja/docs/Web/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/ja/docs/Web/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/ja/docs/Web/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/ja/docs/Web/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>
+
+<p>こうした値は引用符なしで使用します。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+    float: left;
+}
+</code></pre>
+
+<h3 id="CSS-wide_values" name="CSS-wide_values">CSS 全般の値</h3>
+
+<p>プロパティ用に仕様で定められている定義済みキーワードのほかに、すべての CSS プロパティで使える CSS 全般のプロパティ値として、{{cssxref("initial")}}、{{cssxref("inherit")}}、{{cssxref("unset")}} があります。これらは既定値への戻し方を明示するために使用します。</p>
+
+<p><code>initial</code> キーワードは、そのプロパティの初期値として指定された値を表します。<code>inherit</code> キーワードは、その要素の親要素のプロパティで計算された値を表し、親の値を継承します。</p>
+
+<p><code>unset</code> キーワードは、そのプロパティが継承されているか否かによって、<code>inherit</code> または <code>initial</code> のいずれかと同じ動きになります。</p>
+
+<p>{{cssxref("revert")}} という 4 つめの値が Cascade Level 4 の仕様で追加されましたが、いまのところブラウザーの対応状況は好ましくありません。</p>
+
+<h3 id="URLs" name="URLs">URL</h3>
+
+<p>{{cssxref("&lt;url&gt;")}} 型は関数ノテーションのように使用します。これは URL である <code>&lt;string&gt;</code> を受け取ります。渡すのは絶対 URL か相対 URL です。例えば、背景画像を読み込みたいときには以下のどちらの使い方でもできます。</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url("images/my-background.png");
+}</code>
+
+<code>.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}</code>
+</pre>
+
+<p><code>url()</code> の引数は引用符があってもなくてもかまいません。引用符をつけない場合には、<code>&lt;url-token&gt;</code> と同様に読み込まれます。そのため、その場合は <code>&lt;url-token&gt;</code> のように特定の文字のエスケープなどを行う必要があります。詳しくは {{cssxref("&lt;url&gt;")}} を参照してください。</p>
+
+<h2 id="Numeric_data_types" name="Numeric_data_types">数値データ型</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+</ul>
+
+<h3 id="Integers" name="Integers">整数</h3>
+
+<p>整数は 1 桁以上の <code>0</code> から <code>9</code> の十進数で、<code>1024</code>、<code>-55</code> など該当します。整数は <code>+</code> や <code>-</code> を先頭に付けることができますが、記号と整数の間に空白を開けないでください。</p>
+
+<h3 id="Numbers" name="Numbers">数値</h3>
+
+<p>{{cssxref("&lt;number&gt;")}} は実数をあらわします。小数点以下の小数部がなくても構いません。例えば <code>0.255</code>、<code>128</code>、<code>-1.2</code> が該当します。数値にも <code>+</code> や <code>-</code> の記号を先頭に付けることができます。</p>
+
+<h3 id="Dimensions" name="Dimensions">寸法</h3>
+
+<p>{{cssxref("&lt;dimension&gt;")}} は、<code>&lt;number&gt;</code> に単位が付いたものです。例えば <code>45deg</code>、<code>100ms</code>、<code>10px</code> が該当します。付けた単位の識別子は大文字小文字が区別されません。数値と単位の間には、空白やその他の文字を入れないでください。例えば、<code>1 cm</code> は無効です。</p>
+
+<p>CSS では、以下のものをあらわすために寸法を使います。</p>
+
+<ul>
+ <li>{{cssxref("&lt;length&gt;")}} (距離の単位)</li>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+</ul>
+
+<p>以下の節で、これらについて説明します。</p>
+
+<h4 id="Distance_units" name="Distance_units">距離の単位</h4>
+
+<p>長さのような距離の単位がプロパティの値として使用できるとき、これを {{cssxref("&lt;length&gt;")}} 型と呼びます。CSS の長さには、相対的な長さと絶対的な長さの 2 種類があります。</p>
+
+<p>相対的な長さの単位は、他のものを基準に長さを表します。例えば、<code>em</code> はその要素のフォントサイズを基準とする値で、<code>vh</code> はビューポートの高さを基準とする値です。</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">基準</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>その要素のフォントサイズ</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>その要素のフォントの x-height</td>
+  </tr>
+  <tr>
+   <td><code>cap</code></td>
+   <td>その要素のフォントの Cap height (大文字の名目上の高さ)</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>その要素のフォントにおける narrow グリフの平均文字送り幅で、“0” (ZERO, U+0030) のグリフを表す</td>
+  </tr>
+  <tr>
+   <td><code>ic</code></td>
+   <td>その要素のフォントにおける full width グリフの平均文字送り幅で、“水” (CJK water ideograph, U+6C34) のグリフを表す</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>ルート要素のフォントサイズ</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>その要素の行の高さ</td>
+  </tr>
+  <tr>
+   <td><code>rlh</code></td>
+   <td>ルート要素の行の高さ</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>ビューポートの幅の 1%</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>ビューポートの高さの 1%</td>
+  </tr>
+  <tr>
+   <td><code>vi</code></td>
+   <td>ルート要素のインライン軸におけるビューポートの大きさの 1%。</td>
+  </tr>
+  <tr>
+   <td><code>vb</code></td>
+   <td>ルート要素のブロック軸におけるビューポートの大きさの 1%。</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>ビューポートの小さい側の 1%。</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>ビューポートの大きい側の 1%。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>絶対的な長さの単位は物理的な長さであり、インチやセンチメートルなどと決まっています。そのため、これらの単位の多くは、印刷などの固定サイズの媒体への出力に向いています。たとえば、 <code>mm</code> は物理的なミリメートルで、センチメートルの 1/10 です。</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">名称</th>
+   <th scope="col">換算</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>センチメートル</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>ミリメートル</td>
+   <td>1mm = 1cm の 1/10</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>1/4 ミリメートル</td>
+   <td>1Q = 1cm の 1/40</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>インチ</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>パイカ</td>
+   <td>1pc = 1in の 1/16</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>ポイント</td>
+   <td>1pt = 1in の 1/72</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>ピクセル</td>
+   <td>1px = 1in の 1/96</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>長さの値を使用する場合、その長さが <code>0</code> なら単位をつける必要はありません。そうでないときには、単位は必須で、大文字小文字は区別せず、値の数値部分の直後に空白をはさむことなく付けなければなりません。</p>
+
+<h4 id="Angle_units" name="Angle_units">角度の単位</h4>
+
+<p>角度の値は {{cssxref("&lt;angle&gt;")}} 型で表され、以下の値を受け付けます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">名前</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>deg</code></td>
+   <td>角度</td>
+   <td>完全な円は 360 度です。</td>
+  </tr>
+  <tr>
+   <td><code>grad</code></td>
+   <td>グラディアン</td>
+   <td>完全な円は 400 グラディアンです。</td>
+  </tr>
+  <tr>
+   <td><code>rad</code></td>
+   <td>ラジアン</td>
+   <td>完全な円は 2π ラジアンです。</td>
+  </tr>
+  <tr>
+   <td><code>turn</code></td>
+   <td>周</td>
+   <td>完全な円は 1 周です。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Time_units" name="Time_units">時間の単位</h4>
+
+<p>時間の値は {{cssxref("&lt;time&gt;")}} 型で表されます。時間の値を含めるときは、単位 -- the <code>s</code> か <code>ms</code> -- の指定が必要です。以下の値を受け付けます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">名前</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>s</code></td>
+   <td>秒</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>ms</code></td>
+   <td>ミリ秒</td>
+   <td>1000 ミリ秒で 1 秒です。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Frequency_units" name="Frequency_units">周期の単位</h4>
+
+<p>周期の値は {{cssxref("&lt;frequency&gt;")}} 型で表されます。以下の値を受け付けます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">名前</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hz</code></td>
+   <td>ヘルツ</td>
+   <td>一秒間に発生する回数を表します。</td>
+  </tr>
+  <tr>
+   <td><code>kHz</code></td>
+   <td>キロヘルツ</td>
+   <td>1 キロヘルツは 1000 ヘルツです。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>1Hz</code> は <code>1hz</code> や <code>1HZ</code> とも表記でき、一秒あたり一周となります。</p>
+
+<h4 id="Resolution_unit" name="Resolution_unit">解像度の単位</h4>
+
+<p>解像度の単位は {{cssxref("&lt;resolution&gt;")}} 型で表されます。これらは、CSS のインチ、センチメートル、ピクセルに収まるドット数を示すことで、画面などの視覚表現におけるドット 1 つの大きさを表します。以下の値を受け付けます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">単位</th>
+   <th scope="col">説明</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>dpi</code></td>
+   <td>インチ毎ドット。</td>
+  </tr>
+  <tr>
+   <td><code>dpcm</code></td>
+   <td>センチメートル毎ドット。</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code>、<code>x</code></td>
+   <td>ピクセル単位毎ドット。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Percentages" name="Percentages">パーセント</h3>
+
+<p>{{cssxref("&lt;percentage&gt;")}} は他の値の割合を表す型です。</p>
+
+<p>パーセント値は、常に長さなどの他の量に対する相対的な値です。パーセントにできるプロパティごとに、パーセントが参照する量も定義されています。この量は、同じ要素の別のプロパティの値であったり、祖先要素のプロパティの値であったり、包含ブロックの測定値であったり、何か他のものであったりします。</p>
+
+<p>例えば、ボックスの {{cssxref("width")}} をパーセントで指定した場合、ボックスの親要素で計算された幅を参照するパーセントになります。</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 50%;
+}</pre>
+
+<h3 id="パーセントと寸法の混合">パーセントと寸法の混合</h3>
+
+<p>一部のプロパティでは、2 つの型のいずれかの寸法を受け入れることがあります。<code>&lt;length&gt;</code> <strong>または</strong> <code>&lt;percentage&gt;</code> といった具合です。この場合の許容値は、{{cssxref("&lt;length-percentage&gt;")}} のように組合わせ単位として仕様書で詳解しています。他に取りうる組み合わせは以下の通りです。</p>
+
+<ul>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+</ul>
+
+<h3 id="特殊データ型_他の仕様書で定義">特殊データ型 (他の仕様書で定義)</h3>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+</ul>
+
+<h4 id="色">色</h4>
+
+<p>{{cssxref("&lt;color&gt;")}} の値は要素機能 (背景色など) の色を指定します。これは <a href="https://drafts.csswg.org/css-color-3/">CSS カラーモジュール</a> で定義されています。</p>
+
+<h4 id="画像">画像</h4>
+
+<p>{{cssxref("&lt;image&gt;")}} の値は、CSS で使用できる各種すべての画像を指定します。これは <a href="https://www.w3.org/TR/css-images-4/">CSS 画像の値と置換要素モジュール</a> で定義されています。</p>
+
+<h4 id="位置">位置</h4>
+
+<p>{{cssxref("&lt;position&gt;")}} 型は位置取りできる領域内におけるオブジェクトの 2D 位置を定義します。例えば、コンテナ要素内の背景画像がこれにあたります。この型は {{cssxref("background-position")}} として解釈されるために、<a href="https://www.w3.org/TR/css-backgrounds-3/">CSS の背景と縁の仕様書</a> で定義されています。</p>
+
+<h3 id="関数ノテーション">関数ノテーション</h3>
+
+<ul>
+ <li>{{cssxref("calc()")}}</li>
+ <li>{{cssxref("min", "min()")}}</li>
+ <li>{{cssxref("max", "max()")}}</li>
+ <li>{{cssxref("clamp", "clamp()")}}</li>
+ <li>{{cssxref("toggle", "toggle()")}}</li>
+ <li>{{cssxref("attr", "attr()")}}</li>
+</ul>
+
+<p>関数ノテーションは、より複雑な型を表現したり、特殊な処理を呼び出すことが CSS でできるものです。この構文は、関数名の直後に左括弧 <code>(</code> の後、ノテーションの引数、右括弧 <code>)</code> が続きます。関数は複数の引数を取ることができ、CSS のプロパティ値と同様の形式になっています。</p>
+
+<p>括弧内の空白は許容されますが、任意です。(ただし、<code>min()</code>、<code>max()</code>、<code>clamp()</code> 関数については、各ページ内の空白に関する注意事項を参照してください。)</p>
+
+<p><code>rgba()</code> のように、レガシーな関数ノテーションの中にはカンマを使用するものもあります。しかし、カンマは一般的にリスト内の項目を区切るためにのみ使用されます。引数の区切りにカンマを使用するとき、カンマの前後に空白を入れるのは任意です。</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("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code>, <code>rlh</code> 単位の追加。<br>
+    <code>min()</code>, <code>max()</code>, <code>clamp()</code> 関数ノテーションの追加<br>
+    <code>toggle()</code> の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td><code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td>
+    <p><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数のカンマ無し構文の追加。<code>rgb()</code> と <code>hsl()</code> にアルファ値を追加し、<code>rgba()</code> と <code>hsla()</code> をこれらへの (非推奨の) エイリアスに変更。<br>
+     <code>rebeccapurple</code> カラーキワードを追加。<br>
+     4 と 8 桁の 16 進カラー値を追加、最後の桁はアルファ値を表します。<code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 関数の追加。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td>システム色を非推奨化。SVG カラーを追加。<code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数の追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>
+    <p><code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code> の追加。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>画像の初回定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS 基本データ型</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 導入: 値と単位</a></li>
+</ul>
diff --git a/files/ja/web/css/css_variables/index.html b/files/ja/web/css/css_variables/index.html
new file mode 100644
index 0000000000..8aa76d0885
--- /dev/null
+++ b/files/ja/web/css/css_variables/index.html
@@ -0,0 +1,40 @@
+---
+title: 段階変数用のCSSカスタムプロパティ
+slug: Web/CSS/CSS_Variables
+tags:
+  - CSS
+  - CSS Variables
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Variables
+---
+<div>{{cssref}}</div>
+
+<p><strong>段階変数用のCSSカスタムプロパティ</strong>とは何度も繰り返して用いられるカスタムプロパティを作成できる<a href="/ja/docs/Web/CSS">CSS</a>モジュールです。</p>
+
+<h2 id="CSSプロパティ">CSSプロパティ</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("--*")}}</li>
+</ul>
+</div>
+
+<h2 id="仕様">仕様</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 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>初期仕様</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/css_writing_modes/index.html b/files/ja/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..999d3a8526
--- /dev/null
+++ b/files/ja/web/css/css_writing_modes/index.html
@@ -0,0 +1,58 @@
+---
+title: CSS 書字方向
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - CSS 書字方向
+  - リファレンス
+  - 日本語処理
+  - 概要
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>CSS 書字方向</strong><rp> (</rp><rt>CSS Writing Modes</rt><rp>) </rp></ruby>は CSS モジュールの一つで、様々な国の書字方向、例えば左書き (ラテン系やインド語系の文章)、右書き (ヘブライ語やアラビア語の文章)、双方向 (左書きと右書きが混在する場合)、縦書き (一部のアジア言語で使われます) などを定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<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 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ja/web/css/cssom_view/index.html b/files/ja/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..3978a9a3ed
--- /dev/null
+++ b/files/ja/web/css/cssom_view/index.html
@@ -0,0 +1,61 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - CSS
+  - CSSOM
+  - CSSOM View
+  - Layout
+  - Reference
+  - 概要
+translation_of: Web/CSS/CSSOM_View
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSSOM View</strong> は CSS のモジュールの一つで、文書の表示方法、特にスクロールの振る舞いを操作できるようにするものです。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-behavior")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></dt>
+ <dd>モニター上のウィンドウ、モバイル機器のビューポート、印刷時の紙上の位置などのディスプレイコンテキストにおける位置を特定するために使われる座標系についてのガイドです。</dd>
+</dl>
+
+<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('CSSOM View')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="scroll-behavior_プロパティ"><code>scroll-behavior</code> プロパティ</h3>
+
+<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.properties.scroll-behavior")}}</p>
+</div>
diff --git a/files/ja/web/css/cursor/index.html b/files/ja/web/css/cursor/index.html
new file mode 100644
index 0000000000..e488510257
--- /dev/null
+++ b/files/ja/web/css/cursor/index.html
@@ -0,0 +1,331 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - Arrow
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Cursor
+  - Custom Cursor
+  - Reference
+  - UI
+  - mouse
+  - pointer
+  - 'recipe:css-property'
+  - カスタムカーソル
+  - カーソル
+  - ポインター
+  - マウス
+translation_of: Web/CSS/cursor
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>cursor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+cursor: pointer;
+cursor: auto;
+
+/* URL とキーワードによる代替 */
+cursor: url(hand.cur), pointer;
+
+/* URL と座標とキーワードによる代替 */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* グローバル値 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p> <code>cursor</code> プロパティはゼロ個以上の <code><a href="#&lt;url>">&lt;url&gt;</a></code> をカンマで区切ったものと、それに続く必須の<a href="#Keyword values">キーワード値</a>によって指定します。それぞれの <code>&lt;url&gt;</code> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。</p>
+
+<p>それぞれの <code>&lt;url&gt;</code> には二つの空白で区切った数値を続けることができ、 <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。</p>
+
+<p>例えば、これは <code>&lt;url&gt;</code> 値を使用して二つの画像を指定し、 <code>&lt;x&gt;&lt;y&gt;</code> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは <code>progress</code> キーワードで代替されるように指定しています。</p>
+
+<pre class="brush: css notranslate">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="&lt;url>">&lt;url&gt;</code></dt>
+ <code>url(…)</code> の形式か、又はカンマ区切りのリスト <code>url(…), url(…), …</code> で画像の URL を指定します。複数の {{cssxref("&lt;url&gt;")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した <code>url()</code> 形式の記述は無効となります。詳細は <a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a>を参照して下さい。
+ <dt><code id="&lt;x> &lt;y>">&lt;x&gt;</code> <code>&lt;y&gt;</code> {{experimental_inline}}</dt>
+ <dd>任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。</dd>
+ <dt><span id="Keyword values">キーワード値</span></dt>
+ <dd>
+ <p><em>値の上にマウスを当てると、各項目の実際の表示を確認できます。</em></p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">カテゴリ</th>
+    <th scope="col">CSS 値</th>
+    <th scope="col">例</th>
+    <th scope="col">説明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr style="cursor: auto;">
+    <th rowspan="3">一般</th>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には <code>text</code> キーワードを指定した場合と同様です。</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>プラットフォームに依存する既定のカーソルです。ふつうは矢印です。</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>カーソルを表示しません。</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <th rowspan="5" scope="row" style="cursor: auto;">リンクおよび状態</th>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+   <td>コンテキストメニューが利用できることを示します。</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>ヘルプが使用可能であることを示します。</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>バックグラウンドでプログラムがビジー状態dが、 (<code>wait</code> とは異なり) ユーザーがインターフェイスを操作可能であることを示します。</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>プログラムがビジー状態で、 (<code>progress</code> とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <th rowspan="4" scope="row" style="cursor: auto;">選択</th>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>表のセルまたは一連のセルが選択できることを示します。</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>テキストを選択可能であることを示します。通常、 I ビームが表示されます。</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <th rowspan="7" scope="row" style="cursor: auto;">ドラッグ＆ドロップ</th>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>エイリアスやショートカットが作成されることを示します。</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>何かがコピーされることを示します。</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>何かが移動されることを示します。</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>現在の位置にアイテムがドロップできないことを示します。<br>
+     {{bug("275173")}}: Windows および Mac OS X では、 <code>no-drop</code> が <code>not-allowed</code> と同じです。</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>要求された操作が受け付けられないことを示します。</td>
+   </tr>
+   <tr id="grab" style="cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td>何かがグラブ (移動のためにドラッグ) することができることを示します。</td>
+   </tr>
+   <tr style="cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td>何かがグラブ (移動のためにドラッグ) されようとしていることを示します。</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <th rowspan="15" scope="row" style="cursor: auto;">サイズ変更＆スクロール</th>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>何かが任意の方向にスクロール (パン) 可能であることを示します。<br>
+    {{bug("275174")}}: Windows では、 <code>all-scroll</code> は <code>move</code> 同じです。</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="上方向へのサイズ変更カーソルの例" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">辺が移動できることを表します。例えば、 <code>se-resize</code> のカーソルはボックスの<ruby><em>南東</em><rp> (</rp><rt>south-east</rt><rp>) </rp></ruby>の角から移動を開始した時に使われます。<br>
+     環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 <code>n-resize</code> および <code>s-resize</code> は <code>ns-resize</code> と同じです。</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="右方向へのサイズ変更カーソルの例" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="下方向へのサイズ変更カーソルの例" src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="左方向へのサイズ変更カーソルの例" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="右上方向へのサイズ変更カーソルの例" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="左上方向へのサイズ変更カーソルの例" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="右下方向へのサイズ変更カーソルの例" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="左下方向へのサイズ変更カーソルの例" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">双方向へのサイズ変更が可能であることを示します。</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: zoom-in;">
+    <th rowspan="2" style="cursor: auto;">拡大/縮小</th>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>拡大/縮小が可能であることを示す</p>
+    </td>
+   </tr>
+   <tr style="cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>仕様書では <code>cursor</code> について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。</p>
+
+<p>カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_cursor_types" name="Setting_cursor_types">カーソルの種類の設定</h3>
+
+<pre class="brush:css notranslate">.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL を使用する場合は、代替のキーワード値が必要です。 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+</pre>
+
+<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 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>幾つかのキーワード、ポジション構文、 <code>url()</code> 関数形式の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.properties.cursor")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li>{{cssxref("url()", "url()")}} 関数</li>
+</ul>
diff --git a/files/ja/web/css/custom-ident/index.html b/files/ja/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..0770a40aac
--- /dev/null
+++ b/files/ja/web/css/custom-ident/index.html
@@ -0,0 +1,134 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;custom-ident&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;custom-ident&gt;</code> の構文は CSS の識別子 (プロパティ名など) に似ていますが、<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>する点が違います。これは次の文字から成る文字の並びです:</p>
+
+<ul>
+ <li>任意のアルファベット (<code>A</code>-<code>Z</code>, <code>a</code>-<code>z</code>)</li>
+ <li>任意の数字 (<code>0</code>-<code>9</code>)</li>
+ <li>ハイフン (<code>-</code>)</li>
+ <li>アンダースコア (<code>_</code>)</li>
+ <li>エスケープ文字 (バックスラッシュ <code>\</code> に続く)</li>
+ <li><a href="http://ja.wikipedia.org/wiki/Unicode">Unicode</a> 文字 (バックスラッシュ <code>\</code> と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）</li>
+</ul>
+
+<p>このデータ値は<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>するため、<code>id1</code>、<code>Id1</code>、<code>iD1</code>、<code>ID1</code> はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 <code>toto\?</code> と <code>toto\3F</code> は同じ識別子です。</p>
+
+<h3 id="Forbidden_values" name="Forbidden_values">禁止されている値</h3>
+
+<p><code>&lt;custom-ident&gt;</code> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("&lt;string&gt;")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (<code>-</code>) および、それら続くものであってはなりません。</p>
+
+<p>曖昧さを避けるため、 <code>&lt;custom-ident&gt;</code> を使用する各プロパティは、特定の値の使用を禁止しています:</p>
+
+<dl>
+ <dt>{{CSSxRef("animation-name")}}</dt>
+ <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd>
+ <dt>{{CSSxRef("counter-reset")}}</dt>
+ <dt>{{CSSxRef("counter-increment")}}</dt>
+ <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd>
+ <dt>{{CSSxRef("@counter-style")}}</dt>
+ <dt>{{CSSxRef("list-style-type")}}</dt>
+ <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>none</code>、 <code>inline</code> 、そして <code>outside</code> の値を禁止しています。また、かなりの数の定義済みの値が様々なブラウザーに実装されています: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>.</dd>
+ <dt>{{CSSxRef("grid-row-start")}}<br>
+ {{CSSxRef("grid-row-end")}}<br>
+ {{CSSxRef("grid-column-start")}}<br>
+ {{CSSxRef("grid-column-end")}}</dt>
+ <dd><code>span</code> 値を禁止しています。</dd>
+ <dt>{{CSSxRef("will-change")}}</dt>
+ <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>will-change</code>、 <code>auto</code>、 <code>scroll-position</code> そして <code>contents</code> の値を禁止しています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_identifiers" name="Valid_identifiers">有効な識別子</h3>
+
+<pre class="notranslate">nono79            アルファベットと数字の組み合わせ
+ground-level      アルファベットとダッシュの組み合わせ
+-test             ダッシュとそれに続くアルファベット
+_internal         アンダースコアとそれに続くアルファベット
+\22 toto          Unicode 文字とそれに続くアルファベット
+bili\.bob         ピリオドは正しくエスケープされています
+</pre>
+
+<h3 id="Invalid_identifiers" name="Invalid_identifiers">無効な識別子</h3>
+
+<pre class="notranslate">34rem             数字で始まってはいけません
+-12rad            ダッシュで始まって数字が続いてはいけません
+bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
+--toto            2 つのダッシュで始まってはいけません
+'bilibob'         &lt;string&gt; です
+"bilibob"         &lt;string&gt; です</pre>
+
+<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('CSS4 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>{{CSSxRef("will-change")}} で除外する値を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>キーワードの有限リストの代わりに <code>&lt;custom-ident&gt;</code> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td><code>&lt;identifier&gt;</code> から <code>&lt;custom-ident&gt;</code> へ改名。使い方を新しい <code>counter-set</code> プロパティへ追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>{{CSSxRef("animation-name")}} で除外する値を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#custom-idents', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;identifier&gt;</code> から <code>&lt;custom-ident&gt;</code> へ改名。擬似型とし、除外値の使用を禁止した。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><em>このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。</em></p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;ident&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/descendant_combinator/index.html b/files/ja/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..b8fdf4239a
--- /dev/null
+++ b/files/ja/web/css/descendant_combinator/index.html
@@ -0,0 +1,109 @@
+---
+title: 子孫結合子
+slug: Web/CSS/Descendant_combinator
+tags:
+  - CSS
+  - Reference
+  - Selector
+  - Selectors
+translation_of: Web/CSS/Descendant_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><ruby><strong>子孫結合子</strong><rp> (</rp><rt>descendant combinator</rt><rp>)</rp></ruby> — 通常は単一の空白文字 (<code> </code>) で表される — は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。子孫結合子を利用したセレクターは<dfn>子孫セレクター</dfn>と呼ばれます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* "my-things" リストの子孫のリスト項目 */
+ul.my-things li {
+  margin: 2em;
+}</pre>
+
+<p>子孫結合子は、技術的には他の結合子がない2つのセレクターの間にある1つ以上の {{Glossary("CSS")}} {{Glossary("Whitespace", "ホワイトスペース")}}文字 ― 空白文字や4種類の制御文字 (復帰、ページ送り、改行、タブ文字) のうちの1つ ― です。さらに、結合子としてのホワイトスペース文字には任意の数の CSS コメントを含めることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>セレクター1</var> <var>セレクター2</var> {
+  <var>/* プロパティ宣言 */</var>
+}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;
+    &lt;div&gt;Item 1&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Subitem A&lt;/li&gt;
+      &lt;li&gt;Subitem B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;Item 2&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Subitem A&lt;/li&gt;
+      &lt;li&gt;Subitem B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 160)}}</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("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.descendant")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></li>
+</ul>
diff --git a/files/ja/web/css/dimension/index.html b/files/ja/web/css/dimension/index.html
new file mode 100644
index 0000000000..88d5afc5df
--- /dev/null
+++ b/files/ja/web/css/dimension/index.html
@@ -0,0 +1,82 @@
+---
+title: dimension
+slug: Web/CSS/dimension
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Reference
+  - dimension
+  - unit
+  - value
+  - 値
+  - 単位
+translation_of: Web/CSS/dimension
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;dimension&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{CSSxRef("&lt;number&gt;")}} とそれに添付された単位を表します (10px など)。</p>
+
+<p>CSS は dimension を使用して、距離 ({{CSSxRef("&lt;length&gt;")}})、時間 ({{CSSxRef("&lt;time&gt;")}})、周期 ({{CSSxRef("&lt;frequency&gt;")}})、解像度 ({{CSSxRef("&lt;resolution&gt;")}})、その他の量を指定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;dimension&gt;</code> の構文は、 {{CSSxRef("&lt;number&gt;")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_dimensions" name="Valid_dimensions">妥当な dimension</h3>
+
+<pre class="syntaxbox example-good">12px      12ピクセル
+1rem      1rem
+1.2pt     1.2ポイント
+2200ms    2200ミリ秒
+200hz     200ヘルツ
+200Hz     200ヘルツ (値は大文字小文字の区別なし)
+</pre>
+
+<h3 id="Invalid_dimensions" name="Invalid_dimensions">妥当ではない dimension</h3>
+
+<pre class="syntaxbox example-bad">12 px       単位は数値の直後に来る必要がある。
+12"px"      単位は識別子であり、引用符で囲まない。
+</pre>
+
+<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("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td><code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code> を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code> を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Numbers and Length において定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>"length units" のもとに初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.dimension")}}</p>
diff --git a/files/ja/web/css/direction/index.html b/files/ja/web/css/direction/index.html
new file mode 100644
index 0000000000..17d49de476
--- /dev/null
+++ b/files/ja/web/css/direction/index.html
@@ -0,0 +1,99 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <code>direction</code> プロパティは文章の記述方向にあわせて設定されるべきです。ヘブライ語やアラビア語のテキストでは <code>rtl</code> を、それ以外では <code>ltr</code> を使います。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+
+
+
+<p>通常、この設定は CSS から直接行うのではなく、文書の一部として HTML の <code>dir</code> 属性を使うなどして行うほうがよいでしょう。</p>
+
+<p>このプロパティは基本的な文章の方向と {{Cssxref("unicode-bidi")}} プロパティで作られた 埋め込み (embeddings) の方向を設定します。また、テキストやブロックレベル要素のデフォルトの文字揃えや、テーブルの行内にセルが流し込まれる方向を決めます。</p>
+
+<p>HTML の <code>dir</code> 属性と違って、<code>direction</code> プロパティはテーブルの列からテーブルのセルに継承されません。これは CSS の継承が文書木に従うためで、テーブルセルはテーブルの列の中ではなく、行の中にあるからです。</p>
+
+<p><code>direction</code> プロパティと {{cssxref("unicode-bidi")}} プロパティは、 {{cssxref("all")}} 短縮プロパティの影響を受けない唯一のプロパティです。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>デフォルト値です。テキストと他の要素は左から右に進みます</dd>
+ <dt><code>rtl</code></dt>
+ <dd>テキストと他の要素は右から左に進みます</dd>
+</dl>
+
+<p>インラインレベル要素で <code>direction</code> プロパティに効果を持たせたいときは、{{Cssxref("unicode-bidi")}} プロパティの値が <code>embed</code> もしくは <code>override</code> である必要があります。</p>
+
+<h3 id="形式文法">形式文法</h3>
+
+<pre>{{csssyntax("direction")}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">仕様</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 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.properties.direction")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/display-box/index.html b/files/ja/web/css/display-box/index.html
new file mode 100644
index 0000000000..c17806224e
--- /dev/null
+++ b/files/ja/web/css/display-box/index.html
@@ -0,0 +1,127 @@
+---
+title: <display-box>
+slug: Web/CSS/display-box
+tags:
+  - CSS
+  - CSS データ型
+  - CSS 表示
+  - Reference
+  - display-box
+translation_of: Web/CSS/display-box
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>有効な <code>&lt;display-box&gt;</code> の値は以下のとおりです。</p>
+
+<dl>
+ <dt><code>contents</code> {{Experimental_Inline}}</dt>
+ <dd>これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 <code>contents</code> の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> を参照してください。<br>
+ <br>
+ <em>ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述の<a href="#Accessibility_concerns">アクセシビリティの考慮</a>の節をご覧ください。</em></dd>
+ <dt><code>none</code></dt>
+ <dd>要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。<br>
+ 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>多くのブラウザーの現在の実装では、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から <code>display</code> の値が <code>contents</code> である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは <a href="https://drafts.csswg.org/css-display/#the-display-properties">CSSWG 仕様書</a>によれば、正しくない動作です。</p>
+
+<ul>
+ <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
+ <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>最初の例では、 secret クラスの段落に <code>display: none</code> を設定します。ボックスとその内容は表示されなくなります。</p>
+
+<h3 id="display_none">display: none</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Visible text&lt;/p&gt;
+&lt;p class="secret"&gt;Invisible text&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p.secret {
+  display: none;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+
+<h3 id="display_contents">display: contents</h3>
+
+<p>この例では、外側の {{htmlelement("div")}} が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 <code>display: contents</code> も指定されているので、この <code>&lt;div&gt;</code> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;div&gt;Inner div.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer &gt; div {
+  border: 1px solid green;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("display_contents", 300, 60)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<h3 id="Support_of_contents" name="Support_of_contents">contents の対応</h3>
+
+<p>{{Compat("css.properties.display.contents", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li>
+</ul>
diff --git a/files/ja/web/css/display-inside/index.html b/files/ja/web/css/display-inside/index.html
new file mode 100644
index 0000000000..25d3c62a77
--- /dev/null
+++ b/files/ja/web/css/display-inside/index.html
@@ -0,0 +1,122 @@
+---
+title: <display-inside>
+slug: Web/CSS/display-inside
+tags:
+  - CSS
+  - CSS 表示
+  - Reference
+  - display
+  - display-inside
+translation_of: Web/CSS/display-inside
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは <code>display</code> プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-outside&gt;")}} のキーワードと共に使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>有効な <code>&lt;display-inside&gt;</code> の値は以下の通りです。</p>
+
+<dl>
+ <dt><code>flow</code> {{Experimental_Inline}}</dt>
+ <dd>要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。
+ <p>外部表示種別が <code>inline</code> または <code>run-in</code> であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。</p>
+
+ <p>ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a> (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。</p>
+ </dd>
+ <dt><code>flow-root</code></dt>
+ <dd>要素は、新たな<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。</dd>
+ <dt><code>table</code></dt>
+ <dd>HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。</dd>
+ <dt><code>flex</code></dt>
+ <dd>要素は、ブロック要素のように動作しつつ、そのコンテンツを<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスモデル</a>に従ってレイアウトします。</dd>
+ <dt><code>grid</code></dt>
+ <dd>要素は、ブロック要素のように動作しつつ、そのコンテンツを<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドモデル</a>に従ってレイアウトします。</dd>
+ <dt><code>ruby</code> {{Experimental_Inline}}</dt>
+ <dd>要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ</strong>: 二つの値の構文に対応しているブラウザーは、 <code>display: flex</code> や <code>display: grid</code> などの内部表示種別のみが指定されていると、外部表示種別を <code>block</code> に設定します。これで期待通りに動作します。例えば、ある要素を <code>display: grid</code> に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、親ボックスは <code>display: flow-root</code> となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+  &lt;p&gt;I am content inside the container.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root;
+}
+
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 180)}}</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>
+
+<h3 id="Support_of_multiple_keyword_values" name="Support_of_multiple_keyword_values">複数のキーワードの対応</h3>
+
+<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
+
+<ul>
+ <li>Chromium のバグ: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=804600">https://bugs.chromium.org/p/chromium/issues/detail?id=804600</a></li>
+</ul>
+
+<h3 id="Support_of_flow-root" name="Support_of_flow-root">flow-root の対応</h3>
+
+<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
+
+<h3 id="Support_of_table" name="Support_of_table">table の対応</h3>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="grid_の対応">grid の対応</h3>
+
+<p>{{Compat("css.properties.display.grid", 10)}}</p>
+
+<h3 id="Support_of_flex" name="Support_of_flex">flex の対応</h3>
+
+<p>{{Compat("css.properties.display.flex", 10)}}</p>
+
+<h3 id="Support_of_ruby" name="Support_of_ruby">ruby の対応</h3>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+</ul>
diff --git a/files/ja/web/css/display-internal/index.html b/files/ja/web/css/display-internal/index.html
new file mode 100644
index 0000000000..86170edf18
--- /dev/null
+++ b/files/ja/web/css/display-internal/index.html
@@ -0,0 +1,131 @@
+---
+title: <display-internal>
+slug: Web/CSS/display-internal
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Data Type
+  - Reference
+  - display-internal
+translation_of: Web/CSS/display-internal
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><code>table</code> や <code>ruby</code> のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>有効な <code>&lt;display-internal&gt;</code> の値は次の通りです。</p>
+
+<dl>
+ <dt><code>table-row-group</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。</dd>
+ <dt><code>table-header-group</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。</dd>
+ <dt><code>table-footer-group</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。</dd>
+ <dt><code>table-row</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。</dd>
+ <dt><code>table-cell</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。</dd>
+ <dt><code>table-column-group</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。</dd>
+ <dt><code>table-column</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。</dd>
+ <dt><code>table-caption</code></dt>
+ <dd>これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。</dd>
+ <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
+ <dd>これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。</dd>
+ <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
+ <dd>これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。</dd>
+ <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
+ <dd>これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。</dd>
+ <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
+ <dd>これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS_tables_example" name="CSS_tables_example">CSS テーブルの例</h3>
+
+<p>以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Name&lt;/label&gt;
+    &lt;input type="text" id="name" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age&lt;/label&gt;
+    &lt;input type="text" id="age" name="age"&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  display: table;
+}
+
+div {
+  display: table-row;
+}
+
+label, input {
+  display: table-cell;
+  margin: 5px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<h3 id="Support_of_table_values" name="Support_of_table_values">対応している table の値</h3>
+
+<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Support_of_ruby_values" name="Support_of_ruby_values">対応している ruby の値</h3>
+
+<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/display-legacy/index.html b/files/ja/web/css/display-legacy/index.html
new file mode 100644
index 0000000000..8b608159ad
--- /dev/null
+++ b/files/ja/web/css/display-legacy/index.html
@@ -0,0 +1,122 @@
+---
+title: <display-legacy>
+slug: Web/CSS/display-legacy
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Data Type
+  - Reference
+  - display-legacy
+translation_of: Web/CSS/display-legacy
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">CSS 2 では <code>display</code> プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>有効な <code>&lt;display-legacy&gt;</code> は以下のとおりです。</p>
+
+<dl>
+ <dt><code>inline-block</code></dt>
+ <dd>この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。<br>
+ <br>
+ これは <code>inline flow-root</code> と等価です。</dd>
+ <dt><code>inline-table</code></dt>
+ <dd><code>inline-table</code> は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。<br>
+ <br>
+ これは <code>inline table</code> と等価です。</dd>
+ <dt><code>inline-flex</code></dt>
+ <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。<br>
+ <br>
+ これは <code>inline flex</code> と等価です。</dd>
+ <dt><code>inline-grid</code></dt>
+ <dd>要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。<br>
+ <br>
+ これは <code>inline grid</code> と等価です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。</p>
+
+<div id="Example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div&gt;Flex Item&lt;/div&gt;
+  &lt;div&gt;Flex Item&lt;/div&gt;
+&lt;/div&gt;
+
+Not a flex item
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 300, 150)}}</p>
+</div>
+
+<p>新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline flex;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="inline-block_の対応">inline-block の対応</h3>
+
+<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+
+<h3 id="inline-table_の対応">inline-table の対応</h3>
+
+<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+
+<h3 id="inline-flex_の対応">inline-flex の対応</h3>
+
+<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+
+<h3 id="inline-grid_の対応">inline-grid の対応</h3>
+
+<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/display-listitem/index.html b/files/ja/web/css/display-listitem/index.html
new file mode 100644
index 0000000000..11d0b6586a
--- /dev/null
+++ b/files/ja/web/css/display-listitem/index.html
@@ -0,0 +1,65 @@
+---
+title: <display-listitem>
+slug: Web/CSS/display-listitem
+tags:
+  - CSS
+  - CSS データ型
+  - CSS 表示
+  - Reference
+  - list-item
+translation_of: Web/CSS/display-listitem
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"> <code style="white-space: nowrap;">list-item</code> キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む <code>::marker</code> 疑似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code style="white-space: nowrap;">list-item</code> 単独の値を指定すると、要素はリストの項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。</p>
+
+<p><code style="white-space: nowrap;">list-item</code> は {{CSSxRef("&lt;display-outside&gt;")}} キーワードのいずれかと、 {{CSSxRef("&lt;display-inside&gt;")}} の <code>flow</code> または <code style="white-space: nowrap;">flow-root</code> キーワードと組み合わせることもできます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が <code>block</code> になります。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div class="fake-list"&gt;I will display as a list item&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_of_list-item" name="Support_of_list-item"><code>list-item</code> の対応</h3>
+
+<p>{{Compat("css.properties.display.list-item", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/display-outside/index.html b/files/ja/web/css/display-outside/index.html
new file mode 100644
index 0000000000..f96f37ea5d
--- /dev/null
+++ b/files/ja/web/css/display-outside/index.html
@@ -0,0 +1,93 @@
+---
+title: <display-outside>
+slug: Web/CSS/display-outside
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Display
+  - Data Type
+  - Reference
+  - display-outside
+translation_of: Web/CSS/display-outside
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><code>&lt;display-outside&gt;</code> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは <code>display</code> プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("&lt;display-inside&gt;")}} のキーワードと共に使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>有効な <code>&lt;display-outside&gt;</code> の値は以下の通りです。</p>
+
+<dl>
+ <dt><code>block</code></dt>
+ <dd>要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。</dd>
+ <dt><code>inline</code></dt>
+ <dd>要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。</dd>
+ <dt><code>run-in</code> {{Experimental_Inline}}</dt>
+ <dd>要素は、ランインボックスを生成します。 <code>display: run-in</code> が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。<br>
+ <br>
+ ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注</strong>: 二つの値の構文に対応しているブラウザーは、 <code>display: block</code> や <code>display: inline</code> などの外部表示種別のみが指定されていると、内部表示種別を <code>flow</code> に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例では、 span 要素 (通常はインライン要素として表示) に <code>display: block</code> が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span&gt;span 1&lt;/span&gt;
+&lt;span&gt;span 2&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 300, 60)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.display.display-outside", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロックおよびインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li>
+</ul>
diff --git a/files/ja/web/css/display/index.html b/files/ja/web/css/display/index.html
new file mode 100644
index 0000000000..644ae750d3
--- /dev/null
+++ b/files/ja/web/css/display/index.html
@@ -0,0 +1,341 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Display
+  - CSS Property
+  - Reference
+  - display
+  - 'recipe:css-property'
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong><code>display</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素を<a href="/ja/docs/Web/CSS/CSS_Flow_Layout" rel="nofollow">ブロック要素とインライン要素</a>のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば <a href="/ja/docs/Web/CSS/CSS_Flow_Layout">フローレイアウト</a>、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">グリッド</a>、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">フレックス</a>などを設定します。</p>
+
+<p>正式には、 <strong><code>display</code></strong> プロパティは要素の内部と外部の表示型を設定します。外部の型は要素の<a href="/ja/docs/Web/CSS/CSS_Flow_Layout">フローレイアウト</a>への参加方法を設定し、内部の型は子要素のレイアウトを設定します。 <code>display</code> のいくつかの値は、それ自身の個別の仕様書で完全に定義されています。例えば、 <code>display: flex</code> が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。個々の仕様書については、<a href="#Specifications">この文書の最後にある表</a>を参照してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>display</code> プロパティは、キーワード値を使用して指定します。キーワード値は以下の 6 つのカテゴリに分類されます。</p>
+
+<pre class="brush: css notranslate">.container {
+  display:  [ &lt;display-outside&gt; || &lt;display-inside&gt; ] | &lt;display-listitem&gt; | &lt;display-internal&gt; | &lt;display-box&gt; | &lt;display-legacy&gt; ;
+}
+</pre>
+
+<h3 id="Outside" name="Outside">外側</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>これらのキーワードは、本質的に要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-outside", "Syntax")}}</p>
+
+<h3 id="Inside" name="Inside">内側</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>これらのキーワードは、要素の内部の表示種別を指定します。これは、要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-inside", "Syntax")}}</p>
+
+<h3 id="List_Item" name="List_Item">リストアイテム</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
+ <dd>要素は内容のためにブロックボックスと、個別のリスト項目のインラインボックスを生成します。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-listitem", "Syntax")}}</p>
+
+<h3 id="Internal" name="Internal">内部</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
+ <dd><code><span class="css">table</span></code> や <code>ruby</code> のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。この節ではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-internal", "Syntax")}}</p>
+
+<h3 id="Box" name="Box">ボックス</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-box", "Syntax")}}</p>
+
+<h3 id="Legacy" name="Legacy">従来のもの</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>CSS 2 では <code>display</code> プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。</dd>
+</dl>
+
+<p>{{page("/ja/docs/Web/CSS/display-legacy", "Syntax")}}</p>
+
+<h3 id="Which_syntax_should_you_use_now" name="Which_syntax_should_you_use_now">現在はどちらの構文を使用するべきか</h3>
+
+<p>Level 3 仕様書は <code>display</code> プロパティに二つの値を — 外部および内部の表示型の指定を明示的に行うために — 説明しています。しかし、これはブラウザーの互換性が不十分です。</p>
+
+<p><code>&lt;display-legacy&gt;</code> による方法は、単一のキーワード値で同じ結果を生み出すので、二つのキーワード値による指定の対応が進むまで使用してください。例えば、二つの値でインラインのフレックスコンテナーは次のように指定することができます。</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline flex;
+}</pre>
+
+<p>現在は、単一の値を使用して指定することができます。</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline-flex;
+}</pre>
+
+<p>これらの仕様変更の詳細については、<a href="/ja/docs/Web/CSS/display/two-value_syntax_of_display">display の新しい2つの値の構文への対応</a>の記事を参照してください。</p>
+
+<h3 id="Global" name="Global">グローバル</h3>
+
+<pre class="brush:css notranslate">/* グローバル値 */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p><code>display</code> に設定できる様々な種類の値の個々のページでは、それらの値が動作する機能の複数の例をを設定しています。 — {{anch("Syntax", "構文")}} の節を参照してください。さらに、以下の資料を参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/display/two-value_syntax_of_display">display の新しい2つの値の構文への対応</a></li>
+</ul>
+
+<h3 id="CSS_フローレイアウト_display_block_display_inline">CSS フローレイアウト (display: block, display: inline)</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローのブロックおよびインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">フローレイアウトとはみ出し</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">フローレイアウトと書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">整形コンテキストの解説</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">フロー内とフロー外</a></li>
+</ul>
+
+<h3 id="display_flex">display: flex</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">クロスブラウザーの Flexbox ミックスイン</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法との関係</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックスの典型的な使用例</a></li>
+</ul>
+
+<h3 id="display_grid">display: grid</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">グリッドレイアウトと他のレイアウト方法との関係</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトでの自動配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトとプログレッシブエンハンスメント</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使用した良くあるレイアウトの実現</a></li>
+</ul>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<h3 id="display_none">display: none</h3>
+
+<p>要素の <code>display</code> の値に <code>none</code> を使用すると、その要素は<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から削除されます。すなわち、その要素とすべての子孫要素は読み上げ技術によって読み上げられなくなります。</p>
+
+<p>要素を視覚的に隠したい場合は、よりアクセシブルな代替手段として、画面から視覚的に要素を削除しますが、読み上げソフトのような支援技術が解析可能な状態を維持するための、<a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">プロパティの組み合わせ</a>を使用できます。</p>
+
+<h3 id="display_contents">display: contents</h3>
+
+<p>大部分のブラウザーの現在の実装では、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から <code>display</code> の値が <code>contents</code> であるすべての要素を削除します (ただし子孫は残ります)。これにより、その要素自身は読み上げソフトでは読み上げられなくなります。これは <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS 仕様書</a>によれば正しくありません。</p>
+
+<ul>
+ <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
+ <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+</ul>
+
+<h3 id="Tables" name="Tables">表</h3>
+
+<p>{{HTMLElement("table")}} 要素の <code>display</code> の値を <code>block</code>、<code>grid</code>、あるいは <code>flex</code> に変更すると、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>での表現が変わります。これにより、表が読み上げ技術によって適切に読み上げられなくなります。</p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
+ <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN WCAG を理解する ― ガイドライン 1.3 の解説</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="display_value_comparison" name="display_value_comparison">display 値の比較</h3>
+
+<p>この例では、2つのブロックレベルのコンテナー要素があり、それぞれに3つのインラインの子要素があります。その下には、コンテナーに異なる <code>display</code> の値を適用するための洗濯メニューがあり、異なる値が要素のレイアウトとその子要素のレイアウトにどのように影響するかを比較対照することができます。</p>
+
+<p>コンテナとその子要素には {{cssxref("padding")}} と {{cssxref("background-color")}} が含まれているので、表示値の効果がわかりやすくなっています。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 新しい2つの値の構文は、対応がまだかなり限られているため、ここでは一切含めていません。</p>
+</div>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article class="container"&gt;
+  &lt;span&gt;First&lt;/span&gt;
+  &lt;span&gt;Second&lt;/span&gt;
+  &lt;span&gt;Third&lt;/span&gt;
+&lt;/article&gt;
+
+&lt;article class="container"&gt;
+  &lt;span&gt;First&lt;/span&gt;
+  &lt;span&gt;Second&lt;/span&gt;
+  &lt;span&gt;Third&lt;/span&gt;
+&lt;/article&gt;
+
+&lt;div&gt;
+  &lt;label for="display"&gt;Choose a display value:&lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option selected&gt;block&lt;/option&gt;
+    &lt;option&gt;inline&lt;/option&gt;
+    &lt;option&gt;inline-block&lt;/option&gt;
+    &lt;option&gt;none&lt;/option&gt;
+    &lt;option&gt;flex&lt;/option&gt;
+    &lt;option&gt;inline-flex&lt;/option&gt;
+    &lt;option&gt;grid&lt;/option&gt;
+    &lt;option&gt;inline-grid&lt;/option&gt;
+    &lt;option&gt;table&lt;/option&gt;
+    &lt;option&gt;list-item&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  font-family: helvetica, arial, sans-serif;
+  letter-spacing: 1px;
+  padding-top: 10px;
+}
+
+article {
+  background-color: red;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article, div {
+  margin: 20px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const articles = document.querySelectorAll('.container');
+const select = document.querySelector('select');
+
+function updateDisplay() {
+  articles.forEach((article) =&gt; {
+    article.style.display = select.value;
+  });
+}
+
+select.addEventListener('change', updateDisplay);
+
+updateDisplay();</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('display_value_comparison','100%', 440)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 上記にリンクされている各個別の表示データ型のページには、より多くの例があります。</p>
+</div>
+
+<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 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td><code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, 複数のキーワード値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> の値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>grid box モデルの値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>flexible box モデルの値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>テーブルモデルの値と <code>inline-block</code> の値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。基本的な値として <code>none</code>, <code>block</code>, <code>inline</code>, <code>list-item</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.display", 10)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローのブロックおよびインラインレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
+ <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
+ <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
+</ul>
diff --git a/files/ja/web/css/easing-function/index.html b/files/ja/web/css/easing-function/index.html
new file mode 100644
index 0000000000..28ef3b62ad
--- /dev/null
+++ b/files/ja/web/css/easing-function/index.html
@@ -0,0 +1,345 @@
+---
+title: <easing-function>
+slug: Web/CSS/easing-function
+tags:
+  - API
+  - CSS
+  - CSS Animations
+  - CSS Data Type
+  - CSS Transitions
+  - Data Type
+  - Layout
+  - Reference
+  - easing-function
+translation_of: Web/CSS/easing-function
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;easing-function&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、アニメーションの間に一次元の値がどれだけの速さで変化するかを記述する数学的な関数を表します。これにより、アニメーションの速度を期間中に変化させることができます。</p>
+
+<p>イージング関数のうち3次ベジェ曲線のサブセットに含まれるものは、アニメーションの開始と終了を滑らかにすることができるため、よく「スムーズ」イージング関数と呼ばれています。これらの関数は、時間比と出力比を相関させており、どちらも {{cssxref("&lt;number&gt;")}} で表されます。これらの値は <code>0.0</code> が初期状態、<code>1.0</code> が最終状態を表します。</p>
+
+<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p>
+
+<p>特定の関数が使用された場合によっては、計算された出力値がアニメーションの経路の間で、時には <code>1.0</code> を超えたり、 <code>0.0</code> を下回ったりすることがあります。これによってアニメーションが最終状態の後に行ったり、戻ったりすることになります。 {{cssxref("left")}} や {{cssxref("right")}} のような一部のプロパティは、これによって一種の「バウンド」効果を生成します。</p>
+
+<p>しかし、色の成分の値が <code>255</code> を超えたり <code>0</code> を下回ったりするように、出力値が取り得る範囲を超えてしまう場合は、その値は取り得る値の中で最も近い値に切り詰められます (色の成分の値であれば、それぞれ <code>255</code> および <code>0</code> になります)。一部の <code>cubic-bezier()</code> 曲線にはこのような特性があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><a href="/ja/docs/Web/CSS/easing-function#Easing_functions">イージング関数</a>には、線形関数、<a href="https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">3次ベジェ曲線</a>、階段関数の3種類があります。 <code>&lt;easing-function&gt;</code> 型の値は、これら3つの型のうちの1つを使ってイージング関数を記述します。</p>
+
+<h3 class="cleared" id="Easing_functions" name="Easing_functions">イージング関数</h3>
+
+<p>CSS は 3 種類のタイミング関数に対応しています。線形関数と、3次ベジェ曲線のサブセットの関数と、階段関数です。これらの関数でもっとも有用なものは、簡単に指定できるようにキーワードが与えられています。</p>
+
+<h4 id="The_linear_class_of_easing_functions" name="The_linear_class_of_easing_functions">線形クラスのイージング関数</h4>
+
+<h5 id="linear">linear</h5>
+
+<p style="float: left;"><img src="/files/3425/cubic-bezier,linear.png" style="height: 325px; width: 244px;"></p>
+
+<p>The animation moves from beginning to end at a constant rate. This keyword represents the easing function <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>.</p>
+
+<h4 class="cleared" id="cubic-bezier" name="cubic-bezier()">cubic-bezier() クラスのイージング関数</h4>
+
+<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p>
+
+<p><code>cubic-bezier()</code> 関数記法は、<a href="https://ja.wikipedia.org/wiki/%E3%83%99%E3%82%B8%E3%82%A7%E6%9B%B2%E7%B7%9A">3次ベジェ曲線</a> を定義します。この曲線は連続的であり、アニメーションの始まりや終わりを緩やかにするためによく使用されます。このため、<em>イージング関数</em>と呼ばれることもあります。</p>
+
+<p>3次ベジェ曲線は 4 個の点 P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, P<sub>3</sub> によって定義されます。P<sub>0</sub> と P<sub>3</sub> は曲線の始点と終点であり、 CSS では座標が割合 (横座標は時間の割合、縦座標は出力範囲の割合) であることから、これらの点は固定されています。P<sub>0</sub> は <code>(0, 0)</code> で開始時間および初期状態を示し、P<sub>3</sub> は <code>(1, 1)</code> で終了時間および最終状態を示します。</p>
+
+<p>すべての3次ベジェ曲線が<a href="https://ja.wikipedia.org/wiki/%E9%96%A2%E6%95%B0_%28%E6%95%B0%E5%AD%A6%29">数学的な関数</a> とは限らないため、どの3次ベジェ曲線もイージング関数として適しているわけではありません。すなわち、曲線は横座標で 0 から 1 の値をとります。 P<sub>0</sub> および P<sub>3</sub> は CSS の定義で固定されているので、P<sub>1</sub> および P<sub>2</sub> の横座標の値が <code>[0, 1]</code> の範囲にある場合のみ、3次ベジェ曲線は関数であり、それゆえ有効になります。</p>
+
+<p>P<sub>1</sub> または P<sub>2</sub> の縦座標の値が <code>[0, 1]</code> の範囲から外れている3次ベジェ曲線では、<em>はずむ</em>効果が得られます。</p>
+
+<p>不正な <code>cubic-bezier</code> 曲線を指定すると、 CSS はその属性全体を無視します。</p>
+
+<h5 id="Syntax_2" name="Syntax_2">構文</h5>
+
+<pre class="syntaxbox notranslate">cubic-bezier(<var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var>)
+</pre>
+
+<p>ここで、</p>
+
+<dl>
+ <dt><strong><var>x<sub>1</sub></var>, <var>y<sub>1</sub></var>, <var>x<sub>2</sub></var>, <var>y<sub>2</sub></var></strong></dt>
+ <dd>3次ベジェ曲線を定義する P<sub>1</sub> および P<sub>2</sub> 点の横座標および縦座標の値を示す {{cssxref("&lt;number&gt;")}} です。x<sub>1</sub> および x<sub>2</sub> は [0, 1] の範囲にある必要があり、さもないと不正な値になります。</dd>
+</dl>
+
+<h4 id="Keywords_for_common_cubic-bezier_easing_functions" name="Keywords_for_common_cubic-bezier_easing_functions">一般的なタイミング関数のキーワード</h4>
+
+<h5 class="cleared" id="ease">ease</h5>
+
+<p style="float: left;"><img src="/files/3429/cubic-bezier,ease.png" style="height: 332px; width: 244px;"></p>
+
+<p>アニメーション開始時はより急速に加速して、終了に向けて少しずつ緩やかになっていきます。このキーワードは、イージング関数 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> を表します。この関数は <a href="#ease-in-out"><code>ease-in-out</code></a> に似ていますが、開始がより急速です。</p>
+
+<h5 class="cleared" id="ease-in">ease-in</h5>
+
+<p style="float: left;"><img src="/files/3426/cubic-bezier,ease-in.png" style="height: 325px; width: 244px;"></p>
+
+<p>アニメーションの始めは緩やかで、その後次第に加速していき、最終状態に達するとアニメーションは突然停止します。このキーワードはイージング関数 <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code> を表します。</p>
+
+<h5 class="cleared" id="ease-in-out"><code>ease-in-out</code></h5>
+
+<p style="float: left;"><img src="/files/3428/cubic-bezier,ease-in-out.png" style="height: 332px; width: 244px;"></p>
+
+<p>アニメーションは緩やかに始まり、加速し、終了に向けて加速が緩やかになります。このキーワードはイージング関数 <code>cubic-bezier(0.42, 0.0, 0.58, 1.0)</code> を表します。開始時は <a href="#ease-in"><code>ease-in</code></a> 関数に、完了時は <a href="#ease-out"><code>ease-out</code></a> 関数に似ています。</p>
+
+<h5 class="cleared" id="ease-out">ease-out</h5>
+
+<p style="float: left;"><img src="/files/3427/cubic-bezer,ease-out.png" style="height: 325px;"></p>
+
+<p>アニメーションは急速に始まり、最終状態にかけて次第に緩やかになっていきます。このキーワードはタイミング関数 <code>cubic-bezier(0.0, 0.0, 0.58, 1.0)</code> を表します。</p>
+
+<h4 class="cleared" id="steps" name="steps()" style="">steps() クラスのタイミング関数</h4>
+
+<p><code>steps()</code> 関数記法は、出力値の範囲を等間隔に区切る<a href="http://ja.wikipedia.org/wiki/%E9%9A%8E%E6%AE%B5%E9%96%A2%E6%95%B0">ステップ関数</a>を定義します。このステップ関数のサブクラスは、階段関数と呼ばれることもあります。</p>
+
+<h5 id="Syntax_3" name="Syntax_3">構文</h5>
+
+<pre class="syntaxbox notranslate">steps(<var>number_of_steps</var>, <var>direction</var>)
+</pre>
+
+<p>ここで、</p>
+
+<dl>
+ <dt><var>number_of_steps</var></dt>
+ <dd>厳密に正の {{cssxref("&lt;integer&gt;")}} で、ステップ関数を構成する等間隔の段数を示すものです。</dd>
+ <dt><var>direction</var></dt>
+ <dd>関数が <a href="http://en.wikipedia.org/wiki/Left-continuous#Directional_and_semi-continuity">左連続か右連続</a> かを表すキーワードです。</dd>
+ <dd></dd>
+ <dd>
+ <ul>
+  <li><code>jump-start</code> は左連続関数を表し、したがってアニメーションの開始時に最初のステップが発生します。</li>
+  <li><code>jump-end</code> は右連続関数を表し、したがってアニメーションの完了時に最後のステップが発生します。</li>
+  <li><code>jump-both</code> は右および左の連続関数を表し、0%と100%の位置の両方で停止し、アニメーションの繰り返しの間に効果的にステップを入れます。</li>
+  <li><code>jump-none</code> どちらの端にもジャンプしません。代わりに、それぞれ区間の 1/n ごとに0%の位置と100%の位置の両方を保持します。</li>
+  <li><code>start</code> は <code>jump-start</code> と同等です。</li>
+  <li><code>end</code> は <code>jump-end</code> と同等です。</li>
+ </ul>
+ </dd>
+ <dd><code>end</code> が既定値です。</dd>
+</dl>
+
+<h5 id="steps_n_&lt;direction>">steps( n, &lt;direction&gt; )</h5>
+
+<ul style="list-style-type: none; display: flex;">
+ <li>
+  <p><code>steps(2, jump-start)</code><br>
+   <code>steps(2, start)</code></p>
+  <img src="/files/3436/steps(2,start).png" style="float: left; height: 327px; vertical-align: top;"></li>
+ <li>
+  <p><code>steps(4, jump-end)<br>
+   steps(4, end)</code></p>
+  <img alt="four steps, with a jump from the fourth step to the final value at the 100% mark" src="/files/3437/steps(4,end).png"></li>
+ <li>
+  <p><code>steps(5, jump-none)</code></p>
+  <img alt="five steps, with no jumps, so 20% of the time is at the beginning state or 0% mark and the last 20% is at the final state, or 100% mark" src="/files/16419/step5none.png"></li>
+ <li>
+  <p><code>steps(3, jump-both)</code></p>
+  <img src="https://mdn.mozillademos.org/files/16420/step3both.png"></li>
+</ul>
+
+<h5 class="cleared" id="step-start">step-start</h5>
+
+<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 327px; vertical-align: top;"> アニメーションはすぐに最終状態に遷移し、最後までその状態を維持します。このキーワードは、イージング関数 <code>steps(1, jump-start)</code> または <code>steps(1, start)</code> を表します。</p>
+
+<h5 class="cleared" id="step-end">step-end</h5>
+
+<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 327px; vertical-align: top;"> アニメーションは、終了するまで初期状態のままで、終了時点で直接最終状態にジャンプします。このキーワードは、イージング関数 <code>steps(1, jump-end)</code> または <code>steps(1, end)</code> を表します。</p>
+
+<h2 class="cleared" id="Examples" name="Examples">例</h2>
+
+<h3 id="Easing_function_comparison" name="Easing_function_comparison">イージング関数の比較</h3>
+
+<p>この例では、提供されているボタンを使ってアニメーションを開始したり停止したりすることができ、メニューを選択してイージング関数を、利用可能なキーワードに加えていくつかの <code>cubic-bezier()</code> および <code>steps()</code> のオプションの中から選択することができるようになっています。これは、様々なイージング関数を簡単に比較できるようにするためのアイデアです。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;ul&gt;
+  &lt;li&gt;
+    &lt;button class="animation-button"&gt;Start animation&lt;/button&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;label for="easing-select"&gt;Choose an easing function:&lt;/label&gt;
+    &lt;select id="easing-select"&gt;
+      &lt;option selected&gt;linear&lt;/option&gt;
+      &lt;option&gt;ease&lt;/option&gt;
+      &lt;option&gt;ease-in&lt;/option&gt;
+      &lt;option&gt;ease-in-out&lt;/option&gt;
+      &lt;option&gt;ease-out&lt;/option&gt;
+      &lt;option&gt;cubic-bezier(0.1, -0.6, 0.2, 0)&lt;/option&gt;
+      &lt;option&gt;cubic-bezier(0, 1.1, 0.8, 4)&lt;/option&gt;
+      &lt;option&gt;steps(5, end)&lt;/option&gt;
+      &lt;option&gt;steps(3, start)&lt;/option&gt;
+      &lt;option&gt;steps(4)&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body &gt; div {
+  position: relative;
+  height: 100px;
+}
+
+div &gt; div {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4));
+  border-radius: 50%;
+  top: 25px;
+  animation: 1.5s infinite alternate;
+}
+
+@keyframes move-right {
+  from {
+    left: 10%;
+  }
+
+  to {
+    left: 90%;
+  }
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selectElem = document.querySelector('select');
+const startBtn = document.querySelector('button');
+const divElem = document.querySelector('div &gt; div');
+
+startBtn.addEventListener('click', () =&gt; {
+  if(startBtn.textContent === 'Start animation') {
+    divElem.style.animationName = 'move-right';
+    startBtn.textContent = 'Stop animation';
+    divElem.style.animationTimingFunction = selectElem.value;
+  } else {
+    divElem.style.animationName = 'unset';
+    startBtn.textContent = 'Start animation';
+  }
+});
+
+selectElem.addEventListener('change', () =&gt; {
+  divElem.style.animationTimingFunction = selectElem.value;
+});</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Easing_function_comparison', '100%', 200)}}</p>
+
+<h3 id="cubic-bezier_function_examples" name="cubic-bezier_function_examples">cubic-bezier() 関数の例</h3>
+
+<p>これらは CSS における正しい3次ベジェ曲線の使い方です。</p>
+
+<pre class="brush: css notranslate">/* 4 つの値が [0, 1] の範囲に含まれる、標準的なベジェ曲線 */
+cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+/* &lt;整数値&gt; は &lt;数量&gt; でもあるので、&lt;整数値&gt; を用いても有効です。 */
+cubic-bezier(0, 0, 1, 1)
+
+/* 横軸で負数を用いるのは有効であり、はずむ効果をもたらします。 */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* 横軸において 1.0 を超える値も有効です。 */
+cubic-bezier(0, 1.1, 0.8, 4)
+</pre>
+
+<p>これらの3次ベジェ曲線の定義は無効です。</p>
+
+<pre class="brush: css example-bad notranslate">/* アニメーションさせるものは色ですが、
+   ベジェ曲線に用いるのは割合の数値です。 */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* 定義域は [0, 1] の範囲であったり、曲線が時間の
+関数でなかったりする場合です。 */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* 2 つの点を定義する必要があり、それらに既定値はありません。 */
+cubic-bezier(0.3, 2.1)
+
+/* 縦座標は [0, 1] の範囲にある必要があり、
+   さもないと曲線はタイミング関数になりません。 */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)</pre>
+
+<h3 class="cleared" id="steps_function_examples" name="steps_function_examples">steps() 関数の例</h3>
+
+<p>p&gt;以下のタイミング関数は妥当です。</p>
+
+
+
+<pre class="brush: css notranslate">/* 5段階あり、最後の段階は
+   アニメーションの完了直前に発生します。 */
+steps(5, end)
+
+/* 2段階の階段で、最初の段階は
+   アニメーションの開始時に発生します。 */
+steps(2, start)
+
+/* 第二の引数は省略可能です。 */
+steps(2)
+</pre>
+
+<p>以下のタイミング関数は不正です。</p>
+
+<pre class="brush: css example-bad notranslate">/* 最初の引数は <a href="/ja/docs/Web/CSS/integer">&lt;integer&gt;</a> でなければならず、
+   整数と同じ値であっても実数であってはいけません。 */
+steps(2.0, jump-end)
+
+/* 段数は負の値であってはいけません。 */
+steps(-3, start)
+
+/* 段数は少なくとも 1 つ必要です。 */
+steps(0, jump-none)</pre>
+
+<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 Animations', '#animation-timing-function', '&lt;timing-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td><code>&lt;single-timing-function&gt;</code> を CSS トランジションモジュールの <code>&lt;single-transition-timing-function&gt;</code> の別名として定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Easing 1', '#typedef-easing-function', '&lt;easing-function&gt;')}}</td>
+   <td>{{Spec2('CSS Easing 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.easing-function", 2)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a></li>
+ <li><a href="http://cubic-bezier.com/">cubic-bezier</a></li>
+</ul>
diff --git a/files/ja/web/css/element()/index.html b/files/ja/web/css/element()/index.html
new file mode 100644
index 0000000000..3eddb0dbbf
--- /dev/null
+++ b/files/ja/web/css/element()/index.html
@@ -0,0 +1,103 @@
+---
+title: element()
+slug: Web/CSS/element()
+tags:
+  - CSS
+  - CSS 関数
+  - CSS4-images
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/element()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>element()</code></strong> 関数は、任意の HTML 要素から生成された {{cssxref("&lt;image&gt;")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。</p>
+
+<p>特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。</p>
+
+<p>Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">element(<var>id</var>)</pre>
+
+<p>where:</p>
+
+<dl>
+ <dt><var>id</var></dt>
+ <dd>背景として使う要素の ID です。要素の HTML 属性 #<var>id</var> に定義されているものです。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">この例は</a> <code>-moz-element()</code> に対応している Firefox で実動例を見ることができます。</p>
+
+<h3 id="A_somewhat_realistic_example" name="A_somewhat_realistic_example">ある程度現実的な例</h3>
+
+<p>この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。</p>
+
+<pre class="brush: html notranslate">&lt;div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"&gt;
+  &lt;p&gt;This box uses the element with the #myBackground1 ID as its background!&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div style="overflow:hidden; height:0;"&gt;
+  &lt;div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"&gt;
+  &lt;p style="transform-origin:0 0; transform: rotate(45deg); color:white;"&gt;This text is part of the background. Cool, huh?&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。</p>
+
+<p><img alt="example1.png" class="default internal" src="/@api/deki/files/4624/=example1.png"></p>
+
+<h3 id="A_somewhat_more_bizarre_example" name="A_somewhat_more_bizarre_example">ある程度とっぴな例</h3>
+
+<p>この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。</p>
+
+<pre class="brush: html notranslate">&lt;div style="width:400px; height:100px; background:-moz-element(#myBackground2);"&gt;
+&lt;/div&gt;
+
+&lt;div style="overflow:hidden; height:0;"&gt;
+  &lt;button id="myBackground2" type="button"&gt;Evil button!&lt;/button&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="example2.png" class="default internal" src="/@api/deki/files/4625/=example2.png"></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('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>CSS3 Images から延期</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.element")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set", "image-set()")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+</ul>
diff --git a/files/ja/web/css/empty-cells/index.html b/files/ja/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..dc203bac4a
--- /dev/null
+++ b/files/ja/web/css/empty-cells/index.html
@@ -0,0 +1,121 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 表
+  - リファレンス
+translation_of: Web/CSS/empty-cells
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>empty-cells</code></strong> プロパティは、目に見える内容を持たない{{htmlelement("table", "表")}}のセルの、周囲の境界と背景を{{glossary("user agent", "ユーザーエージェント")}}がどのように描画するかを指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは、 {{cssxref("border-collapse")}} プロパティが <code>separate</code> の場合のみ効果があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+empty-cells: show;
+empty-cells: hide;
+
+/* グローバル値 */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+</pre>
+
+<p><code>empty-cells</code> プロパティは、以下のキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>show</code></dt>
+ <dd>通常のセルのように、境界や背景を描くことを示すキーワードです。</dd>
+ <dt><code>hide</code></dt>
+ <dd>境界や背景を描かないことを示すキーワードです。</dd>
+</dl>
+
+<h3 id="Examples" name="Examples">例</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="table_1"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Moe&lt;/td&gt;
+    &lt;td&gt;Larry&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Curly&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+&lt;br&gt;
+&lt;table class="table_2"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Moe&lt;/td&gt;
+    &lt;td&gt;Larry&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Curly&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.table_1 {
+  empty-cells: show;
+}
+
+.table_2 {
+  empty-cells: hide;
+}
+
+td,
+th {
+  border: 1px solid gray;
+  padding: 0.5rem;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '200') }}</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('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.empty-cells")}}</p>
diff --git a/files/ja/web/css/env()/index.html b/files/ja/web/css/env()/index.html
new file mode 100644
index 0000000000..e8112419cf
--- /dev/null
+++ b/files/ja/web/css/env()/index.html
@@ -0,0 +1,138 @@
+---
+title: env()
+slug: Web/CSS/env()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Variables
+  - CSS 変数
+  - CSS 関数
+  - Draft
+  - Function
+  - Reference
+  - Variables
+  - env
+  - env()
+  - 変数
+  - 関数
+translation_of: Web/CSS/env()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>env()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var")}} 関数や<a href="/ja/docs/Web/CSS/--*">カスタムプロパティ</a>と同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。</span></p>
+
+<p>ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 <code>env()</code> 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。</p>
+
+<pre class="brush: html; no-line-numbers notranslate">&lt;meta name="viewport" content="viewport-fit=cover" /&gt;</pre>
+
+<pre class="brush: css; no-line-numbers notranslate">body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}</pre>
+
+<p>加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 <code>env()</code> 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 <a href="/ja/docs/Web/CSS/@media">メディアクエリ規則</a>) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。</p>
+
+<p>もともとは iOS ブラウザーで、開発者がコンテンツをビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている <code>safe-area-inset-*</code> の値を使用することで、矩形以外の画面を使用している閲覧者でも、コンテンツが見えることを保証するのに役立ちます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css; no-line-numbers notranslate">/* 代替値なしで4つの安全な矩形までの寸法値を使用 */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* 代替値付きで使用 */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt>
+ <dd><code style="white-space: nowrap;">safe-area-inset-*</code> の値は4つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、コンテンツを置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなど、矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い時計の画面 — では、矩形の中のすべてのコンテンツが表示できるような矩形から、ユーザーエージェントが設定します。</dd>
+</dl>
+
+<p><strong>注</strong>: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例では、 <code>env()</code> の第2引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  お使いのブラウザーが &lt;code&gt;env()&lt;/code&gt; 関数に対応している場合、
+  この段落のテキストと左の境界の間に 50px のパディングが設定されますが、
+  上、右、下には設定されません。
+  これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は
+  大文字・小文字が区別されるため、 &lt;code&gt;padding: 0 0 0 50px&lt;/code&gt;
+  と同等の CSS になるからです。
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}</pre>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h3 id="Example_values" name="Example_values">値の例</h3>
+
+<pre class="brush: css notranslate">padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */
+padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */
+padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */
+padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */
+</pre>
+
+<p>代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。</p>
+
+<p><strong>注</strong>: ユーザーエージェントプロパティは <a href="/ja/docs/Web/CSS/all">all</a> プロパティでリセットされません。</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 Environment Variables", "#env-function", "env()")}}</td>
+   <td>{{Spec2("CSS3 Environment Variables")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.custom-property.env")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("var", "var(…)")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Variables">CSS カスタムプロパティと変数のカスケード</a></li>
+ <li><a href="/ja/docs/Web/CSS/--*">カスタムプロパティ (--*)</a></li>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS カスタムプロパティ (変数) の使用</a></li>
+ <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/blur()/index.html b/files/ja/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..5ccc38f287
--- /dev/null
+++ b/files/ja/web/css/filter-function/blur()/index.html
@@ -0,0 +1,69 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>blur()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像に<a href="https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B7%E3%82%A2%E3%83%B3%E3%81%BC%E3%81%8B%E3%81%97">ガウシアンぼかし</a>を適用します。返値は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">blur(<var>radius</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>radius</var></code></dt>
+ <dd>ぼかしの半径で、 {{cssxref("&lt;length&gt;")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 <code>0</code> の値は入力を変更しません。補間時の欠損値は <code>0</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_a_blur_with_pixels_and_with_rem" name="Setting_a_blur_with_pixels_and_with_rem">ピクセル数と rem を用いた blur の設定</h3>
+
+<pre class="brush: css notranslate">blur(0)        /* 効果なし */
+blur(8px)      /* 半径 8px でぼかす */
+blur(1.17rem)  /* 半径 1.17rem でぼかす */</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-blur', 'blur()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/brightness()/index.html b/files/ja/web/css/filter-function/brightness()/index.html
new file mode 100644
index 0000000000..afbd7f718f
--- /dev/null
+++ b/files/ja/web/css/filter-function/brightness()/index.html
@@ -0,0 +1,70 @@
+---
+title: brightness()
+slug: Web/CSS/filter-function/brightness()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/brightness()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>brightness()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像に線形乗算を適用し、明るく又は暗くします。その結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">brightness(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>結果の明るさで、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> 未満の値では画像が暗くなり、 <code>100%</code> を超える値では画像が明るくなります。 <code>0%</code> の値では画像が完全に黒くなり、 <code>100%</code> の値では入力が変更されないままになります。補間時の欠損値は <code>1</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_brightness_using_numbers_and_percentages" name="Setting_brightness_using_numbers_and_percentages">数値とパーセント値を使用した brightness の設定</h3>
+
+<pre class="brush: css notranslate">brightness(0%)   /* 完全に黒 */
+brightness(0.4)  /* 明るさ40% */
+brightness(1)    /* 効果なし */
+brightness(200%) /* 明るさ2倍 */</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-brightness', 'brightness()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/contrast()/index.html b/files/ja/web/css/filter-function/contrast()/index.html
new file mode 100644
index 0000000000..168dc864cb
--- /dev/null
+++ b/files/ja/web/css/filter-function/contrast()/index.html
@@ -0,0 +1,69 @@
+---
+title: contrast()
+slug: Web/CSS/filter-function/contrast()
+tags:
+  - CSS
+  - CSS 関数
+  - Reference
+  - フィルター効果
+translation_of: Web/CSS/filter-function/contrast()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>contrast()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の 関数で、入力画像のコントラストを調整します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">contrast(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>結果のコントラストで、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> 未満の値ではコントラストが下がり、 <code>100%</code> を超える値ではコントラストが上がります。 <code>0%</code> の値では画像が完全に灰色になり、 <code>100%</code> の値では入力が変更されないままになります。補間時の欠損値は <code>1</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_contrast_using_numbers_and_percentages" name="Setting_contrast_using_numbers_and_percentages">数値とパーセント値を使用した contrast の設定</h3>
+
+<pre class="brush: css notranslate">contrast(0)     /* 完全な灰色 */
+contrast(65%)   /* 65%のコントラスト */
+contrast(1)     /* 効果なし */
+contrast(200%)  /* 2倍のコントラスト */</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-contrast', 'contrast()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.html b/files/ja/web/css/filter-function/drop-shadow()/index.html
new file mode 100644
index 0000000000..72f9daa09b
--- /dev/null
+++ b/files/ja/web/css/filter-function/drop-shadow()/index.html
@@ -0,0 +1,65 @@
+---
+title: drop-shadow()
+slug: Web/CSS/filter-function/drop-shadow()
+tags:
+  - CSS
+  - CSS 関数
+  - Reference
+  - フィルター効果
+  - 関数
+translation_of: Web/CSS/filter-function/drop-shadow()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>drop-shadow()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。</p>
+
+<div class="note">
+<p><strong>注:</strong> この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 <code>box-shadow</code> プロパティは要素の<em>ボックス全体</em>の背後に長方形の影を作成しますが、 <code>drop-shadow()</code> フィルター関数は<em>画像そのもの</em>の形 (アルファチャネル) に合った影を作成します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">drop-shadow(<var>offset-x</var> <var>offset-y</var> <var>blur-radius</var> <var>color</var>)</pre>
+
+<p><code>drop-shadow()</code> 関数は &lt;shadow&gt; 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 <code>inset</code> キーワードがと <code><var>spread</var></code> 引数が許可されないという例外があります。</p>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>offset-x</var></code> <code><var>offset-y</var></code> <small>(必須)</small></dt>
+ <dd>影のオフセットを指定する2つの {{cssxref("&lt;length&gt;")}} 値です。 <code><var>offset-x</var></code> は水平方向の距離を表し、負の数で影を要素の左方に配置します。 <code><var>offset-y</var></code> は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も <code>0</code> であれば、影は要素の真後ろに配置されます。</dd>
+ <dt><code><var>blur-radius</var></code> <small>(任意)</small></dt>
+ <dd>影をぼかす半径で、 {{cssxref("&lt;length&gt;")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の <code>0</code> になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。</dd>
+ <dt><code><var>color</var></code> <small>(任意)</small></dt>
+ <dd>影の色で、 {{cssxref("&lt;color&gt;")}} で指定します。指定されない場合の既定値は、ブラウザーによります。 Firefox 及び Internet Explorer {{cssxref("color")}} プロパティの値が使用されます。一方、 WebKit の影は既定で透明であり、この値を省略する使い方は限られています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">/* 10px のぼかしで広がりのない黒い影 */
+drop-shadow(16px 16px 10px black)
+
+/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */
+drop-shadow(.5rem .5rem 1rem #e23)</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>CSS の {{cssxref("box-shadow")}} プロパティ</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/grayscale()/index.html b/files/ja/web/css/filter-function/grayscale()/index.html
new file mode 100644
index 0000000000..2f5eb6f89c
--- /dev/null
+++ b/files/ja/web/css/filter-function/grayscale()/index.html
@@ -0,0 +1,42 @@
+---
+title: grayscale()
+slug: Web/CSS/filter-function/grayscale()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - Filter Effects
+  - Reference
+  - フィルター効果
+translation_of: Web/CSS/filter-function/grayscale()
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>grayscale()</strong></code> 関数は、入力画像をグレースケールに変換します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div>
+
+<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>
+
+<pre class="syntaxbox notranslate">grayscale(<em>amount</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>amount</code></dt>
+ <dd>変換の度合いで、 {{cssxref("&lt;number&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> の値では完全にグレースケールになり、 <code>0%</code> の値では入力が変更されないままになります。 <code>0%</code> と <code>100%</code> の間の値は、効果の割合です。補間時の欠損値は <code>0</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">grayscale(0)     /* 効果なし */
+grayscale(.7)    /* 70% グレースケール */
+grayscale(100%)  /* 完全なグレースケール */</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.html b/files/ja/web/css/filter-function/hue-rotate()/index.html
new file mode 100644
index 0000000000..bdae24f1cc
--- /dev/null
+++ b/files/ja/web/css/filter-function/hue-rotate()/index.html
@@ -0,0 +1,70 @@
+---
+title: hue-rotate()
+slug: Web/CSS/filter-function/hue-rotate()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/hue-rotate()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>hue-rotate()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、要素およびその中身のコンテンツの色相環を回転します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">hue-rotate(<var>angle</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>angle</var></code></dt>
+ <dd>入力サンプルの色相の相対的な変化量を、 {{cssxref("&lt;angle&gt;")}} で指定します。 <code>0deg</code> は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は <code>0</code> です。最小値又は最大値はなく、 <code>hue-rotate(Ndeg)</code> は <code>N</code> を 360 で割った余りと等価です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">hue-rotate(-90deg)  /* 270度の回転と同じ */
+hue-rotate(0deg)    /* 効果なし */
+hue-rotate(90deg)   /* 90度の回転 */
+hue-rotate(.5turn)  /* 180度の回転 */
+hue-rotate(405deg)  /* 45度の回転と同じ */
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-hue-rotate', 'hue-rotate()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/index.html b/files/ja/web/css/filter-function/index.html
new file mode 100644
index 0000000000..cf21e6bdf8
--- /dev/null
+++ b/files/ja/web/css/filter-function/index.html
@@ -0,0 +1,65 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - フィルター効果
+translation_of: Web/CSS/filter-function
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>&lt;filter-function&gt;</strong></code> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}} プロパティで使用します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;filter-function&gt;</code> データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>画像をぼかします。</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>画像を明るくしたり暗くしたりします。</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>画像のコントラストを上げたり下げたりします。</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>画像の背後にドロップシャドウを適用します。</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>画像をグレイスケールに変換します。</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​</dt>
+ <dd>画像の色相を全体的に変更します。</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>画像の色を反転させます。</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>画像を半透明にします。</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>入力画像の彩度を上げたり下げたりします。</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>画像をセピア調に変換します。</dd>
+</dl>
+
+<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('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/invert()/index.html b/files/ja/web/css/filter-function/invert()/index.html
new file mode 100644
index 0000000000..ac644cb147
--- /dev/null
+++ b/files/ja/web/css/filter-function/invert()/index.html
@@ -0,0 +1,67 @@
+---
+title: invert()
+slug: Web/CSS/filter-function/invert()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/invert()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>invert()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像の色サンプルを反転します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">invert(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>変換の度合いで、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> の値では完全に反転され、 <code>0%</code> の値では入力が変更されないままになります。 <code>0%</code> と <code>100%</code> の間の値は、効果の割合です。補間時の欠損値は <code>0</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">invert(0)     /* 効果なし */
+invert(.6)    /* 60% 反転 */
+invert(100%)  /* 完全に反転 */</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-invert', 'invert()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/opacity()/index.html b/files/ja/web/css/filter-function/opacity()/index.html
new file mode 100644
index 0000000000..0d1f304a27
--- /dev/null
+++ b/files/ja/web/css/filter-function/opacity()/index.html
@@ -0,0 +1,72 @@
+---
+title: opacity()
+slug: Web/CSS/filter-function/opacity()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/opacity()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>opacity()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-opacity.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>注:</strong> この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">opacity(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>変換の度合いで、 {{cssxref("&lt;number&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> の値では完全に透明になり、 <code>0%</code> の値では入力が変更されないままになります。 <code>0%</code> と <code>100%</code> の間の値は、効果の割合です。補間時の欠損値は <code>0</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">opacity(0%)   /* 完全に透過 */
+opacity(50%)  /* 50% 透過 */
+opacity(1)    /* 効果なし */</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-opacity', 'opacity()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>CSS の {{cssxref("opacity")}} プロパティ</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/saturate()/index.html b/files/ja/web/css/filter-function/saturate()/index.html
new file mode 100644
index 0000000000..47e0226594
--- /dev/null
+++ b/files/ja/web/css/filter-function/saturate()/index.html
@@ -0,0 +1,67 @@
+---
+title: saturate()
+slug: Web/CSS/filter-function/saturate()
+tags:
+  - CSS
+  - CSS 関数
+  - Reference
+  - フィルター効果
+translation_of: Web/CSS/filter-function/saturate()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>saturate()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">saturate(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>変換の量で、 {{cssxref("&lt;number&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> 未満の値では彩度を下げ、 <code>100%</code> を超える値では彩度を上げます。 <code>0%</code> の値では画像が完全に彩度がなくなり、 <code>100%</code> の値では入力が変更されないままになります。補間時の欠損値は <code>1</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">saturate(0)     /* 彩度なし */
+saturate(.4)    /* 彩度40% */
+saturate(100%)  /* 効果なし */
+saturate(200%)  /* 2倍の彩度 */</pre>
+
+<h2 id="仕様書">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-saturate', 'saturate()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/sepia", "sepia()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter-function/sepia()/index.html b/files/ja/web/css/filter-function/sepia()/index.html
new file mode 100644
index 0000000000..eecc53bb3e
--- /dev/null
+++ b/files/ja/web/css/filter-function/sepia()/index.html
@@ -0,0 +1,67 @@
+---
+title: sepia()
+slug: Web/CSS/filter-function/sepia()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Function
+  - Reference
+translation_of: Web/CSS/filter-function/sepia()
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>sepia()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、入力画像をセピア色に、より暖かい、より黄色と茶色の表現に変換します。結果は {{cssxref("&lt;filter-function&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">sepia(<var>amount</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code><var>amount</var></code></dt>
+ <dd>変換の度合いで、 {{cssxref("&lt;number&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} で指定します。 <code>100%</code> の値では完全にセピア色になり、 <code>0%</code> の値では入力が変更されないままになります。 <code>0%</code> と <code>100%</code> の間の値は、効果の割合です。補間時の欠損値は <code>0</code> です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">sepia(0)     /* 効果なし */
+sepia(.65)   /* 65% セピア色 */
+sepia(100%)  /* 完全にセピア色 */</pre>
+
+<h2 id="仕様書">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#funcdef-filter-sepia', 'sepia()')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("filter-function/blur", "blur()")}}</li>
+ <li>{{cssxref("filter-function/brightness", "brightness()")}}</li>
+ <li>{{cssxref("filter-function/contrast", "contrast()")}}</li>
+ <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li>
+ <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li>
+ <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​</li>
+ <li>{{cssxref("filter-function/invert", "invert()")}}</li>
+ <li>{{cssxref("filter-function/opacity", "opacity()")}}</li>
+ <li>{{cssxref("filter-function/saturate", "saturate()")}}</li>
+</ul>
diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html
new file mode 100644
index 0000000000..5bb245abe5
--- /dev/null
+++ b/files/ja/web/css/filter/index.html
@@ -0,0 +1,1140 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - SVG
+  - SVG フィルター
+  - filter
+  - フィルター効果
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>filter</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。</span></p>
+
+<p>CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター要素</a>への URL で SVG フィルターを参照することもできます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* SVG フィルターへの URL */
+filter: url("filters.svg#filter-id");
+
+/* &lt;filter-function&gt; 値 */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* 複数のフィルター */
+filter: contrast(175%) brightness(3%);
+
+/* フィルターを使用しない */
+filter: none;
+
+/* グローバル値 */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>次のように関数と共に使用してください。</p>
+
+<pre class="syntaxbox notranslate">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。</p>
+
+<pre class="syntaxbox notranslate">filter: url(file.svg#filter-element-id)
+</pre>
+
+<h3 id="Interpolation" name="Interpolation">補間</h3>
+
+<p>最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("&lt;url&gt;")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが <code>none</code> である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。</p>
+
+<pre class="brush: css notranslate">.mydiv {
+  filter: grayscale(50%);
+}
+
+/* Gray all images by 50% and blur by 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>URL 関数を使用して SVG リソースを使用した例は以下の通りです。</p>
+
+<pre class="brush: css notranslate">.target {
+  filter: url(#c1);
+}
+
+.mydiv {
+  filter: url(commonfilters.xml#large-blur);
+}
+</pre>
+
+<h2 id="Functions" name="Functions">関数</h2>
+
+<p><code>filter</code> プロパティは <code>none</code> または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は <code>none</code> を返します。特に示す場合を除いて、パーセント記号付きの値 (<code>34%</code> など) を取る関数は、10進数の値 (<code>0.34</code> など) も受け付けます。</p>
+
+<p>単一の <code>filter</code> プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の <code>filter</code> プロパティに別々に適用した場合とは異なる結果になります。</p>
+
+<h3 id="SVG_filter" name="SVG_filter">SVG フィルター</h3>
+
+<h4 id="url">url()</h4>
+
+<p>外部 XML ファイルに埋め込むことができる <a href="/ja/docs/Web/SVG/Element/filter">SVG フィルター</a>を指す URI を取ります。</p>
+
+<pre class="brush: css notranslate">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="Filter_functions" name="Filter_functions">フィルター関数</h3>
+
+<h4 id="blur">blur()</h4>
+
+<p>{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 <code>radius</code> の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は <code>0</code> です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。</p>
+
+<pre class="brush: css notranslate">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html notranslate">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="sRGB"&gt;
+            &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+              &lt;feGaussianBlur in="SourceGraphic" stdDeviation="3.5"/&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" width="212px" height="161px"/&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -webkit-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 0 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</div>
+
+<h4 id="brightness">brightness()</h4>
+
+<p>{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 <code>0%</code> の値を設定すると、完全な黒の画像が作成されます。 <code>100%</code> の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 <code>100%</code> を超える値が許されており、より明るい結果が得られます。補間時の空白値は <code>1</code> です。</p>
+
+<pre class="brush: css notranslate">filter: brightness(2)</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p>
+
+<h4 id="contrast">contrast()</h4>
+
+<p>{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 <code>0%</code> の値を指定すると完全にグレーの画像が作成されます。 <code>100%</code> の値を指定すると、入力画像は変更されません。 <code>100%</code> を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は <code>1</code> です。</p>
+
+<pre class="brush: css notranslate">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</div>
+
+<h4 id="drop-shadow">drop-shadow()</h4>
+
+<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <code>&lt;shadow&gt;</code> 型 (<a href="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">CSS3 Backgrounds</a> で定義) の引数を受け取りますが、 <code>inset</code> キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <code>&lt;shadow&gt;</code> 引数の値は次の通りです。</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(必須)</small></dt>
+ <dd>二つの {{cssxref("&lt;length&gt;")}} 値で、影をずらす大きさを設定します。 <code>&lt;offset-x&gt;</code> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <code>&lt;offset-y&gt;</code> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("&lt;length&gt;")}} を参照してください。<br>
+ 両方の値が <code>0</code> である場合は、影は要素の背後に配置されます (そして、 <code>&lt;blur-radius&gt;</code> や <code>&lt;spread-radius&gt;</code> を設定することで、ぼかしの効果を生成することができます)。</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(オプション)</small></dt>
+ <dd>これは三番目の {{cssxref("&lt;length&gt;")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 <code>0</code> (影の縁がはっきりしている) になります。</dd>
+ <dt><code>&lt;color&gt;</code> <small>(オプション)</small></dt>
+ <dd>指定可能なキーワードや記述方法は {{cssxref("&lt;color&gt;")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("&lt;color&gt;")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。</dd>
+</dl>
+
+<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"&gt;
+            &lt;defs&gt;
+              &lt;image id="MyImage" xlink:href="/files/3714/Test_Form_4.jpeg" width="213px" height="161px"/&gt;
+            &lt;/defs&gt;
+            &lt;filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"&gt;
+              &lt;feOffset dx="9" dy="9" in="SourceAlpha"/&gt;
+              &lt;feGaussianBlur stdDeviation="5"/&gt;
+            &lt;/filter&gt;
+            &lt;use xlink:href="#MyImage" filter="url(#drop-shadow)"/&gt;
+            &lt;use xlink:href="#MyImage"/&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - 元の画像" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - ライブ例" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"&gt;
+            &lt;defs&gt;
+              &lt;image id="MyImage2" xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/&gt;
+            &lt;/defs&gt;
+            &lt;filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"&gt;
+              &lt;feOffset dx="5" dy="5.5" in="SourceAlpha"/&gt;
+              &lt;feGaussianBlur stdDeviation="2.5"/&gt;
+              &lt;feComponentTransfer&gt;
+                &lt;feFuncA type="table" tableValues="0 0.8"/&gt;
+              &lt;/feComponentTransfer&gt;
+            &lt;/filter&gt;
+            &lt;use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/&gt;
+            &lt;use xlink:href="#MyImage2"/&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - 画像による例" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  width:100%;
+  height:auto;
+}
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</div>
+
+<h4 id="grayscale">grayscale()</h4>
+
+<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 <code>amount</code> の値は変換の程度を定義します。 <code>100%</code> の値は完全にグレースケールになります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
+
+<pre class="brush: css notranslate">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</div>
+
+<h4 id="hue-rotate">hue-rotate()</h4>
+
+<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 <code class="property">angle</code> の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 <code>0deg</code> の値を指定すると入力は変更されません。補完時の空白値は <code>0</code> です。最大値はありませんが、 <code>360deg</code> を超える値の以上の値の場合は回り込みになります。</p>
+
+<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p>
+
+<h4 id="invert">invert()</h4>
+
+<p>{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全に反転されます。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
+
+<pre class="brush: css notranslate">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p>
+
+<h4 id="opacity">opacity()</h4>
+
+<p>{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、完全に透明になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は <code>1</code> です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。</p>
+
+<pre class="brush: css notranslate">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p>
+
+<h4 id="saturate">saturate()</h4>
+
+<p>{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>0%</code> の値を指定すると、無彩色になります。 <code>100%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。 <code>100%</code> を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は <code>1</code> です。</p>
+
+<pre class="brush: css notranslate">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<h4 id="sepia">sepia()</h4>
+
+<p>{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 <code class="property">amount</code> の値は、変換の度合を定義します。 <code>100%</code> の値を指定すると、完全にセピア調になります。 <code>0%</code> では入力画像が変化しないままになります。 <code>0%</code> と <code>100%</code> の間は効果の線形乗数になります。補完時の空白値は <code>0</code> です。</p>
+
+<pre class="brush: css notranslate">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;同等の SVG&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p>
+
+<h2 id="Combining_functions" name="Combining_functions">関数の組み合わせ</h2>
+
+<p>いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。</p>
+
+<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;元の画像&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;ライブ例&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;画像による例&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</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('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.filter")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="internal" href="/ja/docs/Applying_SVG_effects_to_HTML_content">HTML コンテンツへの SVG 効果の適用</a></li>
+ <li>The {{cssxref("mask")}} property</li>
+ <li><a class="internal" href="/ja/docs/Web/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a>, HTML5Rocks! article</li>
+ <li><a href="http://www.coding-dude.com/wp/css/css-image-effects/">CSS Image Effects</a> using filter combinations for creating vintage photos</li>
+</ul>
diff --git a/files/ja/web/css/filter_effects/index.html b/files/ja/web/css/filter_effects/index.html
new file mode 100644
index 0000000000..26c171c112
--- /dev/null
+++ b/files/ja/web/css/filter_effects/index.html
@@ -0,0 +1,69 @@
+---
+title: フィルター効果
+slug: Web/CSS/Filter_Effects
+tags:
+  - CSS
+  - Reference
+  - フィルター効果
+  - 概要
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><ruby><strong>フィルター効果</strong><rp> (</rp><rt>Filter Effects</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、要素が文書内に表示される前の処理方法を定義します。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backdrop-filter")}}</li>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
+</div>
+
+<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('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="backdrop-filter_プロパティ"><code>backdrop-filter</code> プロパティ</h3>
+
+<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.properties.backdrop-filter")}}</p>
+
+<h3 id="filter_プロパティ"><code>filter</code> プロパティ</h3>
+
+<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.properties.filter")}}</p>
+</div>
+</div>
diff --git a/files/ja/web/css/fit-content/index.html b/files/ja/web/css/fit-content/index.html
new file mode 100644
index 0000000000..2aa2d093c4
--- /dev/null
+++ b/files/ja/web/css/fit-content/index.html
@@ -0,0 +1,119 @@
+---
+title: fit-content()
+slug: Web/CSS/fit-content
+tags:
+  - CSS
+  - CSS グリッド
+  - CSS 関数
+  - Experimental
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/fit-content
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>fit-content()</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の関数で、指定された寸法を <code>min(<var>最大寸法</var>, max(<var>最小寸法</var>, <var>引数</var>))</code> の式に従って有効な寸法に制約します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>この関数は <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>のプロパティにおいて、トラックの寸法を <code><a href="/ja/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> で定義された最大寸法と <code><a href="/ja/docs/Web/CSS/grid-template-columns#auto">auto</a></code> で定義された最小寸法との間で、 <code>auto</code> と似た方法 (すなわち <code><a href="/ja/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>) で計算しますが、 <code>auto</code> の最小値よりも大きい場合は <var>引数</var> がトラックの寸法になるという点が異なります。</p>
+
+<p>これは {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>引数として <code>&lt;length&gt;</code> または <code>&lt;percentage&gt;</code> を受け付ける関数です。</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;length&gt; 値 */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* &lt;percentage&gt; 値 */
+fit-content(40%)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>絶対的な長さ。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>指定された軸で有効な空間に対する相対的なパーセント値です。</dd>
+ <dd>グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3]">#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
+  &lt;div&gt;
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;Flexible item&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</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 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
+   <td>{{Spec2("CSS3 Sizing")}}</td>
+   <td>{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>トラックの寸法として使用される際の関数を定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.grid-template-columns.fit-content")}}</p>
diff --git a/files/ja/web/css/flex-basis/index.html b/files/ja/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..68cdc32397
--- /dev/null
+++ b/files/ja/web/css/flex-basis/index.html
@@ -0,0 +1,214 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-basis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>メモ</strong>: (<code>auto</code> 以外の) <code>flex-basis</code> と <code>width</code> (または <code>flex-direction: column</code> の場合は <code>height</code>) の両方が要素に設定されていた場合、 <code>flex-basis</code> が優先されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 幅を指定する */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有のサイズ指定キーワード */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* フレックスアイテムの内容物に基づいて自動設定する */
+flex-basis: content;
+
+/* グローバル値 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p><code>flex-basis</code> プロパティは、<code><a href="#content">content</a></code> キーワードまたは <code><a href="#&lt;'width'>">&lt;'width'&gt;</a></code> で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="&lt;'width'>">&lt;'width'&gt;</code></dt>
+ <dd>絶対的な {{cssxref("&lt;length&gt;")}}、親のフレックスコンテナーの main size に対する {{cssxref("&lt;percentage&gt;")}}、あるいは <code>auto</code> キーワードで定義します。負の値は不正です。既定値は <code>auto</code> です。</dd>
+ <dt><code id="content">content</code></dt>
+ <dd>flex アイテムの内容物に基づいて、自動的にサイズを決めます。</dd>
+ <dd>
+ <div class="note"><strong>メモ:</strong> この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> または <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) を <code>auto</code> にするのと合わせて <code>auto</code> を使用することで、同等の効果を得られます。</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>経緯:</strong></p>
+
+ <ul>
+  <li>元々、<code>flex-basis:auto</code> は "自身の <code>width</code> または <code>height</code> プロパティを参照する" ことを意味していました。</li>
+  <li>その後 <code>flex-basis:auto</code> の意味が自動サイズ設定に変わり、また "自身の <code>width</code> または <code>height</code> プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。</li>
+  <li>さらに、この変更が {{bug("1093316")}} で戻されて <code>auto</code> が再び "自身の <code>width</code> または <code>height</code> プロパティを参照する" になり、自動サイズ設定を行うための <code>content</code> キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_flex_item_initial_sizes" name="Setting_flex_item_initial_sizes">フレックスアイテムの初期の寸法の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 12px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}</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 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.flex-basis")}}</p>
+
+<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>
diff --git a/files/ja/web/css/flex-direction/index.html b/files/ja/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..3f7b9c2150
--- /dev/null
+++ b/files/ja/web/css/flex-direction/index.html
@@ -0,0 +1,158 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/flex-direction
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>flex-direction</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>なお、 <code>row</code> および <code>row-reverse</code> の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が <code>ltr</code> である場合は、 <code>row</code> は左から右へ向かう水平軸を表し、また <code>row-reverse</code> は右から左へ向かう水平軸を表します。一方、 <code>dir</code> 属性が <code>rtl</code> である場合は、 <code>row</code> は右から左へ向かう水平軸を表し、また <code>row-reverse</code> は左から右へ向かう水平軸を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 行のテキストの方向に配置 */
+flex-direction: row;
+
+/* &lt;row&gt; と同様だが、逆向き */
+flex-direction: row-reverse;
+
+/* 積み重なるように配置する */
+flex-direction: column;
+
+/* &lt;column&gt; と同様だが、逆向き */
+flex-direction: column-reverse;
+
+/* グローバル値 */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>以下の値を指定できます。</p>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>フレックスコンテナーの主軸は、書字方向と同じに定義されます。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、コンテンツの書字方向と同様になります。</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd><code>row</code> と同様ですが、<strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd>
+ <dt><code>column</code></dt>
+ <dd>フレックスコンテナーの主軸は、ブロック軸と同じになります。 <strong>main-start</strong> および <strong>main-end</strong> の位置は、 writing-mode における <strong>before</strong> および <strong>after</strong> の位置と同じになります。</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd><code>column</code> と同様ですが、 <strong>main-start</strong> および <strong>main-end</strong> の位置が入れ替わります。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><code>flex-direction</code> プロパティを <code>row-reverse</code> または <code>column-reverse</code> の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Reversing_flex_container_columns_and_rows" name="Reversing_flex_container_columns_and_rows">フレックスコンテナーの列と行の反転</h3>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h4&gt;This is a Column-Reverse&lt;/h4&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is a Row-Reverse&lt;/h4&gt;
+&lt;div id="content1"&gt;
+  &lt;div class="box1" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box1" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}</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 Flexbox', '#flex-direction', 'flex-direction')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.flex-direction")}}</p>
+
+<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/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></em></li>
+</ul>
diff --git a/files/ja/web/css/flex-flow/index.html b/files/ja/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..bb36b3aeec
--- /dev/null
+++ b/files/ja/web/css/flex-flow/index.html
@@ -0,0 +1,92 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+  - 一括指定プロパティ
+translation_of: Web/CSS/flex-flow
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>flex-flow</code></strong> プロパティは、 {{cssxref("flex-direction")}} プロパティと {{cssxref("flex-wrap")}} プロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; および &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* グローバル値 */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
+  flex-flow: column-reverse wrap;
+}
+</pre>
+
+<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 Flexbox','#flex-flow-property','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.flex-flow")}}</p>
+
+<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/Ordering_Flex_Items">フレックスアイテムの順序</a></em></li>
+</ul>
diff --git a/files/ja/web/css/flex-grow/index.html b/files/ja/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..5f0ef66147
--- /dev/null
+++ b/files/ja/web/css/flex-grow/index.html
@@ -0,0 +1,136 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - NeedsContent
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>flex-grow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの<a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>のフレックス伸長係数を設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* グローバル値 */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<p><code>flex-grow</code> プロパティは単一の <code><a href="#&lt;number>">&lt;number&gt;</a></code> として指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="&lt;number>" name="&lt;number>"><code>&lt;number&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} をご覧ください。負の値は無効です。既定値は0です。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。</p>
+
+<p><a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。</p>
+
+<p>残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。</p>
+
+<p>使用するにあたって、 <code>flex-grow</code> は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_flex_item_grow_factor" name="Setting_flex_item_grow_factor">フレックスアイテムの伸長係数の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Live_Sample">
+<pre class="brush: html notranslate">&lt;h4&gt;This is a Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}</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 Flexbox','#flex-grow-property','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.flex-grow")}}</p>
+
+<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している</li>
+</ul>
diff --git a/files/ja/web/css/flex-shrink/index.html b/files/ja/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..ac14cfd5b3
--- /dev/null
+++ b/files/ja/web/css/flex-shrink/index.html
@@ -0,0 +1,128 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - CSS フレックスボックス
+  - NeedsContent
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>flex-shrink</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの縮小係数を設定します。すべてのフレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは <code>flex-shrink</code> の数値に従って縮小して収まります。</span></p>
+
+<p>使用時は <code>flex-shrink</code> は {{cssxref("flex-grow")}} や {{cssxref("flex-basis")}} などの他のフレックスプロパティと共に使用され、ふつうは {{cssxref("flex")}} の一括指定を使用して定義されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* グローバル値 */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p><code>flex-shrink</code> プロパティは単一の <code><a href="#&lt;number>">&lt;number&gt;</a></code> で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="&lt;number>">&lt;number&gt;</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} をご覧ください。負の値は無効です。既定値は 1 です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="フレックスアイテムの縮小係数の設定">フレックスアイテムの縮小係数の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="Live_Sample">
+<pre class="brush: html notranslate">&lt;p&gt;全体の幅は 500px で、フレックスアイテムの flex-basis は 120px です。&lt;/p&gt;
+&lt;p&gt;A、B、C には flex-shrink:1 が、D と E には flex-shrink:2 が設定されています。&lt;/p&gt;
+&lt;p&gt;D と E の幅は他より狭くなります。&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_flex_item_shrink_factor', 500, 300)}}</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 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.flex-shrink")}}</p>
+
+<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
+</ul>
diff --git a/files/ja/web/css/flex-wrap/index.html b/files/ja/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..2fc408e1c1
--- /dev/null
+++ b/files/ja/web/css/flex-wrap/index.html
@@ -0,0 +1,158 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{ CSSRef}}</div>
+
+<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>flex-wrap</code></strong> プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>他のプロパティや詳細情報については <a href="/ja/docs/CSS/Using_CSS_flexible_boxes" title="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS フレックスボックスの利用</a>をご覧ください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">flex-wrap: nowrap; /* 既定値 */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* グローバル値 */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p><code>flex-wrap</code> プロパティは次の値のリストから選択した単一のキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>以下の値を利用することができます。</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 <code>cross-start</code> は、 {{cssxref("flex-direction")}} の値に応じて <code>start</code> または <code>before</code> と同一になります。</dd>
+ <dt><code>wrap</code></dt>
+ <dd>フレックスアイテムは複数行に分割されます。 <code>cross-start</code> は <code>flex-direction</code> の値に応じて <code>start</code> または <code>before</code> と同一になり、 <code>cross-end</code> は、指定された <code>cross-start</code> の反対側になります。</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd><code>wrap</code> と同様に動作しますが、 <code>cross-start</code> と <code>cross-end</code> が入れ替わります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Results" name="Results">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</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 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<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/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li>
+</ul>
diff --git a/files/ja/web/css/flex/index.html b/files/ja/web/css/flex/index.html
new file mode 100644
index 0000000000..d4feca1e55
--- /dev/null
+++ b/files/ja/web/css/flex/index.html
@@ -0,0 +1,294 @@
+---
+title: flex
+slug: Web/CSS/flex
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>flex</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、フレックス<em>アイテム</em>をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成するプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* 単位がない数値を1つ指定: flex-grow */
+flex: 2;
+
+/* 幅または高さを1つ指定: flex-basis */
+flex: 10em;
+flex: 30%;
+flex: min-content;
+
+/* 値を2つ指定: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* 値を2つ指定: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* グローバル値 */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<p><code>flex</code> プロパティは1つ、2つ、3つの値を取ることがあります。</p>
+
+<ul>
+ <li><strong>値1つの構文:</strong> 値は以下のうちの1つです。
+
+  <ul>
+   <li><code>&lt;number&gt;</code>: この場合は <code>flex: &lt;number&gt; 1 0</code> と解釈されます。 <code><a href="#&lt;'flex-shrink'>">&lt;flex-shrink&gt;</a></code> の値は 1 と想定され、 <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code> の値は <code>0</code> と想定されます。</li>
+   <li>キーワード: <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, <code>initial</code> のいずれか。</li>
+  </ul>
+ </li>
+ <li><strong>値2つの構文:</strong>
+  <ul>
+   <li>1つ目は次の値でなければなりません。
+    <ul>
+     <li>{{cssxref("&lt;number&gt;")}} であり、 <code><a href="#&lt;'flex-grow'>">&lt;flex-grow&gt;</a></code> として解釈される。</li>
+    </ul>
+   </li>
+   <li>2つ目は次の値でなければなりません。
+    <ul>
+     <li>{{cssxref("&lt;number&gt;")}}: <code><a href="#&lt;'flex-shrink'>">&lt;flex-shrink&gt;</a></code> として解釈される。</li>
+     <li>{{cssxref("width")}} として有効な値: <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code> として解釈される。</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><strong>値3つの構文:</strong> 値は以下の順序でなければなりません。
+  <ol>
+   <li>最初の値は単位なしの {{cssxref("&lt;number&gt;")}} でなければならず、 <code><a href="#&lt;'flex-grow'>">&lt;flex-grow&gt;</a></code> として解釈されます。</li>
+   <li>2つ目の値は単位なしの {{cssxref("&lt;number&gt;")}} でなければならず、 <code><a href="#&lt;'flex-grow'>">&lt;flex-shrink&gt;</a></code> として解釈されます。</li>
+   <li>3つ目の値は {{cssxref("width")}} として有効な値でなければならず、 <code><a href="#&lt;'flex-basis'>">&lt;flex-basis&gt;</a></code> として解釈されます。</li>
+  </ol>
+ </li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "<code>flex: 0 1 auto</code>" と同等です。</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "<code>flex: 1 1 auto</code>" と同等です。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>アイテムは <code>width</code> および <code>height</code> プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"<code>flex: 0 0 auto</code>" と同等です。</dd>
+ <dt id="&lt;'flex-grow'>"><code>&lt;'flex-grow'&gt;</code></dt>
+ <dd>フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は <code>1</code> です。 (初期値は <code>0</code>)</dd>
+ <dt id="&lt;'flex-shrink'>"><code>&lt;'flex-shrink'&gt;</code></dt>
+ <dd>フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は <code>1</code> です。 (初期値は <code>1</code>)</dd>
+ <dt id="&lt;'flex-basis'>"><code>&lt;'flex-basis'&gt;</code></dt>
+ <dd>フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが <code>0</code> ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は <code>1</code> です。 (初期値は <code>auto</code>)</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>多くの場合、 <code>flex</code> には <code>auto</code>, <code>initial</code>, <code>none</code>, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。</p>
+
+<div id="flex">
+<pre class="hidden brush: html notranslate">&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item four"&gt;4&lt;/div&gt;
+  &lt;div class="item two"&gt;2&lt;/div&gt;
+  &lt;div class="item one"&gt;1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.flex-container {
+  background-color: #F4F7F8;
+  resize: horizontal;
+  overflow: hidden;
+  display: flex;
+  margin: 1em;
+}
+
+.item {
+  margin: 1em;
+  padding: 0.5em;
+  width: 110px;
+  min-width: 0;
+  background-color: #1B5385;
+  color: white;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.initial {
+  flex: initial;
+}
+
+.auto {
+  flex: auto;
+}
+
+.none {
+  flex: none;
+}
+
+.four {
+  flex: 4;
+}
+
+.two {
+  flex: 2;
+}
+
+.one {
+  flex: 1;
+}
+</pre>
+
+<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p>
+
+<p>既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_flex_auto" name="Setting_flex_auto">flex: auto の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="flex-container"&gt;
+  &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+  &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+  flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+  width: 5rem;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js notranslate">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+  raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css notranslate">#flex-container {
+  width: 100%;
+  font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+  border: 1px solid #f00;
+  padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+  border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_flex_auto','100%','60')}}</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 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.flex")}}</p>
+
+<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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a></em></li>
+</ul>
diff --git a/files/ja/web/css/flex_value/index.html b/files/ja/web/css/flex_value/index.html
new file mode 100644
index 0000000000..27160362e2
--- /dev/null
+++ b/files/ja/web/css/flex_value/index.html
@@ -0,0 +1,59 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - リファレンス
+  - レイアウト
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;flex&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a> は、グリッドコンテナー内部における可変の長さです。 {{cssxref("grid-template-columns")}} や {{cssxref("grid-template-rows")}} 及びほかの関連プロパティで使われます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;flex&gt;</code> データ型は {{cssxref("&lt;number&gt;")}} のあとに単位 <code id="fr">fr</code> が付きます。すべての CSS dimensions と同様に、数値と単位の間に空白は入れません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">1fr    /* 整数値の使用 */
+2.5fr  /* 浮動小数点値の使用 */
+</pre>
+
+<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("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+</ul>
diff --git a/files/ja/web/css/float/index.html b/files/ja/web/css/float/index.html
new file mode 100644
index 0000000000..8f0737bbba
--- /dev/null
+++ b/files/ja/web/css/float/index.html
@@ -0,0 +1,229 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/float
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>float</code></strong> は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。</span>要素はウェブページの通常のフローから外れますが、 (<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a> とは対照的に) フローの一部であり続けます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><ruby><em>浮動要素</em><rp> (</rp><rt>floating element</rt><rp>) </rp></ruby>とは、<code>float</code> の計算値が <code>none</code> 以外の要素です。</p>
+
+<p><code>float</code> は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">指定値</th>
+   <th scope="col">計算値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>flex</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code></td>
+   <td><code>grid</code></td>
+  </tr>
+  <tr>
+   <td><em>その他</em></td>
+   <td><em>変更されません</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>注:</strong> JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは <code>float</code> に対応していますが、古いブラウザーは <code>cssFloat</code> という綴りになり、 Internet Explorer のバージョン 8 以前では、 <code>styleFloat</code> を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 &lt;label&gt; の "for" を "htmlFor" とする必要があったりするのと同じです)。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* グローバル値 */
+float: inherit;
+float: initial;
+float: unset;
+</pre>
+
+<p><code>float</code> プロパティは、以下の値からひとつのキーワードを選択して指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>要素は、必ずその包含ブロックの左側に浮動します。</dd>
+ <dt><code>right</code></dt>
+ <dd>要素は、必ずその包含ブロックの右側に浮動します。</dd>
+ <dt><code>none</code></dt>
+ <dd>要素は決して浮動しません。</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>要素は、必ずその包含ブロックの始端側に浮動します。 <code>ltr</code> 表記では左側、 <code>rtl</code> 表記では右側になります。</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>要素は、必ずその包含ブロックの終端側に浮動します。 <code>ltr</code> 表記では右側、 <code>rtl</code> 表記では左側になります。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="How_floated_elements_are_positioned" name="How_floated_elements_are_positioned">浮動要素の位置をどのように決めるか</h3>
+
+<p>上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか<em>他の浮動要素</em>の辺に触れるまで、左側または右側に移動させられます。</p>
+
+<p>この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。</p>
+
+<p>浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を <code>width: 100%</code> かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;div class="left"&gt;1&lt;/div&gt;
+  &lt;div class="left"&gt;2&lt;/div&gt;
+  &lt;div class="right"&gt;3&lt;/div&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p>
+
+<h3 id="Clearing_floats" name="Clearing_floats">浮動の解除</h3>
+
+<p>あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。</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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>値 <code>inline-start</code> および <code>inline-end</code> を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.float")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形コンテキスト</a></li>
+ <li>アイテムを浮動要素の下へ強制的に移動させるには {{cssxref("clear")}} を使用します。</li>
+</ul>
diff --git a/files/ja/web/css/font-family/index.html b/files/ja/web/css/font-family/index.html
new file mode 100644
index 0000000000..6b0bd30acd
--- /dev/null
+++ b/files/ja/web/css/font-family/index.html
@@ -0,0 +1,243 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+  - font
+  - font-family
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>font-family</code></strong> プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。</p>
+
+<p>一括指定プロパティの {{CSSxRef("font")}} を使用すると、 <code>font-size</code> やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。</p>
+
+<p>指定されたフォントが利用可能であるという保証はないので、 <code>font-family</code> リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。</p>
+
+<p><code>font-family</code> プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは<strong>限りません</strong>。むしろ、フォント選択は <strong>1 文字ずつ</strong>行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部の<a href="/ja/docs/Web/CSS/font-style">スタイル</a>、<a href="/ja/docs/Web/CSS/font-variant">種類</a>、<a href="/ja/docs/Web/CSS/font-size">大きさ</a>でのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css; no-line-numbers">/* フォントファミリ名および総称ファミリ名 */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* 総称ファミリ名のみ */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: ui-serif;
+font-family: ui-sans-serif;
+font-family: ui-monospace;
+font-family: ui-rounded;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* グローバル値 */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p><code>font-family</code> プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <code><a href="#&lt;family-name>">&lt;family-name&gt;</a></code> または <code><a href="#&lt;generic-name>">&lt;generic-name&gt;</a></code> の値です。</p>
+
+<p>以下の例は二つのフォントファミリを並べており、最初は <code>&lt;family-name&gt;</code> で二番目は <code>&lt;generic-name&gt;</code> です。</p>
+
+<pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="&lt;family-name>" name="&lt;family-name>"><code>&lt;family-name&gt;</code></a></dt>
+ <dd>フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。</dd>
+ <dt><a id="&lt;generic-name>" name="&lt;generic-name>"><code>&lt;generic-name&gt;</code></a></dt>
+ <dd>
+ <p>総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd style="font-family: serif;">終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。<br>
+  例: <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span></dd>
+  <dt><code>sans-serif</code></dt>
+  <dd style="font-family: sans-serif;">平たい角の端を持つ字形です。<br>
+  例: <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span></dd>
+  <dt><code>monospace</code></dt>
+  <dd style="font-family: monospace;">すべての字が同じ幅を持つ字形です。<br>
+  例: <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace</span></dd>
+  <dt><code>cursive</code></dt>
+  <dd style="font-family: cursive;">筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。<br>
+  例: <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span></dd>
+  <dt><code>fantasy</code></dt>
+  <dd style="font-family: fantasy;">fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。<br>
+  例: <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。</dd>
+  <dt><code>ui-serif</code></dt>
+  <dd>ユーザーインターフェイス既定のセリフ付きフォントです。</dd>
+  <dt><code>ui-sans-serif</code></dt>
+  <dd>ユーザーインターフェイス既定のセリフなしフォントです。</dd>
+  <dt><code>ui-monospace</code></dt>
+  <dd>ユーザーインターフェイス既定の等幅フォントです。</dd>
+  <dt><code>ui-rounded</code></dt>
+  <dd>ユーザーインターフェイス既定の丸い特性を持ったフォントです。</dd>
+  <dt><code>math</code></dt>
+  <dd>これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。</dd>
+  <dt><code>emoji</code></dt>
+  <dd>絵文字を表示するために特別にデザインされたフォントです。</dd>
+  <dt><code>fangsong</code></dt>
+  <dd>セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valid_family_names" name="Valid_family_names">妥当なファミリ名</h3>
+
+<p>フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。</p>
+
+<p>例えば、以下の宣言は妥当です:</p>
+
+<pre class="brush: css; example-good">font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>以下の宣言は<strong>無効</strong>です。</p>
+
+<pre class="brush: css; example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Some_common_font_families" name="Some_common_font_families">いくつかのよくあるフォントファミリ</h3>
+
+<pre class="brush: css;">.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div class="serif"&gt;
+  This is an example of a serif font.
+&lt;/div&gt;
+
+&lt;div class="sansserif"&gt;
+  This is an example of a sans-serif font.
+&lt;/div&gt;
+
+&lt;div class="monospace"&gt;
+  This is an example of a monospace font.
+&lt;/div&gt;
+
+&lt;div class="cursive"&gt;
+  This is an example of a cursive font.
+&lt;/div&gt;
+
+&lt;div class="fantasy"&gt;
+  This is an example of a fantasy font.
+&lt;/div&gt;
+
+&lt;div class="math"&gt;
+  This is an example of a math font.
+&lt;/div&gt;
+
+&lt;div class="emoji"&gt;
+  This is an example of an emoji font.
+&lt;/div&gt;
+
+&lt;div class="fangsong"&gt;
+  This is an example of a fangsong font.
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Some_common_font_families", 600, 120)}}</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("CSS4 Fonts", "#generic-font-families", "generic font families")}}</td>
+   <td>{{Spec2("CSS4 Fonts")}}</td>
+   <td>新しい総称フォントファミリを追加。特に、 <code>system-ui</code>, <code>ui-serif</code>, <code>ui-sans-serif</code>, <code>ui-monospace</code>, <code>ui-rounded</code>, <code>emoji</code>, <code>math</code>, <code>fangsong</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td>特に変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>特に変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#font-family", "font-family")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.font-family")}}</p>
diff --git a/files/ja/web/css/font-feature-settings/index.html b/files/ja/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..c8364f03f8
--- /dev/null
+++ b/files/ja/web/css/font-feature-settings/index.html
@@ -0,0 +1,119 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - リファレンス
+translation_of: Web/CSS/font-feature-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>font-feature-settings</code></strong> プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* 既定の設定を使用する */
+font-feature-settings: normal;
+
+/* OpenType の特性タグの値を設定する */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* グローバル値 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;</pre>
+
+<div class="note"><strong>メモ:</strong> 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。<br>
+<br>
+これらは <code>font-feature-settings</code> よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 <code>font-feature-settings</code> は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に <code>font-feature-settings</code> を使うべきではありません。</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>テキストは既定の設定で配置されます。</dd>
+ <dt><code>&lt;feature-tag-value&gt;</code></dt>
+ <dd>テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("&lt;string&gt;")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。<br>
+ 値は正の整数です。キーワード <code>on</code> と <code>off</code> はそれぞれ <code>1</code> と <code>0</code> の別名です。値が設定されていなければ、既定値は <code>1</code> です。 非真偽値の OpenType 特性 (例: <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">/* use small-cap alternate glyphs */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* convert both upper and lowercase to small caps (affects punctuation also) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* use zeros with a slash through them to differentiate from "O" */
+
+.nicezero { font-feature-settings: "zero"; }
+
+/* enable historical forms */
+.hist { font-feature-settings: "hist"; }
+
+/* disable common ligatures, usually on by default */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* enable tabular (monospaced) figures */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* enable automatic fractions */
+.fractions { font-feature-settings: "frac"; }
+
+/* use the second available swash character */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* enable stylistic set 7 */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="仕様書">仕様書</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 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.font-feature-settings")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li>
+</ul>
diff --git a/files/ja/web/css/font-kerning/index.html b/files/ja/web/css/font-kerning/index.html
new file mode 100644
index 0000000000..adebe64c59
--- /dev/null
+++ b/files/ja/web/css/font-kerning/index.html
@@ -0,0 +1,120 @@
+---
+title: font-kerning
+slug: Web/CSS/font-kerning
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/font-kerning
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-kerning</code></strong> CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* グローバル値 */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+</pre>
+
+<p><em>カーニング</em>は、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが <em>well-kerned</em> であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。</p>
+
+<p><img alt="Example of font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>font-kerning</code> プロパティは以下のキーワード内の一つを指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。</dd>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードは、カーニングを適用するよう要求します。</dd>
+ <dt><code>none</code></dt>
+ <dd>このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="kern"&gt;&lt;/div&gt;
+&lt;div id="nokern"&gt;&lt;/div&gt;
+&lt;textarea id="input"&gt;AV T. ij&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  font-size: 2rem;
+  font-family: serif;
+}
+
+#nokern {
+  font-kerning: none;
+}
+
+#kern {
+  font-kerning: normal;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* Update content */
+  nokern.textContent = input.value;
+});
+
+kern.textContent = input.value; /* Initialize content */
+nokern.textContent = input.value;
+</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</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 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.font-kerning")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}</li>
+</ul>
diff --git a/files/ja/web/css/font-language-override/index.html b/files/ja/web/css/font-language-override/index.html
new file mode 100644
index 0000000000..67cd954604
--- /dev/null
+++ b/files/ja/web/css/font-language-override/index.html
@@ -0,0 +1,109 @@
+---
+title: font-language-override
+slug: Web/CSS/font-language-override
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - font-language-override
+  - l10n
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-language-override
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-language-override</code></strong> は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+font-language-override: normal;
+
+/* &lt;string&gt; 値 */
+font-language-override: "ENG";  /* 英語の字形 */
+font-language-override: "TRK";  /* トルコ語の字形 */
+
+/* グローバル値 */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+</pre>
+
+<p>既定では、 HTML の <code>lang</code> 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 <code>fi</code> に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (<code>i</code>) と点が付かないもの (<code>ı</code>) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。</p>
+
+<p><code>font-language-override</code> プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>font-language-override</code> プロパティは、キーワード <code>normal</code> または一つの <code>&lt;string&gt;</code> として指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd><code>lang</code> 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。</dd>
+ <dt>{{cssxref("string")}}</dt>
+ <dd>文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は <a href="http://www.microsoft.com/typography/otspec/languagetags.htm">OpenType language system</a> にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。</dd>
+</dl>
+
+<h2 id="公式定義">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Using_Danish_glyphs" name="Using_Danish_glyphs">デンマーク語の文字の使用Using Danish glyphs</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="para1"&gt;Default language setting.&lt;/p&gt;
+&lt;p class="para2"&gt;This is a string with the &lt;code&gt;font-language-override&lt;/code&gt; set to <code>Danish.</code>&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}</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('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-language-override")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/ja/web/css/font-optical-sizing/index.html b/files/ja/web/css/font-optical-sizing/index.html
new file mode 100644
index 0000000000..673cc31efb
--- /dev/null
+++ b/files/ja/web/css/font-optical-sizing/index.html
@@ -0,0 +1,98 @@
+---
+title: font-optical-sizing
+slug: Web/CSS/font-optical-sizing
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/font-optical-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-optical-sizing</code></strong> プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。</p>
+
+<p>例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の <code>opsz</code> で表現されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* default */
+
+/* グローバル値 */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>ブラウザーは表示の最適化のために書体の形を変更しません。</dd>
+ <dt>auto</dt>
+ <dd>ブラウザーは表示の最適化のために書体の形を変更します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: html">&lt;p class="optical-sizing"&gt;This paragraph is optically sized.
+ This is the default across browsers.&lt;/p&gt;
+
+&lt;p class="no-optical-sizing"&gt;This paragraph is not optically sized.
+ You should see a difference in supporting browsers.&lt;/p&gt;</pre>
+
+<pre class="brush: css">@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 <a href="https://github.com/TypeNetwork/Amstelvar/releases">GitHub からダウンロード</a>できます。</p>
+</div>
+
+<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('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.font-optical-sizing")}}</p>
diff --git a/files/ja/web/css/font-size-adjust/index.html b/files/ja/web/css/font-size-adjust/index.html
new file mode 100644
index 0000000000..81656335a4
--- /dev/null
+++ b/files/ja/web/css/font-size-adjust/index.html
@@ -0,0 +1,124 @@
+---
+title: font-size-adjust
+slug: Web/CSS/font-size-adjust
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-size-adjust
+---
+<p><strong><code>font-size-adjust</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 指定されたフォントサイズを使用 */
+font-size-adjust: none;
+
+/* 小文字のフォントサイズを、指定された
+フォントサイズの半分にする */
+font-size-adjust: 0.5;
+
+/* グローバル値 */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+</pre>
+
+<p>このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。</p>
+
+<p>このプロパティの使い方は、 <code>font-size-adjust</code> に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、</p>
+
+<pre class="brush: css notranslate">font-size: 14px;
+font-size-adjust: 0.5;
+</pre>
+
+<p>実際のところ、フォントの小文字が <code>7px</code> の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 <code>font-size-adjust</code> に対応していないブラウザーでは <code>14px</code> のフォントが使用されている場合でも、妥当な結果が得られます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>
+ <p>{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。</p>
+
+ <p>指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが <code>font-size-adjust</code> に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。</p>
+
+ <p><code>0</code> は高さが 0 のテキスト (非表示テキスト) になります。</p>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Adjusting_lower-case_letter_sizes" name="Adjusting_lower-case_letter_sizes">小文字の大きさの調整</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="times"&gt;This text uses the Times font (10px), which is hard to read in small sizes.&lt;/p&gt;
+&lt;p class="verdana"&gt;This text uses the Verdana font (10px), which has relatively large lowercase letters.&lt;/p&gt;
+&lt;p class="adjtimes"&gt;This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}</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 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><code>font-size-adjust</code> は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。</p>
+</div>
+
+<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.properties.font-size-adjust")}}</p>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ja/web/css/font-size/index.html b/files/ja/web/css/font-size/index.html
new file mode 100644
index 0000000000..cd4d37ec67
--- /dev/null
+++ b/files/ja/web/css/font-size/index.html
@@ -0,0 +1,228 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-size</code></strong> プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("&lt;length&gt;")}} の単位例えば <code>em</code>, <code>ex</code>, なども更新されます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;absolute-size&gt; 値 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+font-size: xxx-large;
+
+/* &lt;relative-size&gt; 値 */
+font-size: smaller;
+font-size: larger;
+
+/* &lt;length&gt; 値 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* &lt;percentage&gt; 値 */
+font-size: 80%;
+
+/* グローバル値 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p><code>font-size</code> プロパティは、以下の何れかの方法で指定します。</p>
+
+<ul>
+ <li><a href="#absolute-size">絶対的サイズ</a>のキーワードまたは<a href="#relative-size">相対的サイズ</a>のキーワードのうちの一つ</li>
+ <li><code>&lt;length&gt;</code> または親要素のフォントサイズからの相対的な <code>&lt;percentage&gt;</code></li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>xxx-large</code></dt>
+ <dd>ユーザーの既定のフォントサイズ (つまり <code>medium</code>) を基準とした絶対的なサイズのキーワードです。</dd>
+ <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt>
+ <dd>相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。</dd>
+ <dt id="&lt;length>">{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>正の {{cssxref("&lt;length&gt;")}} の値。 (<code>em</code> や <code>ex</code> などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。</p>
+
+ <p>(<code>rem</code> などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。</p>
+ </dd>
+ <dt id="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>
+ <p>正の {{cssxref("&lt;percentage&gt;")}} 値で、親要素のフォントサイズからの相対値です。</p>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>注:</strong> アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。</p>
+</div>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。</p>
+
+<h3 id="Keywords" name="Keywords">キーワード</h3>
+
+<p>キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。</p>
+
+<h3 id="Pixels" name="Pixels">ピクセル</h3>
+
+<p>ピクセル値 (<code>px</code>) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。</p>
+
+<p>フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを <code>16px</code> 、子要素を <code>larger</code> とした場合、子要素のフォントサイズは親要素の <code>16px</code> より大きくレンダリングされます。</p>
+
+<div class="note"><strong>注:</strong> フォントサイズを <code>px</code> で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、<em><a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3">アクセシブル</a></em>ではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。</div>
+
+<h3 id="Ems" name="Ems">em</h3>
+
+<p>フォントサイズを設定するもうひとつの方法は <code>em</code> 値を使うものです。 <code>em</code> 値の大きさは動的です。<code>font-size</code> プロパティを定義すると、 <code>em</code> はその <code>em</code> が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で <code>font-size</code> を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。</p>
+
+<p>必要なピクセル値に相当する em は、次の式で計算することができます。</p>
+
+<pre class="brush: plain notranslate">em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ</pre>
+
+<p>例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。</p>
+
+<p>em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。</p>
+
+<p><code>em</code> と <code>ex</code> の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 <code>em</code> の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。</p>
+
+<p>em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。</p>
+
+<pre class="brush: css notranslate">html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>結果は以下のようになります。</p>
+
+<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>
+
+<p>ブラウザーの既定の <code>font-size</code> が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の <code>font-size</code> は 1.6em ですが、これは親要素の <code>font-size</code> からの相対値で、さらにその親要素の <code>font-size</code> からの相対値になるからです。これはよく<ruby><strong>複合</strong><rp> (</rp><rt>compounding</rt><rp>) </rp></ruby>と呼ばれます。</p>
+
+<h3 id="Rems" name="Rems">rem</h3>
+
+<p><code>rem</code> 値は、複合の問題を避けるために考案されました。 <code>rem</code> 値は親要素ではなく、ルート <code>html</code> 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。</p>
+
+<p>以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を <code>rem</code> に変更したことです。</p>
+
+<pre class="brush: css notranslate">html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>この CSS を同じ HTML に適用すると、以下のようになります:</p>
+
+<pre class="brush: html notranslate">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>
+
+<p>この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの <code>font-size</code> は既定値が 10px のままであるとします)。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_font_sizes" name="Setting_font_sizes">フォントサイズの設定</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;
+&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
+&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_font_sizes','600','200')}}</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('CSS4 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td><code>xxx-large</code> キーワードを追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-size")}}</p>
diff --git a/files/ja/web/css/font-stretch/index.html b/files/ja/web/css/font-stretch/index.html
new file mode 100644
index 0000000000..934810b87c
--- /dev/null
+++ b/files/ja/web/css/font-stretch/index.html
@@ -0,0 +1,263 @@
+---
+title: font-stretch
+slug: Web/CSS/font-stretch
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - リファレンス
+translation_of: Web/CSS/font-stretch
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><code>font-stretch</code> CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。</span></p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* パーセント値 */
+font-stretch: 0%;
+font-stretch: 50%;
+font-stretch: 200%;
+
+/* グローバル値 */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+</pre>
+
+<p>フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (<em>condensed</em> フェイス)、通常より広い文字 (<em>expanded</em> フェイス) などがあります。</p>
+
+<p><code>font-stretch</code> を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。</p>
+
+<p>一部のサンプルフォントでこのプロパティの効果を見るには、以下の<a href="#Font_face_selection">フォントフェイスの選択</a>をご覧ください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>このプロパティは、単一のキーワード値又は単一の {{cssxref("&lt;percentage&gt;")}} 値として指定することができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常のフォントフェイスを指定します。</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>{{cssxref("&lt;percentage&gt;")}} 値です。このプロパティでは負の数は許可されていません。</dd>
+</dl>
+
+<p><code>font-stretch</code> の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <code>&lt;percentage&gt;</code> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。</p>
+
+<p>但し、 <code>&lt;percentage&gt;</code> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは <a href="#Browser_compatibility">Browser compatibility</a> をご覧ください。</p>
+
+<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードと数値の対応</h3>
+
+<p>以下の表は、キーワード値とパーセントの数値の間の対応を示しています。</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">キーワード</th>
+   <th scope="col">パーセント値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Font_face_selection" name="Font_face_selection">フォントフェイスの選択</h3>
+
+<p><code>font-stretch</code> で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。</p>
+
+<p>以下の表は二つの異なるフォントにおいて、 <code>font-stretch</code> に様々なパーセント値を提供した場合の効果を示しています。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">50%</th>
+   <th scope="col">62.5%</th>
+   <th scope="col">75%</th>
+   <th scope="col">87.5%</th>
+   <th scope="col">100%</th>
+   <th scope="col">112.5%</th>
+   <th scope="col">125%</th>
+   <th scope="col">150%</th>
+   <th scope="col">200%</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Helvetica Neue</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">League Mono Variable</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 <code>font-stretch</code> の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。</li>
+ <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> は、 <code>font-stretch</code> のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Percentage_syntax" name="Percentage_syntax">パーセント値の構文</h3>
+
+<p>なお、この例は <code>&lt;percentage&gt;</code> 値に対応したブラウザーのみで動作します。</p>
+
+<div id="variable-font-demo">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
+    &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
+    &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+This example uses the League Mono Variable font, developed by
+Tyler Finck (https://www.tylerfinck.com/) and used here under
+the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状況</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
+   <td>{{ Spec2('CSS4 Fonts') }}</td>
+   <td>可変フォントに <code>&lt;percentage&gt;</code> の構文を追加。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>CSS プロパティ <code>font-stretch</code> は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.font-stretch")}}</p>
diff --git a/files/ja/web/css/font-style/index.html b/files/ja/web/css/font-style/index.html
new file mode 100644
index 0000000000..2bea52a0bb
--- /dev/null
+++ b/files/ja/web/css/font-style/index.html
@@ -0,0 +1,227 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+  - font
+  - ウェブ
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-style</code></strong> プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><strong>italic</strong> フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 <strong>oblique</strong> フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* グローバル値 */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p><code>font-style</code> プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが <code>oblique</code> であれば任意で角度を含めることができます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>{{Cssxref("font-family")}} の中で <code>normal</code> に分類されているフォントを選択します。</dd>
+ <dt><code>italic</code></dt>
+ <dd><code>italic</code> として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに <code>oblique</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd>
+ <dt><code>oblique</code></dt>
+ <dd><code>oblique</code> として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに <code>italic</code> に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。</dd>
+ <dt><code>oblique</code> <code><a href="/ja/docs/Web/CSS/angle">&lt;angle&gt;</a></code></dt>
+ <dd><code>oblique</code> として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。<br>
+ <br>
+ 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a> を参照してください)。</dd>
+</dl>
+
+<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
+
+<p>可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 <code>oblique</code> キーワードに <code>&lt;angle&gt;</code> 修飾子を使用して選択することができます。</p>
+
+<p>TrueType または OpenType の可変フォントでは、 <code>"slnt"</code> 変数が oblique の傾く角度を様々に実装するために使用され、 <code>"ital"</code> 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。</p>
+
+<p>次の例を動作させるには、 CSS Fonts Level 4 の <code>font-style: oblique</code> が <code>&lt;angle&gt;</code> を受け入れる構文に対応したブラウザーが必要です。</p>
+
+<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
+    &lt;label for="slant"&gt;Slant&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Font_styles" name="Font_styles">フォントスタイル</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
+&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
+&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_styles') }}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>テキストの長い区間に渡って <code>font-style</code> の値を <code>italic</code> に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td><code>oblique</code> の後で角度を指定できるようになった</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.font-style")}}</p>
diff --git a/files/ja/web/css/font-synthesis/index.html b/files/ja/web/css/font-synthesis/index.html
new file mode 100644
index 0000000000..c9d84d2d59
--- /dev/null
+++ b/files/ja/web/css/font-synthesis/index.html
@@ -0,0 +1,111 @@
+---
+title: font-synthesis
+slug: Web/CSS/font-synthesis
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-synthesis
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-synthesis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>このプロパティは以下の形のうちの一つを取ることができます。</p>
+
+<ul>
+ <li>キーワード値の <code>none</code></li>
+ <li>キーワード値の <code>weight</code> と <code>style</code> のどちらか</li>
+ <li>キーワード値の <code>weight</code> と <code>style</code> の両方</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>太字およびイタリックの字体を合成しないことを示すキーワードです。</dd>
+ <dt><code>weight</code></dt>
+ <dd>必要であれば、太字の字体を合成してよいことを示すキーワードです。</dd>
+ <dt><code>style</code></dt>
+ <dd>必要であれば、イタリックの字体を合成してよいことを示すキーワードです。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Disabling_font_synthesis" name="Disabling_font_synthesis">フォント合成の無効化</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;em class="syn"&gt;Synthesize me! 站直。&lt;/em&gt;
+&lt;br/&gt;
+&lt;em class="no-syn"&gt;Don't synthesize me! 站直。&lt;/em&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Disabling_font_synthesis', '', '50') }}</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 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-synthesis")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+</ul>
diff --git a/files/ja/web/css/font-variant-alternates/index.html b/files/ja/web/css/font-variant-alternates/index.html
new file mode 100644
index 0000000000..b029abd181
--- /dev/null
+++ b/files/ja/web/css/font-variant-alternates/index.html
@@ -0,0 +1,128 @@
+---
+title: font-variant-alternates
+slug: Web/CSS/font-variant-alternates
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/font-variant-alternates
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p>
+
+<pre class="brush:css no-line-numbers">/* 予約語 */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* 函数表記値 */
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* 大域値 */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+</pre>
+
+<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="書式">書式</h2>
+
+<p>本プロパティは二つの形式の内一方を取ります:</p>
+
+<ul>
+ <li>予約語<code>normal</code></li>
+ <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li>
+</ul>
+
+<h3 id="値">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>この予約語は代替グリフを無効にします。</dd>
+ <dt><code>historical-forms</code></dt>
+ <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd>
+ <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
+ <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd>
+ <dt><code><a name="styleset()"></a>styleset()</code></dt>
+ <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd>
+ <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
+ <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd>
+ <dt><code><a name="swash()"></a>swash()</code></dt>
+ <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd>
+ <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
+ <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。
+ <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div>
+ </dd>
+ <dt><code><a name="annotation()"></a>annotation()</code></dt>
+ <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd>
+</dl>
+
+<h3 id="形式文法">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Firefox rocks!&lt;/p&gt;
+&lt;p class="variant"&gt;Firefox rocks!&lt;/p&gt;
+</pre>
+
+<h3 id="CSS"><span class="pun">CSS</span></h3>
+
+<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
+    @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<div class="note">
+<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p>
+</div>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p>
+
+<h2 id="仕様書">仕様書</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 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-variant-alternates")}}</p>
diff --git a/files/ja/web/css/font-variant-caps/index.html b/files/ja/web/css/font-variant-caps/index.html
new file mode 100644
index 0000000000..6ba11b38e0
--- /dev/null
+++ b/files/ja/web/css/font-variant-caps/index.html
@@ -0,0 +1,138 @@
+---
+title: font-variant-caps
+slug: Web/CSS/font-variant-caps
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-variant-caps
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-variant-caps</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、大文字向けの代替字形の使用を制御します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。</p>
+
+<p>フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。</p>
+
+<h3 id="Language-specific_rules" name="Language-specific_rules">言語特有の規則</h3>
+
+<p>このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。</p>
+
+<ul>
+ <li>チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の <code>i</code> (点ありと点なし) があり、二種類の大文字小文字の組み合わせ <code>i</code>/<code>İ</code> と <code>ı</code>/<code>I</code> があります。</li>
+ <li>ドイツ語 (de) では、 <code>ß</code> は大文字で <code>ẞ</code> (U+1E9E) になることがあります。</li>
+ <li>ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (<code>ά</code>/<code>Α</code>)、分離型のエタは例外です (<code>ή</code>/<code>Ή</code>)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (<code>άι</code>/<code>ΑΪ</code>)。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* グローバル値 */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+</pre>
+
+<p><code>font-variant-caps</code> プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>代替字形の使用を無効にします。</dd>
+ <dt><code>small-caps</code></dt>
+ <dd>小さな大文字の表示を有効にします (OpenType 特性: <code>smcp</code>)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。</dd>
+ <dt><code>all-small-caps</code></dt>
+ <dd>大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: <code>c2sc</code>, <code>smcp</code>)。</dd>
+ <dt><code>petite-caps</code></dt>
+ <dd>petite capital の表示を有効にします (OpenType 特性: <code>pcap</code>)。</dd>
+ <dt><code>all-petite-caps</code></dt>
+ <dd>大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: <code>c2pc</code>, <code>pcap</code>)。</dd>
+ <dt><code>unicase</code></dt>
+ <dd>大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: <code>unic</code>).</dd>
+ <dt><code>titling-caps</code></dt>
+ <dd>タイトルキャピタルの表示を有効化します (OpenType 特性: <code>titl</code>)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>長い区間のテキストに対して <code>font-variant</code> の値を <code>all-small-caps</code> や <code>all-petite-caps</code> を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_the_small-caps_font_variant" name="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="small-caps"&gt;Firefox rocks, small caps!&lt;/p&gt;
+&lt;p class="normal"&gt;Firefox rocks, normal caps!&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">.small-caps {
+  font-variant-caps: small-caps;
+  font-style: italic;
+}
+.normal {
+  font-variant-caps: normal;
+  font-style: italic;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}</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 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-variant-caps")}}</p>
diff --git a/files/ja/web/css/font-variant-east-asian/index.html b/files/ja/web/css/font-variant-east-asian/index.html
new file mode 100644
index 0000000000..5ebf344a0c
--- /dev/null
+++ b/files/ja/web/css/font-variant-east-asian/index.html
@@ -0,0 +1,186 @@
+---
+title: font-variant-east-asian
+slug: Web/CSS/font-variant-east-asian
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - NeedsLiveSample
+  - Reference
+  - 'recipe:css-property'
+  - 日本語処理
+translation_of: Web/CSS/font-variant-east-asian
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis83;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis90;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis04;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: simplified;         /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: traditional;        /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: full-width;         /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: proportional-width; /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: ruby full-width jis83;
+
+/* グローバル値 */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードは、別形式の表記の使用を無効にします。</dd>
+ <dt><code>ruby</code></dt>
+ <dd>このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の <code>ruby</code> の値に対応します。</dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code></dt>
+ <dd>これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>キーワード</th>
+    <th>標準による形状の定義</th>
+    <th>OpenType の対応</th>
+   </tr>
+   <tr>
+    <td><code>jis78</code></td>
+    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第1次規格">JIS X 0208:1978</a></td>
+    <td><code>jp78</code></td>
+   </tr>
+   <tr>
+    <td><code>jis83</code></td>
+    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第2次規格">JIS X 0208:1983</a></td>
+    <td><code>jp83</code></td>
+   </tr>
+   <tr>
+    <td><code>jis90</code></td>
+    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0208#第3次規格">JIS X 0208:1990</a></td>
+    <td><code>jp90</code></td>
+   </tr>
+   <tr>
+    <td><code>jis04</code></td>
+    <td><a href="http://ja.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td>
+    <td><code>jp04</code></td>
+   </tr>
+   <tr>
+    <td><code>simplified</code></td>
+    <td>なし。簡体字中国語の字形を使用</td>
+    <td><code>smpl</code></td>
+   </tr>
+   <tr>
+    <td><code>traditional</code></td>
+    <td>なし。繁体字中国語の字形を使用</td>
+    <td><code>trad</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;east-asian-width-values&gt;</code></dt>
+ <dd>これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。
+ <ul>
+  <li><code>proportional-width</code> は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の <code>pwid</code> の値に対応します。</li>
+  <li><code>full-width</code> は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の <code>fwid</code> に対応します。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_East_Asian_glyph_variants" name="Setting_East_Asian_glyph_variants">東アジアの字形の変化形を設定</h3>
+
+<p>この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは OpenType 機能に対応していない可能性があります。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+&lt;thead&gt;&lt;/thead&gt;
+&lt;tbody style="border:0;"&gt;
+  &lt;tr&gt;
+    &lt;th&gt;normal/jis78:&lt;/th&gt;
+    &lt;td&gt;麹町&lt;/td&gt;
+    &lt;td class="jis78"&gt;麹町&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;normal/ruby:&lt;/th&gt;
+    &lt;td&gt;しんかんせん&lt;/td&gt;
+    &lt;td class="ruby"&gt;しんかんせん&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;normal/traditional:&lt;/th&gt;
+    &lt;td&gt;大学&lt;/td&gt;
+    &lt;td class="traditional"&gt;大学&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">td{
+  font-family:"Yu Gothic";
+  font-size:20px;
+}
+th{
+  color:grey;
+  padding-right:10px;
+}
+
+.ruby {
+  font-variant-east-asian: ruby;
+}
+
+.jis78 {
+  font-variant-east-asian: jis78;
+}
+
+.traditional{
+  font-variant-east-asian: traditional;
+}
+
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}</p>
+
+<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 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-variant-east-asian")}}</p>
diff --git a/files/ja/web/css/font-variant-ligatures/index.html b/files/ja/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..7fd0d237ff
--- /dev/null
+++ b/files/ja/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,217 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>font-variant-ligatures</code></strong> は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。</span>これにより、結果のテキストでより調和した形を利用することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+
+/* グローバル値 */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<p><code>font-variant-ligatures</code> プロパティは、以下の一覧のキーワード値のうち一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。</dd>
+ <dt><code>none</code></dt>
+ <dd>一般的なものであっても、すべての合字や文脈書式を無効にします。</dd>
+ <dt><em>&lt;common-lig-values&gt;</em></dt>
+ <dd><code>fi</code>, <code>ffi</code>, <code>th</code> などの、よくある合字を制御します。 OpenType の値 <code>liga</code> および <code>clig</code> に対応します。二つの値が指定できます。
+ <ul>
+  <li><code>common-ligatures</code>: これらの合字を有効にします。なお、キーワード <code>normal</code> はこれらの合字を有効にします。</li>
+  <li><code>no-common-ligatures</code>: これらの合字を無効にします。</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
+ <dd>フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は <code>dlig</code> です。二つの値が指定できます。
+ <ul>
+  <li><code>discretionary-ligatures</code>: これらの合字を有効にします。</li>
+  <li><code>no-discretionary-ligatures</code>: これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は <code>hlig</code> です。二つの値が指定できます。
+ <ul>
+  <li><code>historical-ligatures</code>: これらの合字を有効にします。</li>
+  <li><code>no-historical-ligatures</code> これらの合字を無効にします。なお、キーワード <code>normal</code> はふつう、これらの合字を無効にします。</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は <code>calt</code> です。二つの値が指定できます。
+ <ul>
+  <li><code>contextual</code>: 文脈的な変更を使用するよう指定します。なお、キーワード <code>normal</code> はこれらの合字も有効にします。</li>
+  <li><code>no-contextual</code>: 使用を避けます。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_font_ligatures_and_contextual_forms" name="Setting_font_ligatures_and_contextual_forms">フォントの合字と文脈に合わせた字形の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
+&lt;p class="normal"&gt;
+  normal&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="none"&gt;
+  none&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="common-ligatures"&gt;
+  common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-common-ligatures"&gt;
+  no-common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="discretionary-ligatures"&gt;
+  discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-discretionary-ligatures"&gt;
+  no-discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="historical-ligatures"&gt;
+  historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-historical-ligatures"&gt;
+  no-historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-contextual"&gt;
+  no-contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}</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 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-variant-ligatures")}}</p>
diff --git a/files/ja/web/css/font-variant-numeric/index.html b/files/ja/web/css/font-variant-numeric/index.html
new file mode 100644
index 0000000000..859bb006ea
--- /dev/null
+++ b/files/ja/web/css/font-variant-numeric/index.html
@@ -0,0 +1,137 @@
+---
+title: font-variant-numeric
+slug: Web/CSS/font-variant-numeric
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - リファレンス
+translation_of: Web/CSS/font-variant-numeric
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>font-variant-numeric</code></strong> プロパティは、数字、分数、序数記号の表記を制御するために使用します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: oldstyle-nums;       /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: proportional-nums;   /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: tabular-nums;        /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: diagonal-fractions;  /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: stacked-fractions;   /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* グローバル値 */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+</pre>
+
+<p>このプロパティは二つの形のうちの一つを取ります。</p>
+
+<ul>
+ <li>キーワード値 <code>normal</code></li>
+ <li>以下の一覧にあるその他の値を空白区切り、自由な順番で</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードは、別形式の表記の使用を無効にします。</dd>
+ <dt><code>ordinal</code></dt>
+ <dd>このキーワードは、序数記号に対して特別な表記を使用します。英語では 1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup>, 4<sup>th</sup>、イタリア語では 1<sup>a</sup> です。 OpenType の <code>ordn</code> の値に対応します。</dd>
+ <dt><code>slashed-zero</code></dt>
+ <dd>このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の <code>zero</code> の値に対応します。</dd>
+ <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
+ <dd>これらの値は、数字の形状を制御します。二つの値が利用できます。
+ <ul>
+  <li><code>lining-nums</code> は、全てをベースライン上に並べる表記を有効にします。 OpenType の <code>lnum</code> の値に対応します。</li>
+  <li><code>oldstyle-nums</code> は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の <code>onum</code> の値に対応します。</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
+ <dd>これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。
+ <ul>
+  <li><code>proportional-nums</code> は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の <code>pnum</code> の値に対応します。</li>
+  <li><code>tabular-nums</code> は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の <code>tnum</code> の値に対応します。</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
+ <dd>これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。
+ <ul>
+  <li><code>diagonal-fractions</code> は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の <code>frac</code> の値に対応します。</li>
+  <li><code>stacked-fractions</code> は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の <code>afrc</code> の値に対応します。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="ordinal"&gt;1st, 2nd, 3rd, 4th, 5th&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/*
+This example uses the Source Sans Pro OpenType font, developed by Adobe
+and used here under the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<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 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.font-variant-numeric")}}</p>
diff --git a/files/ja/web/css/font-variant-position/index.html b/files/ja/web/css/font-variant-position/index.html
new file mode 100644
index 0000000000..8815fb355a
--- /dev/null
+++ b/files/ja/web/css/font-variant-position/index.html
@@ -0,0 +1,108 @@
+---
+title: font-variant-position
+slug: Web/CSS/font-variant-position
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/font-variant-position
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>font-variant-position</code></strong> プロパティは、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。</p>
+
+<p>文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* グローバル値 */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+</pre>
+
+<p>これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。</p>
+
+<p>これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>font-variant-position</code> プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>上付き文字および下付き文字の字体の代替を無効にします。</dd>
+ <dt><code>sub</code></dt>
+ <dd>下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。</dd>
+ <dt><code>super</code></dt>
+ <dd>上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p class="normal"&gt;Normal!&lt;/p&gt;
+&lt;p class="super"&gt;Super!&lt;/p&gt;
+&lt;p class="sub"&gt;Sub!&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  display: inline;
+}
+
+.normal {
+  font-variant-position: normal;
+}
+
+.super {
+  font-variant-position: super;
+}
+
+.sub {
+  font-variant-position: sub;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples') }}</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 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-variant-position")}}</p>
diff --git a/files/ja/web/css/font-variant/index.html b/files/ja/web/css/font-variant/index.html
new file mode 100644
index 0000000000..e266550061
--- /dev/null
+++ b/files/ja/web/css/font-variant/index.html
@@ -0,0 +1,139 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/font-variant
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-variant</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、フォントのすべての変化形を設定することができます。</p>
+
+<p>CSS Level 2 (Revision 1) における <code>font-variant</code> の値 (つまり、 <code>normal</code> や <code>small-caps</code>) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* グローバル値 */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 <code>font-variant</code> の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。</dd>
+ <dt><code>none</code></dt>
+ <dd>{{cssxref("font-variant-ligatures")}} を <code>none</code> に、その他の個別指定プロパティを <code>normal</code> に、それぞれの初期値を設定します。</dd>
+ <dt><code>&lt;common-lig-values&gt;</code>, <code>&lt;discretionary-lig-values&gt;</code>, <code>&lt;historical-lig-values&gt;</code>, <code>&lt;contextual-alt-values&gt;</code></dt>
+ <dd>個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>common-ligatures</code>, <code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>, <code>contextual</code>, <code>no-contextual</code> です。</dd>
+ <dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt>
+ <dd>個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。</dd>
+ <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
+ <dd>個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。</dd>
+ <dt><code>&lt;numeric-figure-values&gt;</code>, <code>&lt;numeric-spacing-values&gt;</code>, <code>&lt;numeric-fraction-values&gt;</code>, <code>ordinal</code>, <code>slashed-zero</code></dt>
+ <dd>個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>lining-nums</code>, <code>oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, <code>slashed-zero</code> です。</dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code>, <code>&lt;east-asian-width-values&gt;</code>, <code>ruby</code></dt>
+ <dd>個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 <code>jis78</code>, <code>jis83</code>, <code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code> です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_the_small-caps_font_variant" name="Setting_the_small-caps_font_variant">スモールキャップのフォント変化形の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="normal"&gt;Firefox rocks!&lt;/p&gt;
+&lt;p class="small"&gt;Firefox rocks!&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}</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 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>新しい <code>font-variant-*</code> プロパティの一括指定になった。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.font-variant")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/font-variation-settings/index.html b/files/ja/web/css/font-variation-settings/index.html
new file mode 100644
index 0000000000..3ec74b86e3
--- /dev/null
+++ b/files/ja/web/css/font-variation-settings/index.html
@@ -0,0 +1,155 @@
+---
+title: font-variation-settings
+slug: Web/CSS/font-variation-settings
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-variation-settings</code></strong> は CSS のプロパティで、変更したい特性の４文字の軸名と特性の値を指定することにより、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォント</a>に対する低水準の制御を提供します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* 可変フォントの軸名の値を設定 */
+font-variation-settings: "XHGT" 0.7;
+
+/* グローバル値 */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>このプロパティは1つまたは2つの形を取ることができます。</p>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>テキストは既定の設定を使用してレイアウトされます。</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("&lt;string&gt;")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。 <code>&lt;string&gt;</code> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコード点の範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、 <code>&lt;number&gt;</code> は小数や負の数を取ることもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。</p>
+
+<p><code>font-variation-settings</code> を使用して設定されたフォント特性は、常に <code>font-weight</code> などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 <code>@font-face</code> 宣言が <code>font-weight</code> の範囲を含んでいる場合のみこれが成り立ちます。</p>
+
+<h3 id="Registered_and_custom_axes" name="Registered_and_custom_axes">登録済みの軸と独自の軸</h3>
+
+<p>可変フォントの軸には、<strong>登録済み</strong>の軸と<strong>独自</strong>の軸があります。</p>
+
+<p>登録済みの軸はよく現れます。 — 仕様書の作者が標準化する価値があると感じるほどよく使われます。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。</p>
+
+<p>こちらは関連する CSS プロパティに対応する登録済みの軸です。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">軸のタグ</th>
+   <th scope="col">CSS プロパティ</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>"wght"</td>
+   <td>{{cssxref("font-weight")}}</td>
+  </tr>
+  <tr>
+   <td>"wdth"</td>
+   <td>{{cssxref("font-stretch")}}</td>
+  </tr>
+  <tr>
+   <td>"slnt" (slant)</td>
+   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+  </tr>
+  <tr>
+   <td>"ital"</td>
+   <td>{{cssxref("font-style")}}: <code>italic</code></td>
+  </tr>
+  <tr>
+   <td>"opsz"</td>
+   <td>
+    <p>{{cssxref("font-optical-sizing")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>独自の軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得、例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も4文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。</p>
+
+<div class="note">
+<p><strong>注</strong>: 登録済みの軸のタグは小文字のタグを使用するのに対し、d久慈の軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>登録済みの軸を記述した以下のデモを見てください。その他の可変フォントの例は、 <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a>, <a class="external external-icon" href="https://v-fonts.com/" rel="noopener">v-fonts.com</a>, and <a class="external external-icon" href="https://www.axis-praxis.org/" rel="noopener">axis-praxis.org</a> などで見られます。</p>
+
+<div class="warning">
+<p><strong>警告</strong>: オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。</p>
+</div>
+
+<h3 id="Weight_wght">Weight (wght)</h3>
+
+<p>以下のデモの CSS は、フォントの重みの値を編集することができます。</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="Slant_slnt">Slant (slnt)</h3>
+
+<p>以下のデモの CSS は、フォントの傾きの値を編集することができます。</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<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('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.font-variation-settings")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">可変フォントガイド</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
+</ul>
diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html
new file mode 100644
index 0000000000..b7796971b0
--- /dev/null
+++ b/files/ja/web/css/font-weight/index.html
@@ -0,0 +1,396 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-weight</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+font-weight: normal;
+font-weight: bold;
+
+/* 親要素に対して相対的なキーワード値 */
+font-weight: lighter;
+font-weight: bolder;
+
+/* 数値のキーワード値 */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;// normal
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;// bold
+font-weight: 800;
+font-weight: 900;
+
+/* グローバル値 */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<p><code>font-weight</code> プロパティは、以下の一覧から選択した単一のキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常のフォントの太さです。 <code>400</code> と同じです。</dd>
+ <dt><code>bold</code></dt>
+ <dd>太字のフォントの太さです。 <code>700</code> と同じです。</dd>
+ <dt><code>lighter</code></dt>
+ <dd>フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd>
+ <dt><code>bolder</code></dt>
+ <dd>フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>にあるように、共通の太さ名に対応しています。</dd>
+</dl>
+
+<p><code>font-weight</code> 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。</p>
+
+<p>CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。</p>
+
+<h3 id="Fallback_weights" name="Fallback_weights">太さのフォールバック</h3>
+
+<p>ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。</p>
+
+<ul>
+ <li>対象となる太さがが <code>400</code>～<code>500</code> で指定された場合
+
+  <ul>
+   <li>利用できる太さを、対象値から <code>500</code> までの間で昇順で探します。</li>
+   <li>一致するものがなければ、対象値未満の利用できる太さを降順で探します。</li>
+   <li>一致するものがなければ、 <code>500</code> より大きい太さを昇順で探します。</li>
+  </ul>
+ </li>
+ <li>太さが <code>400</code> 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。</li>
+ <li>太さが <code>500</code> より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。</li>
+</ul>
+
+<h3 id="Meaning_of_relative_weights" name="Meaning_of_relative_weights">相対的な太さの意味</h3>
+
+<p>以下の表は、 <code>lighter</code> または <code>bolder</code> を指定する場合に要素の絶対的な太さを算出する方法を示しています。</p>
+
+<p>なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>継承値</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">一般的な太さ名との対応</h3>
+
+<p><code>100</code> から <code>900</code> の数値は、おおよそ以下の太さ名に対応します (<a href="https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass">OpenType 仕様書</a>を参照してください)。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">値</th>
+   <th scope="col">太さ名</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>Normal (Regular)</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>Black (Heavy)</td>
+  </tr>
+  <tr>
+   <td>950</td>
+   <td><a href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks">Extra Black (Ultra Black)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>
+
+<p>多くのフォントは、<a href="#Common_weight_name_mapping">一般的な太さ名との対応</a>の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。</p>
+
+<p>TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。</p>
+
+<p>以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。</p>
+
+<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html notranslate">&lt;header&gt;
+    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
+    &lt;label for="weight"&gt;Weight&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_font_weights">Setting font weights</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css notranslate">/* 段落のテキストを太字にします */
+p {
+  font-weight: bold;
+}
+
+/* div 要素のテキストの太さを normal より 2 段階太くしますが、
+   標準的な bold より細くします */
+div {
+ font-weight: 600;
+}
+
+/* span 要素のテキストの太さを親要素より
+   1 段階細くします */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_font_weights","400","300")}}</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('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td><code>font-weight</code> で 1～1000 の任意の数を受け付けるよう定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font-weight")}}</p>
diff --git a/files/ja/web/css/font/index.html b/files/ja/web/css/font/index.html
new file mode 100644
index 0000000000..c4c5020373
--- /dev/null
+++ b/files/ja/web/css/font/index.html
@@ -0,0 +1,376 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 <code>font</code> によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>font</code> プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。</p>
+
+<p><code>font</code> をシステムキーワードとして指定する場合は、 <code><a href="#caption">caption</a></code>, <code><a href="#icon">icon</a></code>, <code><a href="#menu">menu</a></code>, <code><a href="#message-box">message-box</a></code>, <code><a href="#small-caption">small-caption</a></code>, <code><a href="#status-bar">status-bar</a></code> のうちの一つでなければなりません。</p>
+
+<p><code>font</code> を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。</p>
+
+<ul>
+ <li>次の値を含めなければなりません。
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>次の値は任意で含めることができます。
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code> は <code>font-size</code> よりも前になければなりません</li>
+ <li><code>font-variant</code> は CSS 2.1 で定義された値、つまり <code>normal</code> 及び <code>small-caps</code> のみ指定できます</li>
+ <li><code>font-stretch</code> は単一のキーワード値のみを指定することができます</li>
+ <li><code>line-height</code> は <code>font-size</code> の直後に、 "/" で区切って、 "<code>16px/3</code>" のように指定します</li>
+ <li><code>font-family</code> は指定される最後の値である必要があります。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="&lt;'font-style'>"><code>&lt;'font-style'&gt;</code></dt>
+ <dd>{{Cssxref("font-style")}} プロパティを参照。</dd>
+ <dt id="&lt;'font-variant'>"><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>{{Cssxref("font-variant")}} プロパティを参照。</dd>
+ <dt id="&lt;'font-weight'>"><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>{{Cssxref("font-weight")}} プロパティを参照。</dd>
+ <dt id="&lt;'font-stretch'>"><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>{{Cssxref("font-stretch")}} プロパティを参照。</dd>
+ <dt id="&lt;'font-size'>"><code>&lt;'font-size'&gt;</code></dt>
+ <dd>{{Cssxref("font-size")}} プロパティを参照。</dd>
+ <dt id="&lt;'line-height'>"><code>&lt;'line-height'&gt;</code></dt>
+ <dd>{{cssxref("line-height")}} プロパティを参照。</dd>
+ <dt id="&lt;'font-family'>"><code>&lt;'font-family'&gt;</code></dt>
+ <dd>{{Cssxref("font-family")}} プロパティを参照。</dd>
+</dl>
+
+<h4 id="システムフォント値">システムフォント値</h4>
+
+<dl>
+ <dt id="caption"><code>caption</code></dt>
+ <dd>キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。</dd>
+ <dt id="icon"><code>icon</code></dt>
+ <dd>ラベルアイコンに使用されるシステムフォント。</dd>
+ <dt id="menu"><code>menu</code></dt>
+ <dd>メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。</dd>
+ <dt id="message-box"><code>message-box</code></dt>
+ <dd>ダイアログボックスに使われるシステムフォント。</dd>
+ <dt id="small-caption"><code>small-caption</code></dt>
+ <dd>小さいコントロールのラベルに使われるシステムフォント。</dd>
+ <dt id="status-bar"><code>status-bar</code></dt>
+ <dd>ウィンドウのステータスバーに使われるシステムフォント。</dd>
+ <dt>接頭辞付きのシステムフォントキーワード</dt>
+ <dd>ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code> を実装しています。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_font_properties" name="Setting_font_properties">フォントのプロパティの設定</h3>
+
+<pre class="brush: css notranslate">/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
+   フォントファミリは sans-serif に設定する */
+p { font: 12px/14px sans-serif }
+
+/* フォントの大きさを親要素の 80% または既定値
+   (親要素がない場合) に設定する。
+   フォントファミリは sans-serif に設定する */
+p { font: 80% sans-serif }
+
+/* フォントの太さを太字に、
+   フォントスタイルを斜体に、
+   フォントの大きさを large に、
+   フォントファミリーは serif に設定する */
+p { font: bold italic large serif }
+
+/* ウィンドウのステータスバーと同じフォントに設定する */
+p { font: status-bar }
+</pre>
+
+<h3 id="live_sample" name="live_sample">ライブサンプル</h3>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+    Change the radio buttons below to see the generated shorthand and it's effect.
+&lt;/p&gt;
+&lt;form action="createShortHand()"&gt;
+    &lt;div class="cf"&gt;
+        &lt;div class="setPropCont"&gt;
+            font-style&lt;br/&gt;
+            &lt;input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"&gt; &lt;label for="font-style-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"&gt; &lt;label for="font-style-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"&gt; &lt;label for="font-style-italic"&gt;italic&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"&gt; &lt;label for="font-style-oblique"&gt;oblique&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-variant&lt;br&gt;
+            &lt;input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"&gt; &lt;label for="font-variant-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"&gt; &lt;label for="font-variant-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"&gt; &lt;label for="font-variant-small-caps"&gt;small-caps&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-weight&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"&gt; &lt;label for="font-weight-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"&gt; &lt;label for="font-weight-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"&gt; &lt;label for="font-weight-bold"&gt;bold&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-size&lt;br/&gt;
+            &lt;input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"&gt; &lt;label for="font-size-12px"&gt;12px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"&gt; &lt;label for="font-size-16px"&gt;16px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"&gt; &lt;label for="font-size-24px"&gt;24px&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            line-height&lt;br/&gt;
+            &lt;input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"&gt; &lt;label for="line-height-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"&gt; &lt;label for="line-height-1.2"&gt;1.2&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"&gt; &lt;label for="line-height-3"&gt;3&lt;/label&gt;
+        &lt;/div&gt;&lt;br/&gt;
+
+        &lt;div class="setPropCont fontfamily"&gt;
+            font-family&lt;br/&gt;
+            &lt;input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"&gt; &lt;label for="font-family-courier"&gt;courier&lt;/label&gt;&lt;br/&gt;            &lt;input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"&gt; &lt;label for="font-family-serif"&gt;serif&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"&gt; &lt;label for="font-family-sans-serif"&gt;sans-serif&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"&gt; &lt;label for="font-family-arial"&gt;Arial&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"&gt; &lt;label for="font-family-monospace"&gt;monospace&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"&gt; &lt;label for="font-family-cursive"&gt;cursive&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"&gt; &lt;label for="font-family-fantasy"&gt;fantasy&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"&gt; &lt;label for="font-family-system-ui"&gt;system-ui&lt;/label&gt;&lt;br /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="cf propInputs"&gt;
+        &lt;div class="propInputCont tar"&gt;
+            font :
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_style"&gt;&lt;br/&gt;
+            font-style &lt;br/&gt;
+            optional
+
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_variant"&gt; &lt;br/&gt;
+            font-variant &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_weight"&gt; &lt;br/&gt;
+            font-weight &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_size"&gt; &lt;br/&gt;
+            font-size &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_line_height"&gt; &lt;br/&gt;
+            line-height &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_family"&gt; &lt;br/&gt;
+            font-family &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div class="fontShortHand"&gt;
+    This is some sample text.
+&lt;/div&gt;
+&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body, input {
+  font: 14px arial;
+  overflow: hidden;
+}
+
+.propInputCont {
+  float: left;
+  text-align: center;
+  margin-right: 5px;
+  width: 80px;
+}
+
+.setPropCont {
+  float: left;
+  margin-right: 5px;
+  width: 120px;
+}
+
+.propInputs, .setPropCont {
+  margin-bottom: 1em;
+}
+
+.curCss {
+  border: none;
+  border-bottom: 1px solid black;
+  text-align: center;
+  width: 80px;
+}
+
+.mandatory {
+  border-bottom-color: red;
+}
+
+.cf:before,
+.cf:after {
+  content: " ";
+  display: table;
+}
+
+.cf:after {
+  clear: both;
+}
+
+.tar {
+  width: 40px;
+  text-align: right;
+}
+.fontfamily {
+  display: inline-block;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"),
+    shortText = "",
+    getCheckedValue,
+    setCss,
+    getProperties,
+    injectCss;
+
+getProperties = function () {
+  shortText =
+      getCheckedValue("font_style") + " " +
+      getCheckedValue("font_variant") + " " +
+      getCheckedValue("font_weight") + " " +
+      getCheckedValue("font_size") +
+      getCheckedValue("line_height") + " " +
+      getCheckedValue("font_family");
+
+  return shortText;
+}
+
+getCheckedValue = function(radio_name) {
+  oRadio = document.forms[0].elements[radio_name];
+  for (var i = 0; i &lt; oRadio.length; i++) {
+    if(oRadio[i].checked) {
+      var propInput = "input_" + radio_name,
+          curElemName = "input_" + radio_name,
+          curElem = document.getElementById(curElemName);
+      curElem.value = oRadio[i].value;
+
+      return oRadio[i].value;
+    }
+  }
+}
+
+setCss = function () {
+  getProperties();
+  injectCss(shortText);
+}
+
+injectCss = function(cssFragment) {
+  old = document.body.getElementsByTagName("style");
+  if (old.length &gt; 1) {
+    old[1].parentElement.removeChild(old[1]);
+  }
+  css = document.createElement("style");
+  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
+  document.body.appendChild(css);
+}
+
+setCss();</pre>
+</div>
+
+<p>{{ EmbedLiveSample('live_sample','100%', '440px')}}</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 Fonts', '#font-prop', 'font')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td><code>font-stretch</code> の値の対応を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>キーワードへのサポートが追加されました</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', 'font')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.font")}}</p>
diff --git a/files/ja/web/css/frequency-percentage/index.html b/files/ja/web/css/frequency-percentage/index.html
new file mode 100644
index 0000000000..a76e4dd30e
--- /dev/null
+++ b/files/ja/web/css/frequency-percentage/index.html
@@ -0,0 +1,95 @@
+---
+title: <frequency-percentage>
+slug: Web/CSS/frequency-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - frequency-percentage
+  - units
+  - values
+translation_of: Web/CSS/frequency-percentage
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p><strong><code>&lt;frequency-percentage&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;frequency-percentage&gt;</code> の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<h3 id="Use_in_calc" name="Use_in_calc">calc() での使用</h3>
+
+<p>許可されている型として <code>&lt;frequency-percentage&gt;</code> が指定されているところでは、これはパーセント値が周期として解決されるので、 <code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> の式で利用することができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_percentage_values" name="Valid_percentage_values">有効なパーセント値</h3>
+
+<pre class="notranslate">90% 正のパーセント値
++90% 先頭に + が付いた正のパーセント値
+-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない</pre>
+
+<h3 id="Invalid_percentage_values" name="Invalid_percentage_values">無効なパーセント値</h3>
+
+<pre class="example-bad notranslate">90 % 数値と単位の間に空白を入れてはいけない。</pre>
+
+<h3 id="Valid_frequency_values" name="Valid_frequency_values">有効な周波数値</h3>
+
+<pre class="notranslate">12Hz     正の整数
+4.3Hz    整数以外
+14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
++0Hz     先頭に + が付いた単位付きのゼロ
+-0kHz    先頭に - が付いた単位付きのゼロ</pre>
+
+<h3 id="Invalid_frequency_values" name="Invalid_frequency_values">無効な周波数値</h3>
+
+<pre class="example-bad notranslate">12.0     これは単位がないため &lt;number&gt; であり &lt;frequency&gt; ではない。
+7 Hz     数値と単位の間に空白を入れてはいけない。
+0        単位のないゼロは &lt;length&gt; では許可されることがあるが、 &lt;frequency&gt; では無効。</pre>
+
+<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('CSS4 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;frequency-percentage&gt;</code> を定義。 <code>calc()</code> を追加</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.frequency-percentage")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS データ型</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li>
+ <li>関連する CSS データ型:
+  <ul>
+   <li>{{cssxref("frequency", "&lt;frequency&gt;")}}</li>
+   <li>{{cssxref("percentage", "&lt;percentage&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ja/web/css/frequency/index.html b/files/ja/web/css/frequency/index.html
new file mode 100644
index 0000000000..956a7bab50
--- /dev/null
+++ b/files/ja/web/css/frequency/index.html
@@ -0,0 +1,76 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+tags:
+  - CSS
+  - CSS データ型
+  - CSS 値と単位
+  - Layout
+  - Reference
+translation_of: Web/CSS/frequency
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>&lt;frequency&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;frequency&gt;</code> データ型は、 {{cssxref("&lt;number&gt;")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。</p>
+
+<h3 id="Units" name="Units">単位</h3>
+
+<dl>
+ <dt><code><a id="Hz" name="Hz">Hz</a></code></dt>
+ <dd>ヘルツ単位の周波数を表します。例： <code>0Hz</code>、 <code>1500Hz</code>、 <code>10000Hz</code></dd>
+ <dt><code><a id="kHz" name="kHz">kHz</a></code></dt>
+ <dd>キロヘルツ単位の周波数を表します。例： <code>0kHz</code>、 <code>1.5kHz</code>、 <code>10kHz</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>0</code> の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 <code>0</code> は無効で <code>0Hz</code> や <code>0kHz</code> を表すものではありません。単位の大文字と小文字は区別されませんが、<a href="http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8D%98%E4%BD%8D%E7%B3%BB" title="http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8D%98%E4%BD%8D%E7%B3%BB">国際単位系</a>の表記に従って、 <code>Hz</code> や <code>kHz</code> の H を大文字にするのが良い習慣です。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_frequency_values" name="Valid_frequency_values">有効な周波数の値</h3>
+
+<pre>12Hz     正の整数
+4.3Hz    非整数
+14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
++0Hz     先行する + のあるゼロと単位
+-0kHz    先行する - のあるゼロと単位</pre>
+
+<h3 id="Invalid_frequency_values" name="Invalid_frequency_values">無効な周波数の値</h3>
+
+<pre class="example-bad">12.0     これは {{cssxref("&lt;number&gt;")}} で、&lt;frequency&gt; ではありません。単位が必須です。
+7 Hz     {{cssxref("&lt;number&gt;")}} と単位の間に空白を置いてはいけません
+0        単位のないゼロは {{cssxref("&lt;length&gt;")}} では利用できますが、 &lt;frequency&gt; では無効です。</pre>
+
+<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 Values', '#frequency', '&lt;frequency&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>メモ:</strong> このデータ型は初め、 <a href="https://www.w3.org/TR/CSS2/" title="http://www.w3.org/TR/CSS2/">CSS Level 2</a> の現在は廃止された <a href="/ja/docs/Web/CSS/@media/aural" title="aural">aural</a> <a href="/ja/docs/Web/CSS/@media#Media_types">メディアタイプ</a>で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で <code>&lt;frequency&gt;</code> データ型が再導入されました。</p>
+</div>
+
+<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.types.frequency")}}</p>
diff --git a/files/ja/web/css/gap/index.html b/files/ja/web/css/gap/index.html
new file mode 100644
index 0000000000..2d2e1d70d9
--- /dev/null
+++ b/files/ja/web/css/gap/index.html
@@ -0,0 +1,223 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックスレイアウト
+  - CSS プロパティ
+  - CSS ボックス配置
+  - CSS 段組みレイアウト
+  - Reference
+  - gap
+  - リファレンス
+translation_of: Web/CSS/gap
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>では、当初は <code>grid-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>gap</code> に置き換えられました。しかし、グリッドで <code>grid-gap</code> を実装していて <code>gap</code> を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css; no-line-numbers notranslate">/* 単一の &lt;length&gt; 値 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 単一の &lt;percentage&gt; 値 */
+gap: 16%;
+gap: 100%;
+
+/* 二つの &lt;length&gt; 値 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 一つ又は二つの &lt;percentage&gt; 値 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 値 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* グローバル値 */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p>このプロパティは <code>&lt;'row-gap'&gt;</code> の値と、任意で <code>&lt;'column-gap'&gt;</code> の値を続けて指定します。 <code>&lt;'column-gap'&gt;</code> が省略された場合、 <code>&lt;'row-gap'&gt;</code> と同じ値が設定されます。</p>
+
+<p><code>&lt;'row-gap'&gt;</code> 及び <code>&lt;'column-gap'&gt;</code> はそれぞれ、 <code>&lt;length&gt;</code> 又は <code>&lt;percentage&gt;</code> で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>グリッド線を隔てる溝の幅です。</dd>
+ <dt>{{CSSxRef("&lt;percentage&gt;")}}</dt>
+ <dd>要素の寸法に対する、グリッド線を隔てる溝の幅です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Flex_layout", "auto", "120px")}}</p>
+
+<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Grid_layout", "auto", "120px")}}</p>
+
+<h3 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p class="content-box"&gt;
+  This is some multi-column text with a 40px column
+  gap created with the CSS &lt;code&gt;gap&lt;/code&gt; property.
+  Don't you think that's fun and exciting? I sure do!
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</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 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="Support_in_Multi-column_layout" name="Support_in_Multi-column_layout">段組みレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
+</ul>
diff --git a/files/ja/web/css/general_sibling_combinator/index.html b/files/ja/web/css/general_sibling_combinator/index.html
new file mode 100644
index 0000000000..bd738fbc01
--- /dev/null
+++ b/files/ja/web/css/general_sibling_combinator/index.html
@@ -0,0 +1,86 @@
+---
+title: 一般兄弟結合子
+slug: Web/CSS/General_sibling_combinator
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - セレクター
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><strong>一般兄弟結合子</strong> (general sibling combinator, <code>~</code>) は2個のセレクターを結びつけます。右側のセレクタで選択される要素のうち、次の条件をともにみたすものを選択します。</p>
+
+<p>まず、右側のセレクタで選択される要素が、左側のセレクタで選択される要素より後に現れることです。（直後である必要はありません）</p>
+
+<p>もうひとつは、これらの要素が同じ親要素（{{Glossary("element", "要素")}}）をもつことです。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 任意の画像の兄弟で、
+   その画像より後方にある段落 */
+img ~ p {
+  color: red;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">先行する要素 ~ 選択される要素 { <em>スタイルプロパティ</em> }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p ~ span {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span&gt;This is not red.&lt;/span&gt;
+&lt;p&gt;Here is a paragraph.&lt;/p&gt;
+&lt;code&gt;Here is some code.&lt;/code&gt;
+&lt;span&gt;And here is a red span!&lt;/span&gt;
+&lt;code&gt;More code...&lt;/code&gt;
+&lt;span&gt;And this is a red span!&lt;/span&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 120)}}</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("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>名前を"subsequent-sibling combinator"に変更。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.general_sibling")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></li>
+</ul>
diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html
new file mode 100644
index 0000000000..67259799d1
--- /dev/null
+++ b/files/ja/web/css/gradient/index.html
@@ -0,0 +1,186 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Data Type
+  - Graphics
+  - Layout
+  - Reference
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;gradient&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("&lt;image&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;gradient&gt;</code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p>
+
+<div id="linear-gradient">
+<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="radial-gradient">
+<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="repeating-gradient">
+<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="conic-gradient">
+<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3>
+
+<p>単純な線形グラデーションです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="linear-gradient"&gt;Linear gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}</pre>
+
+<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p>
+
+<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3>
+
+<p>単純な放射グラデーションです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;Radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p>
+
+<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3>
+
+<p>単純な線形および放射の反復グラデーションの例です。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="linear-repeat"&gt;Repeating linear gradient&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="radial-repeat"&gt;Repeating radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}</pre>
+
+<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p>
+
+<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3>
+
+<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</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('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>conic-gradient を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>グラデーション関数: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
+</ul>
diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html
new file mode 100644
index 0000000000..9a7579c14b
--- /dev/null
+++ b/files/ja/web/css/grid-column-start/index.html
@@ -0,0 +1,240 @@
+---
+title: grid-column-start
+slug: Web/CSS/grid-column-start
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/grid-column-start
+---
+<p><span class="seoSummary"><strong><code>grid-column-start</code></strong> は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムのの開始位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}の行の開始の端を指定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslat notranslate">/* キーワード値 */
+grid-column-start: auto;
+
+/* &lt;custom-ident&gt; 値 */
+grid-column-start: somegridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; 値 */
+grid-column-start: 2;
+grid-column-start: somegridarea 4;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; 値 */
+grid-column-start: span 3;
+grid-column-start: span somegridarea;
+grid-column-start: span somegridarea 5;
+
+/* グローバル値 */
+grid-column-start: inherit;
+grid-column-start: initial;
+grid-column-start: unset;
+</pre>
+
+<p>このプロパティは単一の <code>&lt;grid-line&gt;</code> 値で指定します。 <code>&lt;grid-line&gt;</code> 値は次のように指定します。</p>
+
+<ul>
+ <li><code>auto</code> キーワード</li>
+ <li><code>&lt;custom-ident&gt;</code> 値</li>
+ <li><code>&lt;integer&gt;</code> 値</li>
+ <li><code>&lt;custom-ident&gt;</code> および <code>&lt;integer&gt;</code> を空白で区切ったもの</li>
+ <li><code>span</code> キーワードと <code>&lt;custom-ident&gt;</code> または <code>&lt;integer&gt;</code> またはその両方。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd><code>&lt;custom-ident&gt;-start</code> という名前の付いた線がある場合、これはそのような線の最初がグリッアイテムの配置に関わります。
+ <p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-column-start: foo;</code> と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に <code>foo-start</code> という名前の線が明示的に存在しない限り)。</p>
+
+ <p>そうでなければ、これは <code>&lt;custom-ident&gt;</code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。
+ <p>名前が <code>&lt;custom-ident&gt;</code> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p>
+
+ <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。
+ <p>名前が <code>&lt;custom-ident&gt;</code> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p>
+
+ <p>the &lt;integer&gt; が省略された場合の既定値は <code>1</code> です。負の数や <code>0</code> は無効です。</p>
+
+ <p><code>&lt;custom-ident&gt;</code> は <code>span</code> の値を取ることができません。</p>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_column_start_for_a_grid_item" name="Setting_column_start_for_a_grid_item">グリッドアイテムの列の開始位置の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }}</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 Grid", "#propdef-grid-column-start", "grid-column-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.grid-column-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
+ <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよび進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html
new file mode 100644
index 0000000000..46ed1f1a47
--- /dev/null
+++ b/files/ja/web/css/grid-column/index.html
@@ -0,0 +1,191 @@
+---
+title: grid-column
+slug: Web/CSS/grid-column
+tags:
+  - CSS
+  - CSS グリッド
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/grid-column
+---
+<p><strong><code>grid-column</code></strong> は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>このプロパティは一つまたは二つの <code>&lt;grid-line&gt;</code> の値で指定します。</p>
+
+<p>二つの <code>&lt;grid-line&gt;</code> 値を指定する場合は、 "/" で区切ります。個別指定の <code>grid-column-start</code> はスラッシュの前に設定し、個別指定の <code>grid-column-end</code> はスラッシュの後に設定します。</p>
+
+<p>それぞれの <code>&lt;grid-line&gt;</code> の値は以下の何れかを指定できます。</p>
+
+<ul>
+ <li><code>auto</code> キーワード</li>
+ <li><code>&lt;custom-ident&gt;</code> 値</li>
+ <li><code>&lt;integer&gt;</code> 値</li>
+ <li><code>&lt;custom-ident&gt;</code> および <code>&lt;integer&gt;</code> を空白で区切ったもの</li>
+ <li><code>span</code> キーワードと <code>&lt;custom-ident&gt;</code> または <code>&lt;integer&gt;</code> またはその両方。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>'&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
+ <p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-column: foo;</code> と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に <code>foo-start</code>/<code>foo-end</code> という名前の線が明示的に存在しない限り)。</p>
+
+ <p>そうでなければ、これは <code>&lt;custom-ident&gt;</code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。
+ <p>名前が &lt;custom-ident&gt; として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p>
+
+ <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。
+ <p>名前が &lt;custom-ident&gt; として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p>
+
+ <p>the &lt;integer&gt; が省略された場合の既定値は <code>1</code> です。負の数や0は無効です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p>
+
+<h2 id="Internet_Explorer_issues" name="Internet_Explorer_issues">Internet Explorer での問題</h2>
+
+<p>IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に <code>-ms-</code>{{cssxref("grid-column")}} および <code>-ms-</code>{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 <a href="https://github.com/motine/css_grid_annotator">ソースリポジトリ</a></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 Grid", "#propdef-grid-column", "grid-column")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.grid-column")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
+ <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよび進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html
new file mode 100644
index 0000000000..c9267b6bc6
--- /dev/null
+++ b/files/ja/web/css/grid-row/index.html
@@ -0,0 +1,208 @@
+---
+title: grid-row
+slug: Web/CSS/grid-row
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - CSS グリッド
+  - CSS プロパティ
+  - Reference
+  - grid-row
+translation_of: Web/CSS/grid-row
+---
+<p><strong><code>grid-row</code></strong> は CSS のプロパティで、 {{cssxref("grid-row-start")}} および {{cssxref("grid-row-end")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティであり、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>二つの <code>&lt;grid-line&gt;</code> 値が指定された場合は、個別指定の <code>grid-column-start</code> はスラッシュの前に設定し、個別指定の <code>grid-column-end</code> はスラッシュの後に設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* &lt;custom-ident&gt; 値 */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; 値 */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; 値 */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* グローバル値 */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>'&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
+ <p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-row: foo;</code> と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に <code>foo-start</code>/<code>foo-end</code> という名前の線が明示的に存在しない限り)。</p>
+
+ <p>そうでなければ、これは <code>&lt;custom-ident&gt;</code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。
+ <p>名前が &lt;custom-ident&gt; として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p>
+
+ <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。
+ <p>名前が &lt;custom-ident&gt; として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p>
+
+ <p>the &lt;integer&gt; が省略された場合の既定値は <code>1</code> です。負の数や0は無効です。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[14,19]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "200px", "200px")}}</p>
+
+<h2 id="Internet_Explorer_issues" name="Internet_Explorer_issues">Internet Explorer での問題</h2>
+
+<p>IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に <code>-ms-</code>{{cssxref("grid-column")}} および <code>-ms-</code>{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 <a href="https://github.com/motine/css_grid_annotator">ソースリポジトリ</a></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 Grid", "#propdef-grid-row", "grid-row")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.grid-row")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
+ <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよび進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..8b0c14760e
--- /dev/null
+++ b/files/ja/web/css/grid-template-areas/index.html
@@ -0,0 +1,185 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/grid-template-areas
+---
+<p><strong><code>grid-template-areas</code></strong> CSS プロパティは、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの短縮プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} から参照できます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+grid-template-areas: none;
+
+/* &lt;string&gt; 値 */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* グローバル値 */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>グリッドコンテナーは名前付きのグリッド領域を定義しません。</dd>
+ <dt><code>{{cssxref("&lt;string&gt;")}}+</code></dt>
+ <dd>リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。</dd>
+
+<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Result" name="Result">描画結果</h3>
+
+<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></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 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関連</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">行ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド行を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">グリッドレイアウトの自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトと進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section></dl>
diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..6d3ec0ce95
--- /dev/null
+++ b/files/ja/web/css/grid-template-columns/index.html
@@ -0,0 +1,217 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/grid-template-columns
+---
+<p><strong><code>grid-template-columns</code></strong> は CSS のプロパティで、{{glossary("grid column", "グリッド列")}}のライン名とトラックのサイズ変更機能を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; 値 */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+grid-template-columns: subgrid;
+
+/* &lt;auto-track-list&gt; 値 */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* グローバル値 */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-columns")}} プロパティによって決定されます。</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>負の値ではない長さで、列の幅を指定します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "&lt;percentage&gt;")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を <code>auto</code> として扱う必要があります。<br>
+ トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd><code>fr</code> の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 <code>&lt;flex&gt;</code> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。
+ <p><code>minmax()</code> 表記の外に現れた場合は、最小値が自動として扱われます (つまり <code>minmax(auto, &lt;flex&gt;)</code>)。</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd><var>min</var> 以上、 <var>max</var> 以下の寸法の範囲を定義する関数表記法です。 <var>max</var> が <var>min</var> より小さい場合、 <var>max</var> は無視され、関数は <var>min</var> として扱われます。最大値として、 <code>&lt;flex&gt;</code> 値はトラックのフレックス係数を設定します。最小値としては無効です。</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>最大値であれば max-content と同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。</dd>
+ <dd>
+ <p class="note">注: トラックの寸法が <code>auto</code> の場合 (そして <code>auto</code> の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd><code>min(max-content, max(auto, <var>argument</var>))</code> の式を表し、 <code>auto</code> と同様に (すなわち <code>minmax(auto, max-content)</code> と) 計算されますが、トラックの寸法が <code>auto</code> の最小値よりも大きい場合は <var>argument</var> でクランプされるところが異なります。</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。</dd>
+ <dt><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">subgrid</a></dt>
+ <dd><code><dfn>subgrid</dfn></code> の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。</dd>
+</dl>
+
+<div class="blockIndicator warning">
+<p>サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_grid_column_sizes" name="Specifying_grid_column_sizes">グリッド列の寸法の指定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Specifying_grid_column_sizes", "100%", "20px")}}</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("CSS Grid 2", "#subgrids", "subgrid")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>subgrid を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">グリッドレイアウトの基本概念 - グリッドトラック</a></em></li>
+ <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html
new file mode 100644
index 0000000000..fee4ff7917
--- /dev/null
+++ b/files/ja/web/css/grid-template/index.html
@@ -0,0 +1,209 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/grid-template
+---
+<p><strong><code>grid-template</code></strong> CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための <a href="/ja/docs/Web/CSS/Shorthand_properties">短縮</a> プロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div>
+
+
+
+
+
+<p>作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns の値 */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column の値 */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* グローバル値 */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>3 個すべてのプロパティの値に <code>none</code> を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に <code>none</code> を設定します。</dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code></dt>
+ <dd>{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には <code>auto</code> が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は <code>none</code> が設定されます)。<br>
+
+ <p class="note">注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>注記:</strong> {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(<code>grid-template</code> とは対照的に、) <code>grid</code> を使用してください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8]">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Result" name="Result">描画結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</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 Grid", "#propdef-grid-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html
new file mode 100644
index 0000000000..50c4b368e6
--- /dev/null
+++ b/files/ja/web/css/grid/index.html
@@ -0,0 +1,199 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS グリッド
+  - CSS プロパティ
+  - Reference
+  - grid
+  - grid-auto-columns
+  - grid-auto-flow
+  - grid-auto-rows
+  - grid-template-areas
+  - grid-template-columns
+  - grid-template-rows
+translation_of: Web/CSS/grid
+---
+<p>CSS の <strong><code>grid</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 明示的なグリッドプロパティ、<em>または</em>暗黙のグリッドプロパティのみを単一の <code>grid</code> 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;'grid-template'&gt; 値 */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* グローバル値	 */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>{{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>{{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを <code>none</code> に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を <code>auto</code> に設定) することで列トラックの自動反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。
+ <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p>
+ </dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>{{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを <code>none</code> に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を <code>auto</code> に設定) することで行トラックの児童反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。
+ <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</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 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.grid")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/hanging-punctuation/index.html b/files/ja/web/css/hanging-punctuation/index.html
new file mode 100644
index 0000000000..2f1600dd2a
--- /dev/null
+++ b/files/ja/web/css/hanging-punctuation/index.html
@@ -0,0 +1,124 @@
+---
+title: hanging-punctuation
+slug: Web/CSS/hanging-punctuation
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - CSS テキスト
+  - CSS プロパティ
+  - Experimental
+  - Reference
+  - リファレンス
+translation_of: Web/CSS/hanging-punctuation
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>hanging-punctuation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。</span></p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* 2 つのキーワード */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* 3 つのキーワード */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* グローバル値 */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>hanging-punctuation</code> プロパティは 1 つ、2 つ、 3 つの値で指定することができます。</p>
+
+<ul>
+ <li><strong>値1つ</strong>の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。</li>
+ <li><strong>値2つ</strong>の構文は、次のうち 1 つを使用します。
+  <ul>
+   <li><code>first</code> と併せて、<code>last</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li>
+   <li><code>last</code> と併せて、<code>first</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li>
+  </ul>
+ </li>
+ <li><strong>値3つ</strong>の構文は、次のうち 1 つを使用します。
+  <ul>
+   <li><code>first</code>, <code>allow-end</code>, <code>last</code></li>
+   <li><code>first</code>, <code>force-end</code>, <code>last</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>文字のぶら下げを行いません。</dd>
+ <dt><code>first</code></dt>
+ <dd>要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。</dd>
+ <dt><code>last</code></dt>
+ <dd>要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。</dd>
+ <dt><code>force-end</code></dt>
+ <dd>行末の句読点をぶら下げます。</dd>
+ <dt><code>allow-end</code></dt>
+ <dd>句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate" style="white-space: pre-wrap;">&lt;p&gt;“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  hanging-punctuation: first last;
+  margin: .5rem;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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 Text", "#hanging-punctuation-property", "hanging-punctuation")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.hanging-punctuation")}}</p>
diff --git a/files/ja/web/css/height/index.html b/files/ja/web/css/height/index.html
new file mode 100644
index 0000000000..9fa11ce89d
--- /dev/null
+++ b/files/ja/web/css/height/index.html
@@ -0,0 +1,167 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Layout
+  - Reference
+  - Vertical
+  - dimensions
+  - height
+  - 'recipe:css-property'
+  - size
+  - レイアウト
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>height</code></strong> は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">コンテンツ領域</a>の高さを定義します。しかし、 {{cssxref("box-sizing")}} が <code>border-box</code> に設定されていた場合は、 <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界領域</a>の高さを定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssxref("min-height")}} 及び {{cssxref("max-height")}} プロパティは <code>height</code> を上書きします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+height: auto;
+
+/* &lt;length&gt; 値 */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; 値 */
+height: 75%;
+
+/* グローバル値 */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>絶対値で高さを定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの高さのパーセントで高さを定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>指定された要素の高さをブラウザーが計算して決めます。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>本来の望ましい高さです。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>本来の最小の高さです。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="taller"&gt;50ピクセルの高さです。&lt;/div&gt;
+&lt;div id="shorter"&gt;25ピクセルの高さです。&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    親の半分の高さです。
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', 'auto', 240)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の <code>height</code> を設定するよう確認してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'height')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code> の追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>{{cssxref("&lt;length&gt;")}} 値のサポートを追加。どの要素に用いるかを明記。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.height")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("max-height")}}, {{cssxref("min-height")}}</li>
+ <li>対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li>
+</ul>
diff --git a/files/ja/web/css/hyphens/index.html b/files/ja/web/css/hyphens/index.html
new file mode 100644
index 0000000000..4415a4764a
--- /dev/null
+++ b/files/ja/web/css/hyphens/index.html
@@ -0,0 +1,156 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - CSS プロパティ
+  - CSS 文字列
+  - Reference
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>hyphens</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、文字列を複数行にわたって折り返す際に、単語のハイフネーションを行う方法を指定します。</span>ハイフネーションをまったく行わなかったり、手動で指定された位置で文字列のハイフネーションを行ったり、ブラウザーに適切な位置にハイフンを挿入させたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>ハイフネーションの規則は言語に依存します。 HTML では言語は <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性で特定され、ブラウザーはこの属性が存在し、適切なハイフネーション辞書が利用できる場合にのみハイフネーションを行います。 XML では、 <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性を使用する必要があります。</p>
+
+<div class="note">
+<p><strong>注:</strong> どのようにハイフネーションを行うかの規則は仕様書で明確に定義されていないため、厳密なハイフネーションの方式はブラウザーにより異なります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* グローバル値 */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<p><code>hyphens</code> プロパティは、以下に挙げたキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>単語内で分割が提案されている文字の位置であっても、改行で単語を分割しません。行はホワイトスペースの位置のみで折り返します。</dd>
+ <dt><code>manual</code></dt>
+ <dd>単語内で分割が提案されている文字の位置でのみ、行の折り返しで単語を分割します。詳しくは{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照してください。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーは自身が選択した規則に従って、ハイフネーションを行うのに適切な位置で自動的に単語を分割します。しかし、改行候補位置（{{anch("Suggesting line break opportunities", "改行候補位置の提案")}}を参照）があれば、自動的な改行位置の選択を上書きします。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>auto</code> を設定したときの動作は、正しくタグ付けされた言語に依存して、適切なハイフネーション規則が選択されます。選択した言語で自動的なハイフネーションが適用されるようにすることを保証するために、 HTML の <code>lang</code> 属性を必ず指定してください。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Suggesting_line_break_opportunities" name="Suggesting_line_break_opportunities">改行候補位置の提案</h2>
+
+<p>文字列中で改行が可能な位置を手動で指定するために使用できる Unicode 文字は2つあります。</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd>「ハード」ハイフン文字は、目に見える改行候補位置を示します。実際はその位置で改行されない場合でも、ハイフンが表示されます。</dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>不可視の「ソフト」ハイフン ("<strong>s</strong>oft" <strong>hy</strong>phen) です。この文字は表示されませんが、ブラウザーが必要に応じて単語を分割できる位置を示します。 HTML では、 <code>&amp;shy;</code> を使用してソフトハイフンを挿入することができます。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>HTML の {{htmlelement("wbr")}} 要素によって改行が行われた場合、ハイフンは挿入されません。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下の例では3つのクラスを使用し、それぞれの <code>hyphens</code> プロパティの設定を示します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed&lt;/dt&gt;
+  &lt;dd lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;auto&lt;/code&gt;: hyphens where the algorithm decides (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Example", "100%", 490)}}</p>
+</figure>
+
+<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 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.hyphens")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+ <li>{{cssxref("overflow-wrap")}} (旧 <code>word-wrap</code>)</li>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ja/web/css/id_selectors/index.html b/files/ja/web/css/id_selectors/index.html
new file mode 100644
index 0000000000..7e61a62063
--- /dev/null
+++ b/files/ja/web/css/id_selectors/index.html
@@ -0,0 +1,85 @@
+---
+title: ID セレクター
+slug: Web/CSS/ID_selectors
+tags:
+  - CSS
+  - Reference
+  - Selector
+  - Selectors
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong>ID セレクター</strong> (ID selector) は、 {{htmlattrxref("id")}} 属性の値に基づいて要素と一致します。選択される要素の <code>id</code> 属性は、セレクターで指定した値と完全一致していなければなりません。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* id="demo" のついた要素 */
+#demo {
+  border: red 2px solid;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">#id_value { <em>スタイルプロパティ</em> }</pre>
+
+<p>なお、これは次の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です (ただし、詳細度は異なります)。</p>
+
+<pre class="syntaxbox notranslate">[id=id_value] { <em>スタイルプロパティ</em> }</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#identified {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="identified"&gt;これは特別な ID がついています！&lt;/div&gt;
+&lt;div&gt;これは単なる普通の div です。&lt;/div&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", '100%', 50)}}</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("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.id")}}</p>
diff --git a/files/ja/web/css/ident/index.html b/files/ja/web/css/ident/index.html
new file mode 100644
index 0000000000..805dbe3e25
--- /dev/null
+++ b/files/ja/web/css/ident/index.html
@@ -0,0 +1,79 @@
+---
+title: ident
+slug: Web/CSS/ident
+translation_of: Web/CSS/ident
+---
+<p>{{CSSRef}}{{Draft}}</p>
+
+<p><span class="seoSummary"><strong><code>&lt;ident&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a> は、 {{glossary("identifier")}} として使用される任意の文字列を意味します。</span></p>
+
+<h2 id="構文">構文</h2>
+
+<p><code>&lt;custom-ident&gt;</code> の構文は CSS の識別子 (プロパティ名など)に似ていますが、 <a class="external" href="http://en.wikipedia.org/wiki/Case_sensitivity">大文字と小文字の区別</a> がある点が違います。 これは次の文字から成る文字の並びです:</p>
+
+<ul>
+ <li>アルファベット (<code>A</code> - <code>Z</code> と <code>a</code> - <code>z</code>)</li>
+ <li>数字 (<code>0</code> - <code>9</code>)</li>
+ <li>ハイフン (<code>-</code>)</li>
+ <li>アンダースコア (<code>_</code>)</li>
+ <li>エスケープ文字 (バックスラッシュ <code>\</code> に続く)</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> 文字 (バックスラッシュ <code>\</code> と、それに続く 1-6 個の16進数を形式をとる、Unicode コードポイント)</li>
+</ul>
+
+<p><a class="external" href="http://en.wikipedia.org/wiki/Case_sensitivity">大文字と小文字の区別</a> があるため <code>id1</code>、 <code>Id1</code>、 <code>iD1</code> そして <code>ID1</code> は全て異なる識別子である点に注意してください。しかし、文字をエスケープする方法はいくつか存在するため、 <code>toto\?</code> と <code>toto\3F</code> は同じ識別子です。</p>
+
+<h2 id="例">例</h2>
+
+<h3 id="有効な識別子">有効な識別子</h3>
+
+<pre class="brush: none; no-line-numbers example-good notranslate">nono79      	アルファベットと数字の組み合わせ
+ground-level	アルファベットとダッシュの組み合わせ
+-test       	ダッシュとそれに続く英数字
+--toto      	identifier の様なカスタムプロパティ
+_internal   	アンダースコアとそれに続く英数字
+\22 toto    	Unicode 文字とそれに続く一連の英数字
+bili\.bob   	正しくエスケープされたピリオド
+</pre>
+
+<h3 id="無効な識別子">無効な識別子</h3>
+
+<pre class="brush: none; no-line-numbers example-bad notranslate">34rem   	数字で始まってはいけません
+-12rad  	ダッシュで始まって数字が続いてはいけません
+bili.bob	アルファベット、 _、 - のみをエスケープする必要はありません
+'bilibob'	これは {{CSSxRef("&lt;string&gt;")}} になります
+"bilibob"	これは {{CSSxRef("&lt;string&gt;")}} になります
+</pre>
+
+<h2 id="仕様">仕様</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('CSS4 Values', '#css-identifier', '<code>&lt;ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#css-identifier', '<code>&lt;ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2>
+
+<p><em>このデータ型は、他のCSS構文の定義を単純化するために使用される便利な型なので実際の型ではありません。</em></p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;custom-ident&gt;")}} – CSS全体のキーワードを除く <code>&lt;ident&gt;</code> 値の制限されたサブセット、 {{CSSxRef("--*", "custom properties")}} 及びその他のプロパティ値。</li>
+</ul>
diff --git a/files/ja/web/css/image-orientation/index.html b/files/ja/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..248f5c450e
--- /dev/null
+++ b/files/ja/web/css/image-orientation/index.html
@@ -0,0 +1,131 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - CSS Image
+  - CSS Property
+  - CSS プロパティ
+  - CSS 画像
+  - EXIF
+  - Experimental
+  - Reference
+  - image-orientation
+  - リファレンス
+  - 画像の向き
+  - 画像補正
+translation_of: Web/CSS/image-orientation
+---
+<p><span class="seoSummary"><strong><code>image-orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。</span>向きの調整以外に使用しては<em>いけません</em>。そのような場合は、 {{cssxref("transform")}} プロパティで <code>rotate</code> {{cssxref("&lt;transform-function&gt;")}} の値を使用してください。</p>
+
+<div class="warning">
+<p><strong>警告:</strong> このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく <code>from-image</code> の例外を除いて移行する可能性があります。 <code>flip</code> および <code>&lt;angle&gt;</code> の値は Firefox 63 で廃止されました。</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+image-orientation: none;
+image-orientation: from-image; /* 画像の EXIF データを使用 */
+
+/* グローバル値 */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+
+/* 廃止された値 {{obsolete_inline(63)}} */
+image-orientation: 90deg; /* 90度回転 */
+image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */
+image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。</dd>
+ <dt><code>from-image</code></dt>
+ <dd>画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。</dd>
+ <dt>{{cssxref("&lt;angle&gt;")}} {{non-standard_inline}}{{obsolete_inline(63)}}</dt>
+ <dd>画像を回転させる {{cssxref("&lt;angle&gt;")}}。 もっとも近い <code>90deg</code> (<code>0.25turn</code>) 単位の値に丸められます。</dd>
+ <dt><code>flip</code> {{non-standard_inline}}{{obsolete_inline(63)}}</dt>
+ <dd>{{cssxref("&lt;angle&gt;")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("&lt;angle&gt;")}} を指定しない場合は、 <code>0deg</code> を使用します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2>
+
+<p>このプロパティは、回転したカメラで撮影された画像の方向を修正するため<em>だけ</em>を目的としています。自由に回転させるために使用するべきでは<em>ありません</em>。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに <code>rotate</code> キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。</p>
+
+<p>{{cssxref("&lt;transform-function&gt;")}} などの他の CSS プロパティとの組み合わせで使用された場合、 <code>image-orientation</code> による回転は、常に他の変形が行われる前に適用されます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#image {
+  image-orientation: from-image; /* ライブ例の中で変更することができます */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="Orientation taken from the image"&gt;
+&lt;select id="imageOrientation"&gt;
+  &lt;option value="from-image"&gt;from-image&lt;/option&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation");
+imageOrientation.addEventListener("change", function (evt) {
+  document.getElementById("image").style.imageOrientation = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</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 Images', '#the-image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.image-orientation")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li>
+ <li>{{cssxref("transform")}} および {{cssxref("rotate")}}</li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ja/web/css/image-rendering/index.html b/files/ja/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..bf4a1c5162
--- /dev/null
+++ b/files/ja/web/css/image-rendering/index.html
@@ -0,0 +1,129 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 画像
+  - Reference
+  - image-rendering
+translation_of: Web/CSS/image-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>image-rendering</code></strong> プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。</p>
+
+<p>{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が <code>100×100px</code> であって、実際の寸法が <code>200×200px</code> (または <code>50×50px</code>) であるとき、画像は <code>image-rendering</code> で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* グローバル値 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は<ruby><em>バイリニア</em><rp> (</rp><rt>bilinear</rt><rp>) </rp></ruby>再サンプリングを使用します (high-quality)。</dd>
+ <dt><code>smooth</code> {{Experimental_Inline}}</dt>
+ <dd>画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。</dd>
+ <dt><code style="white-space: nowrap;">high-quality</code> {{Experimental_Inline}}</dt>
+ <dd><code>smooth</code> と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 <code style="white-space: nowrap;">high-quality</code> の画像は他の値よりも優先されます。</dd>
+ <dt><code style="white-space: nowrap;">crisp-edges</code></dt>
+ <dd>画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法や、 2×SaI や <a href="https://en.wikipedia.org/wiki/Hqx">hqx-family</a> のような<a href="https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms">その他のスムーズ化が行われない拡大縮小アルゴリズム</a>などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。</dd>
+ <dt><code>pixelated</code></dt>
+ <dd>画像を拡大する時は、<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は <code>auto</code> と同じになります。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <code>optimizeQuality</code> および <code>optimizeSpeed</code> の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) <code>smooth</code> および <code>pixelated</code> の同義語として定義されていました。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div&gt;
+  &lt;img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
+  &lt;img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
+  &lt;img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: css">img {
+  height: 200px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.auto {
+  image-rendering: auto;
+}
+
+.pixelated {
+  -ms-interpolation-mode: nearest-neighbor;
+  image-rendering: pixelated;
+}
+
+.crisp-edges {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p>
+</div>
+
+<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 Images", "#the-image-rendering", "image-rendering")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.image-rendering")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 仕様書の例にあるようなピクセルアートの拡大縮小には <code>crisp-edges</code> を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 <a href="https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727">Firefox</a> では、 <code>pixelated</code> は最近傍法として解釈されますが、 <code>auto</code> と <code>crisp-edges</code> はトリリニア法または線形で補間されます。</p>
+
+<p>Chromium と Safari (WebKit) での動作については、 <code><a href="https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&amp;q=GetInterpolationQuality&amp;g=0&amp;l=1160">GetInterpolationQuality</a></code> 関数と <code><a href="https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324">CSSPrimitiveValue::operator ImageRendering()</a></code> をそれぞれ参照してください。</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ja/web/css/image-set()/index.html b/files/ja/web/css/image-set()/index.html
new file mode 100644
index 0000000000..a3f00ddc18
--- /dev/null
+++ b/files/ja/web/css/image-set()/index.html
@@ -0,0 +1,87 @@
+---
+title: image-set()
+slug: Web/CSS/image-set()
+tags:
+  - CSS
+  - CSS Function
+  - CSS-4 Images
+  - Function
+  - Reference
+  - Web
+translation_of: Web/CSS/image-set()
+---
+<div>{{cssref}}</div>
+
+<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p>
+
+<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p>
+
+<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
+where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
+      &lt;string&gt; is an &lt;url&gt;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>もっともよく見かけるのは <code>url()</code> または <code>&lt;string&gt;</code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image">&lt;image&gt;</a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p>
+
+<p><code><a href="/ja/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3>
+
+<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);</pre>
+
+<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状態</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.image.image-set")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/image/index.html b/files/ja/web/css/image/index.html
new file mode 100644
index 0000000000..04758c43d3
--- /dev/null
+++ b/files/ja/web/css/image/index.html
@@ -0,0 +1,176 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Data Type
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/image
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>&lt;image&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の画像を表現します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;image&gt;</code> データ型は以下のいずれかによって表すことができます。</p>
+
+<ul>
+ <li>{{CSSxRef("&lt;url&gt;")}} データ型で記述された画像</li>
+ <li>{{CSSxRef("&lt;gradient&gt;")}} データ型</li>
+ <li>{{CSSxRef("element")}} 関数で定義されたウェブページの一部</li>
+ <li>{{CSSxRef("image()")}} 関数で定義された画像、画像フラグメント、単色の色</li>
+ <li>{{CSSxRef("cross-fade")}} 関数で定義された2つ以上の画像の合成</li>
+ <li>{{CSSxRef("image-set")}} 関数で定義された、解像度に基づいて定義された画像の選択</li>
+</ul>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>CSS はさまざま種類の画像を扱うことができます。</p>
+
+<ul>
+ <li>JPEG や PNG やその他の<a href="https://en.wikipedia.org/wiki/Raster_graphics">ラスタ形式</a>など、<ruby><em>固有の寸法</em><rp> (</rp><rt><em>intrinsic dimensions</em></rt><rp>)</rp></ruby> (自然の寸法) を持つ画像。</li>
+ <li>一部の .ico 形式のように、単一のファイルの中に複数のバージョンが存在する、<em>複数の固有の寸法</em>を持つ画像。 (この場合、固有の寸法は領域に収まる最も大きな画像であり、かつアスペクト比が包含ボックスに最も近いものになります。)</li>
+ <li>SVG またはその他の<a href="https://en.wikipedia.org/wiki/Vector_graphics">ベクター形式</a>のように、固有の寸法を持たないが、幅と高さの間に固有のアスペクト比のある画像。</li>
+ <li id="no_intrinsic">CSS のグラデーションなど、<em>固有の寸法がなく、固有のアスペクト比もない</em>画像。</li>
+</ul>
+
+<p>CSS はオブジェクトの<em>正しい</em>寸法を、 (1) <em>固有の寸法</em>、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などの CSS プロパティで定義された<em>指定された寸法</em>、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような<em>既定の寸法</em>によって特定します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">オブジェクトの種類 (CSS プロパティ)</th>
+   <th scope="col">既定のオブジェクトの寸法</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("background-image")}}</td>
+   <td>要素の background の置かれる領域の寸法</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("list-style-image")}}</td>
+   <td><code>1em</code> の文字の寸法</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("border-image-source")}}</td>
+   <td>要素の境界画像領域の寸法</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("cursor")}}</td>
+   <td>クライアントのシステムにおける通常のカーソルの寸法に合うブラウザーが定義した寸法</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("mask-image")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("shape-outside")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("mask-border-source")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>@counter-style の {{CSSxRef("symbols")}}</td>
+   <td>危険性のある機能です。対応している場合、クライアントのシステムでのカーソルの寸法に合わせたブラウザー定義の寸法です。</td>
+  </tr>
+  <tr>
+   <td>擬似要素 ({{CSSxRef("::after")}} または {{cssxref("::before")}}) の {{CSSxRef("content")}}</td>
+   <td>300px × 150px の矩形</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。</p>
+
+<ul>
+ <li>指定された寸法に<em>幅と高さの両方</em>が定義されていれば、その値が実際の寸法に使われます。</li>
+ <li>指定された寸法に<em>幅と高さのどちらかのみ</em>が定義されていれば、欠けている値は次のいずれかで決められます。画像固有の比率、指定値がマッチするなら画像固有の寸法、既定のオブジェクトの寸法の値。</li>
+ <li>指定された寸法が<em>幅と高さを定義していない</em>ときは、画像固有のアスペクト比に一致し、既定のオブジェクトの寸法をどの方向にも超過しないような値が計算され、実際のオブジェクト寸法に使われます。画像に固有のアスペクト比がないときは、画像が用いられるオブジェクト固有のアスペクト比が使われます。オブジェクトが固有のアスペクト比を持たないときは、欠けた幅や高さは既定のオブジェクトサイズからとられます。</li>
+</ul>
+
+<div class="note"><strong>注:</strong> すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は<a href="#Browser_compatibility">ブラウザーの互換性</a>の節をご覧ください。</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_images" name="Valid_images">有効な画像</h3>
+
+<pre class="brush: css example-good notranslate">url(test.jpg)               /* &lt;url&gt;、但し test.jpg は実在する画像 */
+linear-gradient(blue, red)  /* &lt;gradient&gt; */
+element(#realid)            /* element() 関数で参照されるウェブページの一部、
+                               ページ上に "realid" が実在する ID である場合 */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                            /* arrow.png が対応している画像であれば、 &lt;url&gt; の元画像の
+                               左上から 16x16 を選択し、そうでなければ赤一色の見本になります。
+                               言語が右書きの場合は、画像は水平方向に反転します。 */
+cross-fade(20% url(twenty.png), url(eighty.png))
+                            /* 多重露光の画像で、 twenty が 20% の露光で、
+                               eighty が 80% の露光になる */
+image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
+                            /* 様々な解像度による画像の選択 */</pre>
+
+<h3 id="Invalid_images" name="Invalid_images">無効な画像</h3>
+
+<pre class="brush: css example-bad notranslate">nourl.jpg            /* 画像ファイルは url() 関数により示す必要がある */
+url(report.pdf)      /* url() 関数で指すファイルは画像でなければならない */
+element(#fakeid)     /* 要素 ID はページ上に実在する ID でなければならない */
+image(z.jpg#xy=0,0)  /* 空間フラグメントは xywh=#,#,#,# の書式で書かなければならない */
+image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて異なる解像度でなければならない */
+</pre>
+
+<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("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("image-resolution")}} を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>初回定義。これ以前は <code>&lt;image&gt;</code> データ型の明示的な定義はなし。画像は <code>url()</code> 関数記法でしか定義できなかった</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.types.image")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/ime-mode/index.html b/files/ja/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..22d83ff620
--- /dev/null
+++ b/files/ja/web/css/ime-mode/index.html
@@ -0,0 +1,102 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+  - CSS Reference
+  - Deprecated
+translation_of: Web/CSS/ime-mode
+---
+<div>{{CSSRef}} {{deprecated_header}}</div>
+
+<p><strong><code>ime-mode</code></strong> プロパティは、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+ime-mode: auto;
+ime-mode: normal;
+ime-mode: active;
+ime-mode: inactive;
+ime-mode: disabled;
+
+/* Global values */
+ime-mode: inherit;
+ime-mode: initial;
+ime-mode: unset;</pre>
+
+<p><code>ime-mode</code>は、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <span class="tlid-translation translation" lang="ja"><span title="">一般的に、パブリックなWebサイトがIMEモードを変更することは適切ではありません。</span></span> このプロパティは、プライベートなWebアプリケーションでのみ使用すべきです。また、以前にレガシーコードで設定されていた場合は、プロパティを元に戻すべきです。</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="構文">構文</h2>
+
+<h3 id="値">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>現在の IME の状態を変更しません。これはデフォルトの設定です。</dd>
+ <dt><code>normal</code></dt>
+ <dd>IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。 <em>この値は Internet Explorer ではサポートされていません。</em></dd>
+ <dt><code>active</code></dt>
+ <dd>コンテンツがフォーカスを得た時に IME は自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。 <em>Linux ではサポートされていません。</em></dd>
+ <dt><code>inactive</code></dt>
+ <dd>コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにする事ができます。 <em>Linux ではサポートされていません。</em></dd>
+ <dt><code>disabled</code></dt>
+ <dd>IME は無効にされます。ユーザーによって IME をオンにする事はできません。</dd>
+</dl>
+
+<h3 id="公式の構文">公式の構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例">例</h2>
+
+<p>この例は、フィールドの IME のサポートを無効にします。これは、 拡張文字セットをサポートしていないデータベースにデータを入力するフィールドの一般的なプラクティスでした。</p>
+
+<pre>&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;</pre>
+
+<div class="blockIndicator note">
+<p>拡張文字がフォームを通過しないように IME を無効にすることに依存しないでください。 IME を無効にしても、拡張文字をフォームのフィールドに貼り付けることはできます。</p>
+</div>
+
+<h2 id="注記">注記</h2>
+
+<p>Firefox の <code>ime-mode</code> は Internet Explorer と異なり、<code>&lt;input type="password"&gt;</code> にも適用できます。しかしこれはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効に<em>されるべきではありません</em>。ユーザーは以下の CSS をユーザースタイルシートに挿入する事で推奨された設定に従わないサイトの動作を修正する事ができます:</p>
+
+<pre class="brush: css">input[type=password] {
+  ime-mode: auto !important;
+}</pre>
+
+<p>Gecko 1.9 の Mac 版では、disabled に設定されたエディターがフォーカスを失う際に、IME の状態をフォーカスを得る直前の状態には戻りません。そのため、Mac ユーザーは <code>disabled</code> 値を利用したフォームの利用に苛立ちを覚えるかもしれません。</p>
+
+<h2 id="仕様書">仕様書</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 Basic UI', '#input-method-editor', 'ime-mode')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>初期の定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザー互換性">ブラウザー互換性</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("css.properties.ime-mode")}}</p>
+</div>
+</div>
diff --git a/files/ja/web/css/index.html b/files/ja/web/css/index.html
new file mode 100644
index 0000000000..6af2d9450c
--- /dev/null
+++ b/files/ja/web/css/index.html
@@ -0,0 +1,122 @@
+---
+title: 'CSS: カスケーディングスタイルシート'
+slug: Web/CSS
+tags:
+  - CSS
+  - Cascading Style Sheets
+  - Design
+  - Guide
+  - Landing
+  - Layout
+  - Reference
+  - Style Sheets
+  - Styles
+  - Stylesheets
+  - 'l10n:priority'
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><ruby><strong>カスケーディングスタイルシート</strong><rp> (</rp><rt>Cascading Style Sheets</rt><rp>)</rp></ruby> (<strong>CSS</strong>) は<a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a>言語であり、 <a href="/ja/docs/Web/HTML" title="HyperText Markup Language">HTML</a> や <a href="/ja/docs/XML_introduction">XML</a> (方言である <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}} などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。</span> CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。</p>
+
+<p>CSS は<strong>オープンウェブ</strong>の核となる言語に含まれ、 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 標準仕様</a>によってウェブブラウザー間で標準化されています。以前は CSS 仕様書の様々な部分が同時に開発されており、最新勧告の版数付けができていました。皆さんも CSS1, CSS2.1, CSS3 について聞いたことがあるでしょう。しかし、 CSS4 は公式なバージョンにはなっていません。</p>
+
+<p>CSS3 以降、仕様の範囲が大幅に拡大し、 CSS モジュールごとに進捗状況が大きく異なるようになったため、<a href="https://www.w3.org/Style/CSS/current-work">モジュールごとに勧告を開発して公開する</a>ことがより効果的になりました。 W3C では、 CSS 仕様のバージョン管理の代わりに、<a href="https://www.w3.org/TR/css/">最新の CSS 仕様の安定した状態</a>のスナップショットを定期的に取得するようになりました。</p>
+
+<h2 id="Key_resources" name="Key_resources">主なリソース</h2>
+
+<dl>
+ <dt><span>CSS 入門</span></dt>
+ <dd>ウェブ開発が初めての人は、<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>の記事を読んで、 CSS とは何か、どのように使用するかを学習しましょう。</dd>
+ <dt><span>CSS チュートリアル</span></dt>
+ <dd><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a>は、初心者から中級者になるための、すべての基本事項を網羅した豊富なコンテンツがあります。</dd>
+ <dt><span>CSS リファレンス</span></dt>
+ <dd>CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>です。</dd>
+</dl>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3>
+
+<p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutorials" name="Tutorials">チュートリアル</h2>
+
+<p><a href="/ja/docs/Learn/CSS">CSS 学習エリア</a> は基礎から CSS を教える複数のモジュールにスポットを当てています — 事前の知識は必要ありません。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt>
+ <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt>
+ <dd>
+ <p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>が終わったところを引き継いでいます。言語とその構文に慣れてきて、基本的な使用経験を積んだところで、もう少し深く掘り下げてみましょう。このモジュールでは、カスケードと継承、利用可能なすべてのセレクターのタイプ、単位、寸法の調整、背景や境界のスタイル付け、デバッグなど多くのことを見ていきます。</p>
+
+ <p>ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p>
+ </dd>
+ <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt>
+ <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt>
+ <dd>現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。今度は、ビューポートからの相対でボックスを適切な場所に配置する方法、および互いの配置方法を検討します。必要な前提知識をカバーしているので、さまざまな表示の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</dd>
+ <dt><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a></dt>
+ <dd>このモジュールは、ウェブページを作成する際の一般的な問題を解決するための CSS の使用方法を説明するコンテンツの節へのリンクを提供しています。</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Reference" name="Reference">リファレンス</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>: CSS のすべてのプロパティや概念について記述された、熟練のウェブ開発者向けの CSS リファレンスです。</li>
+ <li>CSS の主要な概念:
+  <ul>
+   <li><a href="/ja/docs/Web/CSS/Syntax">言語の構文と書式</a></li>
+   <li><a href="/ja/docs/Web/CSS/Specificity">詳細度</a>と<a href="/ja/docs/Web/CSS/Inheritance">継承</a> と <a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a> および <a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a></li>
+   <li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a>と<a href="/ja/docs/Web/CSS/margin_collapsing">マージンの相殺</a></li>
+   <li><a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a></li>
+   <li><a href="/ja/docs/Web/CSS/Understanding_z_index/The_stacking_context">重ね合わせ</a>と<a href="/ja/docs/Web/CSS/block_formatting_context">ブロック整形</a>コンテキスト</li>
+   <li><a href="/ja/docs/Web/CSS/initial_value">初期値</a>、<a href="/ja/docs/Web/CSS/computed_value">計算値</a>、<a href="/ja/docs/Web/CSS/used_value">使用値</a>、<a href="/ja/docs/Web/CSS/actual_value">実効値</a></li>
+   <li><a href="/ja/docs/Web/CSS/Shorthand_properties">CSS 一括指定プロパティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a></li>
+   <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a></li>
+   <li><a href="/ja/docs/Web/CSS/animation">アニメーション</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="Cookbook" name="Cookbook">料理帳</h2>
+
+<p><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a>は、よくあるレイアウトパターンや、サイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。</p>
+
+<h2 class="Tools" id="Tools_for_CSS_development" name="Tools_for_CSS_development">CSS 開発のためのツール</h2>
+
+<ul>
+ <li><a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。</li>
+ <li><a href="/ja/docs/Tools">Firefox Developer Tools</a> は<a href="/ja/docs/Tools/Page_Inspector">インスペクター</a>と<a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a>ツールを通じて、ページの CSS をライブでの閲覧や編集を可能にします。</li>
+ <li>Firefox の <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer 拡張機能</a>では、表示しているサイトをその場で追跡したり編集したりすることができます。</li>
+ <li>ウェブコミュニティは、利用できるその他の<a href="/ja/docs/Web/CSS/Tools">様々な CSS のためのツール</a>を開発しています。</li>
+</ul>
+
+<h2 id="Meta_bugs" name="Meta_bugs">メタバグ</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/Demos_of_open_web_technologies#CSS">CSS デモ</a>: 最新の CSS テクノロジーの例を探索して想像力をかきたてましょう。</li>
+ <li>CSS がよく適用されるウェブ言語。 <a href="/ja/docs/Web/HTML">HTML</a>, <a href="/ja/docs/Web/SVG">SVG</a>, <a href="/ja/docs/Web/MathML">MathML</a>, {{Glossary("XHTML", "", 1)}}, <a href="/ja/docs/XML_introduction">XML</a></li>
+ <li>CSS を広範囲に利用する Mozilla のテクノロジー。<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/ja/docs/Mozilla/Firefox">Firefox</a>, <a href="/ja/docs/Mozilla/Thunderbird">Thunderbird</a> の <a href="/ja/docs/Mozilla/Add-ons">拡張機能</a> と <a href="/ja/docs/Mozilla/Add-ons/Themes">テーマ</a></li>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla メーリングリスト</a></li>
+ <li><a href="Stack Overflow|http://stackoverflow.com/questions/tagged/css">CSS に関する Stack Overflow の質問</a></li>
+</ul>
diff --git a/files/ja/web/css/index/index.html b/files/ja/web/css/index/index.html
new file mode 100644
index 0000000000..20ef75d74b
--- /dev/null
+++ b/files/ja/web/css/index/index.html
@@ -0,0 +1,10 @@
+---
+title: CSS 関連ドキュメントの索引
+slug: Web/CSS/Index
+tags:
+  - CSS
+  - Index
+  - MDN Meta
+translation_of: Web/CSS/Index
+---
+<p>{{Index("/ja/docs/Web/CSS")}}</p>
diff --git a/files/ja/web/css/inherit/index.html b/files/ja/web/css/inherit/index.html
new file mode 100644
index 0000000000..8d70d43966
--- /dev/null
+++ b/files/ja/web/css/inherit/index.html
@@ -0,0 +1,87 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - CSS 値
+  - Cascade
+  - Inheritance
+  - Layout
+  - Reference
+  - inherit
+  - カスケード
+  - スタイル
+  - 継承
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>inherit</code></strong> は CSS のキーワードで、要素のプロパティの<a href="/ja/docs/Web/CSS/computed_value">計算値</a>を親要素から取得するよう指定します。</span> CSS の一括指定 {{cssxref("all")}} を含め、すべての CSS プロパティに適用することができます。</p>
+
+<p><a href="/ja/docs/Web/CSS/inheritance#Inherited_properties">継承プロパティ</a>においては、既定の動作を推進するものであり、他の規則を上書きする場合にのみ必要です。<a href="/ja/docs/Web/CSS/inheritance#Non-inherited_properties">非継承プロパティ</a>においては、比較的意味の弱い動作をしますので、 {{cssxref("all")}} プロパティには {{cssxref("initial")}} , {{cssxref("unset")}} などを使用した方が良いかもしれません。</p>
+
+<p>親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css notranslate">/* 第二レベルのヘッダーを緑色にする */
+h2 { color: green; }
+
+/* ... ただしサイドバーの中にあるものは、親要素の色を使用する */
+#sidebar h2 { color: inherit; }
+</pre>
+
+<p>この例の中で、サイドバー内にある <code>h2</code> 要素は異なる色になる可能性があります。例えば、以下の規則に一致する div の子であった場合は ...</p>
+
+<pre class="brush: css notranslate">div#current { color: blue; }
+</pre>
+
+<p>... 青になるでしょう。</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('CSS4 Cascade', '#inherit', 'inherit') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td> Level 3 から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td> {{ SpecName('CSS2.1') }} から重要な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.types.global_keywords.inherit")}}</p>
+</div>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a class="internal" href="/ja/docs/Web/CSS/inheritance">継承</a></li>
+ <li>{{cssxref("initial")}} を使用すると、プロパティを初期値に設定します。</li>
+ <li>{{cssxref("unset")}} を使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。</li>
+ <li>{{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。</li>
+ <li>{{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。</li>
+</ul>
diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html
new file mode 100644
index 0000000000..bf2dd3f663
--- /dev/null
+++ b/files/ja/web/css/inheritance/index.html
@@ -0,0 +1,74 @@
+---
+title: 継承
+slug: Web/CSS/inheritance
+tags:
+  - CSS
+  - Guide
+  - Inheritance
+  - Layout
+  - Web
+translation_of: Web/CSS/inheritance
+---
+<div>{{cssref}}</div>
+
+<p>CSS において、<ruby><strong>継承</strong><rp> (</rp><rt>inheritance</rt><rp>) </rp></ruby>はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。</p>
+
+<p>CSS プロパティは2種類に分類することができます。</p>
+
+<ul>
+ <li><strong>継承プロパティ</strong>は、既定で親要素の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>に設定されるものです</li>
+ <li><strong>非継承プロパティ</strong>は、既定でそのプロパティの<a href="/ja/docs/Web/CSS/Initial_value">初期値</a>に設定されるものです</li>
+</ul>
+
+<p><a href="/ja/docs/Web/CSS/Reference#Keyword_index">いずれかの CSS プロパティ</a>の定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">継承プロパティ</h2>
+
+<p>要素の<strong>継承プロパティ</strong>に値が指定されなかった場合、要素はその親要素のプロパティの<a href="/ja/docs/Web/CSS/computed_value">計算値</a>を取得します。文書のルート要素だけは、プロパティの概要で与えられた<a href="/ja/docs/Web/CSS/initial_value">初期値</a>を取得します。</p>
+
+<p>継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p>
+
+<pre class="brush: css notranslate">p { color: green; }</pre>
+
+<p>次の様にマークアップしたとします。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;この段落には&lt;em&gt;強調されたテキスト&lt;/em&gt;があります。&lt;/p&gt;</pre>
+
+<p>「強調されたテキスト」という文字列は、 <code>em</code> 要素が <code>p</code> 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">非継承プロパティ</h2>
+
+<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value" title="ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p>
+
+<p>非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p>
+
+<pre class="brush: css notranslate"> p { border: medium solid; }</pre>
+
+<p>次の様にマークアップしたとします。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;この段落には&lt;em&gt;強調されたテキスト&lt;/em&gt;があります。&lt;/p&gt;</pre>
+
+<p>この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が <code>none</code> であるため) ボーダーを持ちません。</p>
+
+<h2 id="Notes" name="Notes">注</h2>
+
+<p>{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。</p>
+
+<p>すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、</p>
+
+<pre class="brush: css notranslate">font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}</pre>
+
+<p>これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を <code>"bold"</code> に適用します。</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>継承を制御する CSS 値: {{ cssxref("inherit") }}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+</ul>
diff --git a/files/ja/web/css/initial-letter-align/index.html b/files/ja/web/css/initial-letter-align/index.html
new file mode 100644
index 0000000000..3da44c1f25
--- /dev/null
+++ b/files/ja/web/css/initial-letter-align/index.html
@@ -0,0 +1,121 @@
+---
+title: initial-letter-align
+slug: Web/CSS/initial-letter-align
+tags:
+  - Align
+  - CSS
+  - CSS Inline
+  - CSS Property
+  - CSS プロパティ
+  - Experimental
+  - Graphics
+  - Layout
+  - NeedsL
+  - Reference
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/initial-letter-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS の <strong><code>initial-letter-align</code></strong> プロパティは、段落内の最初の文字の配置を指定します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+initial-letter-align: auto;
+initial-letter-align: alphabetic;
+initial-letter-align: hanging;
+initial-letter-align: ideographic;
+
+/* グローバル値 */
+initial-letter-align: inherit;
+initial-letter-align: initial;
+initial-letter-align: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>以下に挙げたキーワード値のうちの一つです。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントがテキストの言語に従って値を選択します。西洋の言語では既定で alphabetic であり、日中韓の言語は ideographic、一部のインド語派の言語は hanging になります。</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>上記の通り、最初の文字の大文字高は、テキストの最初の行の大文字高に配置されます。最初の文字のベースラインは N 文字目のテキストのベースラインに配置されます。</dd>
+ <dt><code>hanging</code></dt>
+ <dd>最初の文字のぶら下げベースラインは、テキストの最初の行のぶら下げベースラインに配置されます。</dd>
+ <dt><code>ideographic</code></dt>
+ <dd>最初の文字は N 行の領域の中央に配置されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Aligning_initial_letter" name="Aligning_initial_letter">最初の文字の配置</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="auto "&gt;Initial letter - auto&lt;/p&gt;
+&lt;p class="alphabetic"&gt;Initial letter - alphabetic&lt;/p&gt;
+&lt;p class="hanging"&gt;Initial letter - hanging&lt;/p&gt;
+&lt;p class="ideographic"&gt;Initial letter - ideographic&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.auto {
+  -webkit-initial-letter-align: auto;
+  initial-letter-align: auto;
+}
+
+.alphabetic {
+  -webkit-initial-letter-align: alphabetic;
+  initial-letter-align: alphabetic;
+}
+
+.hanging {
+  -webkit-initial-letter-align: hanging;
+  initial-letter-align: hanging;
+}
+
+.ideographic {
+  -webkit-initial-letter-align: ideographic;
+  initial-letter-align: ideographic;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Aligning_initial_letter')}}</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 Inline', '#aligning-initial-letter', 'initial-letter-align')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.initial-letter-align")}}</p>
diff --git a/files/ja/web/css/initial-letter/index.html b/files/ja/web/css/initial-letter/index.html
new file mode 100644
index 0000000000..935057530c
--- /dev/null
+++ b/files/ja/web/css/initial-letter/index.html
@@ -0,0 +1,113 @@
+---
+title: initial-letter
+slug: Web/CSS/initial-letter
+tags:
+  - CSS
+  - CSS Inline
+  - CSS Property
+  - Experimental
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/initial-letter
+---
+<div>{{CSSRef}}</div>
+
+<p><code>initial-letter</code> は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+initial-letter: normal;
+
+/* 数値 */
+initial-letter: 1.5;    /* 頭文字が1.5行分を占める */
+initial-letter: 3.0;    /* 頭文字が3行分を占める */
+initial-letter: 3.0 2;  /* 頭文字が3行分を占め、
+                           2行分下がる */
+
+/* グローバル値 */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>キーワード値の <code>normal</code>、または <code>&lt;number&gt;</code> と、その後に任意で <code>&lt;integer&gt;</code> が付きます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。</dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>寸法が与えられたときに、頭文字が沈み込む行数を定義します。0以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_initial_letter_size" name="Setting_initial_letter_size">先頭文字の大きさの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="normal"&gt;Initial letter is normal&lt;/p&gt;
+&lt;p class="onefive"&gt;Initial letter occupies 1.5 lines&lt;/p&gt;
+&lt;p class="three"&gt;Initial letter occupies 3 lines&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">.normal {
+  -webkit-initial-letter: normal;
+  initial-letter: normal;
+}
+
+.onefive {
+  -webkit-initial-letter: 1.5;
+  initial-letter: 1.5;
+}
+
+.three {
+  -webkit-initial-letter: 3.0;
+  initial-letter: 3.0;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}</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 Inline', '#sizing-drop-initials', 'initial-letter')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.initial-letter")}}</p>
diff --git a/files/ja/web/css/initial/index.html b/files/ja/web/css/initial/index.html
new file mode 100644
index 0000000000..0b51d7bd17
--- /dev/null
+++ b/files/ja/web/css/initial/index.html
@@ -0,0 +1,81 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - CSS 値
+  - Reference
+  - initial
+  - レイアウト
+  - 初期値
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>initial</code></strong> は CSS のキーワードで、要素にプロパティの<a href="/ja/docs/Web/CSS/initial_value">初期値 (または既定値)</a> を設定します。どの CSS プロパティにも適用できます。</span>これは CSS の一括指定 {{cssxref("all")}} を含み、 <code>initial</code> を指定して、すべての CSS プロパティを初期値に戻すために使用することができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> <a href="/ja/docs/Web/CSS/inheritance#Inherited_properties">継承プロパティ</a>では、初期値は期待されない値かもしれません。代わりに {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} キーワードを使用することを検討してください。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  &lt;span&gt;このテキストは赤です。&lt;/span&gt;
+  &lt;em&gt;このテキストは初期値 (ふつうは黒) です。&lt;/em&gt;
+  &lt;span&gt;これは再び赤です。&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+em {
+  color: initial;
+}</pre>
+
+<p>{{EmbedLiveSample('Example')}}</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('CSS4 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Level 3 から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.global_keywords.initial")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("unset")}} を使用すると、継承プロパティは継承値に、それ以外は初期値に設定します。</li>
+ <li>{{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。</li>
+ <li>{{cssxref("inherit")}} を使用すると、要素のプロパティを親と同じ値にします。</li>
+ <li>{{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。</li>
+</ul>
diff --git a/files/ja/web/css/initial_value/index.html b/files/ja/web/css/initial_value/index.html
new file mode 100644
index 0000000000..f25e94cf55
--- /dev/null
+++ b/files/ja/web/css/initial_value/index.html
@@ -0,0 +1,52 @@
+---
+title: 初期値
+slug: Web/CSS/initial_value
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - Reference
+translation_of: Web/CSS/initial_value
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> プロパティの <strong>初期値 (initial value)</strong>は、定義表に挙げられている既定値です。</span>初期値の使い方はプロパティが継承されているかどうかで異なります。</p>
+
+<ul>
+ <li><a href="/ja/docs/CSS/inheritance#Inherited_properties" title="CSS/inheritance#Inherited_properties">継承プロパティ</a>では、初期値は<em>ルート要素に対してのみ</em>、<a href="/ja/docs/Web/CSS/specified_value">特定の値</a>が指定されていない場合に限り使用されます。</li>
+ <li><a href="/ja/docs/CSS/inheritance#Non-inherited_properties" title="CSS/inheritance#Non-inherited_properties">非継承プロパティ</a>では、初期値は<em>すべての要素</em>において、<a href="/ja/docs/Web/CSS/specified_value">特定の値</a>が指定されていない場合に限り使用されます。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> {{cssxref("initial")}} キーワードを使用すると、明示的に初期値を指定することができます。</p>
+</div>
+
+<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><a href="https://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td>
+   <td> </td>
+   <td>正式な定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>暗黙の定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("initial")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/inline-size/index.html b/files/ja/web/css/inline-size/index.html
new file mode 100644
index 0000000000..68484e7599
--- /dev/null
+++ b/files/ja/web/css/inline-size/index.html
@@ -0,0 +1,106 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inline-size</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。</p>
+
+<p>書字方向が垂直方向であった場合、 <code>inline-size</code> の値は要素の高さに対応し、水平方向であった場合は要素の幅に対応します。関連プロパティの {{cssxref("block-size")}} が要素のもう一方の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inline-size: 300px;
+inline-size: 25em;
+
+/* &lt;percentage&gt; 値 */
+inline-size: 75%;
+
+/* キーワード値 */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* グローバル値 */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inline-size</code> プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_size_in_pixels" name="Setting_inline_size_in_pixels">インライン方向の寸法をピクセル単位で設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_size_in_pixels")}}</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("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inline-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付けされる物理的プロパティ: {{cssxref("width")}} および {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-block-end/index.html b/files/ja/web/css/inset-block-end/index.html
new file mode 100644
index 0000000000..1b9b6eee2e
--- /dev/null
+++ b/files/ja/web/css/inset-block-end/index.html
@@ -0,0 +1,108 @@
+---
+title: inset-block-end
+slug: Web/CSS/inset-block-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inset-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>inset-block-end</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-block-end: 10%;
+
+/* キーワード値 */
+inset-block-end: auto;
+
+/* グローバル値 */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-block-end</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_block_end_offset" name="Setting_block_end_offset">ブロック方向の末尾のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_end_offset", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-block-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}</li>
+ <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-block-start/index.html b/files/ja/web/css/inset-block-start/index.html
new file mode 100644
index 0000000000..c9eb98bed1
--- /dev/null
+++ b/files/ja/web/css/inset-block-start/index.html
@@ -0,0 +1,109 @@
+---
+title: inset-block-start
+slug: Web/CSS/inset-block-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inset-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>inset-block-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-block-start: 10%;
+
+/* キーワード値 */
+inset-block-start: auto;
+
+/* グローバル値 */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+</pre>
+
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-block-start</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_block_start_offset" name="Setting_block_start_offset">ブロック方向の先頭のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_start_offset", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-block-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}</li>
+ <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-block/index.html b/files/ja/web/css/inset-block/index.html
new file mode 100644
index 0000000000..11eb385c98
--- /dev/null
+++ b/files/ja/web/css/inset-block/index.html
@@ -0,0 +1,119 @@
+---
+title: inset-block
+slug: Web/CSS/inset-block
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/inset-block
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inset-block</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-block: 10% 5%;
+
+/* キーワード値 */
+inset-block: auto;
+
+/* グローバル値 */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+</pre>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("inset-block-end")}}</li>
+ <li>{{cssxref("inset-block-start")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-block</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_block_start_and_end_offsets" name="Setting_block_start_and_end_offsets">ブロック方向の先頭と末尾のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_start_and_end_offsets", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>対応する物理的な一括指定: {{cssxref("inset")}}</li>
+ <li>対応するインライン方向の一括指定: {{cssxref("inset-inline")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-inline-end/index.html b/files/ja/web/css/inset-inline-end/index.html
new file mode 100644
index 0000000000..7c4ef34b79
--- /dev/null
+++ b/files/ja/web/css/inset-inline-end/index.html
@@ -0,0 +1,112 @@
+---
+title: inset-inline-end
+slug: Web/CSS/inset-inline-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - NeedsContent
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inset-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>inset-inline-end</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-inline-end: 10%;
+
+/* キーワード値 */
+inset-inline-end: auto;
+
+/* グローバル値 */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+</pre>
+
+<p>{{cssxref("inset-inline-start")}} と <code>inset-inline-end</code> の一括指定は {{cssxref("inset-inline")}} です。</p>
+
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-inline-end</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_end_offset" name="Setting_inline_end_offset">インライン方向の末尾のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_end_offset", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-inline-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}</li>
+ <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-inline-start/index.html b/files/ja/web/css/inset-inline-start/index.html
new file mode 100644
index 0000000000..971a1c3749
--- /dev/null
+++ b/files/ja/web/css/inset-inline-start/index.html
@@ -0,0 +1,110 @@
+---
+title: inset-inline-start
+slug: Web/CSS/inset-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inset-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>inset-inline-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-inline-start: 10%;
+
+/* キーワード値 */
+inset-inline-start: auto;
+
+/* グローバル値 */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+</pre>
+
+<p><code>inset-inline-start</code> と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-inline-start</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_start_offset" name="Setting_inline_start_offset">インライン方向の先頭のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_start_offset", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-inline-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-end")}}</li>
+ <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset-inline/index.html b/files/ja/web/css/inset-inline/index.html
new file mode 100644
index 0000000000..d42839c42b
--- /dev/null
+++ b/files/ja/web/css/inset-inline/index.html
@@ -0,0 +1,119 @@
+---
+title: inset-inline
+slug: Web/CSS/inset-inline
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/inset-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inset-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+inset-inline: 10% 5%;
+
+/* キーワード値 */
+inset-inline: auto;
+
+/* グローバル値 */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+</pre>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("inset-inline-end")}}</li>
+ <li>{{cssxref("inset-inline-start")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset-inline</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_start_and_end_offsets" name="Setting_inline_start_and_end_offsets">インライン方向の先頭と末尾のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_start_and_end_offsets", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset-inline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>対応する物理的な一括指定: {{cssxref("inset")}}</li>
+ <li>対応するブロック方向の一括指定: {{cssxref("inset-block")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/inset/index.html b/files/ja/web/css/inset/index.html
new file mode 100644
index 0000000000..26d8ca411c
--- /dev/null
+++ b/files/ja/web/css/inset/index.html
@@ -0,0 +1,115 @@
+---
+title: inset
+slug: Web/CSS/inset
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inset</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。</p>
+
+<p><em>CSS 論理的プロパティ</em>の仕様書で定義されているものですが、<em>論理的</em>なオフセットを定義するものではありません。これは<em>物理的</em>なオフセットであり、要素の書字方向やテキストの向きには関係がありません。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+inset: 10px; /* すべての辺に適用される値 */
+inset: 4px 8px; /* 上/下 左/右 */
+inset: 5px 15px 10px; /* 上 左/右 下 */
+inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
+
+/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する &lt;percentage&gt; */
+inset: 10% 5% 5% 5%;
+
+/* キーワード値 */
+inset: auto;
+
+/* グローバル値 */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>inset</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_offsets_for_an_element" name="Setting_offsets_for_an_element">要素のオフセットの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;span class="exampleText"&gt;テキストの例&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.exampleText {
+  writing-mode: sideways-rl;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_offsets_for_an_element", 140, 140)}}</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("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.inset")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>個別指定のボックスのオフセットプロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
+ <li>対応する論理プロパティの一括指定: {{cssxref("inset-block")}} および {{cssxref("inset-inline")}}</li>
+ <li>{{cssxref("margin")}} 一括指定の複数値の構文</li>
+</ul>
diff --git a/files/ja/web/css/integer/index.html b/files/ja/web/css/integer/index.html
new file mode 100644
index 0000000000..ccb11660cd
--- /dev/null
+++ b/files/ja/web/css/integer/index.html
@@ -0,0 +1,95 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - Web
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;integer&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。 integer は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;integer&gt;</code> データ型は数桁の10進数、 0 から 9 までを含み、任意でその前に単一の <code>+</code> または <code>-</code> の符号が付きます。 integer に関連付けられた単位はありません。</p>
+
+<div class="note">公式には、有効な <code>&lt;integer&gt;</code> 値の範囲は決められていません。 Opera では 2<sup>15</sup>-1、 IE では2<sup>20</sup>-1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">LC 段階の 2012 年 4 月の最新の決定</a>では、 [-2<sup>27</sup>-1; 2<sup>27</sup>-1] でしたが、# しかし 2<sup>24</sup>-1 や 2<sup>30</sup>-1 のような他の値も<a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">提案されていました</a>。しかし、最新の仕様書では範囲を定めなくなりました。</div>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーション時には、 <code>&lt;integer&gt;</code> データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は <a href="http://ja.wikipedia.org/wiki/%E5%BA%8A%E9%96%A2%E6%95%B0%E3%81%A8%E5%A4%A9%E4%BA%95%E9%96%A2%E6%95%B0">floor 関数</a>を使って求められます。補間の速度は、アニメーションに結びつけられた <a href="/ja/docs/Web/CSS/timing-function">timing function</a> で決められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_integers" name="Valid_integers">妥当な integer の値</h3>
+
+<pre>12          正の整数 (先頭の + なし)
++123        正の整数 (先頭の + あり)
+-456        負の整数
+0           ゼロ
++0          ゼロ、先頭の + つき
+-0          ゼロ、先頭の - なし
+</pre>
+
+<h3 id="Invalid_integers" name="Invalid_integers">不正な integer の値</h3>
+
+<pre>12.0        整数を表していますが、これは &lt;number&gt; であり、&lt;integer&gt; ではありません。
+12.         小数点を含んではいけません。
++---12      先頭に置ける +/- は 1 つだけです。
+ten         文字は使えません。
+_5          記号は使えません。
+\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
+\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
+3e4         指数表記は使えません。
+</pre>
+
+<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('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>重要な変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>明示的な定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>暗黙的な定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.types.integer")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/isolation/index.html b/files/ja/web/css/isolation/index.html
new file mode 100644
index 0000000000..6c7882d0c8
--- /dev/null
+++ b/files/ja/web/css/isolation/index.html
@@ -0,0 +1,114 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - CSS
+  - CSS プロパティ
+  - 合成と混合
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>isolation</code></strong> プロパティは、要素が新しい{{glossary("stacking context", "重ね合わせコンテキスト")}}を生成する必要があるかどうかを定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは {{cssxref("mix-blend-mode")}} との組み合わせで使用すると特に有用です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+isolation: auto;
+isolation: isolate;
+
+/* グローバル値 */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p><code>isolation</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>何れかのプロパティが必要な要素に適用された場合にのみ、新しい重ね合わせコンテキストが作成されます。</dd>
+ <dt><code>isolate</code></dt>
+ <dd>新しい重ね合わせコンテキストが必ず作成されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', 230, 230) }}</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('Compositing', '#isolation', 'Isolation') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.isolation")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/justify-content/index.html b/files/ja/web/css/justify-content/index.html
new file mode 100644
index 0000000000..71fabed030
--- /dev/null
+++ b/files/ja/web/css/justify-content/index.html
@@ -0,0 +1,215 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+  - justify-content
+  - place-content
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-content</code></strong> プロパティは、フレックスコンテナーの{{Glossary("Main Axis", "主軸")}}およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。</p>
+
+<p>このデモはグリッドレイアウトを用いていくつかの値を紹介します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>長さや自動マージンが適用された後に配置が行われることから、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスレイアウト</a>で {{cssxref("flex-grow")}} が <code>0</code> ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 位置による配置 */
+justify-content: center;     /* アイテムを中央に寄せる */
+justify-content: start;      /* アイテムを先頭に寄せる */
+justify-content: end;        /* アイテムを末尾に寄せる */
+justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
+justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
+justify-content: left;       /* アイテムを左端に寄せる */
+justify-content: right;      /* アイテムを右端に寄せる */
+
+/* ベースラインによる配置 */
+/* justify-content はベースラインの値を取りません */
+
+/* 通常の配置 */
+justify-content: normal;
+
+/* 均等配置 */
+justify-content: space-between; /* 各アイテムを均等に配置し
+                                   最初のアイテムは先頭に寄せ、
+                                   最後のアイテムは末尾に寄せる */
+justify-content: space-around;  /* 各アイテムを均等に配置し
+                                   各アイテムの両側に半分の大きさの
+                                   間隔を置く */
+justify-content: space-evenly;  /* 各アイテムを均等に配置し
+                                   各アイテムの周りに同じ大きさの間隔を置く */
+justify-content: stretch;       /* 各アイテムを均等に配置し
+                                   サイズが 'auto' であるアイテムは、
+                                   コンテナーに合わせて引き伸ばす */
+
+/* あふれた場合の配置 */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* グローバル値 */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <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>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>normal</code></dt>
+ <dd>各アイテムは <code>justify-content</code> の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの <code>stretch</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>space-between</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。</dd>
+ <dt><code>space-around</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。</dd>
+ <dt><code>stretch</code></dt>
+ <dd>
+ <p>各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が <code>auto</code> のアイテムは、 {{cssxref("max-height")}}/{{cssxref("max-width")}} (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。</p>
+
+ <div class="blockIndicator note">
+ <p><strong>メモ:</strong> <code>stretch</code> はフレキシブルボックス (フレックスボックス) は対応していません。</p>
+ </div>
+ </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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+  justify-content: space-between; /* live sample で変更可能 */
+}
+
+#container &gt; div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="justifyContent"&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", function (evt) {
+  document.getElementById("container").style.justifyContent =
+      evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 140)}}</p>
+
+<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-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>[ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<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>
+</ul>
diff --git a/files/ja/web/css/justify-items/index.html b/files/ja/web/css/justify-items/index.html
new file mode 100644
index 0000000000..b3788140b8
--- /dev/null
+++ b/files/ja/web/css/justify-items/index.html
@@ -0,0 +1,232 @@
+---
+title: justify-items
+slug: Web/CSS/justify-items
+tags:
+  - CSS
+  - CSS Box Alignment
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/justify-items
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-items</code></strong> プロパティは、ボックスのすべてのアイテムに既定の {{CSSxRef("justify-self")}} を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p>
+
+<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 notranslate">/* 基本キーワード */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* 位置による配置 */
+justify-items: center;     /* 中央付近にアイテムを集める */
+justify-items: start;      /* 先頭側にアイテムを集める */
+justify-items: end;        /* 末尾側にアイテムを集める */
+justify-items: flex-start; /* 'start' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: flex-end;   /* 'end' と同等です。なお、 justify-items はフレックスボックスレイアウト内では無視されます。 */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* 左側にアイテムを集める */
+justify-items: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* 従来の配置 */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* グローバル値 */
+justify-items: inherit;
+justify-items: initial;
+justify-items: 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>位置による配置: <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> のうちの一つ。加えて任意で <code>safe</code> または <code>unsafe</code>。</li>
+ <li>歴史的な配置: <code>legacy</code> キーワードに続いて、 <code>left</code> または <code>right</code> のどちらかの値。</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>
+ <dt><code>legacy</code></dt>
+ <dd>値がボックスの子孫に継承されるようにします。なお、子孫が <code>justify-self: auto</code> の値を持っている場合、 <code>legacy</code> キーワードは子孫からは考慮されず、関連付けられた <code>left</code>, <code>right</code>, <code>center</code> の値のみが継承されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_demonstration" name="Simple_demonstration">単純なデモ</h3>
+
+<p>次の例では、シンプルな 2 x 2 のグリッドレイアウトを示します。初期状態では、グリッドコンテナーには <code>justify-items</code> の値として <code>stretch</code> (既定値) が与えられており、グリッドアイテムはそのセルの幅全体に広がっています。</p>
+
+<p>しかし、グリッドコンテナの上にマウスカーソルを置いたり、タブを押したりすると、グリッドアイテムには <code>justify-items</code> の値である <code>center</code> が与えられ、グリッドアイテムの幅はコンテンツの幅と同じだけ広がり、セルの中心に整列します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article class="container" tabindex="0"&gt;
+  &lt;span&gt;First child&lt;/span&gt;
+  &lt;span&gt;Second child&lt;/span&gt;
+  &lt;span&gt;Third child&lt;/span&gt;
+  &lt;span&gt;Fourth child&lt;/span&gt;
+&lt;/article&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">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;
+}
+
+article:hover, article:focus {
+  justify-items: center;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+  text-align: center;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article {
+  margin: 20px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}</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 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.justify-items.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("place-items")}} 一括指定プロパティ</li>
+ <li>{{CSSxRef("justify-self")}} プロパティ</li>
+ <li>{{CSSxRef("align-items")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/justify-self/index.html b/files/ja/web/css/justify-self/index.html
new file mode 100644
index 0000000000..a319c539c3
--- /dev/null
+++ b/files/ja/web/css/justify-self/index.html
@@ -0,0 +1,164 @@
+---
+title: justify-self
+slug: Web/CSS/justify-self
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - リファレンス
+translation_of: Web/CSS/justify-self
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>justify-self</code></strong> プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティの効果は、現在のレイアウトモードに依存します。</p>
+
+<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">/* 基本キーワード */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* 位置による配置 */
+justify-self: center;     /* 中央付近にアイテムを集める */
+justify-self: start;      /* 開始側にアイテムを集める */
+justify-self: end;        /* 終端側にアイテムを集める */
+justify-self: flex-start; /* 開始側にフレックスアイテムを集める */
+justify-self: flex-end;   /* 終端側にフレックスアイテムを集める */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* 左側にアイテムを集める */
+justify-self: right;      /* 右側にアイテムを集める */
+
+/* ベースラインの配置 */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* あふれたときの配置 (位置による配置時のみ) */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* グローバル値 */
+justify-self: inherit;
+justify-self: initial;
+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>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<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>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<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>
diff --git a/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html
new file mode 100644
index 0000000000..ac905fc918
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/breadcrumb_navigation/index.html
@@ -0,0 +1,56 @@
+---
+title: パンくずナビゲーション
+slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+tags:
+  - CSS
+  - Layout
+  - Navigation
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">パンくず（Breadcrumb）ナビゲーションは、来た道をたどって開始ページまで戻ることができるパンくずリストを提供することによって、ユーザーがウェブサイト内の自分の位置を理解するのに役立ちます。</span></p>
+
+<p><img alt="リンクを区切り文字を付けてインラインで表示" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目は通常、個々のページ間の階層を示すために、区切り文字を付けてインラインで表示されます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは単純なフレックスレイアウトを使用してレイアウトされており、CSS の1行でナビゲーションがどのように行われるかを示しています。 区切り文字は CSS 生成コンテンツを使用して追加されます。 区切り文字は好きなものに変更することができます。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p><code>aria-label</code> 属性および <code>aria-current</code> 属性を使用して、このナビゲーションが何であるか、そして現在のページが構造のどこにあるのかをユーザーが理解できるようにしています。 詳細については関連リンクを参照してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox" name="Flexbox">フレックスボックス</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">パンくずリストの提供</a>（英語）</li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">aria-current 属性の使用</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/card/index.html b/files/ja/web/css/layout_cookbook/card/index.html
new file mode 100644
index 0000000000..4c6d015537
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/card/index.html
@@ -0,0 +1,86 @@
+---
+title: カード
+slug: Web/CSS/Layout_cookbook/Card
+tags:
+  - CSS
+  - CSS Grid
+  - card
+  - cookbook
+  - css layout
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><span class="seoSummary">このパターンは、オプションのフッター付きの「カード」コンポーネントのリストです。</span></p>
+
+<p><img alt="1行に3つのカードコンポーネント" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>カードコンポーネントには、見出し、画像、コンテンツ、フッターなど、さまざまなコンテンツを含めることができます。</p>
+
+<p>各カードは同じ高さでなければならず、フッターはカードの一番下に固定する必要があります。</p>
+
+<p>カードのコレクションに追加すると、カードは2次元に並ぶ必要があります。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このカードは、1次元レイアウトであるにもかかわらず <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>を使用してレイアウトされています。 これは、グリッドトラックに対してコンテンツのサイズ変更の使用が可能になるためです。 単一列グリッドを設定するときは、次のようにします。</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>見出しトラックは {{cssxref("max-content")}} に設定されているため、伸縮は行われません。 画像は 200 ピクセルの高さのトラック内に収めることにしました。 それから、その次のトラック（コンテンツが存在する場所）を <code>1fr</code> に設定します。 これは、残りのスペースを占有することを意味します。</p>
+
+<p>暗黙的にグリッドに作成された行はデフォルトで自動サイズ変更されるため、トラックにフッターがある場合は自動サイズ変更されます。 したがって、これは追加されたコンテンツにフィットします。</p>
+
+<div class="note">
+<p><strong>注</strong>: 各カードは独立したグリッドであるため、別々のカードのさまざまな要素は互いに整列しません。 グリッドレベル 2 で提案されたサブグリッド機能は、この問題を解決するでしょう。</p>
+</div>
+
+<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を使ってカードをレイアウトすることもでき、その場合は、コンテンツ領域を大きくし、他の項目は大きくしないようにする必要があります。 これはカードをレイアウトするための合理的な方法ですが、私は、項目に規則を追加する必要があるのではなく、コンテナからトラックを制御できることをやや好みます。</p>
+
+<p>全体的なレイアウトのためにフレックスボックスを使うことができますが、これは最終的なフレックス行の上で伸縮するカードをもたらすでしょう。 あるいは、<a href="/ja/docs/Web/CSS/CSS_Columns">CSS 段組み</a>を使用することもできます — これにより、カードが段の上にレイアウトされることになりますが、これは問題になる場合もあれば、そうでない場合もあります。</p>
+
+<p>これらの各レイアウト方法のデモについては、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">欄のレシピ</a>を参照してください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>カードの内容によっては、アクセシビリティを高めるためにできること、あるいはすべきことがあるかもしれません。 これらの問題のとても詳細な説明については、Heydon Pickering による<a href="https://inclusive-components.design/cards/">包括的なコンポーネント: カード</a>（英語）を参照してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}、{{Cssxref("grid-template-rows")}}、{{Cssxref("grid-gap")}}</li>
+ <li><a href="https://inclusive-components.design/cards/">包括的なコンポーネント: カード</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/center_an_element/index.html b/files/ja/web/css/layout_cookbook/center_an_element/index.html
new file mode 100644
index 0000000000..c813da5cbe
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/center_an_element/index.html
@@ -0,0 +1,59 @@
+---
+title: 要素を中央に配置
+slug: Web/CSS/Layout_cookbook/Center_an_element
+tags:
+  - CSS
+  - Layout
+  - Recipe
+  - box alignment
+  - centering
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Center_an_element
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このレシピでは、あるボックスを別のボックスの中央に配置する方法がわかります。 フレックスボックスを使用する前は、水平方向と垂直方向の両方を中央に配置するのは困難でしたが、ボックス配置プロパティを使用できるようになり簡単になりました。</p>
+
+<p><img alt="大きなボックスの中央に配置された要素" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目を別のボックスの縦横の中央に配置する。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>あるボックスを別のボックスの中央に配置するには、コンテナをフレックスコンテナにします。 次に、ブロック軸（交差軸）の中央に配置するには {{cssxref("align-items")}} を <code>center</code> に設定し、インライン軸（主軸）の中央に配置するには {{cssxref("justify-content")}} を <code>center</code> に設定します。</p>
+
+<p>ここで使用されているボックス配置プロパティはブロックレイアウトにも適用されるように指定されているため、将来的には親をフレックスコンテナに変える必要なしに要素を中央に配置できるようになるかもしれません。 ただし、現在ブロックレイアウトでのボックス配置プロパティのサポートは制限されているため、現在フレックスボックスを使用して中央に配置するのがこれを達成するための最も堅牢な方法です。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="align-items" name="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+
+<ul>
+ <li><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">CSS ボックス配置のガイド</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/column_layouts/index.html b/files/ja/web/css/layout_cookbook/column_layouts/index.html
new file mode 100644
index 0000000000..868f6d0610
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/column_layouts/index.html
@@ -0,0 +1,132 @@
+---
+title: 欄レイアウト
+slug: Web/CSS/Layout_cookbook/Column_layouts
+tags:
+  - CSS
+  - Layout
+  - Multi-col
+  - columns
+  - cookbook
+  - flexbox
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">多くの場合、いくつかの欄を含むレイアウトを作成する必要があります。 CSS にはこれを行うためのいくつかの方法があります。 グリッド、フレックスボックス、段組みのレイアウトのどれを使用するかは、達成しようとしている内容によって異なります。 このレシピでは、これらのオプションについて説明します。</span></p>
+
+<p><img alt="コンテナ内に2つの欄を持つ3種類のレイアウトスタイル。" src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+
+<h2 id="Requirements" name="Requirements">必要条件</h2>
+
+<p>欄（columns）で達成したいと思うかもしれないデザインパターンがいくつかあります。</p>
+
+<ul>
+ <li>新聞のような欄（段）に分割されたコンテンツの連続したスレッド。</li>
+ <li>すべての高さが等しい、欄（列）として配置された一並びの項目。</li>
+ <li>行と列で並べられた複数行の列。</li>
+</ul>
+
+<h2 id="The_recipes" name="The_recipes">レシピ</h2>
+
+<p>要件を満たすためには、さまざまなレイアウト方法を選択する必要があります。</p>
+
+<h3 id="A_continuous_thread_of_content_—_multi-column_layout" name="A_continuous_thread_of_content_—_multi-column_layout">コンテンツの連続したスレッド — 段組みレイアウト</h3>
+
+<p>段組みレイアウト（multi-column layout、multicol）を使用して段を作成した場合、テキストは各段を順番に埋める連続したストリームのままです。 段はすべて同じサイズである必要があり、個々の段または個々の段のコンテンツをターゲットにすることはできません。</p>
+
+<p>{{cssxref("column-gap")}} プロパティを使用して段間のギャップを制御したり、{{cssxref("column-rule")}} を使用して段間に線を追加したりできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>次の場合に段組みを使用してください。</p>
+
+<ul>
+ <li>テキストを新聞のような段に表示したい。</li>
+ <li>段に分割したい小さい項目のセットを持っている。</li>
+ <li>個々の欄ボックスを装飾のターゲットにする必要がない。</li>
+</ul>
+
+<h3 id="A_single_row_of_items_with_equal_heights_—_flexbox" name="A_single_row_of_items_with_equal_heights_—_flexbox">同じ高さの単一行の項目 — フレックスボックス</h3>
+
+<p>フレックスボックス（flexbox）は、{{cssxref("flex-direction")}} を <code>row</code> に設定することでコンテンツを列に分割するために使用できますが、フレックスボックスはフレックスコンテナ内の要素をターゲットにし、それぞれの直接の子を新しい列に配置します。 これは段組みで見たものとは異なる振る舞いです。</p>
+
+<p>フレックス項目間に規則を追加する方法は現在ありません。 また、{{cssxref("column-gap")}} および {{cssxref("row-gap")}} プロパティに対するブラウザーのサポートは制限されています。 したがって、項目間にギャップを作成するには、マージンを使用します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>フレックスボックスを使用して、コンテナの {{cssxref("flex-wrap")}} プロパティを <code>wrap</code> に設定することで、フレックス項目が新しい行に折り返されるレイアウトを作成することもできます。 これらの新しいフレックスラインは、そのラインに沿ってのみスペースを配分します — 以下の例に示すように、新しいラインの項目は上のラインの項目と整列しません。 これがフレックスボックスが一次元として記述されている理由です。 これは、行または列としてレイアウトを制御するために設計されていますが、同時に両方ではありません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>次の場合にフレックスボックスを使用してください。</p>
+
+<ul>
+ <li>単一行または単一列の項目。</li>
+ <li>項目をレイアウトした後に交差軸（cross axis）上で整列をしたいとき。</li>
+ <li>ラップされた項目がそれらのラインに沿ってだけスペースを共有し、他のラインの項目と並ばないことに満足しているとき。</li>
+</ul>
+
+<h3 id="Lining_items_up_in_rows_and_columns_—_grid_layout" name="Lining_items_up_in_rows_and_columns_—_grid_layout">項目を行と列に並べる — グリッドレイアウト</h3>
+
+<p>欲しいものが項目が行と列に並ぶレイアウトであるならば、CSS グリッドレイアウトを選ぶべきです。 グリッドレイアウトは、フレックスボックスがフレックスコンテナの直接の子に作用するのと同様の方法で、グリッドコンテナの直接の子に作用しますが、CSS グリッドでは、項目を行と列に並べることができます — これは2次元として記述されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>次の場合にグリッドを使用してください。</p>
+
+<ul>
+ <li>複数行または複数列の項目用。</li>
+ <li>ブロック軸とインライン軸の項目を揃えることができるようにする場合。</li>
+ <li>項目を行と列に整列させたい場合。</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+
+
+<h4 id="column-width" name="column-width">column-width</h4>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h4 id="column-rule" name="column-rule">column-rule</h4>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h4 id="flex" name="flex">flex</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h4 id="flex-wrap" name="flex-wrap">flex-wrap</h4>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトのガイド</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックスのガイド</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウトのガイド</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
new file mode 100644
index 0000000000..e420bcc7b3
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html
@@ -0,0 +1,66 @@
+---
+title: Cookbook template
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+tags:
+  - CSS
+  - Contribute
+  - Layout
+  - Template
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+---
+<p>{{CSSRef}}</p>
+
+<div class="note"><strong>注</strong>: これは CSS 料理帳のページのテンプレートページです。 新しい料理帳のページを作成するときに、これを生のテンプレートとして使用してください。<br>
+<em>イタリック体のコメントは、テンプレートの一部の使い方に関する情報です。</em></div>
+
+<p class="summary"><span class="seoSummary"><em>このレシピが解決する問題の説明または、あなたが実証しているパターンの説明。</em></span></p>
+
+<h2 id="Requirements">Requirements</h2>
+
+<p><em>このパターンには何を含める必要がありますか、それともどのような問題を解決する必要がありますか？ それをここにリストします。</em></p>
+
+<h2 id="Recipe">Recipe</h2>
+
+<p><em>下の例のパスを変更して、マージされた例を指すようにします。 最後のパラメータは実際のサンプルの高さで、必要に応じて変更できます。</em></p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<p><em>マージされたダウンロードバージョンを指すようにリンクを変更します。</em></p>
+
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Download the example</a></p>
+
+<h2 id="Choices_made">Choices made</h2>
+
+<p><em>パターンを作成したときの決定を説明してください。 なぜあなたは特定の方法を選んだのですか？ あなたがここに追加の例を追加したい場合 — 例えば代替のあるバージョン — ぜひ追加してください。 パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。</em></p>
+
+<h2 id="Useful_fallbacks_or_alternative_methods">Useful fallbacks or alternative methods</h2>
+
+<p><em>レシピを構築するための有用な代替方法、またはサポートしていないブラウザーをサポートする必要がある場合に使用する代替レシピがある場合は、それらをここの別のセクションに含めてください。</em></p>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<p><em>アクセシビリティに関して注意すべき点がある場合に、これを含めます。 あなたのパターンに関係がなければ、これは省略することができます。</em></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The various layout methods have different browser support. See the charts below for details on basic support for the properties used.</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p><em>以下の例で align-items を含めたように、使用した重要なプロパティの互換データ（compat data）を含めます。</em></p>
+
+<h4 id="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><em>関連プロパティのリンク: {{Cssxref("example-property")}}</em></li>
+ <li><em>コンテキストでプロパティを使用方法を示す記事へのリンク: "Using … article"</em></li>
+ <li><em>非常に良い外部リンク。 外部リンクを恐れてはいけませんが、それらは傑出したものであるべきであり、細かい点を述べるだけのものではありません。</em></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html
new file mode 100644
index 0000000000..ac347af90a
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/contribute_a_recipe/index.html
@@ -0,0 +1,106 @@
+---
+title: レシピを投稿する
+slug: Web/CSS/Layout_cookbook/Contribute_a_recipe
+tags:
+  - CSS
+  - Contribute
+  - Layout
+  - Templates
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">レイアウト料理帳の一例を提供したい場合は、このページでは、あなたの例を公開するための手順について説明します。</span></p>
+
+<h2 id="What_makes_a_good_recipe" name="What_makes_a_good_recipe">何が良いレシピになりますか？</h2>
+
+<p><strong>あらゆる便利なウェブデザインのパターンの最も単純なバージョンです</strong>。 含まれている CSS の各行は、パターンを示すのを助けるためにそこにあるべきですので、例をきれいに見せるためだけのものは省略してください。 アイデアは、誰かがパターンを手に取り、自分のスタイルでサイトでそれを使用できるということです。</p>
+
+<h2 id="Steps_to_publish_a_recipe" name="Steps_to_publish_a_recipe">レシピを公開する手順</h2>
+
+<p>英語で考えるんだ！ — en-US のページを作ります。</p>
+
+<p>GitHub のアカウントで MDN のアカウントを作ります。</p>
+
+<p>MDN の編集機能はもちろん GitHub と Git の扱いにも慣れている必要があります。</p>
+
+<p>レシピの名前とスラグ、例に使うファイル名を以下を読みながら決めます。</p>
+
+<p>レシピは以下で構成されています。</p>
+
+<ol>
+ <li>実例（live example）は、<a href="https://github.com/mdn/css-examples">CSS Examples GitHub リポジトリ</a>に保存します。</li>
+ <li>その例のダウンロード可能なバージョンも、CSS Examples リポジトリに保存します。</li>
+ <li><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a>の中のページで、詳細は次のとおりです。
+  <ol>
+   <li> 要件（Requirements）</li>
+   <li>レシピ（Recipe）</li>
+   <li>行った選択（Choices made）</li>
+   <li>便利な代替方法（Useful fallbacks or alternative methods）</li>
+   <li>アクセシビリティへの懸念（Accessibility concerns）</li>
+   <li>ブラウザー実装状況（Browser compatibility）</li>
+   <li>関連情報（See also）</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Build_your_pattern" name="1._Build_your_pattern">1. パターンを作ります</h3>
+
+<p>あなたの例をレシピに変える前に、まずパターンを単純な HTML ページとして作成します。 何を示そうとしているのかを考え、できるだけ単純にします。 誰もがこれらに精通しているわけではないので、（BEM など）特定の CSS の規約を使用しないでください。 必要以上に複雑に見えることがあります。</p>
+
+<p>HTML と CSS が有効であることを確認し、複数のブラウザーでテストしてください。 どこでもサポートされていない CSS プロパティを使用していても問題ありません！ ページを作成するときにブラウザーのサポート情報を含めることができます。 場合によっては、代替のサポートを含む、例の2番目のバージョンを作成すると便利な場合があります。</p>
+
+<h3 id="2._Creating_a_live_example" name="2._Creating_a_live_example">2. 実例を作成する</h3>
+
+<p>料理帳のページや MDN の他の場所で見ることができる実例は、訪問者が必要なすべてのコードに圧倒されることなくコードで遊んで関連部分を変更することを可能にします。 あなたのレシピは一つ以上の例として示されます。</p>
+
+<p><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a>をフォークして（右上の Fork ボタンを押すと自分のアカウントにコピーが作られます）、<code>css-cookbook</code> フォルダを調べてください。 出発点としてコピーできる <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a></code> ファイルがあります。 これを <code>css-cookbook</code> ディレクトリにあなたのパターンにとって意味のある名前で保存してください。 テンプレート（template）は、さまざまなパーツを適切な場所に追加するのに役立つようにコメントされています。</p>
+
+<p>これの重要なパーツは次のとおりです。</p>
+
+<p>エディタパネルのスタイル用のスタイルシート、基本的な body のスタイル、およびエディタ機能用の JavaScript ファイルがあります。 これらのファイルはそのままにしておきます。</p>
+
+<p>head の中には2つのスタイルのブロックがあります。 1つ目は、ページへの訪問者がこの例で遊ぶために変更する必要がないものです。 2つ目は、実例で遊びたい項目のどれかです。 通常、1つ目のブロックに実例の CSS をすべて追加してから、2番目のブロックに移動する必要がある規則のセットを選択します。 2番目のブロックの規則は、パターンの基本となる規則、おそらくユーザーが CSS の値を変更してパターンの更新を確認できるような規則にする必要があります。</p>
+
+<p>コンポーネント用の HTML を2回追加する必要があります。 最初に <code>preview</code> クラスの <code>section</code> の中に、次に <code>playable-html</code> クラスの <code>textarea</code> の中にです。</p>
+
+<p>head の中の2番目のブロックからの <code>editable</code> クラスの CSS も、<code>playable-css</code> クラスの <code>textarea</code> にコピーする必要があります。</p>
+
+<p>単純な例は <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a></code> で、これは<a href="/ja/docs/Web/CSS/Layout_cookbook/Center_an_element">要素を中央に配置</a>のページに埋め込まれています。 これを使用して、さまざまな細部を正しく追加する方法を確認できます。</p>
+
+<p>リポジトリをフォークしたので、私たちの CSS と JavaScript ファイルをあなたの例と一緒に持っているなら、ブラウザーであなたの実例を開くと、ページに含まれている時と全く同じように動くのを見るでしょう。</p>
+
+<h4 id="Useful_tips" name="Useful_tips">役に立つヒント</h4>
+
+<ol>
+ <li><code>textarea</code> 内で CSS と HTML をインデントしないでください。 代わりにラインの先頭にぶつけてください。 レンダリングすると見栄えがよくなります。</li>
+ <li>必要な画像がある場合は、例と共にディレクトリにポップします。 または、すでにそこにあるものを使用することを歓迎します。</li>
+ <li>インラインスタイルで高さを変更して、<code>textarea</code> の高さを調整できます。</li>
+</ol>
+
+<h3 id="3._Create_a_downloadable_version" name="3._Create_a_downloadable_version">3. ダウンロード版を作成する</h3>
+
+<p>実例にはすべての実例コードが含まれているので、そのすべてを含まない簡単な例を訪問者に提供したいと思います。 実例を <code>--download</code> を付けてコピーしてください。 例えば、<code>center.html</code> には <code>center--download.html</code> という名前のダウンロードバージョンがあります。 このファイルはあなたの最初の例と似ています。 これは単一の HTML ページとしてのパターンの基本バージョンです。 含まれたスタイルシートにある body の CSS 規則を含めると便利かもしれません。 <code><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a></code> を見ればこれらは出発点として含まれています。</p>
+
+<h3 id="4._Make_a_Pull_Request_with_your_example" name="4._Make_a_Pull_Request_with_your_example">4. あなたの例でプルリクエストをする</h3>
+
+<p><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a>でプルリクエスト（Pull Request、PR）を作成してください。 このようにして、ページを作成する前に必要になる可能性のある例の変更を手助けすることができます。 さらに、この例は実際のものである必要があり、最初に作成するのが理にかなっています。 プルリクエストにパターンの説明とあなたが何を示しているかを含めてください。</p>
+
+<h3 id="5._Create_your_page" name="5._Create_your_page">5. ページを作成する</h3>
+
+<p>あなたの例がマージされたら、あなたのページを作成することができます。 そのためには<a href="/ja/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page-creation_permissions">ページ作成権限</a>付き MSDN アカウントが必要です。 その後、そのページを CSS 料理帳のページのサブページとして作成できます。 <a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">ここに料理帳のページ用のテンプレートがあります</a>。</p>
+
+<p>テンプレートは各セクションの一部になるべきものを説明し、より多くの助けを得るために他の料理帳の例を参照することができます。 これらのページのいずれかの編集ボタンをクリックすると、実装状況データを埋め込むために使用されるマクロや実例などが表示されます。</p>
+
+<p>MDN Wiki の使用に関する一般的なガイダンスが必要な場合は、こちらのヘルプページを参照してください。</p>
+
+<p>質問をする必要がある場合、または誰かにあなたのページを見てもらいたい場合は、<a href="https://discourse.mozilla.org/c/mdn">MDN 談話</a>（Discourse）を利用するか、<a href="/ja/docs/MDN/Community/Conversations#Chat_in_IRC">IRC でチャット</a>してください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">料理帳ページのテンプレート</a></li>
+ <li><a href="https://github.com/mdn/css-examples">CSS Examples リポジトリ</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/grid_wrapper/index.html b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html
new file mode 100644
index 0000000000..4d49e35c4d
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/grid_wrapper/index.html
@@ -0,0 +1,90 @@
+---
+title: グリッドラッパー
+slug: Web/CSS/Layout_cookbook/Grid_wrapper
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - cookbook
+  - recipes
+translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">このパターンは、中央のラッパー内でグリッドのコンテンツを整列させるのに便利ですが、必要に応じて項目を脱出させて親要素やページの端に整列させることもできます。</span></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>グリッド上に配置された項目は、水平方向の中央に配置された最大幅のラッパーやグリッドの外側の端に揃えることができます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">このレシピでは、CSS グリッドの {{cssxref("minmax")}} 関数を使用して、{{cssxref("grid-template-columns")}} プロパティでグリッドトラックのサイズを定義しています。 最大幅を持つ中央の（グリッドレイアウトに使う6つの）列には、0 以上の最小値と、列トラックが大きくなれる最大サイズを指定する最大値を設定できます。 数値の単位（ピクセル、em、rem）を使用すると、中央のラッパーの固定最大サイズが作成されますが、パーセント値またはビューポート単位を使用すると、このラッパーはそのコンテキストに応じて拡大または縮小します。</p>
+
+<p dir="ltr">外側の2つの列の最大サイズは <code>1fr</code> です。 つまり、グリッドコンテナ内の残りの使用可能スペースを埋めるようにそれぞれが拡大されます。</p>
+
+<h2 id="Useful_fallbacks_or_alternative_methods" name="Useful_fallbacks_or_alternative_methods">便利な代替方法</h2>
+
+<p>このレシピをページレベルで使用するときは、コンテンツを水平方向に中央揃えするために、次のように左右の <code>auto</code> の {{cssxref("margin")}} とともに <code>max-width</code> を設定すると便利です。</p>
+
+<pre class="brush: css">.grid {
+  max-width: 1200px;
+  margin: 0 auto; // コンテナを水平方向に中央揃え
+}
+
+/* ブラウザーがグリッドをサポートしている場合は、max-width と margin を取り除く */
+@supports (display: grid) {
+  .grid {
+    display: grid;
+    /* 他のグリッドのコードはここへ */
+    max-width: none;
+    margin: 0;
+  }
+}</pre>
+
+<p><code>full-width</code> 項目をビューポートの端まで「脱出」させるには、次のトリックを使用できます（<a href="https://una.im/">Una Kravets</a> の好意による）。</p>
+
+<pre class="brush: css">.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}</pre>
+
+<p>これは、正確なグリッド上で項目を簡単に整列させることができるという利点が必要ない場合に限り、レイアウトの適切な近似値を提供します。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>グリッドを使用すると（理由の範囲内で）項目を適切な場所に配置できますが、CSS グリッドを使用して項目を配置する場合は、基になるマークアップが論理的な順序に従うことが重要です（詳細については、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドのレイアウトとアクセシビリティ</a>を参照）。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<h4 id="grid-template-columns" name="grid-template-columns">grid-template-columns</h4>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">MDN の CSS グリッドレイアウト</a></li>
+ <li>記事:<a href="https://css-irl.info/more-flexibility-with-minmax/"> CSS グリッド: minmax() によるさらなる柔軟性</a>（英語）</li>
+ <li>記事: <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">CSS グリッドを使った脱出</a>（英語）</li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/web/css/layout_cookbook/index.html b/files/ja/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..9b98903a2b
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/index.html
@@ -0,0 +1,86 @@
+---
+title: CSS レイアウト料理帳
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - cookbook
+  - レイアウト
+  - レシピ
+  - 料理帳
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">CSS レイアウト料理帳は、よくあるレイアウトパターンや、あなた自身のサイトに実装する必要がある可能性がある事柄のレシピを共有するためのものです。 プロジェクトの出発点として使うことができるコードを提供することに加えて、これらのレシピは様々な方法のレイアウト仕様書を使用することができることに光を当て、開発者として選択ができるようにします。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: CSS のレイアウトが初めてならば、最初に <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト学習モジュール</a>を見て、ここのレシピを活用するのに必要な基本的な背景知識を得た方が良いかもしれません。</p>
+</div>
+
+<h2 id="The_Recipes" name="The_Recipes">レシピ</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">レシピ</th>
+   <th scope="col">説明</th>
+   <th scope="col">レイアウト方法</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">メディアオブジェクト</a></td>
+   <td>一方が画像でもう一方が説明テキストである二列のボックス。 例えば Facebook の投稿やツイート。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, {{cssxref("float")}} による代替, {{cssxref("fit-content")}} による寸法制御</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">欄</a></td>
+   <td>段組みレイアウト、フレックスボックス、グリッドの選択</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, <a href="/ja/docs/Web/CSS/CSS_Columns">段組み</a>, <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Center_an_element">要素を中央に配置</a></td>
+   <td>アイテムを水平および垂直方向に中央に配置する方法</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Sticky_footers">張り付くフッター</a></td>
+   <td>コンテンツが短い場合にコンテナーまたはビューポートの最下部に配置されるフッターの作成。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>, <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Split_Navigation">ナビゲーションの分割</a></td>
+   <td>一部のリンクが他と視覚的に分割されているナビゲーションパターン。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">パンくずナビゲーション</a></td>
+   <td>来訪者がページ階層の上の階層に戻ることができるリンクのリストの作成。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/List_group_with_badges">バッジ付きリストグループ</a></td>
+   <td>カウントを表示するバッジの付いたアイテムのリスト。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Pagination">ページ付け</a></td>
+   <td>コンテンツのページへのリンク (検索結果など)。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>, <a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Card">カード</a></td>
+   <td>カードのグリッドで表示されるカードコンポーネント。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/CSS/Layout_cookbook/Grid_wrapper">グリッドラッパー</a></td>
+   <td>グリッドコンテンツを中央のラッパー内に配置するためのもので、はみ出すこともできます。</td>
+   <td><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribute_a_Recipe" name="Contribute_a_Recipe">レシピにご協力を</h2>
+
+<p>MDN 全体として、上記にあるものと同じ形式のレシピを提供していただけると助かります。 例を書くテンプレートやガイドラインは<a href="/ja/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe">こちらのページを見て</a>ください。</p>
diff --git a/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html
new file mode 100644
index 0000000000..f822596444
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/list_group_with_badges/index.html
@@ -0,0 +1,60 @@
+---
+title: バッジ付きリストグループ
+slug: Web/CSS/Layout_cookbook/List_group_with_badges
+tags:
+  - CSS
+  - Layout
+  - box alignment
+  - cookbook
+  - flexbox
+  - lists
+translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary"><span class="seoSummary">このレシピでは、カウントを示すバッジ付きのリストグループのパターンを作成します。</span></p>
+
+<p><img alt="テキストの右側に表示されるカウントを示すバッジ付きの項目のリスト。" src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>項目のコンテンツ量に関係なく、リスト項目の右側にバッジを並べて表示する必要があります。 1行のコンテンツでも、複数行のコンテンツでも、バッジは常に垂直方向の中央に配置する必要があります。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>フレックスボックスは、この特定のパターンを簡単にし、またレイアウトの変更を容易にします。</p>
+
+<p>テキストとバッジが正しく並ぶようにするために、{{cssxref("justify-content")}} プロパティに <code>space-between</code> の値を使用します。 これにより、項目間に余分なスペースが入ります。 実際の例では、このプロパティを削除すると、テキストが1行より短い項目のバッジがテキストの末尾に移動します。</p>
+
+<p>コンテンツを垂直方向に揃えるには、{{cssxref("align-items")}} プロパティを使用してテキストとバッジを交差軸上で揃えます。 代わりに、バッジをコンテンツの上部に揃える場合は、これを <code>align-items: flex-start</code> に変更します。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h4 id="align-items" name="align-items">align-items</h4>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内のアイテムの配置</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/media_objects/index.html b/files/ja/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..3fbb3dc75d
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,89 @@
+---
+title: 'レシピ: メディアオブジェクト'
+slug: Web/CSS/Layout_cookbook/Media_objects
+tags:
+  - CSS
+  - Layout
+  - Media object
+  - Recipe
+  - cookbook
+  - fit-content
+  - float
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><em>メディアオブジェクト</em>は、ウェブ上のいたるところで見られるパターンです。 <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Nicole Sullivan によって命名</a>され、それは一方の側に画像を、そして他方の側に説明的なテキストを有する Facebook の投稿やツイートのような2列のボックスを指します。</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Requirements" name="Requirements">必要条件</h2>
+
+<p>メディアオブジェクトのパターンには、次の特性の一部または全部が必要です。</p>
+
+<ul>
+ <li>モバイルでは積み重ね、デスクトップでは2列です。</li>
+ <li>画像は左右どちらでもかまいません。</li>
+ <li>画像は小さい場合も大きい場合もあります。</li>
+ <li>メディアオブジェクトはネストできます。</li>
+ <li>メディアオブジェクトは、どちらの側が最も高いかに関係なく、コンテンツをクリアする（区切る）必要があります。</li>
+</ul>
+
+<h2 id="The_recipe" name="The_recipe">レシピ</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>必要に応じて2次元でレイアウトを制御できるため、メディアオブジェクトに<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッドレイアウト</a>を使用することを選択しました。 つまり、フッターがあり、その上に短いコンテンツがある場合、そのフッターはそのメディアオブジェクトの下部にまで押し下げられます。</p>
+
+<p>グリッドレイアウトを使用するもう1つの理由は、画像のトラックのサイズ変更に {{cssxref("fit-content")}} を使用できるようにするためです。 最大サイズが 200 ピクセルの <code>fit-content</code> を使用すると、アイコンのような小さい画像がある場合、トラックはその画像のサイズ、つまり <code>max-content</code> のサイズと同じサイズになります。 画像が大きい場合、トラックは 200 ピクセルで拡大しなくなり、画像には 100% の {{cssxref("max-width")}} が適用されるため、列の内側に収まるように縮小されます。</p>
+
+<p>レイアウトを実現するために {{cssxref("grid-template-areas")}} を使用することで、CSS でこのパターンを見ることができます。 max-width が 500 ピクセルになったら、グリッドを定義します。 そのため、より小さいデバイスではメディアオブジェクトが積み重ねられます。</p>
+
+<p>パターンのオプションはそれを反転して画像を反対側に切り替えることです — これはレイアウトを反映させる反転グリッドテンプレートを定義する <code>media-flip</code> クラスを追加することによって行われます。</p>
+
+<p>あるメディアオブジェクトを別のメディアオブジェクトの中にネストするときは、通常のレイアウトでは2番目のトラックに、反転したときは最初のトラックに配置する必要があります。</p>
+
+<h2 id="Fallbacks" name="Fallbacks">代替方法</h2>
+
+<p>サポートしたいブラウザーに応じて、このパターンにはいくつかの代替方法があります。 良いキャッチオールは、画像を左に浮かべること、そしてそれがフロートを含むことを確実にするためにボックスに clearfix ハックを追加することです。</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">この例をダウンロードする</a></p>
+</div>
+
+<p>浮動要素がグリッド項目になると、そのフロートは適用されなくなるため、フロートを除去するために特別なことをする必要はありません。</p>
+
+<p>する必要があるのは、項目に適用されているすべてのマージンと、グリッドのコンテキストで必要としていないすべての幅を取り除くことです（グリッドでそれを制御するための {{cssxref("gap")}} プロパティがあり、トラックがサイズを制御します）。</p>
+
+<h2 id="Relevant_resources_on_MDN" name="Relevant_resources_on_MDN">MDN の関連資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">プログレッシブエンハンスメントとグリッドレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域の使用</a></li>
+ <li><a href="/ja/docs/Web/CSS/fit-content">fit-content</a></li>
+ <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用しているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<p>このページの互換性テーブルは構造化データから生成されます。 データに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックして、プルリクエストを送ってください。</p>
+
+<h4 id="grid-template-areas" name="grid-template-areas">grid-template-areas</h4>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h4 id="float" name="float">float</h4>
+
+<p>{{Compat("css.properties.float")}}</p>
diff --git a/files/ja/web/css/layout_cookbook/pagination/index.html b/files/ja/web/css/layout_cookbook/pagination/index.html
new file mode 100644
index 0000000000..60821375f6
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/pagination/index.html
@@ -0,0 +1,85 @@
+---
+title: ページ付け
+slug: Web/CSS/Layout_cookbook/Pagination
+tags:
+  - CSS
+  - Layout
+  - cookbook
+  - flexbox
+  - pagination
+translation_of: Web/CSS/Layout_cookbook/Pagination
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。</p>
+
+<p><img alt="ページ付きリスト内のページのセットへのリンク" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を {{htmlelement("nav")}} 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。</p>
+
+<p>通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>を使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 {{htmlelement("nav")}} 要素は、{{cssxref("justify-content")}} プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。</p>
+
+<p>リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には {{cssxref("margin")}} を使用します。</p>
+
+<h2 id="Alternative_methods" name="Alternative_methods">代替方法</h2>
+
+<p>{{cssxref("column-gap")}} プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。</p>
+
+<pre class="brush: css">.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの懸念</h2>
+
+<p>スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<code>&lt;nav&gt;</code> 要素に <code>aria-label="pagination"</code> を追加しました。</p>
+
+<p>スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に <code>aria-hidden</code> 属性を設定しました。</p>
+
+<p>このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p><em>Include the compat data for key properties you used, as in the example below which includes align-items.</em></p>
+</div>
+
+<h4 id="justify-content" name="justify-content">justify-content</h4>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h4 id="column-gap_in_Flex_layout" name="column-gap_in_Flex_layout">フレックスレイアウトの column-gap</h4>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("justify-content")}}、{{Cssxref("column-gap")}}</li>
+ <li><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">ARIA を知る: 「Hidden」対「None」</a>（英語）</li>
+ <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">スクリーンリーダーのユーザーには見えないコンテンツ</a>（英語）</li>
+ <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">アクセシビリティを意識した CSS の書き方</a>（英語）（<a href="https://frasco.io/writing-css-with-accessibility-in-mind-4fc82b26aecb">日本語訳</a>）</li>
+ <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">アクセシビリティ（a11y）スタイルガイド: ページ付け</a>（英語）</li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/split_navigation/index.html b/files/ja/web/css/layout_cookbook/split_navigation/index.html
new file mode 100644
index 0000000000..beb0d732d9
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/split_navigation/index.html
@@ -0,0 +1,55 @@
+---
+title: ナビゲーションの分割
+slug: Web/CSS/Layout_cookbook/Split_Navigation
+tags:
+  - CSS
+  - Layout
+  - Navigation
+  - Recipe
+  - cookbook
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。</span></p>
+
+<p><img alt="2つのグループに分けられた項目。" src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。</p>
+
+<h2 id="Recipe" name="Recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">この例をダウンロードする</a></p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。</p>
+
+<p>自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。</p>
+
+<p>この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス <code>push</code> を適用できます。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<p>さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。</p>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h4 id="Flexbox" name="Flexbox">フレックスボックス</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_cookbook/sticky_footers/index.html b/files/ja/web/css/layout_cookbook/sticky_footers/index.html
new file mode 100644
index 0000000000..07ce9b5e34
--- /dev/null
+++ b/files/ja/web/css/layout_cookbook/sticky_footers/index.html
@@ -0,0 +1,77 @@
+---
+title: 固定フッター
+slug: Web/CSS/Layout_cookbook/Sticky_footers
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - cookbook
+  - flexbox
+  - grid
+  - sticky footer
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">固定フッターのパターンは、コンテンツがビューポートの高さより短い場合に、ページのフッターがビューポートの下部に「固定」されるパターンです。 このレシピでこれを作成するためのいくつかのテクニックを見ていきます。</span></p>
+
+<p><img alt="ボックスの底に押し込まれた張り付くフッター" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Requirements" name="Requirements">要件</h2>
+
+<p>固定フッターのパターンは、次の要件を満たす必要があります。</p>
+
+<ul>
+ <li>コンテンツが短い場合、フッターはビューポートの下部に固定されます。</li>
+ <li>ページのコンテンツがビューポートの下部を超えて広がっている場合、フッターは通常どおりコンテンツの下に配置されます。</li>
+</ul>
+
+<h2 id="The_recipe" name="The_recipe">レシピ</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">この例をダウンロードする</a></p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: この例と以下の例では、ライブ例がうまくいくように、<code>min-height: 100%</code> に設定された <code>wrapper</code> を使用しています。 また、{{htmlelement("body")}} で {{cssxref("min-height")}} を <code>100vh</code> に設定し、それをグリッドコンテナとして使用することで、ページ全体でこれを実現することもできます。</p>
+</div>
+
+<h2 id="Choices_made" name="Choices_made">行った選択</h2>
+
+<p>上記の例では、CSS グリッドレイアウトを使用して固定フッターを実現しています。 <code>.wrapper</code> の最小の高さは <code>100%</code> です。 つまり、コンテナーの高さと同じ高さになります。 次に、レイアウトの各部分につき 1 行で、3 行 1 列のグリッドレイアウトを作成します。</p>
+
+<p>グリッドの自動配置では、項目がソース順に配置されるため、ヘッダーは最初の自動サイズ調整トラックに入り、メインコンテンツは <code>1fr</code> トラックに、フッターは最後の自動サイズ調整トラックに入ります。<code>1fr</code> トラックは使用可能なスペースをすべて占有するため、ギャップを埋めるように大きくなります。</p>
+
+<h2 id="Alternate_method" name="Alternate_method">代替方法</h2>
+
+<p>グリッドレイアウトをサポートしていないブラウザーとの互換性が必要な場合は、フレックスボックスを使用して固定フッターを作成することもできます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>フレックスボックスの例は同じように始まりますが、<code>.wrapper</code> では <code>display: grid</code> ではなく <code>display: flex</code> を使用し、<code>flex-direction</code> を <code>column</code> に設定します。次に、メインコンテンツを <code>flex-grow: 1</code> に設定し、他の2つの要素を <code>flex-shrink: 0</code> に設定します — これにより、コンテンツがメイン領域いっぱいになったときにそれらが小さく縮小されるのを防ぎます。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<h4 id="grid-template-rows" name="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction" name="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow" name="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink" name="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Resources_on_MDN" name="Resources_on_MDN">MDN にある資料</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+</ul>
diff --git a/files/ja/web/css/layout_mode/index.html b/files/ja/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..726d53e876
--- /dev/null
+++ b/files/ja/web/css/layout_mode/index.html
@@ -0,0 +1,32 @@
+---
+title: レイアウトモード
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+  - リファレンス
+  - レイアウト
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{cssref}}</div>
+
+<p> <a href="/ja/docs/Web/CSS">CSS</a> の<strong>レイアウトモード</strong> (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。</p>
+
+<ul>
+ <li><em><a href="/ja/docs/Web/CSS/CSS_Flow_Layout">通常フロー</a></em> — すべての要素は何かの操作をしてこれから外すまで、通常フローの一部です。通常フローは、段落のようなボックスをレイアウトするための<em>ブロックレイアウト</em>と、テキストのような行内アイテムをレイアウトするための<em>インラインレイアウト</em>を含みます。</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Table"><em>表レイアウト</em></a>は、表のレイアウトのためのものです。</li>
+ <li><em>浮動レイアウト</em>は、アイテムを左または右に配置して、残りの部分はそれを回り込む通常フローにするためのものです。</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning"><em>位置指定レイアウト</em></a>は、他要素とほとんど相互作用のない位置指定要素のためのものです。</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Columns"><em>段組みレイアウト</em></a>は、新聞のように複数の段でコンテンツをレイアウトするためのものです。</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout"><em>フレックスボックスレイアウト</em></a>は、滑らかに大きさが変更できる複雑なページのレイアウトに使われます。</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout"><em>グリッドレイアウト</em></a>は、固定グリッドを基準にした要素配置に使われます。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> レイアウトモードによって、使える <a href="/ja/docs/Web/CSS/Reference">CSS プロパティ</a>に制限があります。大半は 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/left/index.html b/files/ja/web/css/left/index.html
new file mode 100644
index 0000000000..a7d16d6eb3
--- /dev/null
+++ b/files/ja/web/css/left/index.html
@@ -0,0 +1,228 @@
+---
+title: left
+slug: Web/CSS/left
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS 位置指定レイアウト
+  - Reference
+translation_of: Web/CSS/left
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>left</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、<ruby><a href="/ja/docs/Web/CSS/position">位置指定要素</a><rp> (</rp><rt>positioned element</rt><rp>) </rp></ruby>の水平位置の決定に関与します。位置指定されていない要素には効果はありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>left</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p>
+
+<ul>
+ <li><code>position</code> が <code>absolute</code> 又は <code>fixed</code> に設定されている場合、 <code>left</code> プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。)</li>
+ <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>left</code> プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。</li>
+ <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>left</code> プロパティは sticky 制約の矩形を計算するために使用されます。</li>
+ <li><code>position</code> が <code>static</code> に設定されている場合、 <code>left</code> プロパティは<em>効果がありません</em>。</li>
+</ul>
+
+<p><code>left</code> と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は<em>過剰指定</em>になります。このような場合、包含ブロックが左書きの場合は <code>left</code> の値が優先され、包含ブロックが右書きの場合は <code>right</code> の値が優先されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+left: 3px;
+left: 2.4em;
+
+/* 内包ブロックの幅に対する &lt;percentage&gt; */
+left: 10%;
+
+/* キーワード値 */
+left: auto;
+
+/* グローバル値 */
+left: inherit;
+left: initial;
+left: 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("right")}} プロパティに基づいて決まり、 <code>width: auto</code> は内容物の幅に基づいて決まります。また、 <code>right</code> も <code>auto</code> であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。</li>
+  <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("right")}} に基づきます。また、 <code>right</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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+#example_5 {
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 100px;
+  background-color: #D7FFC2;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="wrap"&gt;
+  &lt;div id="example_1"&gt;
+    &lt;pre&gt;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;The only containing element for this div is the main window, so it positions itself in relation to it.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_2"&gt;
+    &lt;pre&gt;
+      position: relative;
+      top: 0;
+      right: 0;
+    &lt;/pre&gt;
+    &lt;p&gt;Relative position in relation to its siblings.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="example_3"&gt;
+    &lt;pre&gt;
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Relative to its sibling div above, but removed from flow of content.&lt;/p&gt;
+
+    &lt;div id="example_4"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      &lt;/pre&gt;
+      &lt;p&gt;Absolute position inside of a parent with relative position&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div id="example_5"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 200px;
+      &lt;/pre&gt;
+      &lt;p&gt;Absolute position with both left and right declared&lt;/p&gt; &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Live_sample" name="Live_sample">実行例</h3>
+
+<p>{{EmbedLiveSample('Examples',1200,650)}}</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 Positioning', '#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>sticky の位置の動作を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.left")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}</li>
+ <li>対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/ja/web/css/length-percentage/index.html b/files/ja/web/css/length-percentage/index.html
new file mode 100644
index 0000000000..9d10935eb8
--- /dev/null
+++ b/files/ja/web/css/length-percentage/index.html
@@ -0,0 +1,61 @@
+---
+title: <length-percentage>
+slug: Web/CSS/length-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Reference
+  - length-percentage
+  - units
+  - values
+  - 値
+  - 単位
+translation_of: Web/CSS/length-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;length-percentage&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。</p>
+
+<h2 id="Use_in_calc()" name="Use_in_calc()">calc() での使用</h2>
+
+<p>許可されている型として <code>&lt;length-percentage&gt;</code> が指定されているところでは、これはパーセント値が長さとして解決されるので、 <code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。</p>
+
+<pre class="syntaxbox example-good">width: 200px
+width: 20%
+width: calc(100% - 200px)
+</pre>
+
+<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('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;length-percentage&gt;</code> を定義。 <code>calc()</code> を追加</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.length-percentage")}}</p>
diff --git a/files/ja/web/css/length/index.html b/files/ja/web/css/length/index.html
new file mode 100644
index 0000000000..1864785e94
--- /dev/null
+++ b/files/ja/web/css/length/index.html
@@ -0,0 +1,266 @@
+---
+title: <length>
+slug: Web/CSS/Length
+tags:
+  - CSS
+  - CSS データ型
+  - CSS 値と単位
+  - Layout
+  - Reference
+  - Web
+  - length
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>&lt;length&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref("&lt;percentage&gt;")}} 値も CSS の長さに使用され、 <code>&lt;length&gt;</code> 値を受け付ける同じプロパティの一部でも使用することができますが、 <code>&lt;length&gt;</code> 値と同じものではありません。 {{cssxref("&lt;length-percentage&gt;")}} を参照してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;length&gt;</code> データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 <code>0</code> の後の単位は省略可能です。</p>
+
+<div class="note">
+<p><strong>注:</strong> 負の <code>&lt;length&gt;</code> を許容するプロパティとそうでないプロパティがあります。</p>
+</div>
+
+<h3 id="Units" name="Units">単位</h3>
+
+<h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4>
+
+<p>相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、<a href="/ja/docs/Web/CSS/line-height">行の高さ</a>であったり、 {{glossary("viewport")}} の寸法であったりします。</p>
+
+<h5 id="Font-relative_lengths" name="Font-relative_lengths">フォント関連の長さ</h5>
+
+<p>フォント関連の長さは、 <code>&lt;length&gt;</code> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。</p>
+
+<div class="note">
+<p><strong>注:</strong> これらの単位、特に <code>em</code> と <code>rem</code> は、ユーザーがフォントの大きさを変更しても <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ページの vertical rhythm</a> を維持するような、拡縮可能なレイアウトを作成するためによく使われます。</p>
+</div>
+
+<dl>
+ <dt><code id="cap">cap</code> {{experimental_inline}}</dt>
+ <dd>その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。</dd>
+ <dt><code id="ch">ch</code></dt>
+ <dd>その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。<br>
+ <br>
+ "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。</dd>
+ <dt><code id="em">em</code></dt>
+ <dd>その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。</dd>
+ <dt><code id="ex">ex</code></dt>
+ <dd>その要素の {{Cssxref("font")}} における <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは <code>1ex ≈ 0.5em </code> です。</dd>
+ <dt><code id="ic">ic</code> {{experimental_inline}}</dt>
+ <dd>描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。</dd>
+ <dt><code id="lh">lh</code> {{experimental_inline}}</dt>
+ <dd>使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。</dd>
+ <dt><code id="rem">rem</code></dt>
+ <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は <code>16px</code> ですが、ユーザー設定によって変わる可能性があります）。</dd>
+ <dt><code id="rlh">rlh</code> {{experimental_inline}}</dt>
+ <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。</dd>
+</dl>
+
+<h5 id="Viewport-percentage_lengths" name="Viewport-percentage_lengths">ビューポートのパーセント値による長さ</h5>
+
+<p>ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <code>&lt;length&gt;</code> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。</p>
+
+<dl>
+ <dt><code id="vh">vh</code></dt>
+ <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における高さの1%と同じです。</dd>
+ <dt><code id="vw">vw</code></dt>
+ <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における幅の1%と同じです。</dd>
+ <dt><code id="vi">vi</code> {{experimental_inline}}</dt>
+ <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">インライン軸</a>の寸法の1%と同じです。</dd>
+ <dt><code id="vb">vb</code> {{experimental_inline}}</dt>
+ <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#block-dimension">ブロック軸</a>の寸法の1%と同じです。</dd>
+ <dt><code id="vmin">vmin</code></dt>
+ <dd><code>vw</code> と <code>vh</code> の小さい方です。</dd>
+ <dt><code id="vmax">vmax</code></dt>
+ <dd><code>vw</code> と <code>vh</code> の大きい方です。</dd>
+</dl>
+
+<h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4>
+
+<p>絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。</p>
+
+<p>低解像度の端末では、<code>px</code> の単位が物理的な<em>参照ピクセル</em>を表し、その他の単位はこれを基準に定義されます。例えば <code>1in</code> は <code>96px</code> と定義され、これは <code>72pt</code> と等しくなります。このような端末では結果的に、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p>
+
+<p>高解像度の端末では、インチ (<code>in</code>)、センチメートル (<code>cm</code>)、ミリメートル (<code>mm</code>) は対応する物理的な単位と同じになります。従って、 <code>px</code> の単位は、それ (1インチの1/96) を基準に定義されます。</p>
+
+<div class="note">
+<p><strong>注:</strong> たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 <code>font-size</code> を設定する場合には、 (<code>em</code> や <code>rem</code> のような) 相対的な単位が適しています。</p>
+</div>
+
+<dl>
+ <dt><code id="px">px</code></dt>
+ <dd>1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、<em>プリンター</em>や<em>高解像度の画面</em>では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 <code>1px</code> = <code>1in</code> の1/96です。</dd>
+ <dt><code id="cm">cm</code></dt>
+ <dd>1センチメートルです。 <code>1cm</code> = <code>96px/2.54</code> です。</dd>
+ <dt><code id="mm">mm</code></dt>
+ <dd>1ミリメートルです。 <code>1mm</code> = <code>1cm</code> の1/10です。</dd>
+ <dt><code id="q">Q</code> {{experimental_inline}}</dt>
+ <dd>1/4ミリメートルです。 <code>1Q</code> = <code>1cm</code> の1/40です。</dd>
+ <dt><code id="in">in</code></dt>
+ <dd>1インチです。 <code>1in</code> = <code>2.54cm</code> = <code>96px</code> です。</dd>
+ <dt><code id="pc">pc</code></dt>
+ <dd>1パイカです。 <code>1pc</code> = <code>12pt</code> = <code>1in</code> の1/6です。</dd>
+ <dt><code id="pt">pt</code></dt>
+ <dd>1ポイントです。 <code>1pt</code> = <code>1in</code> の1/72です。</dd>
+ <dt><code id="mozmm">mozmm</code> {{non-standard_inline}}, Firefox 59 で削除</dt>
+ <dd>実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。</dd>
+</dl>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーションの場合、 <code>&lt;length&gt;</code> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって定められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Length_unit_comparison" name="Length_unit_comparison">長さの単位の比較</h3>
+
+<p>以下のデモでは、入力欄に <code>&lt;length&gt;</code> の値 (例えば <code>300px</code>, <code>50%</code>, <code>30vw</code>) を入力することができ、 <kbd>Return</kbd> を押したときにバーの長さが反映されます。</p>
+
+<p>これにより、様々な長さの単位の効果を比較し対照させることができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;div class="input-container"&gt;
+    &lt;label&gt;長さを入力してください:&lt;/label&gt;
+    &lt;input type="text" id="length"&gt;
+  &lt;/div&gt;
+  &lt;div class="inner"&gt;
+
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="results"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () =&gt; {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `&lt;code&gt;width: ${inputElem.value}&lt;/code&gt;`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</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('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code> の単位を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の単位を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の明示的な定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。 <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の暗黙的な定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.length")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位チュートリアル</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位リファレンス</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a></li>
+</ul>
diff --git a/files/ja/web/css/letter-spacing/index.html b/files/ja/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..5dad1104e6
--- /dev/null
+++ b/files/ja/web/css/letter-spacing/index.html
@@ -0,0 +1,135 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - SVG
+  - 'recipe:css-property'
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>letter-spacing</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 <code>letter-spacing</code> が正の値であった場合は、文字と文字の間が開き、 <code>letter-spacing</code> が負の値であった場合は、文字と文字が互いに近づきます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+letter-spacing: normal;
+
+/* &lt;length&gt; 値 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* グローバル値 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>現在のフォントでの通常の字間になります。 <code>0</code> の値とは異なり、この値は{{glossary("user agent", "ユーザーエージェント")}}が文字列を両端揃えするために字間を変えることを許可します。</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>既定の字間に<em>加える</em>字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティへの配慮</h2>
+
+<p>正と負のどちらでも、大きすぎる値を <code>letter-spacing</code> に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うために何が書いてあるのか分からなくなってしまいます。</p>
+
+<p>フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_letter_spacing" name="Setting_letter_spacing">字間の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="normal"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wide"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-wider"&gt;letter spacing&lt;/p&gt;
+&lt;p class="em-tight"&gt;letter spacing&lt;/p&gt;
+&lt;p class="px-wide"&gt;letter spacing&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}</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 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>SVG での初回定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.letter-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/ja/web/css/line-break/index.html b/files/ja/web/css/line-break/index.html
new file mode 100644
index 0000000000..ed94927d45
--- /dev/null
+++ b/files/ja/web/css/line-break/index.html
@@ -0,0 +1,116 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - Asian
+  - CSS
+  - CSS Property
+  - CSS Text
+  - NeedsExample
+  - Reference
+  - i18n
+  - l10n
+  - 'recipe:css-property'
+  - 日本語処理
+  - 禁則処理
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>line-break</code></strong> は CSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則を設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* グローバル値 */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>既定の改行規則を使用してテキストを改行します。</dd>
+ <dt><code>loose</code></dt>
+ <dd>最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。</dd>
+ <dt><code>normal</code></dt>
+ <dd>最も一般的な改行規則を使用してテキストを改行します。</dd>
+ <dt><code>strict</code></dt>
+ <dd>最も厳格な改行規則を使用してテキストを改行します。</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>
+ <p>句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 {{cssxref("word-break")}} プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。</p>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_text_wrapping" name="Setting_text_wrapping">テキストの折り返しの設定</h3>
+
+<p>"々", "ぁ", "。" の前で折り返しが行われるかどうかを確認してください。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div lang="ja"&gt;
+  &lt;p class="wrapbox auto"&gt;auto:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox loose"&gt;loose:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox normal"&gt;normal:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox strict"&gt;strict:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox anywhere"&gt;anywhere:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
+.auto { line-break: auto; }
+.loose { line-break: loose; }
+.normal { line-break: normal; }
+.strict { line-break: strict; }
+.anywhere { line-break: anywhere; }
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}</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 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.line-break")}}</p>
diff --git a/files/ja/web/css/line-height-step/index.html b/files/ja/web/css/line-height-step/index.html
new file mode 100644
index 0000000000..95065318da
--- /dev/null
+++ b/files/ja/web/css/line-height-step/index.html
@@ -0,0 +1,90 @@
+---
+title: line-height-step
+slug: Web/CSS/line-height-step
+tags:
+  - CSS
+  - CSS フォント
+  - CSS プロパティ
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/line-height-step
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>line-height-step</code></strong> は CSS のプロパティで、行ボックスの高さにおける刻みの単位を設定します。このプロパティが設定された場合、行ボックスの高さは単位の倍数のうち最も近いものに切り上げられます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* ポイント値 */
+line-height-step: 18pt;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>line-height-step</code> プロパティは、以下のうちの一つで指定します。</p>
+
+<ul>
+ <li><code><a href="#&lt;length>">&lt;length&gt;</a></code></li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>"><code>&lt;length&gt;</code></a></dt>
+ <dd>指定された {{cssxref("&lt;length&gt;")}} が、行ボックスの高さの刻みの計算に使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p id="sect1">以下の例では、それぞれの段落の行ボックスの高さは、刻みの単位に切り上げられます。 <code>&lt;h1&gt;</code> の行ボックスの高さは１つの刻みに収まらないので２つ分を占有しますが、その中の中央に配置されます。</p>
+
+<pre class="brush: css notranslate">:root {
+  font-size: 12pt;
+  --my-grid: 18pt;
+  line-height-step: var(--my-grid);
+}
+h1 {
+  font-size: 20pt;
+  margin-top: calc(2 * var(--my-grid));
+}</pre>
+
+<p>これらの規則の結果は、次のスクリーンショットのようになります。</p>
+
+<p><img alt="どのように line-height-step プロパティがテキストの表示に影響するか" src="https://mdn.mozillademos.org/files/15257/line-grid-center.png" style="height: 340px; width: 144px;"></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('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}</td>
+   <td>{{Spec2('CSS Rhythmic Sizing')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.line-height-step")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("font")}}</li>
+ <li>{{Cssxref("font-size")}}</li>
+ <li>{{Cssxref("line-height")}}</li>
+</ul>
diff --git a/files/ja/web/css/line-height/index.html b/files/ja/web/css/line-height/index.html
new file mode 100644
index 0000000000..3df521e2cc
--- /dev/null
+++ b/files/ja/web/css/line-height/index.html
@@ -0,0 +1,181 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - CSS フォント
+  - CSS プロパティ
+  - Layout
+  - Reference
+  - Text
+  - Vertical
+  - height
+  - 'recipe:css-property'
+  - size
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>line-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。</span>ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>インライン要素では、行ボックスの高さの計算に使われる高さを指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+line-height: normal;
+
+/* 単位のない値: この値を要素のフォントサイズに
+掛けたものを使用する */
+line-height: 3.5;
+
+/* &lt;length&gt; 値 */
+line-height: 3em;
+
+/* &lt;percentage&gt; 値 */
+line-height: 34%;
+
+/* グローバル値 */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p><code>line-height</code> プロパティは以下のうちの一つで指定します。</p>
+
+<ul>
+ <li>一つの <code><a href="#&lt;number>">&lt;number&gt;</a></code></li>
+ <li>一つの <code><a href="#&lt;length>">&lt;length&gt;</a></code></li>
+ <li>一つの <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code></li>
+ <li>キーワード <code><a href="#normal">normal</a></code></li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="normal">normal</code></dt>
+ <dd>ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の <code>font-family</code> によって決まる、おおよそ <strong><code>1.2</code></strong> という既定値を使います。</dd>
+ <dt><code id="&lt;number>">&lt;number&gt;</code> (単位なし)</dt>
+ <dd>使用値は、この単位のない {{cssxref("&lt;number&gt;")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <code>&lt;number&gt;</code> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが <code>line-height</code> を設定する<strong>好ましい方法です</strong>。</dd>
+ <dt><code id="&lt;length>">&lt;length&gt;</code></dt>
+ <dd>行ボックスの高さの計算に、指定した {{cssxref("&lt;length&gt;")}} が使われます。利用可能な単位については、 {{cssxref("&lt;length&gt;")}} をご覧ください。</dd>
+ <dt><code id="&lt;percentage>">&lt;percentage&gt;</code></dt>
+ <dd>要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("&lt;percentage&gt;")}} に要素のフォントサイズの計算値を掛けたものです。<strong>パーセント</strong>値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。</dd>
+ <dt><code id="-moz-block-height">-moz-block-height</code> {{non-standard_inline}}</dt>
+ <dd>行の高さを現在のブロックのコンテンツの高さにします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: css notranslate">/* 以下のルールの結果はすべて、同じ line height です */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* 数値/単位なし */
+div { line-height: 1.2em; font-size: 10pt; }   /* 長さ */
+div { line-height: 120%;  font-size: 10pt; }   /* パーセント値 */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */</pre>
+
+<p><code>line-height</code> を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に <code>font-family</code> プロパティも指定しなければなりません。</p>
+
+<h3 id="Prefer_unitless_numbers_for_line-height_values" name="Prefer_unitless_numbers_for_line-height_values">line-height の値は単位なしの数値が好ましい</h3>
+
+<p>以下の例は、line-height の値として {{cssxref("&lt;length&gt;")}} より {{cssxref("&lt;number&gt;")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの <code>line-height</code> の値を使用しています。二番目は赤色の境界を持っており、 <code>line-height</code> の値を <code>em</code> で定義して使用しています。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box green"&gt;
+ &lt;h1&gt;予期しない結果を避けるために、単位なしの line-height を使いましょう。&lt;/h1&gt;
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;予期しない結果を避けるために、単位なしの line-height を使いましょう。&lt;/h1&gt;
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+&lt;/div&gt;
+
+&lt;!-- 1 つ目の &lt;h1&gt; の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  --&gt;
+&lt;!-- 2 つ目の &lt;h1&gt; の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう --&gt;
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>主要な段落コンテンツでは、 <code>line-height</code> の値の最小値が <code>1.5</code> になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。</p>
+
+<p><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></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('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.line-height")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
+</ul>
diff --git a/files/ja/web/css/linear-gradient()/index.html b/files/ja/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..95fb315074
--- /dev/null
+++ b/files/ja/web/css/linear-gradient()/index.html
@@ -0,0 +1,218 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - Web
+  - ウェブ
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>linear-gradient()</code></strong> 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{CSSxRef("&lt;image&gt;")}} の特殊型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>他のグラデーションと同様、線形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
+
+<p>繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。</p>
+
+<p><code>&lt;gradient&gt;</code> は CSS の <code>&lt;image&gt;</code> データ型に所属しますので、 <code>&lt;image&gt;</code> が使用できるところでのみ使用できます。このため、 <code>linear-gradient</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。</p>
+
+<h2 id="Composition_of_a_linear_gradient" name="Composition_of_a_linear_gradient">線形グラデーションの構成</h2>
+
+<p>線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 <code>linear-gradient()</code> 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 <em>終了点</em> (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。</p>
+
+<p>開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、<em>マジックコーナー</em>と呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。</p>
+
+<h3 id="Customizing_Gradients" name="Customizing_Gradients">グラデーションのカスタマイズ</h3>
+
+<p>グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("&lt;length&gt;")}} や {{CSSxRef("&lt;percentage&gt;")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。</p>
+
+<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>
+
+<p>ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から10%の位置まで、純粋な青を90%の位置から末尾までに配置します。10%から90％までの間は、赤から青への色変化ですが、色ヒントがない30%があるので、変化の中間点は50%の位置ではなく30%の位置になります。</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p>2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。</p>
+
+<p>色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p>複数位置の色経由点が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre>
+
+<p>既定では、0%の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が100%の位置まで続くか、100%の位置の色になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="language-css notranslate" id="css">/* 45度に傾いたグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(45deg, blue, red);
+
+/* 右下から左上に向かうグラデーションで、
+   青から始まり赤で終わる */
+linear-gradient(to left top, blue, red);
+
+/* 色経由点: 下から上に向かうグラデーションで、
+   青から始まり、長さの40%ののところで緑になり、
+   赤で終わる */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* 色ヒント: 左から右に向かうグラデーションで、
+   赤から始まり、グラデーションの長さ全体の
+   10%に中間点が来て、残りの90%の長さをかけて
+   青色に変わる */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* 複数位置の色経由点: 45度傾いたグラデーションで、
+   左下半分が赤で右上半分が青、
+   赤から青への変化は明確な線 */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>グラデーションラインの開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードから成ります。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd>
+ <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>, の角度にそれぞれ対応します。他の値は角度に変換されます。</dd>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>グラデーションラインの方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+  <dd>色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
+ <dd>
+ <div class="note">
+ <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">linear-gradient(
+  [ <a href="/ja/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt; ]? ]#, &lt;linear-color-stop&gt;
+  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Gradient_at_a_45-degree_angle" name="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: linear-gradient(45deg, red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}</p>
+
+<h3 id="Gradient_that_starts_at_60_of_the_gradient_line" name="Gradient_that_starts_at_60_of_the_gradient_line">グラデーションラインの60%から始まるグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}</pre>
+
+<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p>
+
+<h3 id="Gradient_with_multi-position_color_stops" name="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3>
+
+<p>この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p>
+</div>
+
+<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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>補間のヒントを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li>
+ <li>他のグラデーション関数: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/list-style-image/index.html b/files/ja/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..e1f682fc74
--- /dev/null
+++ b/files/ja/web/css/list-style-image/index.html
@@ -0,0 +1,115 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - Reference
+  - list-style
+  - list-style-image
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>list-style-image</code></strong> プロパティは、リスト項目のマーカーとして使われる画像を設定します。</p>
+
+<p>ふつうは一括指定の {{cssxref("list-style")}} を使うほうが便利です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>注:</strong> このプロパティはリスト項目、つまり、 <code>{{cssxref("display")}}: list-item;</code> が指定された要素に対して適用されます。<a href="https://www.w3.org/TR/html5/rendering.html#lists">既定では</a>、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリスト項目に適用することができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+list-style-image: none;
+
+/* &lt;url&gt; 値 */
+list-style-image: url('starsolid.gif');
+
+/* グローバル値 */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;url&gt;")}}</dt>
+ <dd>マーカーとして使う画像の場所です。</dd>
+ <dt><code>none</code></dt>
+ <dd>画像をマーカーとして使用しないことを指定します。この値が設定された場合、代わりに {{ Cssxref("list-style-type") }} で定義されたマーカーが使われます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_list_item_images" name="Setting_list_item_images">リスト項目の画像の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_list_item_images') }}</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 Lists', '#propdef-list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS3 Lists') }}</td>
+   <td>すべての {{cssxref("&lt;image&gt;")}} データ型をサポートするように拡張</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.list-style-image")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-position")}}</li>
+ <li>{{cssxref("url()", "url()")}} 関数</li>
+</ul>
diff --git a/files/ja/web/css/list-style-position/index.html b/files/ja/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..5bd9b3919c
--- /dev/null
+++ b/files/ja/web/css/list-style-position/index.html
@@ -0,0 +1,134 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - Reference
+  - list-style
+  - list-style-position
+translation_of: Web/CSS/list-style-position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>list-style-position</code></strong> プロパティは、リストアイテムに対する {{cssxref("::marker")}} の位置を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>多くの場合、一括指定の {{cssxref("list-style")}} を使うほうが便利です。</p>
+
+<p><strong>メモ:</strong> このプロパティはリストアイテムに対して適用されます。つまり、 <code>{{cssxref("display")}}: list-item;</code> が指定された要素です。<a href="https://www.w3.org/TR/html5/rendering.html#lists">既定では</a>、 {{HTMLElement("li")}} 要素を含みます。このプロパティは継承されるので、親要素 (通常は {{HTMLElement("ol")}} や {{HTMLElement("ul")}}) に設定することで、すべてのリストアイテムに適用することができます。</p>
+
+<p><strong>メモ:</strong> <code>list-style-position: inside</code> を指定したリスト要素の中で最初にブロック要素が配置された場合、その動作はブラウザーによって異なります。 Chrome と Safari では、この要素はマーカーボックスと同じ行に配置されますが、 Firefox、 Internet Explorer、 Opera では次の行に配置されます。 詳細については {{bug(36854)}} をご覧ください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+list-style-position: inside;
+list-style-position: outside;
+
+/* グローバル値 */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+</pre>
+
+<p><code>list-style-position</code> プロパティには、下記の値の中の一つが指定されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>inside</code></dt>
+ <dd>{{cssxref("::marker")}} はリストアイテムの最初の要素として配置されます。</dd>
+ <dt><code>outside</code></dt>
+ <dd>{{cssxref("::marker")}} は主要ブロックボックスの外に配置されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="inside"&gt;List 1
+  &lt;li&gt;List Item 1-1&lt;/li&gt;
+  &lt;li&gt;List Item 1-2&lt;/li&gt;
+  &lt;li&gt;List Item 1-3&lt;/li&gt;
+  &lt;li&gt;List Item 1-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="outside"&gt;List 2
+  &lt;li&gt;List Item 2-1&lt;/li&gt;
+  &lt;li&gt;List Item 2-2&lt;/li&gt;
+  &lt;li&gt;List Item 2-3&lt;/li&gt;
+  &lt;li&gt;List Item 2-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="inside-img"&gt;List 3
+  &lt;li&gt;List Item 3-1&lt;/li&gt;
+  &lt;li&gt;List Item 3-2&lt;/li&gt;
+  &lt;li&gt;List Item 3-3&lt;/li&gt;
+  &lt;li&gt;List Item 3-4&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush:css;">.inside {
+  list-style-position: inside;
+  list-style-type: square;
+}
+
+.outside {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.inside-img {
+  list-style-position: inside;
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 200, 420)}}</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 Lists', '#list-style-position-property', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.list-style-position")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}</li>
+</ul>
diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..a02b18f9b6
--- /dev/null
+++ b/files/ja/web/css/list-style-type/index.html
@@ -0,0 +1,612 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - Reference
+translation_of: Web/CSS/list-style-type
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>list-style-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>マーカーの<a href="/ja/docs/CSS/color_value" title="color">色</a>は、適用先の要素における色の計算値と同じになります。</p>
+
+<p>既定で <code>display: list-item</code> の値を持っている要素はわずかです ({{HTMLElement("li")}} と {{HTMLElement("summary")}})。しかし、 <code>list-style-type</code> プロパティは {{cssxref("display")}} の値が <code>list-item</code> に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* マーカーの種類の一例 */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: trad-chinese-informal;
+list-style-type: kannada;
+
+/* &lt;string&gt; */
+list-style-type: '-';
+
+/* @counter-style 規則に該当する識別子 */
+list-style-type: custom-counter-style;
+
+/* キーワード値 */
+list-style-type: none;
+
+/* グローバル値 */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+</pre>
+
+<p>list-style-type プロパティは、以下のいずれかで定義することができます。</p>
+
+<ul>
+ <li>単一の <code><a href="#&lt;custom-ident>">&lt;custom-ident&gt;</a></code> 値</li>
+ <li>単一の <code><a href="#symbols()">symbols()</a></code> 値</li>
+ <li>単一の <code><a href="#&lt;string>">&lt;string&gt;</a></code> 値</li>
+ <li><code><a href="#none">none</a></code> キーワード</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="&lt;custom-ident>" name="&lt;custom-ident>">{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</a></dt>
+ <dd>{{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。</dd>
+</dl>
+
+<dl>
+ <dt><a id="symbols()" name="symbols()">{{cssxref("symbols()")}}</a></dt>
+ <dd>無名のリストスタイルを定義します。</dd>
+ <dt><a id="&lt;string>" name="&lt;string>">{{cssxref("&lt;string&gt;")}}</a></dt>
+ <dd>特定の文字列を、リストのマーカーとして使用します。</dd>
+ <dt><a id="none" name="none"><code>none</code></a></dt>
+ <dd>マーカーは表示されません。</dd>
+</dl>
+
+<dl style="">
+ <dt><code>disc</code></dt>
+ <dd>
+ <ul style="list-style-type: disc;">
+  <li>塗りつぶされた円形 (既定値)</li>
+ </ul>
+ </dd>
+ <dt><code>circle</code></dt>
+ <dd>
+ <ul style="list-style-type: circle;">
+  <li>中空円</li>
+ </ul>
+ </dd>
+ <dt><code>square</code></dt>
+ <dd>
+ <ul style="list-style-type: square;">
+  <li>塗りつぶされた四角形</li>
+ </ul>
+ </dd>
+ <dt><code>decimal</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal;">
+  <li>数値</li>
+  <li>既定では 1 から始まります</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>漢数字</li>
+  <li>例: 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
+ </ul>
+ </dd>
+ <dt><code>decimal-leading-zero</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal-leading-zero;">
+  <li>数値</li>
+  <li>ゼロ埋めされて表示されます</li>
+  <li>例: 01, 02, 03, … 98, 99</li>
+ </ul>
+ </dd>
+ <dt><code>lower-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-roman;">
+  <li>小文字のローマ数字</li>
+  <li>例: i, ii, iii, iv, v…</li>
+ </ul>
+ </dd>
+ <dt><code>upper-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-roman;">
+  <li>大文字のローマ数字</li>
+  <li>例: I, II, III, IV, V…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-greek</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-greek;">
+  <li>小文字のギリシャ語</li>
+  <li>アルファ、ベータ、ガンマ、…</li>
+  <li>例: α, β, γ…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-alpha</code></dt>
+ <dt><code>lower-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-alpha;">
+  <li>小文字の ASCII 文字</li>
+  <li>例: a, b, c, … z</li>
+  <li><code>lower-latin</code> は IE7 以前は対応していません</li>
+  <li>{{anch("Browser compatibility")}} の節も参照して下さい</li>
+ </ul>
+ </dd>
+ <dt><code>upper-alpha</code></dt>
+ <dt><code>upper-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-alpha;">
+  <li>大文字の ASCII 文字</li>
+  <li>例: A, B, C, … Z</li>
+  <li><code>upper-latin</code> は IE7 以前は対応していません</li>
+ </ul>
+ </dd>
+ <dt><code>arabic-indic</code></dt>
+ <dt><code>-moz-arabic-indic</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>armenian</code></dt>
+ <dd>
+ <ul style="list-style-type: armenian;">
+  <li>伝統的なアルメニア語の数値表記</li>
+  <li>(ayb/ayp, ben/pen, gim/keem…</li>
+ </ul>
+ </dd>
+ <dt><code>bengali</code></dt>
+ <dt><code>-moz-bengali</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>cambodian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: cambodian;">
+  <li>例</li>
+  <li><code>khmer</code> と同義</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-earthly-branch</code></dt>
+ <dt><code>-moz-cjk-earthly-branch</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-heavenly-stem</code></dt>
+ <dt><code>-moz-cjk-heavenly-stem</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: cjk-ideographic;">
+  <li><code>trad-chinese-informal</code> と同義</li>
+  <li>例: 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>devanagari</code></dt>
+ <dt><code>-moz-devanagari</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: ethiopic-numeric;">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>georgian</code></dt>
+ <dd>
+ <ul style="list-style-type: georgian;">
+  <li>伝統的なジョージア語の数値表記</li>
+  <li>例: an, ban, gan, … he, tan, in…</li>
+ </ul>
+ </dd>
+ <dt><code>gujarati</code></dt>
+ <dt><code>-moz-gujarati</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>gurmukhi</code></dt>
+ <dt><code>-moz-gurmukhi</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>hebrew</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hebrew;">
+  <li>伝統的なヘブライ語の数値表記</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana;">
+  <li>例: あ, い, う, え, お, か, き…</li>
+  <li>日本語の「あいうえお」</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana-iroha;">
+  <li>例: い, ろ, は, に, ほ, へ, と…</li>
+  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-formal;">
+  <li>法的または財務の文書で使用される、日本語の公的な数値表記</li>
+  <li>例: 壱萬壱阡壱百壱拾壱</li>
+  <li>似ている別の文字に書き換えられないようにするための漢字</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-informal;">
+  <li>日本語の日常的な数値表記</li>
+ </ul>
+ </dd>
+ <dt><code>kannada</code></dt>
+ <dt><code>-moz-kannada</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana;">
+  <li>例: ア, イ, ウ, エ, オ, カ, キ…</li>
+  <li>日本語の「あいうえお」</li>
+ </ul>
+ </dd>
+ <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana-iroha;">
+  <li>例: イ, ロ, ハ, ニ, ホ, ヘ, ト…</li>
+  <li>{{interwiki('wikipedia', 'いろは歌')}}は日本語の古い字音の並びです</li>
+ </ul>
+ </dd>
+ <dt><code>khmer</code></dt>
+ <dt><code>-moz-khmer</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hangul-formal;">
+  <li>朝鮮のハングルの数値表記</li>
+  <li>例: 일만 일천일백일십일</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-formal;">
+  <li>公的な朝鮮の漢数字</li>
+  <li>例: 壹萬 壹仟壹百壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-informal;">
+  <li>朝鮮の漢数字</li>
+  <li>例: 萬 一千百十一</li>
+ </ul>
+ </dd>
+ <dt><code>lao</code></dt>
+ <dt><code>-moz-lao</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: lower-armenian;">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>malayalam</code></dt>
+ <dt><code>-moz-malayalam</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>mongolian</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: mongolian;">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>myanmar</code></dt>
+ <dt><code>-moz-myanmar</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>oriya</code></dt>
+ <dt><code>-moz-oriya</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>persian</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-persian</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-formal;">
+  <li>公的な簡体字中国語の数値表記</li>
+  <li>例: 壹万壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-informal;">
+  <li>簡体字中国語の日常的な数値表記</li>
+  <li>例: 一万一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>tamil</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-tamil</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>telugu</code></dt>
+ <dt><code>-moz-telugu</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>thai</code></dt>
+ <dt><code>-moz-thai</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>tibetan</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: tibetan;">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-formal;">
+  <li>公的な繁体字中国語の数値表記</li>
+  <li>例: 壹萬壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-informal;">
+  <li>公的な場では使用しない、繁体字中国語の数値表記</li>
+  <li>例: 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: upper-armenian;">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-open;">
+  <li>{{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-closed;">
+  <li>{{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_extensions" name="Non-standard_extensions">標準外の拡張</h3>
+
+<p>Mozilla (Firefox), Blink (Chrome and Opera), WebKit (Safari) が拡張した、様々な言語のマーカーです。ブラウザーの互換性の表で、ブラウザーがどの拡張に対応しているかを確認してください。</p>
+
+<dl style="">
+ <dt><code>-moz-ethiopic-halehame</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>-moz-ethiopic-halehame-am</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-er</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-er</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-et</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-et</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>hangul</code></dt>
+ <dt><code>-moz-hangul</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+  <li>例</li>
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>hangul-consonant</code></dt>
+ <dt><code>-moz-hangul-consonant</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+  <li>例</li>
+  <li>例</li>
+ </ul>
+ </dd>
+ <dt><code>urdu</code></dt>
+ <dt><code>-moz-urdu</code></dt>
+ <dd>
+ <ul style="">
+  <li>例</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ol class="normal"&gt;List 1
+  &lt;li&gt;Hello&lt;/li&gt;
+  &lt;li&gt;World&lt;/li&gt;
+  &lt;li&gt;What's up?&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;ol class="shortcut"&gt;List 2
+  &lt;li&gt;Looks&lt;/li&gt;
+  &lt;li&gt;Like&lt;/li&gt;
+  &lt;li&gt;The&lt;/li&gt;
+  &lt;li&gt;Same&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples","200","300")}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>読み上げソフトの <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> には、 <code>list-style-type</code> の値に <code>none</code> が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に<a href="https://en.wikipedia.org/wiki/Zero-width_space">幅ゼロの空白</a>を<a href="/ja/docs/Web/CSS/content">擬似コンテンツ</a>として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。</p>
+
+<pre class="brush: css notranslate">ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<ul>
+ <li>一部の <code>list-style-types</code> の表示には、適切なフォントのインストールが必要です。</li>
+ <li><code>cjk-ideographic</code> は <code>trad-chinese-informal</code> と同義です。後方互換性のために残されています。</li>
+</ul>
+
+<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 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>CSS2.1 counters を再定義。<br>
+    <code>@counter-style</code> 規則に対応するため構文を拡張。<br>
+    <code>@counter-style</code> を使用して、一般的なスタイルである <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code>, <code>disclosure-closed</code> を定義。<br>
+    <code>&lt;counter-style&gt;</code> を <code>symbols()</code> 表記で拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>{{cssxref("&lt;string&gt;")}} の対応を追加し、 <code>@counter-style</code> 規則で使われる識別子をキーワードに追加。<br>
+    単純な <code>&lt;string&gt;</code> の対応を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.list-style-type")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/ja/web/css/list-style/index.html b/files/ja/web/css/list-style/index.html
new file mode 100644
index 0000000000..28ccfa8845
--- /dev/null
+++ b/files/ja/web/css/list-style/index.html
@@ -0,0 +1,160 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS リスト
+  - Reference
+  - list-style
+  - list-style-image
+  - list-style-position
+  - list-style-type
+  - リファレンス
+translation_of: Web/CSS/list-style
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>list-style</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>で、リストスタイルプロパティの {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}} を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このプロパティはリスト項目、すなわち <code>{{cssxref("display")}}: list-item;</code> の要素に適用されます。<a href="https://www.w3.org/TR/html5/rendering.html#lists">既定では</a> {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* type */
+list-style: square;
+
+/* image */
+list-style: url('../img/shape.png');
+
+/* position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/shape.png') outside;
+
+/* キーワード値 */
+list-style: none;
+
+/* グローバル値 */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+</pre>
+
+<p><code>list-style</code> プロパティは1～3つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 <code>list-style-type</code> は画像が利用できない場合の予備として使用されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("list-style-type")}}</dt>
+ <dd>{{cssxref("list-style-type")}} を参照して下さい。</dd>
+ <dt>{{cssxref("list-style-image")}}</dt>
+ <dd>{{cssxref("list-style-image")}} を参照して下さい。</dd>
+ <dt>{{cssxref("list-style-position")}}</dt>
+ <dd>{{cssxref("list-style-position")}} を参照して下さい。</dd>
+ <dt><code>none</code></dt>
+ <dd>リストスタイルは使用されません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">List 1
+&lt;ul class="one"&gt;
+  &lt;li&gt;List Item1&lt;/li&gt;
+  &lt;li&gt;List Item2&lt;/li&gt;
+  &lt;li&gt;List Item3&lt;/li&gt;
+&lt;/ul&gt;
+List 2
+&lt;ul class="two"&gt;
+  &lt;li&gt;List Item A&lt;/li&gt;
+  &lt;li&gt;List Item B&lt;/li&gt;
+  &lt;li&gt;List Item C&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 'auto', 220)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>Safari は順序なしリストで <code>list-style</code> の値に <code>none</code> が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前に<a href="https://ja.wikipedia.org/wiki/%E3%82%BC%E3%83%AD%E5%B9%85%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9">ゼロ幅スペース</a>を<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">擬似コンテンツ</a>として追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。</p>
+
+<pre class="brush: css">ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver and list-style-type: none – Unfettered Thoughts</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Lists', '#list-style-property', 'list-style')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.list-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/ja/web/css/list_of_proprietary_css_features/index.html b/files/ja/web/css/list_of_proprietary_css_features/index.html
new file mode 100644
index 0000000000..c2635b76ec
--- /dev/null
+++ b/files/ja/web/css/list_of_proprietary_css_features/index.html
@@ -0,0 +1,168 @@
+---
+title: プロプライエタリな CSS 機能の一覧
+slug: Web/CSS/List_of_Proprietary_CSS_Features
+tags:
+  - CSS
+  - Junk
+translation_of: Web/CSS/List_of_Proprietary_CSS_Features
+---
+<div>{{ CSSRef() }}</div>
+
+<div style="margin: 1em 0px; padding: 1em; background-color: rgb(255, 255, 204); text-align: center;"><strong>草稿</strong>
+
+<div style="font-size: x-small;">このページは未完成です。</div>
+</div>
+
+<div class="warning">
+<p>このページは不完全かつ古いものです。もっと新しい情報は以下のページをご覧ください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS 拡張</a></li>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a></li>
+ <li><a href="/ja/docs/Web/CSS/Webkit_Extensions">WebKit CSS 拡張</a></li>
+</ul>
+</div>
+
+<p>以下の一覧には、様々なブラウザーのエンジンにおける CSS の私的な拡張のうち、標準化のための機能の試験的な実装ではないものを掲載しています (これらの一覧には <a href="/ja/CSS/Draft_Implementations_of_CSS_Features">Draft Implementations of CSS Features</a> をご覧下さい)。</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<h3 id="Properties" name="Properties">プロパティ</h3>
+
+<ul>
+ <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li>
+ <li>{{ Cssxref("-moz-image-region") }}</li>
+ <li>{{ Cssxref("-moz-margin-end") }}</li>
+ <li>{{ Cssxref("-moz-margin-start") }}</li>
+ <li>{{ Cssxref("-moz-orient") }}</li>
+ <li>{{ Cssxref("-moz-padding-end") }}</li>
+ <li>{{ Cssxref("-moz-padding-start") }}</li>
+ <li>{{ Cssxref("-moz-stack-sizing") }}</li>
+ <li>{{ Cssxref("-moz-window-shadow") }}</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<h4 id="cssxref(background-image)">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>Sub-images
+  <ul>
+   <li>{{ cssxref("-moz-image-rect") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Pseudo-elements_and_pseudo-classes" name="Pseudo-elements_and_pseudo-classes">疑似要素と疑似クラス</h3>
+
+<p>...</p>
+
+<h3 id="At-rules" name="At-rules">@規則</h3>
+
+<p>...</p>
+
+<h3 id="Media_Queries" name="Media_Queries">メディアクエリ</h3>
+
+<p>...</p>
+
+<h3 id="Others" name="Others">その他</h3>
+
+<p>...</p>
+
+<h2 id="Opera">Opera</h2>
+
+<h3 id="Properties_2" name="Properties_2">プロパティ</h3>
+
+<p>...</p>
+
+<h3 id="Values_2" name="Values_2">値</h3>
+
+<h4 id="cssxref(background-image)_2">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>{{ cssxref("-o-double-rainbow") }}</li>
+</ul>
+
+<h3 id="Pseudo-elements_and_pseudo-classes_2" name="Pseudo-elements_and_pseudo-classes_2">疑似要素と疑似クラス</h3>
+
+<p>...</p>
+
+<h3 id="At-rules_2" name="At-rules_2">@規則</h3>
+
+<p>...</p>
+
+<h3 id="Media_Queries_2" name="Media_Queries_2">メディアクエリ</h3>
+
+<p>...</p>
+
+<h3 id="Others_2" name="Others_2">その他</h3>
+
+<p>...</p>
+
+<h2 id="Trident_(IE)">Trident (IE)</h2>
+
+<h3 id="Properties_3" name="Properties_3">プロパティ</h3>
+
+<ul>
+ <li>{{ cssxref("-ms-accelerator") }}</li>
+</ul>
+
+<h3 id="Values_3" name="Values_3">値</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-elements_and_pseudo-classes_3" name="Pseudo-elements_and_pseudo-classes_3">疑似要素と疑似クラス</h3>
+
+<p>...</p>
+
+<h3 id="At-rules_3" name="At-rules_3">@規則</h3>
+
+<p>...</p>
+
+<h3 id="Media_Queries_3" name="Media_Queries_3">メディアクエリ</h3>
+
+<p>...</p>
+
+<h3 id="Others_3" name="Others_3">その他</h3>
+
+<p>...</p>
+
+<h2 id="WebKit">WebKit</h2>
+
+<h3 id="Properties_4" name="Properties_4">プロパティ</h3>
+
+<ul>
+ <li>{{ Cssxref("-webkit-box-reflect") }}</li>
+ <li>{{ Cssxref("-webkit-mask") }}</li>
+ <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
+ <li>{{ Cssxref("-webkit-mask-composite") }}</li>
+ <li>{{ Cssxref("-webkit-mask-image") }}</li>
+ <li>{{ Cssxref("-webkit-mask-origin") }}</li>
+ <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
+ <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-width") }}</li>
+ <li>{{ Cssxref("-webkit-touch-callout") }}</li>
+</ul>
+
+<h3 id="Values_4" name="Values_4">値</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-elements_and_pseudo-classes_4" name="Pseudo-elements_and_pseudo-classes_4">疑似要素と疑似クラス</h3>
+
+<p>...</p>
+
+<h3 id="At-rules_4" name="At-rules_4">@規則</h3>
+
+<p>...</p>
+
+<h3 id="Media_Queries_4" name="Media_Queries_4">メディアクエリ</h3>
+
+<p>...</p>
+
+<h3 id="Others_4" name="Others_4">その他</h3>
+
+<p>...</p>
diff --git a/files/ja/web/css/margin-block-end/index.html b/files/ja/web/css/margin-block-end/index.html
new file mode 100644
index 0000000000..59caf5f088
--- /dev/null
+++ b/files/ja/web/css/margin-block-end/index.html
@@ -0,0 +1,110 @@
+---
+title: margin-block-end
+slug: Web/CSS/margin-block-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - NeedsContent
+  - Reference
+  - margin-block
+  - margin-block-end
+translation_of: Web/CSS/margin-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>margin-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-block-end: 10px;  /* 絶対的な長さ */
+margin-block-end: 1em;   /* テキストの大きさに対する相対値 */
+margin-block-end: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-block-end: auto;
+
+/* グローバル値 */
+margin-block-end: inherit;
+margin-block-end: initial;
+margin-block-end: unset;
+</pre>
+
+<p>これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-block-end</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-block-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-block-start/index.html b/files/ja/web/css/margin-block-start/index.html
new file mode 100644
index 0000000000..81f8876d96
--- /dev/null
+++ b/files/ja/web/css/margin-block-start/index.html
@@ -0,0 +1,110 @@
+---
+title: margin-block-start
+slug: Web/CSS/margin-block-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - NeedsContent
+  - Reference
+  - margin-block
+  - margin-block-start
+translation_of: Web/CSS/margin-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>margin-block-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-block-start: 10px;  /* 絶対的な長さ */
+margin-block-start: 1em;   /* テキストの大きさに対する相対値 */
+margin-block-start: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-block-start: auto;
+
+/* グローバル値 */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset;
+</pre>
+
+<p>これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-block-start</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-block-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-block/index.html b/files/ja/web/css/margin-block/index.html
new file mode 100644
index 0000000000..5fb0cb4130
--- /dev/null
+++ b/files/ja/web/css/margin-block/index.html
@@ -0,0 +1,108 @@
+---
+title: margin-block
+slug: Web/CSS/margin-block
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - margin-block
+  - margin-block-end
+  - margin-block-start
+  - 一括指定プロパティ
+translation_of: Web/CSS/margin-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>margin-block</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なブロックの先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-block: 10px 20px;  /* 絶対的な長さ */
+margin-block: 1em 2em;   /* テキストの大きさに対する相対値 */
+margin-block: 5% 2%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+margin-block: 10px; /* 先頭と末尾の両方を設定 */
+
+/* キーワード値 */
+margin-block: auto;
+
+/* グローバル値 */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+</pre>
+
+<p>これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。</p>
+
+<p>値は {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} で個別に設定することができます。インライン方向のプロパティは {{CSSxRef("margin-inline")}} で、 {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} を設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-block</code> プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.margin-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-bottom/index.html b/files/ja/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..431bc74bdc
--- /dev/null
+++ b/files/ja/web/css/margin-bottom/index.html
@@ -0,0 +1,148 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><img alt="要素ボックスにおける CSS の margin-bottom プロパティの効果" src="/files/4045/margin-bottom.svg" style="border: 1px solid; display: block; height: 130px; margin-left: auto; margin-right: auto; width: 400px;"></p>
+
+<p>このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような<em>非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a></em>のインライン要素には効果がありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+margin-bottom: 10px;  /* 絶対的な寸法 */
+margin-bottom: 1em;   /* 文字の寸法からの相対 */
+margin-bottom: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-bottom: auto;
+
+/* グローバル値 */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+</pre>
+
+<p><code>margin-bottom</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるマージンの寸法です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_positive_and_negative_bottom_margins" name="Setting_positive_and_negative_bottom_margins">正および負の数の下側のマージンの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+&lt;div class="box0"&gt;Box 0&lt;/div&gt;
+&lt;div class="box1"&gt;Box 1&lt;/div&gt;
+&lt;div class="box2"&gt;Box one's negative margin pulls me up&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>div に margin-bottom と height を設定する CSS です。</p>
+
+<pre class="brush: css notranslate">.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+</pre>
+
+<p>包含要素と div の定義の一部です。これによって margin の効果がより明確に見えます。</p>
+
+<pre class="brush: css notranslate">.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}</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 Box', '#propdef-margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-bottom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
+ <li>対応する論理プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-inline-end/index.html b/files/ja/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..5b2ed400c4
--- /dev/null
+++ b/files/ja/web/css/margin-inline-end/index.html
@@ -0,0 +1,109 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - NeedsContent
+  - Reference
+  - margin-inline
+  - margin-inline-end
+translation_of: Web/CSS/margin-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>margin-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-inline-end: 10px;   /* 絶対的な長さ */
+margin-inline-end: 1em;    /* テキストの大きさに対する相対値 */
+margin-inline-end: 5%;     /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-inline-end: auto;
+
+/* グローバル値 */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+</pre>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-inline-end</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-inline-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-inline-start/index.html b/files/ja/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..539bd96bcf
--- /dev/null
+++ b/files/ja/web/css/margin-inline-start/index.html
@@ -0,0 +1,106 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 物理的プロパティ
+  - Experimental
+  - Reference
+  - margin-inline
+  - margin-inline-start
+translation_of: Web/CSS/margin-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>margin-inline-start</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。これは {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-inline-start: 10px;  /* 絶対的な長さ */
+margin-inline-start: 1em;   /* テキストの大きさに対する相対値 */
+margin-inline-start: 5%;    /* 直近のブロックコンテナーの大きさに対する相対値 */
+
+/* キーワード値 */
+margin-inline-start: auto;
+
+/* グローバル値 */
+margin-inline-start: inherit;
+</pre>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-end")}} があります。</p>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-inline-start</code> プロパティは {{cssxref("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-inline-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-inline/index.html b/files/ja/web/css/margin-inline/index.html
new file mode 100644
index 0000000000..18aedfb37f
--- /dev/null
+++ b/files/ja/web/css/margin-inline/index.html
@@ -0,0 +1,107 @@
+---
+title: margin-inline
+slug: Web/CSS/margin-inline
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - CSS プロパティ
+  - CSS 論理的プロパティ
+  - Experimental
+  - Reference
+  - margin-inline
+  - margin-inline-end
+  - margin-inline-start
+translation_of: Web/CSS/margin-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>margin-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、論理的なインライン方向の先頭と末尾のマージンを設定します。これは要素の書字方向やテキストの向きに応じて物理的なマージンに変換されます。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+margin-inline: 10px 20px;  /* 絶対的な長さ */
+margin-inline: 1em 2em;    /* テキストの大きさに対する相対値 */
+margin-inline: 5% 2%;      /* 直近のブロックコンテナーの大きさに対する相対値 */
+margin-inline: 10px; /* 先頭と末尾の両方を設定 */
+
+/* キーワード値 */
+margin-inline: auto;
+
+/* グローバル値 */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+</pre>
+
+<p>これらの値は、 {{CSSxRef("margin-top")}} と {{CSSxRef("margin-bottom")}}、または {{CSSxRef("margin-right")}} と {{CSSxRef("margin-left")}} プロパティに、 {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} で定義された値にしたがって対応します。</p>
+
+<p>値は {{CSSxRef("margin-inline-start")}} と {{CSSxRef("margin-inline-end")}} で個別に設定することができます。ブロック方向のプロパティは {{CSSxRef("margin-block")}} で、 {{CSSxRef("margin-block-start")}} と {{CSSxRef("margin-block-end")}} を設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>margin-inline</code> プロパティは、 {{CSSxRef("margin-left")}} プロパティと同じ値を取ります。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<p>{{EmbedLiveSample("Example", 140, 140)}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.margin-inline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, {{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-left/index.html b/files/ja/web/css/margin-left/index.html
new file mode 100644
index 0000000000..bc32853ead
--- /dev/null
+++ b/files/ja/web/css/margin-left/index.html
@@ -0,0 +1,171 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-left</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>二つの隣り合うボックスの垂直マージンは融合することがあります。これは<a href="/ja/docs/CSS/margin_collapsing"><em>マージンの相殺</em></a>と呼ばれています。</p>
+
+<p>まれに幅の制約がきつすぎると (つまり、 <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, コンテンツ領域, <code>margin-right</code> がすべて定義されていた場合)、 <code>margin-left</code> は無視され、 <code>auto</code> が設定されていたときと同じ計算値になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+margin-left: 10px;  /* 絶対的な寸法 */
+margin-left: 1em;   /* 文字の寸法からの相対 */
+margin-left: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-left: auto;
+
+/* グローバル値 */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p><code>margin-left</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるマージンの寸法です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 <code>margin-left</code> と <code>margin-right</code> の両方が <code>auto</code> の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">{{cssxref("display")}} の値</th>
+    <th scope="col">{{cssxref("float")}} の値</th>
+    <th scope="col">{{cssxref("position")}} の値</th>
+    <th scope="col"><code>auto</code> の計算値</th>
+    <th scope="col">コメント</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>任意</em></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>インラインレイアウトモード</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>任意</em></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、親要素の中で中央揃えする値に設定されます。</td>
+    <td>ブロックレイアウトモード</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> または <code>right</code></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>ブロックレイアウトモード (フロート要素)</td>
+   </tr>
+   <tr>
+    <th><code>table-*</code> <em>すべて</em>、ただし <code>table-caption</code> <em>を除く</em></th>
+    <th><em>任意</em></th>
+    <th><em>任意</em></th>
+    <td><code>0</code></td>
+    <td>内部の <code>table-*</code> 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>、 <code>inline-flex</code>, <code>table-*</code> <em>以外のすべて</em></th>
+    <th><em>任意</em></th>
+    <th><em><code>fixed</code></em> または <code>absolute</code></th>
+    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、ボーダー領域を <code>width</code> の中で中央揃えする値に設定されます（固定されている場合）。</td>
+    <td>絶対位置指定配置モード</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>任意</em></th>
+    <th><em>任意</em></th>
+    <td><code>0</code>。ただし、水平に正の余白がある場合は、 <code>auto</code> を指定したすべてのマージンに均等に割り振られます。</td>
+    <td>フレックスボックス配置モード</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_left_margin_using_pixels_and_percentages" name="Setting_left_margin_using_pixels_and_percentages">ピクセル数とパーセント値を使用した左マージンの設定</h3>
+
+<pre class="brush: css notranslate">.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+</pre>
+
+<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 Box', '#propdef-margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>CSS 2.1 から目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>フレックス項目での <code>margin-left</code> の挙動を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-left")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-right/index.html b/files/ja/web/css/margin-right/index.html
new file mode 100644
index 0000000000..d8d5b32ccf
--- /dev/null
+++ b/files/ja/web/css/margin-right/index.html
@@ -0,0 +1,168 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-right</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>二つの隣り合うボックスの垂直マージンは融合することがあります。これは<a href="/ja/docs/CSS/margin_collapsing"><em>マージンの相殺</em></a>と呼ばれています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+margin-right: 20px;  /* 絶対的な寸法 */
+margin-right: 1em;   /* 文字の寸法からの相対 */
+margin-right: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-right: auto;
+
+/* グローバル値 */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p><code>margin-right</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるマージンの寸法です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 <code>margin-left</code> と <code>margin-right</code> の両方が <code>auto</code> の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">{{cssxref("display")}} の値</th>
+    <th scope="col">{{cssxref("float")}} の値</th>
+    <th scope="col">{{cssxref("position")}} の値</th>
+    <th scope="col"><code>auto</code> の計算値</th>
+    <th scope="col">コメント</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>任意</em></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>インラインレイアウトモード</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>任意</em></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、親要素の中で中央揃えする値に設定されます。</td>
+    <td>ブロックレイアウトモード</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> または <code>right</code></th>
+    <th><code>static</code> または <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>ブロックレイアウトモード (フロート要素)</td>
+   </tr>
+   <tr>
+    <th><code>table-*</code> <em>すべて</em>、ただし <code>table-caption</code> <em>を除く</em></th>
+    <th><em>任意</em></th>
+    <th><em>任意</em></th>
+    <td><code>0</code></td>
+    <td>内部の <code>table-*</code> 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>、 <code>inline-flex</code>, <code>table-*</code> <em>以外のすべて</em></th>
+    <th><em>任意</em></th>
+    <th><em><code>fixed</code></em> または <code>absolute</code></th>
+    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、ボーダー領域を <code>width</code> の中で中央揃えする値に設定されます（固定されている場合）。</td>
+    <td>絶対位置指定配置モード</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>任意</em></th>
+    <th><em>任意</em></th>
+    <td><code>0</code>。ただし、水平に正の余白がある場合は、 <code>auto</code> を指定したすべてのマージンに均等に割り振られます。</td>
+    <td>フレックスボックス配置モード</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_right_margin_using_pixels_and_percentages" name="Setting_right_margin_using_pixels_and_percentages">ピクセル数とパーセント値を使用した右マージンの設定</h3>
+
+<pre class="brush: css notranslate">.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+</pre>
+
+<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 Box', '#the-margin', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>フレックス項目での <code>margin-right</code> の挙動を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-right")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin-top/index.html b/files/ja/web/css/margin-top/index.html
new file mode 100644
index 0000000000..3854d0c52a
--- /dev/null
+++ b/files/ja/web/css/margin-top/index.html
@@ -0,0 +1,108 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-top</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>このプロパティは、<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要</a></em>ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+margin-top: 10px;  /* 絶対的な寸法 */
+margin-top: 1em;   /* 文字の寸法からの相対 */
+margin-top: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
+
+/* キーワード値 */
+margin-top: auto;
+
+/* グローバル値 */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+</pre>
+
+<p><code>margin-top</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるマージンの寸法です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_positive_and_negative_top_margins" name="Setting_positive_and_negative_top_margins">正と負の上マージンの設定</h3>
+
+<pre class="brush:css; notranslate">.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+</pre>
+
+<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 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>ただしインライン要素での効果を削除。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.margin-top")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/margin/index.html b/files/ja/web/css/margin/index.html
new file mode 100644
index 0000000000..876e9526ea
--- /dev/null
+++ b/files/ja/web/css/margin/index.html
@@ -0,0 +1,181 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ボックスモデル
+  - Reference
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の全四辺の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。これはすべての個別のマージン ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}) の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>ではない</em>インライン要素には効果がありません。</p>
+
+<div class="note">
+<p><strong>注:</strong> マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素<em>内</em>に追加の領域を作成します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 四辺すべてに適用 */
+margin: 1em;
+margin: -3px;
+
+/* 上下 | 左右 */
+margin: 5% auto;
+
+/* 上 | 左右 | 下 */
+margin: 1em auto 2em;
+
+/* 上 | 右 | 下 | 左 */
+margin: 2px 1em 0 auto;
+
+/* グローバル値 */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<p><code>margin</code> プロパティは1～4つの値を使って指定することができます。それぞれの値は <code><a href="#&lt;length>">&lt;length&gt;</a></code>、 <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>、 または <code><a href="#auto">auto</a></code> キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><strong>{{cssxref("length")}}</strong></dt>
+ <dd>固定値によるマージンの寸法です。</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>内包ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_example" name="Simple_example">単純な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="center"&gt;This element is centered.&lt;/div&gt;
+
+&lt;div class="outside"&gt;This element is positioned outside of its container.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,8] notranslate">.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>
+
+<h3 id="More_examples" name="More_examples">その他の例</h3>
+
+<pre class="brush: css notranslate">margin: 5%;                /* 全辺: 5% のマージン */
+
+margin: 10px;              /* 全辺: 10px のマージン */
+
+margin: 1.6em 20px;         /* 上と下: 1.6em のマージン */
+                            /* 左と右: 20px のマージン  */
+
+margin: 10px 3% -1em;       /* 上:     10px のマージン */
+                            /* 左と右: 3% のマージン   */
+                            /* 下:     -1em のマージン  */
+
+margin: 10px 3px 30px 5px;  /* 上:     10px のマージン */
+                            /* 右:     3px のマージン  */
+                            /* 下:     30px のマージン */
+                            /* 右:     5px のマージン  */
+
+margin: 2em auto;           /* 上と下: 2em のマージン   */
+                            /* ボックスは水平方向に中央 */
+
+margin: auto;               /* 上と下: 0 のマージン     */
+                            /* ボックスは水平方向に中央 */
+</pre>
+
+<h2 id="Notes" name="Notes">注</h2>
+
+<h3 id="Horizontal_centering" name="Horizontal_centering">水平方向の中央揃え</h3>
+
+<p>最近のブラウザーで何かを中央揃えしたい場合は、 <code><a href="/ja/docs/Web/CSS/display">display</a>: flex; <a href="/ja/docs/Web/CSS/justify-content">justify-content</a>: center;</code> を使用することができます。</p>
+
+<p>しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 <code>margin: 0 auto;</code> を使用してください。</p>
+
+<h3 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h3>
+
+<p>要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺の理解</a>を参照してください。</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 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>有意な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td><code>margin</code> をアニメーション可能として定義。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>インライン要素における top および bottom マージンの効果を削除。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.margin")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="internal" href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介 </a></li>
+ <li><a class="internal" href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a></li>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+</ul>
diff --git a/files/ja/web/css/mask-border-repeat/index.html b/files/ja/web/css/mask-border-repeat/index.html
new file mode 100644
index 0000000000..4e013f9246
--- /dev/null
+++ b/files/ja/web/css/mask-border-repeat/index.html
@@ -0,0 +1,80 @@
+---
+title: mask-border-repeat
+slug: Web/CSS/mask-border-repeat
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-border-repeat
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-repeat</code></strong> プロパティは、どのように元の画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を要素の<a href="/en-US/docs/Web/CSS/mask-border">マスク境界</a>の寸法に合うように調整するかを設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* 上下 | 左右 */
+mask-border-repeat: round stretch;
+
+/* グローバル値 */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+</pre>
+
+<p><code>mask-border-repeat</code> プロパティは、以下の値のリストから一つまたは二つの値を使用して指定します。</p>
+
+<ul>
+ <li><strong>一つ</strong>の値が指定されると、<strong>全四辺</strong>に同じ動作が適用されます。</li>
+ <li><strong>二つ</strong>の値が指定されると、最初の値は<strong>上と下</strong>の辺に、二番目の値は<strong>左と右</strong>の辺に適用されます。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるように引き伸ばされます。</dd>
+ <dt><code>repeat</code></dt>
+ <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように切り取られることがあります。</dd>
+ <dt><code>round</code></dt>
+ <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。タイルは正しく合うように引き伸ばされることがあります。</dd>
+ <dt><code>space</code></dt>
+ <dd>元の画像の辺の領域は、それぞれの境界の間の溝を埋めるようにタイル配置 (繰り返し) されます。正しく合うように間隔が配布されることがあります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>TBD</p>
diff --git a/files/ja/web/css/mask-border-source/index.html b/files/ja/web/css/mask-border-source/index.html
new file mode 100644
index 0000000000..7db15c1458
--- /dev/null
+++ b/files/ja/web/css/mask-border-source/index.html
@@ -0,0 +1,73 @@
+---
+title: mask-border-source
+slug: Web/CSS/mask-border-source
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-border-source
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-source</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>を生成するのに使われる元の画像を設定します。</p>
+
+<p>{{cssxref("mask-border-slice")}} プロパティは、元の画像を最終的なマスク境界に動的に適用する上で、複数の領域に分割するために使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword 値 */
+mask-border-source: none;
+
+/* &lt;image&gt; 値 */
+mask-border-source: url(image.jpg);
+mask-border-source: linear-gradient(to top, red, yellow);
+
+/* グローバル値 */
+mask-border-source: inherit;
+mask-border-source: initial;
+mask-border-source: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>マスク境界は使用されません。</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>マスク境界に使用する画像への参照です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>例については {{cssxref("mask-border")}} をご覧ください。</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("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>TBD</p>
diff --git a/files/ja/web/css/mask-border-width/index.html b/files/ja/web/css/mask-border-width/index.html
new file mode 100644
index 0000000000..0c3b0b1e06
--- /dev/null
+++ b/files/ja/web/css/mask-border-width/index.html
@@ -0,0 +1,92 @@
+---
+title: mask-border-width
+slug: Web/CSS/mask-border-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-border-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-border-width</code></strong> プロパティは、要素の<a href="/ja/docs/Web/CSS/mask-border">マスク境界</a>の幅を設定します。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+mask-border-width: auto;
+
+/* &lt;length&gt; 値 */
+mask-border-width: 1rem;
+
+/* &lt;percentage&gt; 値 */
+mask-border-width: 25%;
+
+/* &lt;number&gt; 値 */
+mask-border-width: 3;
+
+/* 上下 | 左右 */
+mask-border-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+mask-border-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+mask-border-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+</pre>
+
+<p><code>mask-border-width</code> プロパティは、以下の値のリストの中から1～4つの値を使って指定することができます。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>マスク境界の幅を、 {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で指定します。パーセント値は左右のオフセットについては境界領域の<em>幅</em>に対する相対値、上下のオフセットについては境界領域の<em>高さ</em>に対する相対値です。負の数であってはなりません。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>マスク境界の幅を、対応する {{cssxref("border-width")}} の倍数で指定します。負の数であってはなりません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>マスク境界の幅は、対応する {{cssxref("mask-border-slice")}} の固有の幅または高さ (適切な方) と等しくなります。画像が要求された固有の寸法を持っていない場合は、対応する <code>border-width</code> が代わりに使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>TBD</p>
diff --git a/files/ja/web/css/mask-clip/index.html b/files/ja/web/css/mask-clip/index.html
new file mode 100644
index 0000000000..15d56ed307
--- /dev/null
+++ b/files/ja/web/css/mask-clip/index.html
@@ -0,0 +1,152 @@
+---
+title: mask-clip
+slug: Web/CSS/mask-clip
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-clip
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;geometry-box&gt; 値 */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* キーワード値 */
+mask-clip: no-clip;
+
+/* 標準外のキーワード値 */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* 複数の値 */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* グローバル値 */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>描画されるコンテンツは、コンテンツボックスでクリッピングされます。</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>描画されるコンテンツは、パディングボックスでクリッピングされます。</dd>
+ <dt><code>border-box</code></dt>
+ <dd>描画されるコンテンツは、境界ボックスでクリッピングされます。</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>描画されるコンテンツは、マージンボックスでクリッピングされます。</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>描画されるコンテンツは、オブジェクトの囲みボックスでクリッピングされます。</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>描画されるコンテンツは、オブジェクトの輪郭線ボックスでクリッピングされます。</dd>
+ <dt><code>view-box</code></dt>
+ <dd>直近の SVG ビューポートを参照ボックスとして使用します。 <code><a href="/ja/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
+ <dt><code>no-clip</code></dt>
+ <dd>描画されるコンテンツはクリッピングされません。</dd>
+ <dt><code>border</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>border-box</code> と同じ動作をします。</dd>
+ <dt><code>padding</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>padding-box</code> と同じ動作をします。</dd>
+ <dt><code>content</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは <code>content-box</code> と同じ動作をします。</dd>
+ <dt><code>text</code>{{non-standard_inline}}</dt>
+ <dd>このキーワードは要素のテキストでマスク画像をクリッピングします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[10]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-size: 100% 100%;
+  mask-clip: border-box; /* Can be changed in the live sample */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="clipBox"&gt;
+  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
+  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
+  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
+  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
+  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
+  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
+  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
+  &lt;option value="no-clip"&gt;no-clip&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipBox = document.getElementById("clipBox");
+clipBox.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskClip = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "220px", "250px")}}</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("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-clip")}}</p>
diff --git a/files/ja/web/css/mask-composite/index.html b/files/ja/web/css/mask-composite/index.html
new file mode 100644
index 0000000000..9465a137b6
--- /dev/null
+++ b/files/ja/web/css/mask-composite/index.html
@@ -0,0 +1,122 @@
+---
+title: mask-composite
+slug: Web/CSS/mask-composite
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/mask-composite
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-composite</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* グローバル値 */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>以下に示す1つまたは複数のキーワード値を、カンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p>混合において、現在のマスクレイヤーは <em>source</em>、その下にあるすべてのマスクレイヤーは <em>destination</em> とします。</p>
+
+<dl>
+ <dt><code>add</code></dt>
+ <dd>source が destination の上に配置されます。</dd>
+ <dt><code>subtract</code></dt>
+ <dd>destination の外側に source が配置されます。</dd>
+ <dt><code>intersect</code></dt>
+ <dd>destination と重なっている source の部分が destination を置き換えます。</dd>
+ <dt><code>exclude</code></dt>
+ <dd>source と destination で重なっていない領域が結合されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Compositing_mask_layers_with_addition" name="Compositing_mask_layers_with_addition">追加でマスクレイヤーの合成</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[7] notranslate">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  mask-composite: add; /* Can be changed in the live sample */
+}
+</pre>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="compositeMode"&gt;
+  &lt;option value="add"&gt;add&lt;/option&gt;
+  &lt;option value="subtract"&gt;subtract&lt;/option&gt;
+  &lt;option value="intersect"&gt;intersect&lt;/option&gt;
+  &lt;option value="exclude"&gt;exclude&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var clipBox = document.getElementById("compositeMode");
+clipBox.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskComposite = evt.target.value;
+});
+</pre>
+</div>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Compositing_mask_layers_with_addition", "100px", "130px")}}</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("CSS Masks", "#the-mask-composite", "mask-composite")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-composite")}}</p>
diff --git a/files/ja/web/css/mask-image/index.html b/files/ja/web/css/mask-image/index.html
new file mode 100644
index 0000000000..1ef8500d4c
--- /dev/null
+++ b/files/ja/web/css/mask-image/index.html
@@ -0,0 +1,96 @@
+---
+title: mask-image
+slug: Web/CSS/mask-image
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-image
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+mask-image: none;
+
+/* &lt;mask-source&gt; 値 */
+mask-image: url(masks.svg#mask1);
+
+/* &lt;image&gt; 値 */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* 複数の値 */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* グローバル値 */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>このキーワードは、透明な黒い画像レイヤーとして解釈されます。</dd>
+ <dt><code>&lt;mask-source&gt;</code></dt>
+ <dd>{{cssxref("&lt;url&gt;")}} による {{SVGElement("mask")}} または CSS 画像への参照です。</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>マスク画像レイヤーとして使用有れる画像の値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example', '100px', '100px', '', '', 'hide-codepen-jsfiddle')}}</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("CSS Masks", "#the-mask-image", "mask-image")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-image")}}</p>
diff --git a/files/ja/web/css/mask-mode/index.html b/files/ja/web/css/mask-mode/index.html
new file mode 100644
index 0000000000..3b17074a91
--- /dev/null
+++ b/files/ja/web/css/mask-mode/index.html
@@ -0,0 +1,121 @@
+---
+title: mask-mode
+slug: Web/CSS/mask-mode
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/mask-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mask-mode</code></strong> プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* 複数の値 */
+mask-mode: alpha, match-source;
+
+/* グローバル値 */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>mask-mode</code> プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。</dd>
+ <dt><code>luminance</code></dt>
+ <dd>このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。</dd>
+ <dt><code>match-source</code></dt>
+ <dd>
+ <p>{{cssxref("mask-image")}} プロパティが <code>&lt;mask-source&gt;</code> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。</p>
+
+ <p>{{cssxref("&lt;image&gt;")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。</p>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_alpha_mask_mode" name="Using_alpha_mask_mode">アルファマスクモードの使用</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[6] notranslate">#masked {
+  width: 227px;
+  height: 200px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-mode: alpha; /* ライブサンプルで変更することができます */
+}
+</pre>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="maskMode"&gt;
+  &lt;option value="alpha"&gt;alpha&lt;/option&gt;
+  &lt;option value="luminance"&gt;luminance&lt;/option&gt;
+  &lt;option value="match-source"&gt;match-source&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var maskMode = document.getElementById("maskMode");
+maskMode.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskMode = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}</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("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-mode")}}</p>
diff --git a/files/ja/web/css/mask-origin/index.html b/files/ja/web/css/mask-origin/index.html
new file mode 100644
index 0000000000..84ee99c1b8
--- /dev/null
+++ b/files/ja/web/css/mask-origin/index.html
@@ -0,0 +1,143 @@
+---
+title: mask-origin
+slug: Web/CSS/mask-origin
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マスクの基準位置を設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* 複数の値 */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* 標準外のキーワード値 */
+-webkit-mask-origin: content;
+-webkit-mask-origin: padding;
+-webkit-mask-origin: border;
+
+/* グローバル値 */
+mask-origin: inherit;
+mask-origin: initial;
+mask-origin: unset;
+</pre>
+
+<p>単純なボックスとして描画される要素では、このプロパティはマスクを配置する領域を指定します。言い換えれば、このプロパティは {{cssxref("mask-image")}} CSS プロパティで指定された画像の基準位置を指定します。複数のボックスとして描画される要素、例えば複数行にまたがるインラインボックスや複数のページにまたがるボックスなどでは、マスクの配置領域を決定するために {{cssxref("box-decoration-break")}} がどのボックスに作用するかを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>1つまたは複数の以下に挙げたキーワード値を、コンマで区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>位置がコンテンツボックスからの相対位置になります。</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>位置がパディングボックスからの相対位置になります。単純なボックスでは <code>0 0</code> がパディング境界の左上隅で、 <code>100% 100%</code> は右下隅です。</dd>
+ <dt><code>border-box</code></dt>
+ <dd>位置が境界ボックスからの相対位置になります。</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>位置がマージンボックスからの相対位置になります。</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>位置がオブジェクトの囲みボックスからの相対位置になります。</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>位置が輪郭線ボックスからの相対位置になります。</dd>
+ <dt><code>view-box</code></dt>
+ <dd>直近の SVG ビューポートを参照ボックスとして使用します。 {{svgattr("viewBox")}} 属性が SVG ビューポートを作成している要素に指定されると、参照ボックスは <code>viewBox</code> 属性で示された座標系の原点に配置され、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さに設定されます。</dd>
+ <dt><code>content</code> {{non-standard_inline}}</dt>
+ <dd><code>content-box</code> と同じです。</dd>
+ <dt><code>padding</code> {{non-standard_inline}}</dt>
+ <dd><code>padding-box</code> と同じです。</dd>
+ <dt><code>border</code> {{non-standard_inline}}</dt>
+ <dd><code>border-box</code> と同じです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[9]">#masked {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 10px solid blue;
+  background-color: #8cffa0;
+  padding: 10px;
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-origin: border-box; /* Can be changed in the live sample */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="origin"&gt;
+  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
+  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
+  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
+  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
+  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
+  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
+  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var origin = document.getElementById("origin");
+origin.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskOrigin = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 160, 200)}}</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("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-origin")}}</p>
diff --git a/files/ja/web/css/mask-position/index.html b/files/ja/web/css/mask-position/index.html
new file mode 100644
index 0000000000..b75fd53502
--- /dev/null
+++ b/files/ja/web/css/mask-position/index.html
@@ -0,0 +1,129 @@
+---
+title: mask-position
+slug: Web/CSS/mask-position
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-position
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、定義されたマスク画像それぞれについて、 {{cssxref("mask-origin")}} で設定されたマスク位置レイヤーからの相対で初期位置を設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/* &lt;position&gt; 値 */
+mask-position: 25% 75%;
+mask-position: 0px 0px;
+mask-position: 10% 8em;
+
+/* 複数の値 */
+mask-position: top right;
+mask-position: 1rem 1rem, center;
+
+/* グローバル値 */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>1つ以上の <code>&lt;position&gt;</code> 値をコンマで区切ったもの。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>要素ボックスの辺からの二次元の位置を表す1つから4つの値です。相対または絶対オフセットを与えることができます。なお、位置は要素ボックスの外に設定することができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13]">#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrapper"&gt;
+  &lt;div id="masked"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="maskPosition"&gt;
+  &lt;option value="top"&gt;top&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="bottom"&gt;bottom&lt;/option&gt;
+  &lt;option value="top right" selected&gt;top right&lt;/option&gt;
+  &lt;option value="center center"&gt;center center&lt;/option&gt;
+  &lt;option value="bottom left"&gt;bottom left&lt;/option&gt;
+  &lt;option value="10px 20px"&gt;10px 20px&lt;/option&gt;
+  &lt;option value="60% 20%"&gt;60% 20%&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var maskPosition = document.getElementById("maskPosition");
+maskPosition.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskPosition = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 290, 290)}}</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("CSS Masks", "#the-mask-position", "mask-position")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-position")}}</p>
diff --git a/files/ja/web/css/mask-repeat/index.html b/files/ja/web/css/mask-repeat/index.html
new file mode 100644
index 0000000000..f38d2244c6
--- /dev/null
+++ b/files/ja/web/css/mask-repeat/index.html
@@ -0,0 +1,194 @@
+---
+title: mask-repeat
+slug: Web/CSS/mask-repeat
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS マスク
+  - Experimental
+  - Reference
+translation_of: Web/CSS/mask-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-repeat</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。</p>
+
+<pre class="brush: css no-line-numbers">/* 一つの値の構文 */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* 二つの値の構文: horizontal | vertical */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* 複数の値 */
+mask-repeat: space round, no-repeat;
+mask-repeat: round repeat, space, repeat-x;
+
+/* グローバル値 */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+</pre>
+
+<p>既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (<code>round</code> を使用して) 大きさが合うように拡大縮小したり、 (<code>space</code> を使用して) 端から端まで等分に配分したりすることができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>1つ以上の <code>&lt;repeat-style&gt;</code> 値をコンマ区切りで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>単一の値の構文は、二つの値の構文の一括指定です。</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>単一の値</th>
+    <th>同等の二つの値</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ 二つの値の構文では、最初の値が水平方向の繰り返しの動作を表し、二番目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 {{cssxref("mask-position")}} プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 <code>space</code> を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は {{cssxref("mask-position")}} CSS プロパティで定義されます。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Single_value" name="Single_value">単一の値</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[6]">#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: repeat; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+</pre>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="repetition"&gt;
+  &lt;option value="repeat-x"&gt;repeat-x&lt;/option&gt;
+  &lt;option value="repeat-y"&gt;repeat-y&lt;/option&gt;
+  &lt;option value="repeat" selected&gt;repeat&lt;/option&gt;
+  &lt;option value="space"&gt;space&lt;/option&gt;
+  &lt;option value="round"&gt;round&lt;/option&gt;
+  &lt;option value="no-repeat"&gt;no-repeat&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskRepeat = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Single_value", "290px", "290px")}}</p>
+
+<h3 id="Multiple_mask_image_support" name="Multiple_mask_image_support">複数のマスク画像の対応</h3>
+
+<p>それぞれのマスク画像に異なる <code>&lt;repeat-style&gt;</code> を、コンマ区切りで指定することができます。</p>
+
+<pre class="brush: css">.examplethree {
+  mask-image: url('mask1.png'), url('mask2.png');
+  mask-repeat: repeat-x, repeat-y;
+}
+</pre>
+
+<p>それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。</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("CSS Masks", "#the-mask-repeat", "mask-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-repeat")}}</p>
diff --git a/files/ja/web/css/mask-type/index.html b/files/ja/web/css/mask-type/index.html
new file mode 100644
index 0000000000..2dcc8a4b3d
--- /dev/null
+++ b/files/ja/web/css/mask-type/index.html
@@ -0,0 +1,186 @@
+---
+title: mask-type
+slug: Web/CSS/mask-type
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - CSS プロパティ
+  - CSS マスク
+  - Reference
+  - SVG
+translation_of: Web/CSS/mask-type
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mask-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 SVG の {{svgElement("mask")}} 要素を<em>ルミナンス</em>マスクと<em>アルファ</em>マスクのどちらとして扱うかを設定します。これは <code>&lt;mask&gt;</code> 要素自身に設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+mask-type: luminance;
+mask-type: alpha;
+
+/* グローバル値 */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+</pre>
+
+<p>このプロパティは、マスクが使用される要素に適用され、同じ効果を持つ {{cssxref("mask-mode")}} プロパティによって上書きされることがあります。アルファマスクは全般的に表示が高速です。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>mask-type</code> プロパティは以下に示すキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>luminance</code></dt>
+ <dd>関連付けられたマスク画像がルミナンスマスクであることを示すキーワードです。すなわち、適用時に<a href="https://en.wikipedia.org/wiki/Luminance_%28relative%29">相対輝度</a>値が使用されます。</dd>
+ <dt><code>alpha</code></dt>
+ <dd>関連付けられたマスク画像がアルファマスクであることを示すキーワードです。すなわち、適用時に<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB">アルファチャネル</a>値が使用されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の長方形をマスクとして適用してみましょう。</p>
+
+<pre class="brush: html">&lt;rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" /&gt;</pre>
+
+<div class="hidden">
+<h3 id="mask" name="mask">マスク</h3>
+
+<pre class="brush: html">&lt;svg width="100" height="100"&gt;
+  &lt;rect x="10" y="10" width="80" height="80"
+      fill="red" fill-opacity="0.7"/&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<div>このような正方形になります。 {{EmbedLiveSample('mask', '100%', '100')}}</div>
+
+<p>適用先はこちらです。</p>
+
+<div class="hidden">
+<h3 id="box" name="box">ボックス</h3>
+
+<pre class="brush: css">.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="redsquare"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('box', '100%', '120')}}</div>
+
+<p>結果として、ブラウザーがこのプロパティに対応している場合、 <code>mask-type</code> が {{SVGElement("mask")}} 要素に適用されると2つの異なる四角形になります。</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>mask-type: alpha;</code></td>
+   <td><code>mask-type: luminance;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="hidden" id="maskalpha">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:alpha"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div>
+   </td>
+   <td>
+    <div class="hidden" id="maskluminance">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:luminance"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS Masks', '#the-mask-type', 'mask-type')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.mask-type")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>その他のマスクに関するプロパティ: {{cssxref("mask")}}, {{cssxref("mask-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/max()/index.html b/files/ja/web/css/max()/index.html
new file mode 100644
index 0000000000..274f4a8b35
--- /dev/null
+++ b/files/ja/web/css/max()/index.html
@@ -0,0 +1,137 @@
+---
+title: max()
+slug: Web/CSS/max()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - Calculate
+  - Compute
+  - Function
+  - Layout
+  - Reference
+  - Web
+  - max
+  - 関数
+translation_of: Web/CSS/max()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 <code>max()</code> 関数は {{CSSxRef("&lt;length&gt;")}}、{{CSSxRef("&lt;frequency&gt;")}},、{{CSSxRef("&lt;angle&gt;")}}、{{CSSxRef("&lt;time&gt;")}}、{{CSSxRef("&lt;percentage&gt;")}}、{{CSSxRef("&lt;number&gt;")}}、{{CSSxRef("&lt;integer&gt;")}} が利用できるところならばどこでも使用することができます。</p>
+
+<pre class="brush: css; no-line-numbers">/* プロパティ: max(式 [, 式]) */
+width: max(10vw, 4em, 80px);
+</pre>
+
+<p>上の例では、幅は最小 80px ですが、ビューポートの幅が 800px より広いか em の幅が 20px より大きい場合は広くなります。言い換えれば、最小幅は 80px です。 <code>max()</code> の値はプロパティが取りうる<em>最小の</em>値を提供するものとして考えてください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>max()</code> 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。</p>
+
+<p>式は ({{CSSxRef("&lt;length&gt;")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式や、入れ子になった {{CSSxRef("min", "min()")}} および <code>max()</code> 関数にすることができます。</p>
+
+<p>式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。</p>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<ul>
+ <li>表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも <code>auto</code> が指定されていたかのように扱われる<em>可能性があります</em>。</li>
+ <li><code>min()</code> や他の <code>max()</code> 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 <code>calc()</code> 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。</li>
+ <li>式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <code>&lt;length&gt;</code> 構文値を使用できます。</li>
+ <li><code>min()</code> と <code>max()</code> の値を組み合わせたり、 <code>max()</code> を <code>clamp()</code> や <code>calc()</code> 関数の中で使用したりすることができます (そしてよく必要になります)。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Making_images_at_least_a_minimum_size" name="Making_images_at_least_a_minimum_size">画像を最小サイズ以上にする</h3>
+
+<p><code>max()</code> を使用すると、画像の<strong>最小</strong>幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は大きい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。</p>
+
+<pre class="brush: css;">.logo {
+  width: max(50vw, 300px);
+}
+</pre>
+
+<pre class="brush: html;">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}</p>
+
+<p>この例では、ロゴの幅は 300px 以上になりますが、ビューポートが 600px よりも広くなったら、ここからビューポートの幅の 50% を保ちながら、ビューポートが拡大するに従って拡大します。</p>
+
+<h3 id="Setting_a_minimum_size_for_a_font" name="Setting_a_minimum_size_for_a_font">フォントに最小値を設定する</h3>
+
+<p>CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。</p>
+
+<p>いくらか CSS を見てください。</p>
+
+<pre class="brush: css;">h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+</pre>
+
+<p>フォントサイズは最小で 2rems、ページの既定のフォントサイズの2倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。</p>
+
+<pre class="brush: html;">&lt;h1&gt;This text is always legible, but doesn't change size&lt;/h1&gt;
+&lt;h1 class="responsive"&gt;This text is always legible, and is responsive, to a point&lt;/h1&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}</p>
+
+<p><code>max()</code> 関数はプロパティに許される最小値を探るものと考えてください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>max()</code> を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、入れ子になった {{CSSxRef("min", "min()")}} 関数を <code>max()</code> の中に使用し、その二番目の値として常に十分な大きさの<a href="/ja/docs/Web/CSS/length#Relative_length_units">相対的な長さの単位</a>を持つようにします。</p>
+
+<pre class="brush: css;">small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}</pre>
+
+<p>これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは <em>1rem</em> になります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS4 Values", "#calc-notation", "max()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.max")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("min", "min()")}}</li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値</a></li>
+</ul>
diff --git a/files/ja/web/css/max-block-size/index.html b/files/ja/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..2674bb553f
--- /dev/null
+++ b/files/ja/web/css/max-block-size/index.html
@@ -0,0 +1,193 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Layout
+  - Maximum Height
+  - Maximum Width
+  - Reference
+  - height
+  - max-block-size
+  - 'recipe:css-property'
+  - size
+  - width
+translation_of: Web/CSS/max-block-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>max-block-size</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("writing-mode")}} で指定された書字方向とは逆の向きの要素の最大寸法を指定します。</span>すなわち、書字方向が水平 (横書き) であれば、 <code>max-block-size</code> は {{cssxref("max-height")}} と等価になります。書字方向が垂直 (縦書き) であれば、 <code>max-block-size</code> は {{cssxref("max-width")}} と同じになります。</p>
+
+<p>もう一方の方向の最大長は、 {{cssxref("max-inline-size")}} プロパティを使用して指定します。</p>
+
+<p><code>max-width</code> は常に水平方向の寸法に使われ、 <code>max-height</code> は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。</p>
+
+<p>ふつう <code>max-height</code> または <code>max-width</code> を使用する場面でいつでも、代わりに <code>max-block-size</code> をコンテンツの最大の「高さ」を設定するために使用し (これは垂直の値ではない可能性がありますが)、 <code>max-inline-size</code>をコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す{{SectionOnPage("/ja/docs/Web/CSS/writing-mode", "例")}}をご覧ください。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* &lt;percentage&gt; 値 */
+max-block-size: 75%;
+
+/* キーワード値 */
+max-block-size: auto;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content(20em);
+
+/* グローバル値 */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>max-block-size</code> プロパティの値は、 {{cssxref("max-width")}} および {{cssxref("max-height")}} プロパティで有効なすべての値を取ることができます。</p>
+
+<p>{{page("/ja/docs/Web/CSS/max-width", "Values")}}</p>
+
+<h3 id="How_writing-mode_affects_directionality" name="How_writing-mode_affects_directionality">書字方向が方向にどう影響するのか</h3>
+
+<p><code>writing-mode</code> の値は次のように <code>max-block-size</code> から <code>max-width</code> または <code>max-height</code> への対応付けに影響します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>writing-mode</code> の値</th>
+   <th scope="col"><code>max-block-size</code> が等価になるもの</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-height")}}</td>
+  </tr>
+  <tr>
+   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-width")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><code>writing-mode</code> の値のうち <code>sideways-lr</code> および <code>sideways-rl</code> は設計プロセスの後期に CSS Writing Modes Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。</p>
+</div>
+
+<div class="note">
+<p>書字方向の <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code>, <code>rb-tl</code> は {{Glossary("HTML")}} のコンテキストでは許可されなくなりました。 {{Glossary("SVG")}} 1.x コンテキストでのみ利用できる可能性があります。</p>
+</div>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_max-block-size_with_horizontal_and_vertical_text">Setting max-block-size with horizontal and vertical text</h3>
+
+<p>この例では、同じテキスト ({{interwiki("wikipedia", "en:Herman Melville", "Herman Melville")}} の小説 <em>{{interwiki("wikipedia", "en:Moby-Dick", "Moby-Dick")}}</em> の冒頭部分) が <code>horizontal-tb</code> および <code>vertical-rl</code> の両方の書字方向で表示されます。</p>
+
+<p>二つのボックスついてそれ以外の部分はすべて、 {{cssxref("max-block-size")}} に使われている値を含めて同じです。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>この HTML では、単純に二つの {{HTMLElement("div")}} ブロックを作成し、それぞれの {{cssxref("writing-mode")}} を <code>horizontal</code> および <code>vertical</code> クラスを用いて設定しています。両方のボックスで <code>standard-box</code> クラスを共有しており、こちらで単純に色、パディング、それぞれの <code>max-block-size</code> の値を設定しています。</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Writing mode &lt;code&gt;horizontal-tb&lt;/code&gt; (the default):&lt;/p&gt;
+&lt;div class="standard-box horizontal"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;
+
+&lt;p&gt;Writing mode &lt;code&gt;vertical-rl&lt;/code&gt;:&lt;/p&gt;
+&lt;div class="standard-box vertical"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>この CSS では3つのクラスを定義しています。最初は <code>standard-box</code> で、両方のボックスに適用され、上にあるものです。これはブロックの最小および最大の寸法、フォントの大きさ、などを指定します。</p>
+
+<p>その後にくるクラス <code>horizontal</code> および <code>vertical</code> は、ボックスに {{cssxref("writing-mode")}} プロパティを追加し、値を使われるクラスに応じて <code>horizontal-tb</code> または <code>vertical-rl</code> に設定します。</p>
+
+<pre class="brush: css notranslate">.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_max-block-size_with_horizontal_and_vertical_text", 600, 850)}}</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("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.max-block-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{cssxref("max-width")}} と {{cssxref("max-height")}}</li>
+ <li>他の方向の最大寸法の設定: {{cssxref("max-inline-size")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/max-height/index.html b/files/ja/web/css/max-height/index.html
new file mode 100644
index 0000000000..4d333dd365
--- /dev/null
+++ b/files/ja/web/css/max-height/index.html
@@ -0,0 +1,122 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、 <code>max-height</code> に指定した値を上回ることを防ぎます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>max-height</code> は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は <code>max-height</code> を上書きします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+max-height: 3.5em;
+
+/* &lt;percentage&gt; 値 */
+max-height: 75%;
+
+/* キーワード値 */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content(20em);
+
+/* グローバル値 */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><code>max-height</code> を絶対的な値で定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><code>max-height</code> を包含ブロックの高さに対するパーセント値で定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーは指定された要素の <code>max-height</code> を計算して選択します。</dd>
+ <dt><code>none</code></dt>
+ <dd>ボックスの寸法を制限しません。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>内容物が推奨する <code>max-height</code> です。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>内容物の最小の <code>max-height</code> です。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空白をして死された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">table { max-height: 75%; }
+
+form { max-height: none; }
+</pre>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>ページを拡大縮小して文字サイズを拡大した際に、 <code>max-height</code> を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'max-height')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.max-height")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{Cssxref("height")}}, {{Cssxref("min-height")}}</li>
+</ul>
diff --git a/files/ja/web/css/max-inline-size/index.html b/files/ja/web/css/max-inline-size/index.html
new file mode 100644
index 0000000000..1a8a8673d9
--- /dev/null
+++ b/files/ja/web/css/max-inline-size/index.html
@@ -0,0 +1,113 @@
+---
+title: max-inline-size
+slug: Web/CSS/max-inline-size
+tags:
+  - CSS
+  - CSS Logical Properties
+  - CSS Logical Property
+  - CSS Property
+  - Element size
+  - Experimental
+  - Reference
+  - Text Direction
+  - Writing Mode
+  - max-inline-size
+  - 'recipe:css-property'
+translation_of: Web/CSS/max-inline-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>max-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p>
+
+<p>書字方向が垂直方向であった場合、 <code>max-inline-size</code> の値は要素の最大の高さに対応します。そうでなければ、要素の最大幅に対応します。関連プロパティとして、 {{cssxref("max-block-size")}} が要素のもう一方の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* &lt;percentage&gt; 値 */
+max-inline-size: 75%;
+
+/* キーワード値 */
+max-inline-size: auto;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content(20em);
+
+/* グローバル値 */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>max-inline-size</code> プロパティは {{cssxref("max-width")}} および {{cssxref("max-height")}} の各プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_maximum_inline_size_in_pixels" name="Setting_maximum_inline_size_in_pixels">インライン方向の最大寸法をピクセル単位で設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_maximum_inline_size_in_pixels")}}</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("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.max-inline-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付けされる物理的プロパティ: {{cssxref("max-width")}} および {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/max-width/index.html b/files/ja/web/css/max-width/index.html
new file mode 100644
index 0000000000..7638cb8443
--- /dev/null
+++ b/files/ja/web/css/max-width/index.html
@@ -0,0 +1,142 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、 <code>max-width</code> で指定した値を上回ることを防ぎます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>max-width</code> は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は <code>max-width</code> を上書きします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+max-width: 3.5em;
+
+/* &lt;percentage&gt; 値 */
+max-width: 75%;
+
+/* キーワード値 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content(20em);
+
+/* グローバル値 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><code>max-width</code> を絶対的な値で定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><code>max-width</code> を包含ブロックの幅に対するパーセント値で定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーは指定された要素の <code>max-width</code> を計算して選択します。</dd>
+ <dt><code>none</code></dt>
+ <dd>ボックスの寸法を制限しません。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>内容物が推奨する <code>max-width</code> です。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>内容物の最小の <code>max-width</code> です。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。</p>
+
+<div id="basic-max-width-demo">
+<pre class="brush: html notranslate">&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>ページを拡大縮小して文字サイズを拡大した際に、 <code>max-width</code> を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'max-width')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, <code>fill-available</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.max-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("width")}}, {{cssxref("min-width")}}</li>
+</ul>
diff --git a/files/ja/web/css/media/index.html b/files/ja/web/css/media/index.html
new file mode 100644
index 0000000000..5bf2140f1d
--- /dev/null
+++ b/files/ja/web/css/media/index.html
@@ -0,0 +1,5 @@
+---
+title: Media
+slug: Web/CSS/Media
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/ja/web/css/media/visual/index.html b/files/ja/web/css/media/visual/index.html
new file mode 100644
index 0000000000..b37c0f1c67
--- /dev/null
+++ b/files/ja/web/css/media/visual/index.html
@@ -0,0 +1,16 @@
+---
+title: Visual
+slug: Web/CSS/Media/Visual
+tags:
+  - CSS
+  - CSS Reference
+  - MDC Project
+  - NeedsContent
+translation_of: Web/CSS/@media
+---
+<div>{{ CSSRef() }}</div>
+<p><a href="/ja/CSS" title="ja/CSS">CSS</a> 標準で定義された<a href="/ja/CSS/@media#Media_groups" title="ja/CSS/@media#Media_groups">メディアグループ</a>。</p>
+<h2 id="英語版章題(See_also)_参照">{{ 英語版章題("See also") }}参照</h2>
+<p><a class="external" href="http://www.w3.org/TR/CSS2/media.html" title="W3C Media Types Spec">W3C Media Types Spec</a></p>
+<p><span class="comment">Interwiki Languages Links</span></p>
+<div>{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}</div>
diff --git a/files/ja/web/css/media_queries/index.html b/files/ja/web/css/media_queries/index.html
new file mode 100644
index 0000000000..518d1ffdda
--- /dev/null
+++ b/files/ja/web/css/media_queries/index.html
@@ -0,0 +1,103 @@
+---
+title: メディアクエリ
+slug: Web/CSS/Media_queries
+tags:
+  - CSS
+  - CSS3 メディアクエリ
+  - Reference
+  - メディアクエリ
+  - リファレンス
+  - レスポンシブデザイン
+  - 概要
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>メディアクエリ</strong>によって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。</p>
+
+<p>これは<a href="/ja/docs/Web/Progressive_web_apps">レスポンシブデザイン</a>のキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。</p>
+
+<p> <a href="/ja/docs/Web/CSS">CSS</a> では、 {{cssxref("@media")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 {{cssxref("@import")}} を使用すると、条件付きでスタイルシート全体を適用することもできます。</p>
+
+<h3 id="Media_queries_in_HTML" name="Media_queries_in_HTML">HTML でのメディアクエリ</h3>
+
+<p> <a href="/ja/docs/Web/HTML">HTML</a> でも、メディアクエリは様々な要素に適用することができます。</p>
+
+<ul>
+ <li> {{HTMLElement("link")}} 要素の {{htmlattrxref("media", "link")}} 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。</li>
+ <li> {{HTMLElement("source")}} 要素の {{htmlattrxref("media", "source")}} 属性では、ソースが適用されるメディアを定義します。 (これは {{HTMLElement("picture")}} 要素内でのみ有効です。)</li>
+ <li> {{HTMLElement("style")}} 要素の {{htmlattrxref("media", "style")}} 属性では、スタイルが適用されるメディアを定義します。</li>
+</ul>
+
+<h3 id="Media_queries_in_JavaScript" name="Media_queries_in_JavaScript">JavaScript でのメディアクエリ</h3>
+
+<p> <a href="/ja/docs/Web/JavaScript">JavaScript</a> では、ウィンドウがメディアクエリに合うかどうかをテストするために {{domxref("Window.matchMedia()")}} メソッドを利用することができます。また、 {{domxref("MediaQueryList.addListener()")}} を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。</p>
+
+<p>プログラムからのメディアクエリの使用については、<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアクエリのテスト</a>で知ることができます。</p>
+
+<h2 id="Reference" name="Reference">リファレンス</h2>
+
+<h3 id="CSS_At-rules" name="CSS_At-rules">CSS @規則</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></dt>
+ <dd>メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">プログラムからのメディアクエリのテスト</a></dt>
+ <dd>JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">アクセシビリティのためのメディアクエリの使用</a></dt>
+ <dd>ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。</dd>
+</dl>
+
+<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('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li> {{cssxref("@supports")}} を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。</li>
+</ul>
diff --git a/files/ja/web/css/media_queries/testing_media_queries/index.html b/files/ja/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..cce7bfcb84
--- /dev/null
+++ b/files/ja/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,91 @@
+---
+title: プログラムによるメディアクエリのテスト
+slug: Web/CSS/Media_Queries/Testing_media_queries
+tags:
+  - Advanced
+  - CSS
+  - DOM
+  - Guide
+  - JavaScript
+  - MediaQueryList
+  - matchMedia
+  - ウェブ
+  - メディアクエリ
+  - レスポンシブデザイン
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{cssref}}</div>
+
+<p>{{Glossary("DOM")}} では、 {{domxref("MediaQueryList") }} インタフェースおよびそのメソッドやプロパティを用いて、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の結果をプログラムで調べることができる機能を備えています。 {{domxref("MediaQueryList") }} オブジェクトを作成すると、クエリの結果を確認すること、あるいは結果が変化したときに自動的に通知を受け取ることができます。</p>
+
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">メディアクエリリストの作成</h2>
+
+<p>クエリの結果を評価できるようにするのに先立ち、メディアクエリを示す {{domxref("MediaQueryList") }} オブジェクトを作成する必要があります。オブジェクトを作成するには、{{domxref("window.matchMedia") }} メソッドを用います。</p>
+
+<p>例えば、デバイスが横置きか縦置きかを調べるクエリリストを設定したい場合は、以下のようにしてください:</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">クエリの結果の確認</h2>
+
+<p>メディアクエリリストが作成されると、その <code>matches</code> プロパティの値を参照することで、クエリの結果を確認することができます。このプロパティは、クエリの結果を反映します。</p>
+
+<pre class="brush: js">if (mediaQueryList.matches) {
+  /* 現在ビューポートが縦長である */
+} else {
+  /* 現在ビューポートが縦長ではない、すなわち横長である */
+}
+</pre>
+
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">クエリの通知の受信</h2>
+
+<p>クエリの評価結果の変化を継続的に意識する必要がある場合は、クエリの結果をポーリングするよりも<a href="/ja/docs/Web/API/EventTarget/addEventListener">リスナー</a>を登録することが効率的です。このためには、 {{domxref("MediaQueryList") }} オブジェクトの <code>addListener()</code> メソッドを呼び出し、メディアクエリの状態が変化したときに (例えば、メディアクエリの結果が <code>true</code> から <code>false</code> へ移行した場合に) 呼び出されるコールバック関数を設定してください。</p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Create the query list.
+function handleOrientationChange(mql) { ... } // イベントリスナーにコールバック関数を定義
+mediaQueryList.addListener(handleOrientationChange); // クエリリストにコールバック関数をリスナーとして追加
+
+handleOrientationChange(mediaQueryList); // 画面の向きが変更された時のハンドラーを一度実行。
+</pre>
+
+<p>このコードではデバイスの向き (orientation) を評価するメディアクエリリストを作成し、次にリスナーを追加しています。リスナーを追加した後、そのリスナーが実際に一度呼び出されることに注意してください。これにより、リスナーは現在のデバイスの向きを基にして初期状態の調整を行うことができます (そうでなければ、コードではデバイスの初期状態が縦置きと想定しているが実際は横置きであるような場合に、不整合が発生します)。</p>
+
+<p>次で実装する <code>handleOrientationChange()</code> メソッドでは、クエリの結果の確認やデバイスの向きが変わったときに必要な処理を行います。</p>
+
+<pre class="brush: js">function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* 現在ビューポートが縦長 */
+  } else {
+    /* 現在ビューポートが横長 */
+  }
+}
+</pre>
+
+<p>上記で、 <code>evt</code> — イベントオブジェクトの引数を定義しています。これは <a href="/ja/docs/Web/API/MediaQueryList#Browser_compatibility"><code>MediaQueryList</code> の新しい実装</a>を扱うイベントリスナーの標準の方法なのでお分かりでしょう。非標準の {{domxref("MediaQueryListListener")}} メカニズムはもう使われませんが、標準のイベントリスナーのセットアップでは、 {{domxref("MediaQueryListEvent")}} の<a href="/en-US/docs/Web/API/Event">イベントオブジェクト</a>をコールバック関数の引数として渡します。</p>
+
+<p>このイベントオブジェクトは {{domxref("MediaQueryListEvent.media","media")}} 及び {{domxref("MediaQueryListEvent.match","match")}} プロパティも含んでおり、 <code>MediaQueryList</code> のこれらの機能に直接アクセスしたり、イベントオブジェクトにアクセスしたりすることができます。</p>
+
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">クエリの通知の終了</h2>
+
+<p>メディアクエリの値の変化について通知を受ける必要がなくなったときは、{{domxref("MediaQueryList") }} オブジェクトの <code>removeListener()</code> メソッドを呼び出してください。</p>
+
+<pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<h3 id="MediaQueryList_インターフェイス"><code>MediaQueryList</code> インターフェイス</h3>
+
+<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("api.MediaQueryList")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListEvent") }}</li>
+</ul>
diff --git a/files/ja/web/css/media_queries/using_media_queries/index.html b/files/ja/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..a24ffa4734
--- /dev/null
+++ b/files/ja/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,385 @@
+---
+title: メディアクエリの使用
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - ウェブ
+  - ガイド
+  - メディア
+  - メディアクエリ
+  - レスポンシブデザイン
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>メディアクエリ</strong>は、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーの{{glossary("viewport", "ビューポート")}}の幅など) に応じてサイトやアプリを変更したいときに便利です。</p>
+
+<p>メディアクエリは以下の用途で使用されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("@media")}} および {{cssxref("@import")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>により、条件付きでスタイルを適用する。</li>
+ <li>{{HTMLElement("link")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, などの <a href="/ja/docs/Web/HTML">HTML</a> 要素で <code>media=</code> 属性を付けて特定のメディアを対象とする。</li>
+ <li><a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{domxref("Window.matchMedia()")}} および {{domxref("MediaQueryList.addListener()")}} メソッドを使用して<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアの状態を検査および監視</a>する。</li>
+</ul>
+
+<div class="note">
+<p><strong>メモ:</strong> このページの例では説明のために CSS の <code>@media</code> を使用していますが、基本構文はすべての種類のメディアクエリで共通です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>メディアクエリは、任意の<em>メディアタイプ</em>と任意の数の<em>メディア特性</em>の式で構成されます。<em>論理演算子</em>を使用して、複数のクエリを様々な形で組み合わせることができます。メディアクエリは大文字・小文字の区別がありません。</p>
+
+<p>メディアクエリは、 (指定されていれば) メディアタイプが文書を表示している端末に一致しており、<em>かつ</em>すべてのメディア特性式が真と計算されれば、真と計算されます。不明なメディアタイプに対するクエリは常に偽です。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> {{HTMLElement("link")}} タグによるメディアクエリ付きのスタイルシートは、クエリが偽を返しても<a href="http://scottjehl.github.com/CSS-Download-Tests/">ダウンロードされます</a>。にもかかわらず、中身はクエリが真に変わらない限り、適用されません。</p>
+</div>
+
+<h3 id="Media_types" name="Media_types">メディアタイプ</h3>
+
+<p><em>メディアタイプ</em>は端末の全般的なカテゴリを説明します。 <code>not</code> 又は <code>only</code> の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 <code>all</code> タイプが暗黙に含まれています。</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>すべての端末に一致します。</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>ページ付きの素材や、印刷プレビューモードで画面に表示された文書のためのものです。 (これらの形式に特有の整形上の問題について詳しくは、<a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a>をご覧ください。)</dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>主に画面のためのものです。</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>主に音声合成のためのものです。</dd>
+</dl>
+
+<div class="note"><strong>非推奨のメディアタイプ:</strong> CSS2.1 及び<a href="https://drafts.csswg.org/mediaqueries-3/#background">メディアクエリ 3</a> では、いくつかの追加のメディアタイプ (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) を定義しましたが、これらは<a href="http://dev.w3.org/csswg/mediaqueries/#media-types">メディアクエリ 4</a> で非推奨となり、使用するべきではありません。 <code>aural</code> タイプは似ている <code>speech</code> で置き換えられました。</div>
+
+<h3 id="Media_features" name="Media_features">メディア特性</h3>
+
+<p><em>メディア特性</em>は、特定の{{glossary("user agent", "ユーザーエージェント")}}や、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>名前</th>
+   <th>概要</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/any-hover", "any-hover")}}</td>
+   <td>入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td>
+   <td>入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td>
+   <td>ビューポートの幅対高さのアスペクト比</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color", "color")}}</td>
+   <td>出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td>
+   <td>ユーザーエージェント及び出力端末が対応しているおよその色の範囲</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index", "color-index")}}</td>
+   <td>出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>出力端末の幅対高さのアスペクト比</td>
+   <td>Media Queries Level 4 で非推奨。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td>
+   <td>出力端末のレンダリング面の高さ</td>
+   <td>Media Queries Level 4 で非推奨。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td>
+   <td>出力端末のレンダリング面の幅</td>
+   <td>Media Queries Level 4 で非推奨。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode", "display-mode")}}</td>
+   <td>ウェブアプリのマニフェストの <a href="/ja/docs/Web/Manifest#display"><code>display</code></a> メンバーで指定されているアプリケーションの表示モード</td>
+   <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 仕様書</a>で定義</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>ユーザーエージェントがカラーパレットを制限しているかどうかを検出する</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid", "grid")}}</td>
+   <td>出力端末はグリッドとビットマップ画面のどちらを使用するか</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height", "height")}}</td>
+   <td>ビューポートの高さ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover", "hover")}}</td>
+   <td>主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td>
+   <td>ユーザーエージェントまたはその下の OS が色を反転しているか</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level", "light-level")}}</td>
+   <td>環境の明るさレベル</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome", "monochrome")}}</td>
+   <td>出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation", "orientation")}}</td>
+   <td>ビューポートの向き</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td>
+   <td>ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td>
+   <td>ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer", "pointer")}}</td>
+   <td>主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出する</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出する</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>ユーザーがページであまり動きを望まないかどうか</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>ユーザーが透明度を下げるよう望んでいるかどうか</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution", "resolution")}}</td>
+   <td>出力端末のピクセル密度</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan", "scan")}}</td>
+   <td>出力端末のスキャン処理方式</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting", "scripting")}}</td>
+   <td>スクリプト (例えば JavaScript) が利用できるかを検出する</td>
+   <td>Media Queries Level 5 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency", "update")}}</td>
+   <td>どれだけの頻度で出力端末がコンテンツの表示を変更できるか</td>
+   <td>Media Queries Level 4 で追加。</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/width", "width")}}</td>
+   <td>ビューポートの幅</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Logical_operators" name="Logical_operators">論理演算子</h3>
+
+<p><em>論理演算子</em> <code>not</code>, <code>and</code>, <code>only</code> を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。</p>
+
+<h4 id="and" name="and"><code>and</code></h4>
+
+<p><code>and</code> 演算子は、複数のメディア特性を一つのメディアクエリにまとめるために使用し、クエリが真になるためには結合されたそれぞれの特性が真を返す必要があります。メディア特性とメディアタイプを組み合わせるためにも使用します。</p>
+
+<h4 id="not" name="not"><code>not</code></h4>
+
+<p><code>not</code> 演算子は、メディアクエリを否定するために使用し、もしクエリが偽を返せば真を返します。カンマ区切りのクエリのリストの中にある場合、適用された特定のクエリのみを否定します。 <code>not</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> Level 3 では、 <code>not</code> キーワードは個別のメディア特性式を否定するために使用することはできず、メディアクエリ全体に対してしか使用できません。</p>
+</div>
+
+<h4 id="only" name="only"><code>only</code></h4>
+
+<p><code>only</code> 演算子はクエリ全体が一致した場合にスタイルを適用し、古いブラウザーで選択されたスタイルが適用されるのを防ぐために使用します。 <code>only</code> を使用しない場合、古いブラウザーは <code>screen and (max-width: 500px)</code> というクエリを単なる <code>screen</code> として解釈してクエリの注釈を無視し、あらゆる画面にスタイルを適用します。 <code>only</code> 演算子を使用する場合は、メディアタイプも指定<em>しなければなりません</em>。</p>
+
+<h4 id="comma" name="comma"><code>,</code> (カンマ)</h4>
+
+<p>カンマは、複数のメディアクエリを一つのメディアクエリに結合するために使用します。カンマで区切ったリストの中にあるそれぞれのクエリは、他とは別なものとして扱われます。よって、リストの中の何れかのクエリが真になれば、メディアステートメント全体が真を返します。言い換えれば、リストは論理 <code>or</code> 演算子のように動作します。</p>
+
+<h2 id="Targeting_media_types" name="Targeting_media_types">メディアタイプの対象化</h2>
+
+<p>メディアタイプは、その端末の一般的なカテゴリを記述します。ウェブサイトは一般的に画面を想定してデザインされていますが、プリンターや音声ベースのスクリーンリーダーのような、特殊な端末を対象としたスタイルを作成したい場合もあるでしょう。例えば、この CSS はプリンターを対象としています。</p>
+
+<pre class="brush: css">@media print { ... }</pre>
+
+<p>複数の端末を対象にすることもできます。例えば、この <code>@media</code> ルールは2つのメディアクエリーを使用して、画面とプリンターの両方の端末を対象としています。</p>
+
+<pre class="brush: css">@media screen, print { ... }</pre>
+
+<p>すべてのメディアタイプの一覧は、<a class="internal" href="#Media_types">メディアタイプ</a>を参照してください。とても広い用語で端末を記述するため、数はわずかしかありません。もっと具体的な属性で対象にするには、代わりに<em>メディア特性</em>を使用してください。</p>
+
+<h2 id="Targeting_media_features" name="Targeting_media_features">メディア特性を対象とする</h2>
+
+<p>メディア特性は、{{glossary("user agent", "ユーザーエージェント")}}、出力端末、環境などの特定の特徴を記述します。例えば、画面の広いモニター、マウスを使用したコンピューター、暗い状況で使用される端末などに対して特定のスタイルを適用することができます。この例はユーザーの<em>主な</em>入力手段 (マウスなど) が要素の上で停止できる時にスタイルを適用します。</p>
+
+<pre class="brush: css">@media (hover: hover) { ... }</pre>
+
+<p>多くのメディア特性は<em>範囲特性</em>であり、 "min-" 又は "max-" の接頭辞をつけて「最小条件」又は「最大条件」の制約を表現します。例えば、この CSS はブラウザーの{{glossary("viewport", "ビューポート")}}の幅が 12,450px 以下である場合のみ、スタイルを適用します。</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }</pre>
+
+<p>値を指定せずにメディア特性クエリを作成した場合、特性の値がゼロ (または Level 4 では <code>none</code>) ではない場合に中のスタイルが使用されます。例えば、この CSS はカラー画面を持つ任意の端末に適用されます。</p>
+
+<pre class="brush: css">@media (color) { ... }</pre>
+
+<p>ブラウザーを実行している端末である特性が適用されない場合、メディア特性に向けた式は常に偽です。例えば、以下のクエリの中のスタイルは、音声のみの端末には画面のアスペクト比がないので、決して使われません。</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>その他の<a href="#Media_features">メディア特性</a>の例については、それぞれの特性のリファレンスページを参照してください。</p>
+
+<h2 id="Creating_complex_media_queries" name="Creating_complex_media_queries">複雑なメディアクエリの作成</h2>
+
+<p>時々、複数の条件に依存するメディアクエリを作成したくなる場合があるかもしれません。これは、 <code>not</code>, <code>and</code>, <code>only</code> の<strong>論理演算子</strong>の出番です。その上、複数のメディアクエリを<strong>カンマ区切りのリスト</strong>で結合することができます。これによって、同じスタイルを異なる場面に適用することができます。</p>
+
+<p>以前の例で、すでに <code>and</code> 演算子がメディア<em>タイプ</em>とメディア<em>特性</em>をグループ化するために使用されているのを見ました。 <code>and</code>演算子は、複数のメディア特性を1つのメディアクエリに結合することもできます。一方で <code>not</code> 演算子は、メディアクエリを反転し、基本的に普通の意味とは逆になります。 <code>only</code> 演算子は古いブラウザーでスタイルが適用されるのを防止します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 多くの場合、 <code>all</code> メディアタイプが他のタイプが指定されない場合に既定で使用されます。しかし、 <code>not</code> 又は <code>only</code> 演算子を使用する場合は、メディアタイプを明示的に指定する必要があります。</p>
+</div>
+
+<h3 id="Combining_multiple_types_or_features" name="Combining_multiple_types_or_features">複数のタイプ又は特性の組み合わせ</h3>
+
+<p><code>and</code> キーワードはメディア特性をメディアタイプ、<em>又は</em>他のメディア特性に結合します。この例は2つのメディア特性を結合して、スタイルを横長で幅が 30em 以上ある端末に制限します。</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>スタイルを画面に限定する場合は、メディア特性に <code>screen</code> メディアタイプを結合します。</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="Testing_for_multiple_queries" name="Testing_for_multiple_queries">複数のクエリの検査</h3>
+
+<p>カンマ区切りのリストを使うと、ユーザーの端末が様々なメディアタイプ、特性、状態のいずれか一つに一致する場合にスタイルを適用させることができます。例えば、以下の規則はユーザーの端末の高さが 680px 以上<em>又は</em>画面が縦長モードであるときにスタイルが適用されます。</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>上記の例について言えば、もしユーザーがページの縦が 800px のプリンターを持っていた場合、最初のクエリが適用されるので media ステートメントは真を返します。同様に、ユーザーが縦長モードでビューポートの高さが 480px のスマートフォンを使っていた場合、2番目のクエリが適用され、 media ステートメントはやはり真を返します。</p>
+
+<h3 id="Inverting_a_querys_meaning" name="Inverting_a_querys_meaning">クエリの意味の反転</h3>
+
+<p><code>not</code> キーワードはメディアクエリ全体の意味を反転します。これは、適用される特定のメディアクエリを単純に反転します。 (従って、メディアクエリのカンマ区切りのリストの中では、それぞれのメディアクエリは適用されません。) <code>not</code> キーワードは個別の特性クエリに対して使用することができず、クエリ全体のみを反転します。 <code>not</code> は以下のクエリの最後に評価されます。</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... よって、上記のクエリは次のように評価されます。</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... このようにはなりません。</p>
+
+<pre class="brush: css example-bad">@media (not all) and (monochrome) { ... }</pre>
+
+<p>他の例を挙げます。以下のメディアクエリは、</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... 次のように評価されます。</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="Improving_compatibility_with_older_browsers" name="Improving_compatibility_with_older_browsers">古いブラウザーとの互換性の維持</h3>
+
+<p><code>only</code> キーワードは、メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぎます。<em>最近のブラウザーでは効果がありません。</em></p>
+
+<pre class="brush: css">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="Syntax_improvements_in_Level_4" name="Syntax_improvements_in_Level_4">Level 4 での構文の拡張</h2>
+
+<p>Media Queries Level 4 仕様書では、例えば幅や高さについて、よりすっきりとした "range" 型を持つ特性を使ってメディアクエリを作れるよう構文が拡張されました。 Level 4 はこのようなクエリを書くために<em>範囲コンテキスト</em>を追加しています。例えば、幅について <code>max-</code> の特性を使用する場合は、以下のように書くことができます。</p>
+
+<div class="note">
+<p><strong>注:</strong> Media Queries Level 4 仕様は、最新のブラウザーはそれなりに対応していますが、一部のメディア機能には十分に対応していません。詳細は <a href="/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> ブラウザー互換性一覧表</a>を参照してください。</p>
+</div>
+
+<pre class="brush: css">@media (max-width: 30em) { ... }</pre>
+
+<p>Media Queries Level 4 では、これを次のように書くことができます。</p>
+
+<pre class="brush: css">@media (width &lt;= 30em) { ... }</pre>
+
+<p><code>min-</code> および <code>max-</code> を使用すると、次のようにして幅が2つの値の間にあるかどうかを検査することができます。</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>Level 4 の構文に変換すると、次のようになります。</p>
+
+<pre class="brush: css">@media (30em &lt;= width &lt;= 50em ) { ... }
+</pre>
+
+<p>また、 Media Queries Level 4 では <strong>and</strong>, <strong>not</strong>, <strong>or</strong> を伴う完全な論理代数を使ったメディアクエリの組み合わせの方法も追加されました。</p>
+
+<h3 id="Negating_a_feature_with_not" name="Negating_a_feature_with_not"><code>not</code> による特性の否定</h3>
+
+<p>メディア特性を <code>not()</code> を使用して囲むことで、クエリでその特性を否定します。例えば、 <code>not(hover)</code> は端末でホバーができない場合に一致します。</p>
+
+<pre class="brush: css">@media (not(hover)) { ... }</pre>
+
+<h3 id="or_による特性の結合"><code>or</code> による特性の結合</h3>
+
+<p><code>or</code> を使用して複数の特性の中の一つと一致するか検査することができ、特性のうちの何れかが true であれば <code>true</code> になります。例えば、次のクエリは端末がモノクロ画面である、またはホバーができるかどうかを検査します。</p>
+
+<pre class="brush: css">@media (not (color)) or (hover) { ... }
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">プログラムからのメディアクエリの検査</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li>
+ <li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li>
+</ul>
diff --git a/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html
new file mode 100644
index 0000000000..02eaddac0f
--- /dev/null
+++ b/files/ja/web/css/media_queries/using_media_queries_for_accessibility/index.html
@@ -0,0 +1,94 @@
+---
+title: アクセシビリティのためのメディアクエリの使用
+slug: Web/CSS/Media_queries/Using_Media_Queries_for_Accessibility
+tags:
+  - '@media'
+  - CSS
+  - アクセシビリティ
+  - アニメーション
+  - メディア特性
+translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+---
+<p><strong>メディアクエリ</strong>は、障碍を持ったユーザーがウェブサイトをより理解することを支援するためにも利用することができます。</p>
+
+<h2 id="Reduced_Motion" name="Reduced_Motion">動きの縮減</h2>
+
+<p>点滅やフラッシュのアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持った人々にとって問題になる可能性があります。加えて、特定の種類の動きが前庭障害、てんかん、片頭痛、スコピック感受性などを引き起こす可能性があります。</p>
+
+<p>また、この方法でユーザー設定によってアニメーションの停止を切り替えると、バッテリーが少ない、または性能が低い携帯電話やコンピューターを使用しているユーザーにも便益があります。</p>
+
+<h3 id="構文">構文</h3>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>システムが把握している設定をユーザーが行っていないことを示します。</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>ユーザーがシステムに、動作やアニメーションを最小量にして、必要以外の動作を削除したほうが好ましいと通知したことを示します。</dd>
+</dl>
+
+<h3 id="Example">Example</h3>
+
+<p>この例は、アクセシビリティ設定で動きを抑制するよう設定しないと煩いアニメーションが表示されます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<h2 id="High_Contrast_Mode" name="High_Contrast_Mode">高コントラストモード</h2>
+
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong>-ms-high-contrast</strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>は <a href="/ja/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft 拡張</a>で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。</p>
+
+<p>これは弱視やコントラストに敏感な問題を抱えるユーザーだけでなく、直射日光下のコンピューターや携帯電話で作業をしているユーザーにも役立ちます。</p>
+
+<h3 id="Syntax_2" name="Syntax_2">構文</h3>
+
+<p><strong><code>-ms-high-contrast</code></strong> メディア特性は、以下の値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。</p>
+ </dd>
+</dl>
+
+<h3 id="Example_2" name="Example_2">例</h3>
+
+<p>以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
diff --git a/files/ja/web/css/microsoft_extensions/index.html b/files/ja/web/css/microsoft_extensions/index.html
new file mode 100644
index 0000000000..31be6de5ef
--- /dev/null
+++ b/files/ja/web/css/microsoft_extensions/index.html
@@ -0,0 +1,120 @@
+---
+title: Microsoft CSS 拡張
+slug: Web/CSS/Microsoft_Extensions
+tags:
+  - CSS
+  - 'CSS:Microsoft 拡張'
+  - Microsoft 拡張
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/Microsoft_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Edge や Internet Explorer のような Microsoft のアプリケーションは、いくつもの特殊な <strong> <a href="/en-US/docs/Web/CSS">CSS</a> の Microsoft 拡張</strong>に対応しています。これらの拡張には接頭辞に <code>-ms-</code> が付きます。</p>
+
+<h2 id="Microsoft-only_properties_(avoid_using_on_websites)" name="Microsoft-only_properties_(avoid_using_on_websites)">Microsoft 独自プロパティ (ウェブサイトでの使用は避けてください)</h2>
+
+<div class="note">
+<p><strong>メモ:</strong> これらのプロパティは Microsoft のアプリケーションのみで動作し、標準路線ではありません。</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-accelerator")}}</li>
+ <li>{{CSSxRef("-ms-block-progression")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-chaining")}}</li>
+ <li>{{CSSxRef("-ms-content-zooming")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-max")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-min")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-points")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-type")}}</li>
+ <li>{{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-flow-from")}}</li>
+ <li>{{CSSxRef("-ms-flow-into")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-chars")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-zone")}}</li>
+ <li>{{CSSxRef("-ms-ime-align")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scroll-chaining")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-rails")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-translation")}}</li>
+ <li>{{CSSxRef("-ms-text-autospace")}}</li>
+ <li>{{CSSxRef("-ms-touch-select")}}</li>
+ <li>{{CSSxRef("-ms-wrap-flow")}}</li>
+ <li>{{CSSxRef("-ms-wrap-margin")}}</li>
+ <li>{{CSSxRef("-ms-wrap-through")}}</li>
+ <li>{{CSSxRef("zoom")}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-elements" name="Pseudo-elements">疑似要素</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-ms-browse")}}</li>
+ <li>{{CSSxRef("::-ms-check")}}</li>
+ <li>{{CSSxRef("::-ms-clear")}}</li>
+ <li>{{CSSxRef("::-ms-expand")}}</li>
+ <li>{{CSSxRef("::-ms-fill")}}</li>
+ <li>{{CSSxRef("::-ms-fill-lower")}}</li>
+ <li>{{CSSxRef("::-ms-fill-upper")}}</li>
+ <li>{{CSSxRef("::-ms-reveal")}}</li>
+ <li>{{CSSxRef("::-ms-thumb")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-after")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-before")}}</li>
+ <li>{{CSSxRef("::-ms-tooltip")}}</li>
+ <li>{{CSSxRef("::-ms-track")}}</li>
+ <li>{{CSSxRef("::-ms-value")}}</li>
+</ul>
+</div>
+
+<h2 id="Media_features" name="Media_features">メディア特性</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li>
+</ul>
+</div>
+
+<h2 id="CSS-related_DOM_APIs" name="CSS-related_DOM_APIs">CSS 関連 DOM API</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("msContentZoomFactor")}}</li>
+ <li>{{DOMxRef("msGetPropertyEnabled")}}</li>
+ <li>{{DOMxRef("msGetRegionContent")}}</li>
+ <li>{{DOMxRef("MSRangeCollection")}}</li>
+ <li>{{DOMxRef("msRegionOverflow")}}</li>
+</ul>
+</div>
+
+<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/CSS/WebKit_Extensions">WebKit CSS 拡張</a></li>
+ <li><a href="/ja/docs/Web/API/Microsoft_API_extensions">Microsoft API 拡張</a></li>
+ <li><a href="/ja/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Microsoft JavaScript 拡張</a></li>
+</ul>
diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html
new file mode 100644
index 0000000000..263df74da5
--- /dev/null
+++ b/files/ja/web/css/min()/index.html
@@ -0,0 +1,139 @@
+---
+title: min()
+slug: Web/CSS/min()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - Calculate
+  - Compute
+  - Function
+  - Layout
+  - Reference
+  - min
+translation_of: Web/CSS/min()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("&lt;length&gt;")}}、{{CSSxRef("&lt;frequency&gt;")}},、{{CSSxRef("&lt;angle&gt;")}}、{{CSSxRef("&lt;time&gt;")}}、{{CSSxRef("&lt;percentage&gt;")}}、{{CSSxRef("&lt;number&gt;")}}、{{CSSxRef("&lt;integer&gt;")}} が利用できるところならばどこでも使用することができます。</p>
+
+<pre class="brush: css; no-line-numbers">/* プロパティ: min(式 [, 式]) */
+width: min(10vw, 4em, 80px);
+</pre>
+
+<p>上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 <code>min()</code> の値はプロパティが取りうる<em>最大の</em>値を提供するものとして考えてください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>min()</code> 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。</p>
+
+<p>式は ({{CSSxRef("&lt;length&gt;")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式にすることができます。</p>
+
+<p>必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。</p>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<ul>
+ <li>表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも <code>auto</code> が指定されていたかのように扱われる<em>可能性があります</em>。</li>
+ <li><code>max()</code> や他の <code>min()</code> 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 <code>calc()</code> 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。</li>
+ <li>式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <code>&lt;length&gt;</code> 構文値を使用できます。</li>
+ <li><code>min()</code> と <code>max()</code> の値を組み合わせたり、 <code>min()</code> を <code>clamp()</code> や <code>calc()</code> 関数の中で使用したりすることができます (そしてよく必要になります)。</li>
+ <li>複数の制約を適用する場合は、3つ以上の引数を与えることができます。</li>
+</ul>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Growing_images_to_a_maximum_size" name="Growing_images_to_a_maximum_size">最大サイズまで広がる画像</h3>
+
+<p><code>min()</code> を使用すると、画像の<strong>最大</strong>幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。</p>
+
+<pre class="brush: css;">.logo {
+  width: min(50vw, 300px);
+}
+</pre>
+
+<pre class="brush: html;">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<p>{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}</p>
+
+<p>この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。</p>
+
+<h3 id="Setting_a_maximum_size_for_a_label_and_input" name="Setting_a_maximum_size_for_a_label_and_input">ラベルと入力欄のために最大値を設定する</h3>
+
+<p>CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。</p>
+
+<p>いくらか CSS を見てください。</p>
+
+<pre class="brush: css;">input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Type something:&lt;/label&gt;
+  &lt;input type="text"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>min()</code> を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。</p>
+
+<pre class="brush: css;"></pre>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS4 Values", "#calc-notation", "min()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.min")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("max", "max()")}}</li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値</a></li>
+</ul>
diff --git a/files/ja/web/css/min-block-size/index.html b/files/ja/web/css/min-block-size/index.html
new file mode 100644
index 0000000000..33bd4323d0
--- /dev/null
+++ b/files/ja/web/css/min-block-size/index.html
@@ -0,0 +1,107 @@
+---
+title: min-block-size
+slug: Web/CSS/min-block-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - min-block-size
+  - 'recipe:css-property'
+translation_of: Web/CSS/min-block-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><code>min-block-size</code> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p>
+
+<p>書字方向が垂直方向であった場合、 <code>min-block-size</code> の値は要素の最小幅に対応します。そうでなければ、要素の最小の高さに対応します。関連プロパティの {{cssxref("min-inline-size")}} が要素のもう一方の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* &lt;percentage&gt; 値 */
+min-block-size: 10%;
+
+/* キーワード値 */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content(20em);
+
+/* グローバル値 */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>min-block-size</code> プロパティは {{cssxref("min-width")}} および {{cssxref("min-height")}} の各プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_minimum_block_size_for_vertical_text" name="Setting_minimum_block_size_for_vertical_text">縦書きでブロック方向の最小寸法を設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  min-block-size: 200px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_minimum_block_size_for_vertical_text")}}</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("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.min-block-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付けされる物理的プロパティ: {{cssxref("min-width")}} および {{cssxref("min-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/min-height/index.html b/files/ja/web/css/min-height/index.html
new file mode 100644
index 0000000000..b3ca9be908
--- /dev/null
+++ b/files/ja/web/css/min-height/index.html
@@ -0,0 +1,120 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Minimum
+  - Reference
+  - dimensions
+  - height
+  - min-height
+  - 'recipe:css-property'
+  - size
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、<code>min-height</code> で指定した値を下回ることを防ぎます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>min-height</code> の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、<code>min-height</code> の値が要素の幅になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+min-height: 3.5em;
+
+/* &lt;percentage&gt; 値 */
+min-height: 10%;
+
+/* キーワード値 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content(20em);
+
+/* グローバル値 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><code>min-height</code> を絶対的な値で定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><code>min-height</code> を包含ブロックの高さに対するパーセント値で定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーが指定された要素の <code>min-height</code> を計算して選択します。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>内容物が推奨する <code>min-height</code> です。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>内容物の最小の <code>min-height</code> です。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_min-height" name="Setting_min-height">min-height の設定</h3>
+
+<pre class="brush:css; notranslate">table { min-height: 75%; }
+
+form { min-height: 0; }
+</pre>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'min-height')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.min-height")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/ja/web/css/min-inline-size/index.html b/files/ja/web/css/min-inline-size/index.html
new file mode 100644
index 0000000000..21bfa80251
--- /dev/null
+++ b/files/ja/web/css/min-inline-size/index.html
@@ -0,0 +1,108 @@
+---
+title: min-inline-size
+slug: Web/CSS/min-inline-size
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - min-inline-size
+  - 'recipe:css-property'
+translation_of: Web/CSS/min-inline-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>min-inline-size</code></strong> は <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最小の寸法を定義します。これは {{cssxref("min-width")}} または {{cssxref("min-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。</span></p>
+
+<p>書字方向が垂直方向であった場合、 <code>min-inline-size</code> の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの {{cssxref("min-block-size")}} が要素のもう一方の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* &lt;percentage&gt; 値 */
+min-inline-size: 10%;
+
+/* キーワード値 */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content(20em);
+
+/* グローバル値 */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>min-inline-size</code> プロパティは {{cssxref("min-width")}} および {{cssxref("min-height")}} の各プロパティと同じ値を取ります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_minimum_inline_size_for_vertical_text" name="Setting_minimum_inline_size_for_vertical_text">縦書きでインライン方向の最小寸法を設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_minimum_inline_size_for_vertical_text")}}</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("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.min-inline-size")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付けされる物理的プロパティ: {{cssxref("min-width")}} および {{cssxref("min-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/min-width/index.html b/files/ja/web/css/min-width/index.html
new file mode 100644
index 0000000000..ebf4e8769c
--- /dev/null
+++ b/files/ja/web/css/min-width/index.html
@@ -0,0 +1,117 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、<code>min-width</code> で指定した値を下回ることを防ぎます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>min-width</code> の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、<code>min-width</code> の値が要素の幅になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+min-width: 3.5em;
+
+/* &lt;percentage&gt; 値 */
+min-width: 10%;
+
+/* キーワード値 */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content(20em);
+
+/* グローバル値 */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd><code>min-width</code> を絶対的な値で定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><code>min-width</code> を包含ブロックの幅に対するパーセント値で定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーが指定された要素の <code>min-width</code> を計算して選択します。</dd>
+ <dt><code>none</code></dt>
+ <dd>ボックスの寸法を制限しません。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>内容物が推奨する <code>min-width</code> です。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>内容物の最小の <code>min-width</code> です。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空白をして死された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css;">table { min-width: 75%; }
+
+form { min-width: 0; }
+</pre>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'min-width')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>キーワード <code>auto</code> を追加し、初期値として使用する</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.min-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("width")}}, {{Cssxref("max-width")}}</li>
+ <li><a href="/ja/docs/Web/CSS/box_model" title="CSS/box_model">ボックスモデル</a>, {{Cssxref("box-sizing")}}</li>
+</ul>
diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html
new file mode 100644
index 0000000000..2e76768c4f
--- /dev/null
+++ b/files/ja/web/css/minmax()/index.html
@@ -0,0 +1,217 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+tags:
+  - CSS
+  - CSS Function
+  - CSS グリッドレイアウト
+  - CSS 関数
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/minmax()
+---
+<p><strong><code>minmax()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、寸法の範囲を <var>min</var> 以上、 <var>max</var> 以下で定義します。 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>で使用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; 値 */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* &lt;fixed-breadth&gt;, &lt;track-breadth&gt; 値 */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; 値 */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<p><em>min</em> および <em>max</em> の2つの引数を取る関数です。</p>
+
+<p>どちらの引数も <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>, <code>&lt;flex&gt;</code>, またはキーワード値 <code>max-content</code>, <code>min-content</code>, <code>auto</code> のうちの一つを取ります。</p>
+
+<p>もし <var>min</var> が <var>max</var> より大きい場合は無視され、 <code>minmax(min,max)</code> は <var>min</var> として扱われます。最大値として、 {{cssxref("flex_value","&lt;flex&gt;")}} 値はグリッドトラックのフレックス係数を設定します。それは <var>min</var> としては無効です。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>負ではない寸法。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <code>&lt;percentage&gt;</code> は <code>auto</code> として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>単位 <code>fr</code> がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの <code>&lt;flex&gt;</code> による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>最大値としては、 <code>max-content</code> と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+
+<p><code>minmax()</code> 関数は次の中で使用することができます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+ <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+ <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+ <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Item as wide as the content, but at most 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item with flexible width but a minimum of 200 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Inflexible item of 150 pixels width.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</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("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御</a></em></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+ <li>
+  <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></p>
+ </li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッド及び進歩的な拡張</a></li>
+   <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>用語集</strong></a>
+  <ol>
+   <li><a href="/ja/docs/Glossary/Grid">グリッド</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_lines">グリッド線</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
+   <li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_Axis">グリッド軸</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
+   <li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ja/web/css/mix-blend-mode/index.html b/files/ja/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..260c570359
--- /dev/null
+++ b/files/ja/web/css/mix-blend-mode/index.html
@@ -0,0 +1,655 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS プロパティ
+  - ウェブ
+  - リファレンス
+  - 合成と混合
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>mix-blend-mode</code></strong> プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+<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>
+
+<pre class="brush:css">/* キーワード値 */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* グローバル値 */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>適用する混合モードを表す {{cssxref("&lt;blend-mode&gt;")}} です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="HTML_example" name="HTML_example">HTML の例</h3>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}</pre>
+
+<p>{{EmbedLiveSample("HTML_example", "100%", "180")}}</p>
+
+<h3 id="SVG_example" name="SVG_example">SVG の例</h3>
+
+<p>This example reproduces the previous example using SVG.</p>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;g class="isolate"&gt;
+    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush:css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+</pre>
+
+<p>{{EmbedLiveSample("SVG_example", "100%", "180")}}</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('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ja/web/css/mozilla_extensions/index.html b/files/ja/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..a489ce0a0f
--- /dev/null
+++ b/files/ja/web/css/mozilla_extensions/index.html
@@ -0,0 +1,678 @@
+---
+title: CSS の Mozilla 拡張
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - Mozilla 拡張
+  - Reference
+  - 標準外
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">Firefox などの Mozilla アプリケーションは、いくつもの特別な <strong><a href="/ja/docs/Web/CSS">CSS</a> の Mozilla 拡張</strong>に対応しています。これには、プロパティ、値、疑似要素、疑似クラス、@-規則、メディアクエリが含まれます。</span>これらの拡張には <code style="white-space: nowrap;">-moz-</code> 接頭辞が付いています。</p>
+
+<h2 id="Mozilla-only_properties_and_pseudo-classes_(avoid_using_on_websites)" name="Mozilla-only_properties_and_pseudo-classes_(avoid_using_on_websites)">Mozilla 独自のプロパティと疑似クラス (ウェブサイトで使用してはいけません)</h2>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> これらのプロパティと疑似クラスは、Firefox などの Mozilla アプリケーション内でのみ動作するものであり、標準化されていません。これら標準外のプロパティの一部は、<a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> 要素にのみ適用されます。</p>
+</div>
+
+<div class="index">
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-box-align")}}</li>
+ <li>{{CSSxRef("-moz-box-direction")}}</li>
+ <li>{{CSSxRef("-moz-box-flex")}}</li>
+ <li>{{CSSxRef("-moz-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-moz-box-orient")}}</li>
+ <li>{{CSSxRef("-moz-box-pack")}}</li>
+</ul>
+
+<h3 id="C_–_I">C – I</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-context-properties")}}</li>
+ <li>{{CSSxRef("-moz-float-edge")}}</li>
+ <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li>
+ <li>{{CSSxRef("-moz-image-region")}}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-orient")}}</li>
+ <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topright")}}</li>
+ <li>{{CSSxRef("overflow-clip-box")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-block")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-inline")}}</li>
+</ul>
+
+<h3 id="S_–_Z">S – Z</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-stack-sizing")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-input")}}</li>
+ <li>{{CSSxRef("-moz-user-modify")}}</li>
+ <li>{{CSSxRef("-moz-window-dragging")}}</li>
+ <li>{{CSSxRef("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Formerly_proprietary_properties_that_are_now_standard" name="Formerly_proprietary_properties_that_are_now_standard"><span class="highlight-span">以前は独自</span>だったが現在は標準化されているプロパティ</h2>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> CSS の互換性を最大化するため、以下の接頭辞付きのものではなく、接頭辞なしの標準プロパティを使用してください。これらは、標準化されて接頭辞なしの形式が対応され次第、接頭辞付きのバージョンは順次破棄されます。</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A">A</h3>
+ </li>
+ <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="B_2">B</h3>
+ </li>
+ <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [標準化された {{CSSxRef("box-decoration-break")}} に置き換え]</li>
+ <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-color")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-style")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-end-width")}} に置き換え]</li>
+ <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-color")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-style")}} に置き換え]</li>
+ <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("border-inline-start-width")}} に置き換え]</li>
+ <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>
+  <h3 id="C">C</h3>
+ </li>
+ <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [SVG 以外にも適用]</li>
+ <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="F_–_M">F – M</h3>
+ </li>
+ <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [SVG 以外にも適用]</li>
+ <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("margin-inline-end")}} に置き換え]</li>
+ <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("margin-inline-start")}} に置き換え]</li>
+ <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [SVG 以外にも適用]</li>
+ <li>
+  <h3 id="O_2">O</h3>
+ </li>
+ <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li>
+ <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>
+  <h3 id="P">P</h3>
+ </li>
+ <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("padding-inline-end")}} に置き換え]</li>
+ <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [標準化された {{CSSxRef("padding-inline-start")}} に置き換え]</li>
+ <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [SVG 以外にも適用]</li>
+ <li>
+  <h3 id="T_–_U">T – U</h3>
+ </li>
+ <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li>
+ <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [接頭辞付きも許容]</li>
+ <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Values" name="Values">値</h2>
+
+<h3 id="Global_values" name="Global_values">グローバル値</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("initial","-moz-initial")}}</li>
+</ul>
+</div>
+
+<h3 id="-moz-appearance" name="-moz-appearance">{{CSSxRef("-moz-appearance")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code>{{Fx_MinVersion_Inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+</div>
+
+<h3 id="background-image" name="background-image">{{CSSxRef("background-image")}}</h3>
+
+<div class="index">
+<ul>
+ <li>
+  <h4 id="Gradients" name="Gradients">グラデーション {{Gecko_minversion_inline("1.9.2")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li>
+   <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Elements" name="Elements">要素 {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("element","-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Sub-images" name="Sub-images">サブ画像 {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("-moz-image-rect")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="border-color" name="border-color">{{CSSxRef("border-color")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-use-text-color</code> {{obsolete_inline}} Gecko から削除 ({{bug(1306214)}} 参照); 代わりに <a href="/ja/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> を使用してください。</li>
+</ul>
+</div>
+
+<h3 id="border-style_and_outline-style" name="border-style_and_outline-style">{{CSSxRef("border-style")}} と {{CSSxRef("outline-style")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li>
+</ul>
+</div>
+
+<h3 id="color_keywords" name="color_keywords">{{CSSxRef("&lt;color&gt;")}} キーワード</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+</div>
+
+<h3 id="display" name="display">{{CSSxRef("display")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li>
+ <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li>
+</ul>
+</div>
+
+<h3 id="empty-cells" name="empty-cells">{{CSSxRef("empty-cells")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-show-background</code> <span style="white-space: nowrap;">(Quirks モードでは既定値)</span></li>
+</ul>
+</div>
+
+<h3 id="font" name="font">{{CSSxRef("font")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (色も)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> <span style="white-space: nowrap;">(色も)</span></li>
+</ul>
+</div>
+
+<h3 id="font-family" name="font-family">{{CSSxRef("font-family")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+</div>
+
+<h3 id="image-rendering" name="image-rendering">{{CSSxRef("image-rendering")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-rendering","-moz-crisp-edges")}}{{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+</div>
+
+<h3 id="length" name="length">{{CSSxRef("&lt;length&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-calc")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h3 id="list-style-type" name="list-style-type">{{CSSxRef("list-style-type")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+</div>
+
+<h3 id="overflow" name="overflow">{{CSSxRef("overflow")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-scrollbars-none")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-scrollbars-horizontal")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-scrollbars-vertical")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-hidden-unscrollable")}}</li>
+</ul>
+</div>
+
+<h3 id="text-align" name="text-align">{{CSSxRef("text-align")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-center</code></li>
+ <li><code>-moz-left</code></li>
+ <li><code>-moz-right</code></li>
+</ul>
+</div>
+
+<h3 id="text-decoration" name="text-decoration">{{CSSxRef("text-decoration")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+</div>
+
+<h3 id="-moz-user-select" name="-moz-user-select">{{CSSxRef("-moz-user-select")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+</div>
+
+<h3 id="width_min-width_and_max-width" name="width_min-width_and_max-width">{{CSSxRef("width")}} および {{CSSxRef("min-width")}}, {{CSSxRef("max-width")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-elements_and_pseudo-classes" name="Pseudo-elements_and_pseudo-classes">疑似要素と疑似クラス</h2>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A_–_D">A – D</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-any-link")}} [<code>:link</code> と <code>:visited</code> に一致する]</li>
+ <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-color-swatch")}}</li>
+ <li>{{CSSxRef("::-moz-cell-content")}}</li>
+ <li>{{CSSxRef(":-moz-drag-over")}}</li>
+ <li>
+  <h3 id="F_–_I">F – I</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-first-node")}}</li>
+ <li>{{CSSxRef("::-moz-focus-inner")}}</li>
+ <li>{{CSSxRef("::-moz-focus-outer")}}</li>
+ <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef("::-moz-inline-table")}}</li>
+ <li>
+  <h3 id="L">L</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-last-node")}}</li>
+ <li>{{CSSxRef(":-moz-list-bullet")}}</li>
+ <li>{{CSSxRef(":-moz-list-number")}}</li>
+ <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>
+  <h3 id="N_–_R">N – R</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li>
+ <li>{{CSSxRef(":-moz-only-whitespace")}}</li>
+ <li>{{CSSxRef("::-moz-page")}}</li>
+ <li>{{CSSxRef("::-moz-page-sequence")}}</li>
+ <li>{{CSSxRef("::-moz-pagebreak")}}</li>
+ <li>{{CSSxRef("::-moz-pagecontent")}}</li>
+ <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-progress-bar")}}</li>
+ <li>{{CSSxRef("::-moz-range-progress")}}</li>
+ <li>{{CSSxRef("::-moz-range-thumb")}}</li>
+ <li>{{CSSxRef("::-moz-range-track")}}</li>
+ <li>{{CSSxRef(":-moz-read-only")}}</li>
+ <li>{{CSSxRef(":-moz-read-write")}}</li>
+ <li>
+  <h3 id="S">S</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-content")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li>
+ <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li>
+ <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li>
+ <li>
+  <h3 id="T">T</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-table")}}</li>
+ <li>{{CSSxRef("::-moz-table-cell")}}</li>
+ <li>{{CSSxRef("::-moz-table-column")}}</li>
+ <li>{{CSSxRef("::-moz-table-column-group")}}</li>
+ <li>{{CSSxRef("::-moz-table-outer")}}</li>
+ <li>{{CSSxRef("::-moz-table-row")}}</li>
+ <li>{{CSSxRef("::-moz-table-row-group")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-checkbox")}}</li>
+ <li>{{CSSxRef(":-moz-tree-column")}}</li>
+ <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li>
+ <li>{{CSSxRef(":-moz-tree-image")}}</li>
+ <li>{{CSSxRef(":-moz-tree-indentation")}}</li>
+ <li>{{CSSxRef(":-moz-tree-line")}}</li>
+ <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-separator")}}</li>
+ <li>{{CSSxRef(":-moz-tree-twisty")}}</li>
+ <li>
+  <h3 id="U_–_X">U – X</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-viewport")}}</li>
+ <li>{{CSSxRef("::-moz-viewport-scroll")}}</li>
+ <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li>
+</ul>
+</div>
+
+<h2 id="At-rules" name="At-rules">@-規則</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@-moz-document")}}</li>
+</ul>
+</div>
+
+<h2 id="Media_features" name="Media_features">メディア特性</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h2 id="Other" name="Other">その他</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-moz-alt-content")}} (see {{Bug(11011)}})</li>
+</ul>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Mozilla/Gecko/Chrome/CSS">Chrome 専用 CSS リファレンス</a></li>
+ <li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">CSS の Microsoft 拡張</a></li>
+ <li><a href="/ja/docs/Web/CSS/WebKit_Extensions">CSS の WebKit 拡張</a></li>
+</ul>
diff --git a/files/ja/web/css/none/index.html b/files/ja/web/css/none/index.html
new file mode 100644
index 0000000000..34dd66b6f6
--- /dev/null
+++ b/files/ja/web/css/none/index.html
@@ -0,0 +1,31 @@
+---
+title: none
+slug: Web/CSS/none
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/float
+---
+<div>
+  {{CSSRef()}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><strong><code>none</code></strong> キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。</p>
+<h2 id="Used_in" name="Used_in">none 値が使用可能な CSS プロパティ</h2>
+<ul>
+  <li>{{ Cssxref("float") }}<br>
+    要素はフロートしません。</li>
+  <li>{{ Cssxref("text-decoration") }}<br>
+    要素の装飾を行いません。</li>
+  <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}<br>
+    高さ・幅を特定値で制限しません。</li>
+  <li>{{ Cssxref("background-image") }}</li>
+  <li>{{ Cssxref("border-style") }}</li>
+  <li>{{ Cssxref("clear") }}</li>
+  <li>{{ Cssxref("content") }}</li>
+  <li>{{ Cssxref("counter-increment") }}</li>
+  <li>{{ Cssxref("counter-reset") }}</li>
+  <li>{{ Cssxref("display") }}</li>
+  <li>{{ Cssxref("list-style-type") }}</li>
+  <li>{{ Cssxref("quotes") }}</li>
+  <li>{{ Cssxref("text-transform") }}</li>
+</ul>
diff --git a/files/ja/web/css/normal/index.html b/files/ja/web/css/normal/index.html
new file mode 100644
index 0000000000..e7384cd4d9
--- /dev/null
+++ b/files/ja/web/css/normal/index.html
@@ -0,0 +1,36 @@
+---
+title: normal
+slug: Web/CSS/normal
+tags:
+  - CSS Reference
+translation_of: Web/CSS/font-variant
+---
+<div>
+  {{CSSRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><strong><code>normal</code></strong> は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。</p>
+<h2 id="Used_in" name="Used_in">normal が使用可能な CSS プロパティ</h2>
+<dl>
+  <dt>
+    {{Cssxref("font-weight")}}</dt>
+  <dd>
+    <code>normal</code> を指定した場合、font-weight プロパティの基準値（<code>400</code>）と同等となります。太字にも細字にもなりません。</dd>
+  <dt>
+    {{Cssxref("font-style")}}</dt>
+  <dd>
+    <code>normal</code> を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。</dd>
+  <dt>
+    {{Cssxref("word-spacing")}}</dt>
+  <dd>
+    <code>normal</code> を指定した場合、フォントの標準的な字間で文字がレンダリングされます。</dd>
+</dl>
+<p>他にも、以下の様なプロパティ等で <code>normal</code> が指定可能です。</p>
+<ul>
+  <li>{{Cssxref("font-variant")}}</li>
+  <li>{{Cssxref("letter-spacing")}}</li>
+  <li>{{Cssxref("white-space")}}</li>
+  <li>{{Cssxref("speak")}}</li>
+  <li>{{Cssxref("unicode-bidi")}}</li>
+  <li>{{Cssxref("line-height")}}</li>
+  <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/ja/web/css/number/index.html b/files/ja/web/css/number/index.html
new file mode 100644
index 0000000000..3c7aab98aa
--- /dev/null
+++ b/files/ja/web/css/number/index.html
@@ -0,0 +1,92 @@
+---
+title: <number>
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS データ型
+  - Number
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 数値
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;number&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、整数または小数部分のある数値を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;number&gt;</code> の構文は {{CSSxRef("&lt;integer&gt;")}} 構文を拡張したものです。小数は <code>.</code> と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。</p>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p><code>&lt;number&gt;</code> データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた <a href="/ja/docs/Web/CSS/single-transition-timing-function">timing function</a> で決められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="有効な数値">有効な数値</h3>
+
+<pre class="syntaxbox example-good">12          生の &lt;integer&gt; は &lt;number&gt; でもある
+4.01        正の実数
+-456.8      負の実数
+0.0         ゼロ
++0.0        + に続くゼロ
+-0.0        - に続くゼロ
+.60         前のゼロがない小数値
+10e3        Scientific notation
+-3.4e-2     Complicated scientific notation
+</pre>
+
+<h3 id="Invalid_numbers" name="Invalid_numbers">無効な数値</h3>
+
+<pre class="syntaxbox example-bad">12.         小数点の後ろには数字が続かなくてはなりません
++-12.2      前に置ける +/- は 1 つだけです
+12.1.1      小数点は1つしか置けません
+</pre>
+
+<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("CSS4 Values", "#numbers", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#numbers", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>明示的な定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>暗黙的な定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.number")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/object-fit/index.html b/files/ja/web/css/object-fit/index.html
new file mode 100644
index 0000000000..42e6f068cd
--- /dev/null
+++ b/files/ja/web/css/object-fit/index.html
@@ -0,0 +1,169 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 画像
+  - object-fit
+  - リファレンス
+  - レイアウト
+  - 寸法
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>object-fit</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。</p>
+
+<p>要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+<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>
+
+<p><code>object-fit</code> プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、<a href="https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">レターボックス</a>表示になります。</dd>
+ <dt><code>cover</code></dt>
+ <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。</dd>
+ <dt><code>fill</code></dt>
+ <dd>置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。</dd>
+ <dt><code>none</code></dt>
+ <dd>置換コンテンツは、拡大縮小されません。</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>コンテンツは <code>none</code> 又は <code>contain</code> を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Output" name="Output">出力結果</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 class="cleared" 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('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/ja/web/css/object-position/index.html b/files/ja/web/css/object-position/index.html
new file mode 100644
index 0000000000..c52de24924
--- /dev/null
+++ b/files/ja/web/css/object-position/index.html
@@ -0,0 +1,119 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+tags:
+  - CSS
+  - CSS Image
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>object-position</code></strong> プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.</p>
+
+<p>You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* &lt;position&gt; 値 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* グローバル値 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("&lt;position&gt;")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 要素がボックス外にはみ出る位置も指定できます。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/&gt;
+</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css">img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+</pre>
+
+<p>The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.</p>
+
+<h3 id="Output" name="Output">出力</h3>
+
+<p>{{EmbedLiveSample('Example', '100%','300px' )}}</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('CSS4 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>最初期の定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.object-position")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ja/web/css/offset-distance/index.html b/files/ja/web/css/offset-distance/index.html
new file mode 100644
index 0000000000..f0c4b4f7e0
--- /dev/null
+++ b/files/ja/web/css/offset-distance/index.html
@@ -0,0 +1,103 @@
+---
+title: offset-distance
+slug: Web/CSS/offset-distance
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - CSS プロパティ
+  - CSS モーションパス
+  - Experimental
+  - Motion Path
+  - Reference
+  - motion-offset
+  - offset-distance
+  - 'recipe:css-property'
+  - モーションパス
+translation_of: Web/CSS/offset-distance
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>offset-distance</code></strong> は CSS プロパティで、 {{CSSxRef("offset-path")}} 上の要素を配置する位置を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/offset-distance.html")}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 既定値 */
+offset-distance: 0;
+
+/* offset-path の途中 */
+offset-distance: 50%;
+
+/* パス上の固定距離の位置 */
+offset-distance: 40px;</pre>
+
+<dl>
+ <dt><code>{{cssxref('&lt;length-percentage&gt;')}}</code></dt>
+ <dd>要素が ({{cssxref('offset-path')}} で定義された) パス上のどのくらいの距離にあるかを指定する長さです。</dd>
+ <dd>100% はパスの全長を表します。 (<code>offset-path</code> が基本シェイプまたは <code>path()</code> として定義されている場合)。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>CSS モーションパスのモーションアスペクトは、一般に <code>offset-distance</code> プロパティのアニメーションから来ています。要素をパス全体の上でアニメーションさせたい場合は、その {{cssxref('offset-path')}} を定義し、 <code>offset-distance</code> に <code>0%</code> から <code>100%</code> までを取るアニメーションを設定してください。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 150)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状態</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.offset-distance")}}</p>
diff --git a/files/ja/web/css/offset-path/index.html b/files/ja/web/css/offset-path/index.html
new file mode 100644
index 0000000000..5826f9f32c
--- /dev/null
+++ b/files/ja/web/css/offset-path/index.html
@@ -0,0 +1,190 @@
+---
+title: offset-path
+slug: Web/CSS/offset-path
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS モーションパス
+  - Experimental
+  - Motion Path
+  - Reference
+  - motion-path
+  - offset-path
+  - 'recipe:css-property'
+  - モーションパス
+translation_of: Web/CSS/offset-path
+---
+<div>{{cssref}}</div>
+
+<p><strong><code>offset-path</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素がたどる移動経路と、親コンテナーまたは SVG 座標系の中での要素の配置を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* 既定値 */
+offset-path: none;
+
+/* 関数値 */
+offset-path: ray(45deg closest-side contain);
+
+/* URL */
+offset-path: url(#path);
+
+/* 図形 */
+offset-path: circle(50% at 25% 25%);
+offset-path: inset(50% 50% 50% 50%);
+offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
+offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
+
+/* 位置ボックス */
+offset-path: margin-box;
+offset-path: stroke-box;
+
+/* グローバル値 */
+offset-path: inherit;
+offset-path: initial;
+offset-path: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>ray()</code></dt>
+ <dd>最大3つの値を取り、ボックスの位置から始まり、指定された角度で定義された方向に進む線分であるパスを定義します。定義は角度で、 CSS のグラデーションの角度と同様に、 <code>0deg</code> を上にして正の角度を時計回り方向に増加させます。続く寸法の値は CSS の半径方向のグラデーションの寸法の値に似ており、 <code>closest-side</code> から <code>farthest-corner</code> まで、そしてキーワード <code>contain</code> です。</dd>
+ <dt><code>url()</code></dt>
+ <dd>SVG 図形の ID の参照です。 -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, <code>rect</code> -- のいずれかで、図形の形状をパスとして使用します。</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd><a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">CSS シェイプ</a>、たとえば <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code>, <code>path()</code> を指定します。</dd>
+ <dd>
+ <dl>
+  <dt><code>path()</code></dt>
+  <dd>SVG 座標の構文で定義されたパス文字列です。</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>モーションパスを全く定義しません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>このプロパティは、移動する要素がたどることができる経路を定義します。オフセットの経路は1つまたは複数のサブ経路で指定された経路か、スタイル付けされていない基本図形の形状で指定します。オフセット経路上の要素の正確な位置は、 {{cssxref("offset-distance")}} プロパティで決定されます。それぞれの図形または経路は、初期位置を {{cssxref("offset-distance")}} の <code>0</code> の計算値で定義し、オブジェクトの回転方向を指定する初期方向を初期位置にします。</p>
+
+<p><strong>注</strong>: 仕様書の初期の版では、このプロパティを <code>motion-path</code> と呼んでいました。It was changed to <code>offset-path</code> because the property describe static positions, not motion.</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例は <a href="http://codepen.io/ericwilligers/pen/bwVkNa">CodePen</a> の例から抜粋しています。対応ブラウザーではライブ編集が可能です。</p>
+
+<p>CSS コードサンプルの <code>offset-path</code> プロパティは、 SVG の <code>&lt;path&gt;</code> 要素と同じモーションパスを定義しています。このパスは、 SVG コードのレンダリングを見てもわかるように、煙突のある家の線画になっています。</p>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.scissorHalf {
+  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
+  animation: followpath 4s linear infinite;
+}
+
+@keyframes followpath {
+   to {
+     motion-offset: 100%;
+     offset-distance: 100%;
+   }
+}</pre>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<p>ハサミの上半分と下半分は、 <code>offset-path</code> で定義されたモーションパスの始点に沿って配置されていなければ、キャンバスの左上に表示されます。</p>
+
+<pre class="brush: html notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900"&gt;
+  &lt;title&gt;House and Scissors&lt;/title&gt;
+  &lt;rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" /&gt;
+  &lt;polygon points="506,423 900,190 1294,423"
+           fill="yellow" /&gt;
+  &lt;polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" /&gt;
+  &lt;path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="none"
+        stroke="black"
+        stroke-width="13"
+        stroke-linejoin="round"
+        stroke-linecap="round" /&gt;
+  &lt;path id="firstScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
+        transform="translate(0,0)"
+        fill="green"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+  &lt;path id="secondScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
+        transform="translate(0,0)"
+        fill="forestgreen"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Live_Result" name="Live_Result">ライブ結果</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', '450')}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状態</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.offset-path")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li><a href="/ja/docs/Web/SVG/Tutorial/Paths">SVG &lt;path&gt; </a></li>
+</ul>
+
+<p>その他のデモ:</p>
+
+<ul>
+ <li><a href="https://codepen.io/team/css-tricks/pen/WZdKMq">Examples of the various values</a></li>
+ <li><a href="http://codepen.io/ericwilligers/pen/jrbJPp">Triangle</a></li>
+ <li><a href="http://codepen.io/ericwilligers/pen/bwVkNa">Scissors</a></li>
+ <li><a href="http://jsfiddle.net/ericwilligers/r1snqdan/">Eyes</a></li>
+</ul>
diff --git a/files/ja/web/css/offset-position/index.html b/files/ja/web/css/offset-position/index.html
new file mode 100644
index 0000000000..1ec10fb9fc
--- /dev/null
+++ b/files/ja/web/css/offset-position/index.html
@@ -0,0 +1,113 @@
+---
+title: offset-position
+slug: Web/CSS/offset-position
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - Experimental
+  - Property
+  - offset-position
+  - 'recipe:css-property'
+translation_of: Web/CSS/offset-position
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p><strong><code>offset-position</code></strong> は CSS のプロパティで、 {{cssxref("offset-path")}} の<a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">初期位置</a>を定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+offset-position: auto;
+offset-position: top;
+offset-position: bottom;
+offset-position: left;
+offset-position: right;
+offset-position: center;
+
+/* &lt;percentage&gt; 値 */
+offset-position: 25% 75%;
+
+/* &lt;length&gt; 値 */
+offset-position: 0 0;
+offset-position: 1cm 2cm;
+offset-position: 10ch 8em;
+
+/* 辺とオフセット値 */
+offset-position: bottom 10px right 20px;
+offset-position: right 3em bottom 10px;
+offset-position: bottom 10px right;
+offset-position: top right 10px;
+
+/* グローバル値 */
+offset-position: inherit;
+offset-position: initial;
+offset-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>初期位置は {{cssxref("position")}} プロパティで指定されたボックスの位置です。</dd>
+ <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
+ <dd>{{cssxref("&lt;position&gt;")}} です。位置は x/y 座標を定義し、要素のボックスの辺から相対的にアイテムを配置します。1つから4つの値を使って定義することができます。キーワード以外の値を2つ指定した場合、1つ目の値は水平方向の位置を、2つ目の値は垂直方向の位置を表します。1つの値のみを指定した場合は、2番目の値は <code>center</code> とみなされます。3 つまたは 4 つの値が使用される場合、長さとパーセントの値は、前のキーワード値からのオフセットとなります。これらの値タイプの詳細については、 {{cssxref("background-position")}} を参照してください。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_initial_offset_position" name="Setting_initial_offset_position">初期オフセット位置の設定</h3>
+
+<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  offset-position: left top;
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状態</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.offset-position")}}</p>
diff --git a/files/ja/web/css/offset-rotate/index.html b/files/ja/web/css/offset-rotate/index.html
new file mode 100644
index 0000000000..8b0742cf80
--- /dev/null
+++ b/files/ja/web/css/offset-rotate/index.html
@@ -0,0 +1,128 @@
+---
+title: offset-rotate
+slug: Web/CSS/offset-rotate
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - CSS プロパティ
+  - CSS モーションパス
+  - Experimental
+  - Reference
+  - offset-rotate
+  - 'recipe:css-property'
+translation_of: Web/CSS/offset-rotate
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>offset-rotate</code></strong> は CSS のプロパティで、要素が {{cssxref("offset-path")}} に沿って配置された場合の向き/方向を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/offset-rotate.html")}}</div>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 初期のころの仕様書では、このプロパティを <code>motion-rotation</code> と呼んでいました。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* パスの方向に従い、任意で角度を追加 */
+offset-rotate: auto;
+offset-rotate: auto 45deg;
+
+/* パスの方向に従うが、 auto とは逆の方向を向く */
+offset-rotate: reverse;
+
+/* パスの位置に関係なく、決められた回転を維持する */
+offset-rotate: 90deg;
+offset-rotate: .5turn;</pre>
+
+<dl>
+ <dt><code><dfn>auto</dfn></code></dt>
+ <dd>
+ <p>要素は正方向の X 軸から見た {{cssxref("offset-path")}} 方向の角度で回転します。これが既定値です。</p>
+ </dd>
+ <dt><code>{{cssxref("&lt;angle&gt;")}}</code></dt>
+ <dd>
+ <p>要素は指定された回転角によって、時計方向に固定値で回転変換されます。</p>
+ </dd>
+ <dt><code><dfn>auto &lt;angle&gt;</dfn></code></dt>
+ <dd>
+ <p><code>auto</code> に {{cssxref("&lt;angle&gt;")}} が続いた場合、<span class="production" id="ref-for-angle-value①③" title="Expands to: turn | rad | grad | deg">その角度</span>が<code>auto</code>の計算値に加算されます。</p>
+ </dd>
+ <dt><code><dfn>reverse</dfn></code></dt>
+ <dd>
+ <p>要素は <code>auto</code> と同様に回転しますが、反対方向を向きます。 <code>auto 180deg</code> の値を指定したのと同等です。</p>
+ </dd>
+ <dd></dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 40px;
+  height: 40px;
+  background: #2BC4A2;
+  margin: 20px;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
+  animation: move 5000ms infinite alternate ease-in-out;
+
+  offset-path: path('M20,20 C20,50 180,-10 180,20');
+}
+div:nth-child(1) {
+  offset-rotate: auto;
+}
+div:nth-child(2) {
+  offset-rotate: auto 90deg;
+}
+div:nth-child(3) {
+  offset-rotate: 30deg;
+}
+
+@keyframes move {
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', '200')}}</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('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.offset-rotate")}}</p>
diff --git a/files/ja/web/css/offset/index.html b/files/ja/web/css/offset/index.html
new file mode 100644
index 0000000000..5d1bbba29d
--- /dev/null
+++ b/files/ja/web/css/offset/index.html
@@ -0,0 +1,122 @@
+---
+title: offset
+slug: Web/CSS/offset
+tags:
+  - CSS
+  - CSS Motion Path
+  - CSS Property
+  - Experimental
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/offset
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>offset</code></strong> は CSS の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素を定義された経路に沿って動かすのに必要なすべてのプロパティを設定します。</p>
+
+<div class="note">
+<p><strong>注</strong>: 仕様書の早期の版では、このプロパティを <code>motion</code> と呼んでいました。</p>
+</div>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("offset-anchor")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-path")}}</li>
+ <li>{{cssxref("offset-position")}}</li>
+ <li>{{cssxref("offset-rotate")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* オフセット位置 */
+offset: auto;
+offset: 10px 30px;
+offset: none;
+
+/* オフセット経路 */
+offset: ray(45deg closest-side);
+offset: path('M 100 100 L 300 100 L 200 300 z');
+offset: url(arc.svg);
+
+/* オフセット経路に距離と回転が加わったもの */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* オフセットアンカーを含む */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+</pre>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Animating_an_element_along_a_path" name="Animating_an_element_along_a_path">経路に沿って要素を動かす</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="offsetElement"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Animating_an_element_along_a_path", 350, 350)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>状態</th>
+   <th>備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.offset")}}</p>
diff --git a/files/ja/web/css/opacity/index.html b/files/ja/web/css/opacity/index.html
new file mode 100644
index 0000000000..68e73df742
--- /dev/null
+++ b/files/ja/web/css/opacity/index.html
@@ -0,0 +1,154 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS プロパティ
+  - Opacity
+  - Reference
+  - 不透明度
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>opacity</code></strong> プロパティは、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いに透明度が異なっていても、その要素の背景に対しては同程度の透明度となります。</p>
+
+<p>このプロパティを <code>1</code> 以外の値で用いると、その要素は新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作ります。</p>
+
+<p>もし、<a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">子要素に透明度を適用したくない場合</a>は、以下のように代わりに {{cssxref("background")}} プロパティを使用してください。</p>
+
+<pre class="brush:css notranslate">background: rgba(0, 0, 0, 0.4);</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;alpha-value&gt;</code></dt>
+ <dd>{{cssxref("number")}} を <code>0.0</code> 以上 <code>1.0</code> 以下で、また {{cssxref("percentage")}} を <code>0%</code> 以上 <code>100%</code> 以下で、チャネルの不透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>値</th>
+    <th>意味</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>要素は完全に透明です (つまり、不可視です)</td>
+   </tr>
+   <tr>
+    <td>{{cssxref("number")}} が <code>0</code> より大きく <code>1</code> 未満の何れかの値</td>
+    <td>要素は半透明です (つまり、要素の背後のコンテンツが見えます)。</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (既定値)</td>
+    <td>要素は完全に不透明です (中身が詰まって見えます)</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: css notranslate">div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Barely see the text over the background */
+}
+.medium {
+  opacity: 0.5; /* See the text more clearly over the background */
+}
+.heavy {
+  opacity: 0.9; /* See the text very clearly over the background */
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="light"&gt;You can barely see this.&lt;/div&gt;
+&lt;div class="medium"&gt;This is easier to see.&lt;/div&gt;
+&lt;div class="heavy"&gt;This is very easy to see.&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p>
+
+<h3 id="Different_opacity_with_hover" name="Different_opacity_with_hover">:hover を使った透明度の変化</h3>
+
+<pre class="brush: css notranslate">img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;img src="<a href="https://developer.mozilla.org/static/img/opengraph-logo.png">//developer.mozilla.org/static/img/opengraph-logo.png</a>"
+  alt="MDN ロゴ" width="128" height="146"
+  class="opacity"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。</p>
+
+<p>色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Colors', '#transparency', 'opacity')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>opacity の値にパーセント値を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.opacity", 2)}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/ja-jp/library/ms532910%28VS.85%29.aspx">マイクロソフトの filter:alpha(opacity=xx)</a></li>
+</ul>
diff --git a/files/ja/web/css/order/index.html b/files/ja/web/css/order/index.html
new file mode 100644
index 0000000000..42a74e98ea
--- /dev/null
+++ b/files/ja/web/css/order/index.html
@@ -0,0 +1,113 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>order</code></strong> プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは <code>order</code> の値の昇順に配置され、さらにソースコード内の順序で配置されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;integer&gt; 値 */
+order: 5;
+order: -5;
+
+/* グローバル値 */
+order: inherit;
+order: initial;
+order: unset;</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: <code>order</code> は要素の<strong>視覚上の順序</strong>にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。<code><strong>order</strong></code> を <a href="/ja/docs/Web/CSS/@media#speech">speech</a> など、視覚的ではないメディアで使用してはいけません。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>アイテムが割り当てられる順序グループを表します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>基本的な HTML 一式:</p>
+
+<pre class="brush:html; notranslate">&lt;header&gt;...&lt;/header&gt;
+&lt;main&gt;
+  &lt;article&gt;Article&lt;/article&gt;
+  &lt;nav&gt;Nav&lt;/nav&gt;
+  &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/main&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。</p>
+
+<pre class="brush:css; notranslate">main { display: flex;  text-align:center; }
+main &gt; article { flex:1;        order: 2; }
+main &gt; nav     { width: 200px;  order: 1; }
+main &gt; aside   { width: 200px;  order: 3; }</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>order</code> プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.order")}}</p>
+
+<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/Ordering_Flex_Items">フレックスアイテムの並べ替え</a></em></li>
+ <li>CSS グリッドガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></em></li>
+</ul>
diff --git a/files/ja/web/css/orphans/index.html b/files/ja/web/css/orphans/index.html
new file mode 100644
index 0000000000..1e57e7d183
--- /dev/null
+++ b/files/ja/web/css/orphans/index.html
@@ -0,0 +1,115 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 断片化
+  - Reference
+  - Web
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>orphans</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/ja/docs/Web/CSS/Paged_Media">ページ</a>、領域、<a href="/ja/docs/Web/CSS/CSS_Columns">段</a>の<em>最下部</em>に表示されるブロックコンテナーの最小行数を設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;integer&gt; 値 */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+</pre>
+
+<div class="note">
+<p>組版において、 <em>orphan</em> とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;これは幾らかのテキストを含む最初の段落です。&lt;/p&gt;
+  &lt;p&gt;これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。&lt;/p&gt;
+  &lt;p&gt;これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[5]">div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 380, 150)}}</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 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td><code>orphans</code> をページ、領域、段など、断片の種類によらず適用するように拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<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.properties.orphans")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Paged_Media">ページ化メディア</a></li>
+</ul>
diff --git a/files/ja/web/css/other_resources/index.html b/files/ja/web/css/other_resources/index.html
new file mode 100644
index 0000000000..1a978eade2
--- /dev/null
+++ b/files/ja/web/css/other_resources/index.html
@@ -0,0 +1,27 @@
+---
+title: Other Resources
+slug: Web/CSS/Other_Resources
+tags:
+  - CSS
+translation_of: Web/CSS
+---
+<h2 id="W3C_Documents" name="W3C_Documents">W3C の文書</h2>
+<ul>
+  <li><a class="external" href="http://www.w3.org/Style/CSS/">CSS メインページ</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 仕様</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 仕様</a></li>
+  <li><a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C での基本スタイルシート</a></li>
+  <li><a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 テストスイート</a></li>
+  <li><a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 テストスイート</a></li>
+</ul>
+
+
+<h2 id="Other_Resources" name="Other_Resources">その他の資料</h2>
+<ul>
+  <li><a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a></li>
+  <li><a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a></li>
+  <li><a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a></li>
+  <li><a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a></li>
+  <li>css-discuss: <a class="external" href="http://archivist.incutio.com/css-discuss/">archives</a>, <a class="external" href="http://css-discuss.incutio.com/">wiki</a></li>
+  <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a></li>
+</ul>
diff --git a/files/ja/web/css/outline-color/index.html b/files/ja/web/css/outline-color/index.html
new file mode 100644
index 0000000000..6beb458ce2
--- /dev/null
+++ b/files/ja/web/css/outline-color/index.html
@@ -0,0 +1,138 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - CSS User Interace
+  - HTML Colors
+  - HTML Styles
+  - Outline
+  - Reference
+  - Styles
+  - Styling HTML
+  - outline-color
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>outline-color</code></strong> は CSS のプロパティで、要素の輪郭線の色を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;color&gt; 値 */
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+outline-color: blue;
+
+/* キーワード値 */
+outline-color: invert;
+
+/* グローバル値 */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+</pre>
+
+<p><code>outline-color</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>輪郭線の色で、 <code>&lt;color&gt;</code> で指定します。</dd>
+ <dt><code>invert</code></dt>
+ <dd>輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。</p>
+
+<p>輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>独自の<a href="/ja/docs/Web/CSS/:focus">フォーカススタイル</a>を作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。</p>
+
+<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_a_solid_blue_outline" name="Setting_a_solid_blue_outline">青い実線の輪郭線の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p&gt;見ての通り、輪郭線は青です。&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[3] notranslate">p {
+  outline: 2px solid;      /* 輪郭線の幅と種類 */
+  outline-color: #0000FF;  /* 輪郭線を青にする */
+  margin: 5px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}</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 Basic UI', '#outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.outline-color")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/outline-offset/index.html b/files/ja/web/css/outline-offset/index.html
new file mode 100644
index 0000000000..f0ce7a3177
--- /dev/null
+++ b/files/ja/web/css/outline-offset/index.html
@@ -0,0 +1,87 @@
+---
+title: outline-offset
+slug: Web/CSS/outline-offset
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - CSS プロパティ
+  - CSS 輪郭線
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><ruby>輪郭線<rp> (</rp><rt>outline</rt><rp>) </rp></ruby>は要素の周囲、<ruby>境界線<rp> (</rp><rt>border</rt><rp>) </rp></ruby>の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* グローバル値 */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>{{cssxref("&lt;length&gt;")}}</code></dt>
+ <dd>要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 <code>0</code> を指定すると輪郭線は要素との隙間を置かずに表示されます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: css notranslate">p {
+  outline: 1px dashed red;
+  outline-offset: 10px;
+  background: yellow;
+  border: 1px solid blue;
+  margin: 15px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;Gallia est omnis divisa in partes tres.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Example')}}</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 Basic UI', '#outline-offset', 'outline-offset') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.outline-offset")}}</p>
diff --git a/files/ja/web/css/outline-style/index.html b/files/ja/web/css/outline-style/index.html
new file mode 100644
index 0000000000..b8b6f2a897
--- /dev/null
+++ b/files/ja/web/css/outline-style/index.html
@@ -0,0 +1,243 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 輪郭線
+  - Outline
+  - Reference
+  - outline-style
+translation_of: Web/CSS/outline-style
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>outline-style</code></strong> プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* グローバル値 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+</pre>
+
+<p><code>outline-style</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>
+ <p><code>auto</code></p>
+ </dt>
+ <dd style="outline: 8px auto red;">ユーザーエージェントに輪郭線の描画を任せます。</dd>
+ <dt>
+ <p><code>none</code></p>
+ </dt>
+ <dd>輪郭線を描きません。{{cssxref("outline-width")}} は <code>0</code> です。</dd>
+ <dt>
+ <p><code>dotted</code></p>
+ </dt>
+ <dd style="outline: 8px dotted red;">点線の輪郭線です。</dd>
+ <dt>
+ <p><code>dashed</code></p>
+ </dt>
+ <dd style="outline: 8px dashed red;">破線の輪郭線です。</dd>
+ <dt>
+ <p><code>solid</code></p>
+ </dt>
+ <dd style="outline: 8px solid red;">1本の実線の輪郭線です。</dd>
+ <dt>
+ <p><code>double</code></p>
+ </dt>
+ <dd style="outline: 8px double red;">2本の実線の輪郭線です。{{cssxref("outline-width")}}は2本の線とその隙間の合計です。</dd>
+ <dt>
+ <p><code>groove</code></p>
+ </dt>
+ <dd style="outline: 8px groove red;">ページに刻まれたかのように見える輪郭線です。</dd>
+ <dt>
+ <p><code>ridge</code></p>
+ </dt>
+ <dd style="outline: 8px ridge red;"><code>groove</code>の逆で、ページから押し出されたように見える輪郭線です。</dd>
+ <dt>
+ <p><code>inset</code></p>
+ </dt>
+ <dd style="outline: 8px inset red;">領域がページに埋め込まれたかのように見える輪郭線です。</dd>
+ <dt>
+ <p><code>outset</code></p>
+ </dt>
+ <dd style="outline: 8px outset red;"><code>inset</code>の逆で、領域がページから隆起しているように見える輪郭線です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Example_0_-_auto" name="Example_0_-_auto">例 0 - <code>auto</code></h3>
+
+<p>値<code>auto</code>は、輪郭線スタイルがカスタムであることを表します。 — <q cite="https://www.w3.org/TR/css-ui-3/#outline-style">典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)</q></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="auto"&gt;Outline Demo&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.auto {
+  outline-style: auto; /* "outline: auto" と同じ */
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<p>{{ EmbedLiveSample('Example_0_-_auto') }}</p>
+
+<h3 id="Example_1_-_dotted_and_dashed" name="Example_1_-_dotted_and_dashed">例 1 - <code>dotted</code> と <code>dashed</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="dotted"&gt;
+    &lt;p class="dashed"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.dotted {
+  outline-style: dotted; /* "outline: dotted" と同じ */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<p>{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}</p>
+
+<h3 id="Example_2_-_solid_and_double" name="Example_2_-_solid_and_double">例 2 - <code>solid</code> と <code>double</code></h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="solid"&gt;
+    &lt;p class="double"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<p>{{ EmbedLiveSample('Example_2_-_solid_and_double') }}</p>
+
+<h3 id="Example_3_-_groove_and_ridge" name="Example_3_-_groove_and_ridge">例 3 - <code>groove</code> と <code>ridge</code></h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="groove"&gt;
+    &lt;p class="ridge"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<p>{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}</p>
+
+<h3 id="Example_4_-_inset_and_outset" name="Example_4_-_inset_and_outset">例 4 - <code>inset</code> と <code>outset</code></h3>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;div class="inset"&gt;
+    &lt;p class="outset"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<p>{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}</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 Basic UI', '#outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td><code>auto</code>値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.outline-style")}}</p>
diff --git a/files/ja/web/css/outline-width/index.html b/files/ja/web/css/outline-width/index.html
new file mode 100644
index 0000000000..d70fcf6658
--- /dev/null
+++ b/files/ja/web/css/outline-width/index.html
@@ -0,0 +1,141 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>outline-width</code></strong> プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* &lt;length&gt; 値 */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* グローバル値 */
+outline-width: inherit;
+</pre>
+
+<p><code>outline-width</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>輪郭線の太さを <code>&lt;length&gt;</code> で指定します。</dd>
+ <dt><code>thin</code></dt>
+ <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>1px</code> です。</dd>
+ <dt><code>medium</code></dt>
+ <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>3px</code> です。</dd>
+ <dt><code>thick</code></dt>
+ <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>5px</code> です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_an_elements_outline_width" name="Setting_an_elements_outline_width">要素の輪郭線の幅の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="twopixels"&gt;2px&lt;/span&gt;
+&lt;span id="oneex"&gt;1ex&lt;/span&gt;
+&lt;span id="em"&gt;1.2em&lt;/span&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}</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 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.outline-width")}}</p>
diff --git a/files/ja/web/css/outline/index.html b/files/ja/web/css/outline/index.html
new file mode 100644
index 0000000000..8d5b0c20e9
--- /dev/null
+++ b/files/ja/web/css/outline/index.html
@@ -0,0 +1,145 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - CSS 輪郭線
+  - Layout
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>outline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>他の一括指定プロパティと同様に、省略された値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。</p>
+
+<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3>
+
+<p><a href="/ja/docs/Web/CSS/border">境界線</a>と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p>
+
+<ul>
+ <li>輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。</li>
+ <li>仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 種類 */
+outline: solid;
+
+/* 色 | 種類 */
+outline: #f66 dashed;
+
+/* 種類 | 幅 */
+outline: inset thick;
+
+/* 色 | 種類 | 幅 */
+outline: green solid 3px;
+
+/* グローバル値 */
+outline: inherit;
+outline: initial;
+outline: unset;
+</pre>
+
+<p><code>outline</code> プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が <code>none</code> だからです。特筆すべき例外は <code>input</code> 要素で、ブラウザーが既定のスタイルを与えます。</p>
+</div>
+
+<h3 id="Values_2" name="Values_2">値</h3>
+
+<dl>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>輪郭線の色を設定します。未指定の場合の既定値は <code>currentcolor</code> です。 {{cssxref("outline-color")}} を参照してください。</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>輪郭線の種類を設定します。未指定の場合の既定値は <code>none</code> です。 {{cssxref("outline-style")}} を参照してください。</dd>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>輪郭線の太さを設定します。未指定の場合の既定値は <code>medium</code> です。 {{cssxref("outline-width")}} を参照してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;a href="#"&gt;このリンクは特殊なフォーカスのスタイルです。&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>outline</code> の値を <code>0</code> または <code>none</code> にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。</p>
+
+<ul>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
+ <li>
+  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">成功基準 2.4.7 の理解: フォーカスの可視性</a></p>
+ </li>
+</ul>
+
+<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 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.outline")}}</p>
+</div>
diff --git a/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
new file mode 100644
index 0000000000..4ebcf8b854
--- /dev/null
+++ b/files/ja/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
@@ -0,0 +1,96 @@
+---
+title: スクロールアンカリングの紹介
+slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+tags:
+  - CSS
+  - Guide
+  - overflow-anchor
+  - scroll anchoring
+  - スクロールアンカリング
+translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+---
+<div>{{CSSRef}}</div>
+
+<p>ウェブのユーザーであれば、おそらくスクロールアンカリングが解決する問題をよく知っているはずです。速度の遅い接続で長いページを閲覧し、コンテンツを読むためにスクロールを始めるとします。一所懸命に読んでいる間に、ページの見ている部分が突然ジャンプしてしまうことがあります。これはコンテンツの上部に、大きな画像やその他の要素が読み込まれたことによって引き起こされます。</p>
+
+<p><ruby>スクロールアンカリング<rp> (</rp><rt>scroll anchoring</rt><rp>) </rp></ruby>はブラウザーの機能で、ユーザーが既に文書の新しい部分にスクロールした後で、コンテンツが読み込まれたことでページ内容の移動が発生してしまう問題を解決するためのものです。</p>
+
+<h2 id="How_does_it_work" name="How_does_it_work">どのように動作するか</h2>
+
+<p>スクロールアンカリングは、表示域 (viewport) 外で起こった変化に対し、スクロール位置を調整する機能です。つまり、文書内のスクロール位置が実際には変わっているのにも関わらず、ユーザーが見ていた個所が表示域に留まり続けます。</p>
+
+<h2 id="How_do_I_turn_on_scroll_anchoring" name="How_do_I_turn_on_scroll_anchoring">スクロールアンカリングを有効にするには</h2>
+
+<p>何もする必要はありません。この機能は、対応しているブラウザーでは既定で有効になっています。ほとんどの場合において、スクロールを固定することは望み通りでしょう。 — コンテンツが急に移動してしまうのは、誰にとっても使い勝手が悪いものです。</p>
+
+<h2 id="What_if_I_need_to_debug_it" name="What_if_I_need_to_debug_it">デバッグする必要がある場合</h2>
+
+<p>スクロールアンカリングを有効にしてページの動作がうまくいかない場合は、一部の <code>scroll</code> イベントリスナーがアンカーノードの動きを補うための余分なスクロールをうまく処理していないことが原因とかもしれません。</p>
+
+<p>Firefox では <code>about:config</code> で <code>layout.css.scroll-anchoring.enabled</code> を <code>false</code> に変更してスクロールアンカリングを無効にすることで、問題が解決するかどうかを確認できます。</p>
+
+<p>解決した場合は、Firefox がアンカーとして使用しているノードを <code>layout.css.scroll-anchoring.highlight</code> スイッチで確認できます。これにより、アンカーノードの上に紫色のオーバーレイが表示されます。</p>
+
+<p>あるノードがアンカーとして適切でないと思われる場合は、以下のように {{cssxref("overflow-anchor")}} を使用してそのノードを除外することができます。</p>
+
+<h2 id="無効にする必要がある場合は">無効にする必要がある場合は</h2>
+
+<p>仕様書では、新しいプロパティである {{cssxref("overflow-anchor")}} を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。</p>
+
+<p>指定できる値は、 <code>auto</code> または <code>none</code> のどちらかです。</p>
+
+<ul>
+ <li><code>auto</code> が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。</li>
+ <li><code>none</code> は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。</li>
+</ul>
+
+<p>文書全体でスクロールアンカリングを無効にするには、 {{htmlelement("body")}} 要素にプロパティを指定してください。。</p>
+
+<pre class="brush: css notranslate">body {
+  overflow-anchor: none;
+}</pre>
+
+<p>文書の特定の部分でスクロールアンカリングを無効にしたい場合は、そのコンテンツを囲む要素に <code>overflow-anchor: none</code> を指定します。</p>
+
+<pre class="brush: css notranslate">.container {
+  overflow-anchor: none;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に <code>overflow-anchor: auto</code> を指定しても、その部分でスクロールアンカリングは動作しません。</p>
+</div>
+
+<h3 id="Suppression_triggers" name="Suppression_triggers">抑制トリガー</h3>
+
+<p>仕様書では、問題になる可能性がある場合はその場でスクロールアンカリングを無効にする、抑制トリガー (<em>suppression triggers</em>) についても説明しています。スクロールアンカリングを指定したノードもしくはその祖先でトリガーが発生した場合、スクロールアンカリングが抑制されます。</p>
+
+<p>抑制トリガーとなるのは、次のプロパティの計算値 (computed value) が変更された場合です。</p>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("bottom")}}</li>
+ <li>{{cssxref("margin")}}, {{cssxref("padding")}}</li>
+ <li>{{cssxref("width")}} もしくは {{cssxref("height")}} に関連するプロパティすべて</li>
+ <li>{{cssxref("transform")}}</li>
+</ul>
+
+<p>さらに、スクロールボックス内の任意の場所で {{cssxref("position")}} を変更した場合もスクロールアンカリングが無効になります。</p>
+
+<div class="blockIndicator note">
+<p>バグ {{bug(1584285)}} で、Firefox Nightly に <code>layout.css.scroll-anchoring.suppressions.enabled</code> フラグが追加され、これらのトリガーを無効化できるようになりました。</p>
+</div>
+
+<h2 id="Further_reading" name="Further_reading">その他の解説</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Explainer document on the WICG site</a></li>
+ <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">Scroll anchoring for web developers on the Chromium blog</a></li>
+ <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implement a pin-to-bottom scrolling element using scroll anchoring</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>ブラウザーでスクロールアンカリングが利用できるかどうかを検査する必要がある場合は、<a href="/en-US/docs/Web/CSS/@supports">特性クエリ</a>を使用して <code>overflow-anchor</code> プロパティに対応しているかどうかを検査してください。</p>
+
+<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.properties.overflow-anchor")}}</p>
diff --git a/files/ja/web/css/overflow-anchor/index.html b/files/ja/web/css/overflow-anchor/index.html
new file mode 100644
index 0000000000..2324422d27
--- /dev/null
+++ b/files/ja/web/css/overflow-anchor/index.html
@@ -0,0 +1,89 @@
+---
+title: overflow-anchor
+slug: Web/CSS/overflow-anchor
+tags:
+  - CSS
+  - CSS Property
+  - CSS Scroll Anchoring
+  - CSS スクロールアンカリング
+  - CSS プロパティ
+  - Reference
+  - overflow-anchor
+  - スクロールアンカリング
+translation_of: Web/CSS/overflow-anchor
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-anchor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、コンテンツの移動を最小化するためにスクロール位置を調整する、ブラウザーのスクロールアンカリングの動作をオプトアウトする方法を提供します。</p>
+
+<p>スクロールアンカリングの動作は、対応しているすべてのブラウザーで既定で有効になっています。したがって、このプロパティを変更するのは通常、文書または文書の一部でスクロールアンカリングによって操作上の問題が発生し、この動作をオフにする必要がある場合のみです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* グローバル値 */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>その要素は、スクロール位置を調整するときにアンカー候補になります。</dd>
+ <dt><code>none</code></dt>
+ <dd>その要素はアンカー候補として選択されません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>文書内でスクロールアンカリングを抑止する場合は、 <code>overflow-anchor</code> プロパティを使用してください。</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+}
+</pre>
+
+<ul>
+</ul>
+
+<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('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td>
+   <td>{{Spec2('CSS Scroll Anchoring')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.overflow-anchor")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">スクロールアンカリングの</a>紹介</li>
+</ul>
diff --git a/files/ja/web/css/overflow-block/index.html b/files/ja/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..d9214a51bf
--- /dev/null
+++ b/files/ja/web/css/overflow-block/index.html
@@ -0,0 +1,145 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-block
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>overflow-block</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。</p>
+
+<div class="note">
+<p><code>overflow-block</code> プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* グローバル値 */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+</pre>
+
+<p><code>overflow-block</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — 常にスクロールバーを表示
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 120px;}
+#div2 { overflow-block: scroll; margin-bottom: 120px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Examples", "100%", "780")}}</p>
+</figure>
+
+<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 Overflow', '#propdef-overflow-block', 'overflow-block') }}</td>
+   <td>{{ Spec2('CSS3 Overflow') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.overflow-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
+</ul>
diff --git a/files/ja/web/css/overflow-inline/index.html b/files/ja/web/css/overflow-inline/index.html
new file mode 100644
index 0000000000..cef446a46c
--- /dev/null
+++ b/files/ja/web/css/overflow-inline/index.html
@@ -0,0 +1,141 @@
+---
+title: overflow-inline
+slug: Web/CSS/overflow-inline
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。</p>
+
+<div class="note">
+<p><code>overflow-inline</code> プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* グローバル値 */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+</pre>
+
+<p><code>overflow-inline</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_overflow_behavior" name="Setting_inline_overflow_behavior">インライン方向のはみ出し動作の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-inline:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
+    &lt;div id="div1"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:scroll&lt;/code&gt; — 常にスクロールバーを表示
+    &lt;div id="div2"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
+    &lt;div id="div3"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
+    &lt;div id="div4"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<figure>
+<p>{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}</p>
+</figure>
+
+<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 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overflow-inline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
+</ul>
diff --git a/files/ja/web/css/overflow-wrap/index.html b/files/ja/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..8146dc3060
--- /dev/null
+++ b/files/ja/web/css/overflow-wrap/index.html
@@ -0,0 +1,146 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>overflow-wrap</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> {{cssxref("word-break")}} とは対照的に、 <code>overflow-wrap</code> は単語全体があふれずに行内に配置できない場合にのみ、改行を生成します。</p>
+</div>
+
+<p>このプロパティはもともと、標準外かつ接頭辞のない <code>word-wrap</code> と呼ばれる Microsoft 拡張であり、多くのブラウザーはこの名前で実装していました。 <code>overflow-wrap</code> に改名されたため、 <code>word-wrap</code> は別名になりました。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css">/* キーワード値 */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* グローバル値 */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p><code>overflow-wrap</code> プロパティは、下記の値一覧中の一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>通常の単語の分割位置 (2つの単語の間の空白など) でのみ改行することを示します。</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。</dd>
+ <dt><code>break-word</code></dt>
+ <dd><code>anywhere</code> の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、長い単語が分割されるときの <code>overflow-wrap</code>, <code>word-break</code>, and <code>hyphens</code> の結果を比較するものです。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;normal&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;word-break&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute)&lt;/p&gt;
+&lt;p lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, English rules)&lt;/p&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, German rules)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 260) }}</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 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.overflow-wrap")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>
diff --git a/files/ja/web/css/overflow-x/index.html b/files/ja/web/css/overflow-x/index.html
new file mode 100644
index 0000000000..6decff8aea
--- /dev/null
+++ b/files/ja/web/css/overflow-x/index.html
@@ -0,0 +1,141 @@
+---
+title: overflow-x
+slug: Web/CSS/overflow-x
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックスモデル
+  - Reference
+  - overflow
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-x
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-x</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: clip;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* グローバル値 */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+</pre>
+
+<p><code>overflow-x</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が <code>hidden</code>, <code>scroll</code>, <code>auto</code> のいずれかであり、このプロパティが <code>visible</code> である場合は、暗黙に <code>auto</code> に計算します。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
+ <dt><code>clip</code> {{experimental_inline}}</dt>
+ <dd><code>hidden</code> のように、内容が要素のパディングボックスで切り取られます。 <code>clip</code> と <code>hidden</code> の違いは、 <code>clip</code> キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
+</dl>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-x:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
+    &lt;div id="div1"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:scroll&lt;/code&gt; — 常にスクロールバーを表示
+    &lt;div id="div2"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
+    &lt;div id="div3"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
+    &lt;div id="div4"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-x: hidden;}
+#div2 { overflow-x: scroll;}
+#div3 { overflow-x: visible;}
+#div4 { overflow-x: auto;}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Examples", "100%", "270")}}</p>
+</figure>
+
+<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 Overflow', '#propdef-overflow-x', 'overflow-x')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.overflow-x")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ja/web/css/overflow-y/index.html b/files/ja/web/css/overflow-y/index.html
new file mode 100644
index 0000000000..4df48a8ea2
--- /dev/null
+++ b/files/ja/web/css/overflow-y/index.html
@@ -0,0 +1,146 @@
+---
+title: overflow-y
+slug: Web/CSS/overflow-y
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSS ボックスモデル
+  - Reference
+  - overflow
+  - 'recipe:css-property'
+translation_of: Web/CSS/overflow-y
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-y</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ブロックレベル要素の内容が上下の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: clip;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* グローバル値 */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+</pre>
+
+<p><code>overflow-y</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+
+<p>{{cssxref("overflow-x")}} が <code>hidden</code>, <code>scroll</code>, <code>auto</code> であり、このプロパティが <code>visible</code> (既定値) である場合は、暗黙的に <code>auto</code> と計算されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>内容は切り取られず、パディングボックスの上下の辺よりも外側に表示される可能性があります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
+ <dt><code>clip</code> {{experimental_inline}}</dt>
+ <dd><code>hidden</code> と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 <code>clip</code> と <code>hidden</code> の違いは、 <code>clip</code> キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>垂直方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — 常にスクロールバーを表示
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Example", "100%", "780")}}</p>
+</figure>
+
+<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 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td>
+   <td>{{ Spec2('CSS3 Overflow') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.overflow-y")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ja/web/css/overflow/index.html b/files/ja/web/css/overflow/index.html
new file mode 100644
index 0000000000..cdf127ed15
--- /dev/null
+++ b/files/ja/web/css/overflow/index.html
@@ -0,0 +1,168 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ボックスモデル
+  - Reference
+  - overflow
+  - クリッピング
+  - スクロール
+  - レイアウト
+translation_of: Web/CSS/overflow
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>overflow</code> プロパティは、要素の内容が多すぎて<a href="/ja/docs/CSS/block_formatting_context">ブロック整形コンテキスト</a>に収まらない場合にどうするかを設定します。これは {{cssxref("overflow-x")}} および {{cssxref("overflow-y")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。</p>
+
+<p>値を (既定値の) <code>visible</code> 以外の値に指定すると、新たな<a href="/ja/docs/CSS/block_formatting_context">ブロック整形コンテキスト</a>を生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。</p>
+
+<p><code>overflow</code> の効果を得るには、ブロックレベルコンテナーに高さ (<code>height</code> または <code>max-height</code>) を設定するか、 <code>white-space</code> を <code>nowrap</code> に設定することが必要です。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 一方の軸を<code>visible</code> (既定値) に設定して、もう一方を<em>他の</em>値に設定すると、 <code>visible</code> は <code>auto</code> として動作する結果になります。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ</strong>: JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 <code>overflow</code> が <code>hidden</code> に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* グローバル値 */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p><code>overflow</code> プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が <code>overflow-x</code> で、二つ目の値が <code>overflow-y</code> になります。それ以外の場合、 <code>overflow-x</code> および <code>overflow-y</code> は同じ値に設定されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>内容はクリッピングされず、パディングボックスの外側に表示されることがあります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 {{domxref("HTMLElement.offsetLeft", "offsetLeft")}} のようなプロパティの値を設定する方法などで) スクロールすることが<em>できます</em>ので、要素はスクロールコンテナーになります。</dd>
+ <dt><code>clip</code></dt>
+ <dd><code>hidden</code> と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 <code>clip</code> と <code>hidden</code> の違いは、 <code>clip</code> キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。</dd>
+ <dt><code>auto</code></dt>
+ <dd>{{Glossary("user agent", "ユーザーエージェント")}}に依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。</dd>
+</dl>
+
+<dl>
+ <dt><code>overlay</code> {{deprecated_inline}}</dt>
+ <dd><code>auto</code> と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。</dd>
+</dl>
+
+<h4 id="Mozilla_extensions" name="Mozilla_extensions">Mozilla 拡張</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none</code> {{obsolete_inline}}<a href="#Deprecated">[1]</a></dt>
+ <dd>代わりに <code>overflow:hidden</code> を使ってください。</dd>
+ <dt><code>-moz-scrollbars-horizontal</code> {{deprecated_inline}}<a href="#Deprecated">[1]</a></dt>
+ <dd>{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください。</dd>
+ <dt><code>-moz-scrollbars-vertical</code> {{deprecated_inline}}<a href="#Deprecated">[1]</a></dt>
+ <dd>{{Cssxref("overflow-x")}} および {{Cssxref("overflow-y")}} を使用してください</dd>
+ <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt>
+ <dd>内部使用、テーマ向けです。 XML のルート要素と <code>&lt;html&gt;</code>、 <code>&lt;body&gt;</code> が、矢印キーとマウスホイールでスクロールすることを禁止します。</dd>
+</dl>
+
+<p id="Deprecated">[1] Firefox 63 において、この機能は機能設定に隠されています。 about:config の中で <code>layout.css.overflow.moz-scrollbars.enabled</code> を <code>true</code> に設定してください。</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+  overflow: visible; /* content is not clipped */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (既定)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: hidden; /* スクロールバー表示なし */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: scroll; /* 常にスクロールバーを表示 */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: auto; /* 必要に応じてスクロールバーを追加 */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</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 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>
+    <p>キーワードを一つだけではなく一つまたは二つで利用できるように構文を変更</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.overflow")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連 CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ja/web/css/overscroll-behavior-block/index.html b/files/ja/web/css/overscroll-behavior-block/index.html
new file mode 100644
index 0000000000..e622f27b83
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-block/index.html
@@ -0,0 +1,142 @@
+---
+title: overscroll-behavior-block
+slug: Web/CSS/overscroll-behavior-block
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Logical Properties
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - overscroll-behavior-block
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-block
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>overscroll-behavior-block</code></strong> は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+
+<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overscroll-behavior-block: auto; /* 既定値 */
+overscroll-behavior-block: contain;
+overscroll-behavior-block: none;
+
+/* グローバル値 */
+overscroll-behavior-block: inherit;
+overscroll-behavior-block: initial;
+overscroll-behavior-block: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overscroll-behavior-block</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
+ <dt><code>contain</code></dt>
+ <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
+ <dt><code>none</code></dt>
+ <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preventing_block_overscrolling" name="Preventing_block_overscrolling">ブロック方向のオーバースクロールの抑止</h3>
+
+<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と <code>height</code>) が小さく、ビューポート内にきちんと収まりますが、内容は広い <code>height</code> を持つため、垂直にスクロールします。</p>
+
+<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-block: contain</code> を設定しました。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;div&gt;
+    &lt;div&gt;
+      &lt;p&gt;&lt;code&gt;overscroll-behavior-block&lt;/code&gt; has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  height: 3000px;
+  width: 500px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main &gt; div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-block: contain;
+}
+
+div &gt; div {
+  height: 1500px;
+  width: 100%;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 340px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overscroll-behavior-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
+</ul>
diff --git a/files/ja/web/css/overscroll-behavior-inline/index.html b/files/ja/web/css/overscroll-behavior-inline/index.html
new file mode 100644
index 0000000000..b5def24b0c
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-inline/index.html
@@ -0,0 +1,142 @@
+---
+title: overscroll-behavior-inline
+slug: Web/CSS/overscroll-behavior-inline
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Logical Properties
+  - CSS Property
+  - NeedsExample
+  - Reference
+  - overscroll-behavior-inline
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>overscroll-behavior-inline</code></strong> は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+
+<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overscroll-behavior-inline: auto; /* default */
+overscroll-behavior-inline: contain;
+overscroll-behavior-inline: none;
+
+/* グローバル値 */
+overscroll-behavior-inline: inherit;
+overscroll-behavior-inline: initial;
+overscroll-behavior-inline: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overscroll-behavior-inline</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
+ <dt><code>contain</code></dt>
+ <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
+ <dt><code>none</code></dt>
+ <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preventing_inline_overscrolling" name="Preventing_inline_overscrolling">インライン方向のオーバースクロールの抑止</h3>
+
+<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。</p>
+
+<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-inline: contain</code> を設定しました。</p>
+
+<h4 id="HTML" name="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;div&gt;
+    &lt;div&gt;
+      &lt;p&gt;&lt;code&gt;overscroll-behavior-inline&lt;/code&gt; has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS" name="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  height: 400px;
+  width: 3000px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main &gt; div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-inline: contain;
+}
+
+div &gt; div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}</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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overscroll-behavior-x")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
+</ul>
diff --git a/files/ja/web/css/overscroll-behavior-x/index.html b/files/ja/web/css/overscroll-behavior-x/index.html
new file mode 100644
index 0000000000..c2e9bfe6f8
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-x/index.html
@@ -0,0 +1,101 @@
+---
+title: overscroll-behavior-x
+slug: Web/CSS/overscroll-behavior-x
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior-x
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-x
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>overscroll-behavior-x</code></strong> は CSS のプロパティで、スクロール領域の水平方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+
+<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overscroll-behavior-x: auto; /* 既定値 */
+overscroll-behavior-x: contain;
+overscroll-behavior-x: none;
+
+/* グローバル値 */
+overscroll-behavior-x: inherit;
+overscroll-behavior-x: initial;
+overscroll-behavior-x: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overscroll-behavior-x</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
+ <dt><code>contain</code></dt>
+ <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
+ <dt><code>none</code></dt>
+ <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preventing_an_underlying_element_from_scrolling_horizontally" name="Preventing_an_underlying_element_from_scrolling_horizontally">背後にある要素が横にスクロールするのを防ぐ</h3>
+
+<p>簡単な <a href="https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x">overscroll-behavior-x の例</a> (<a href="https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html">ソースコード</a>も参照) の中で、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い <code>width</code> を持ち、水平にスクロールします。</p>
+
+<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。これを防ぐために、内側のボックスに <code>overscroll-behavior-x: contain</code> を設定することができます。</p>
+
+<pre class="brush: css notranslate">main &gt; div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}</pre>
+
+<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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overscroll-behavior-x")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("overscroll-behavior-inline")}}, {{cssxref("overscroll-behavior-block")}}</li>
+</ul>
diff --git a/files/ja/web/css/overscroll-behavior-y/index.html b/files/ja/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..cc58a30784
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,95 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior-y
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior-y
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>overscroll-behavior-y</code></strong> は CSS のプロパティで、スクロール領域の垂直方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+
+<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overscroll-behavior-y: auto; /* 既定値 */
+overscroll-behavior-y: contain;
+overscroll-behavior-y: none;
+
+/* グローバル値 */
+overscroll-behavior-y: inherit;
+overscroll-behavior-y: initial;
+overscroll-behavior-y: unset;
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overscroll-behavior-y</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
+ <dt><code>contain</code></dt>
+ <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
+ <dt><code>none</code></dt>
+ <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preventing_an_underlying_element_from_scrolling_vertically" name="Preventing_an_underlying_element_from_scrolling_vertically">背後にある要素の縦スクロールの抑止</h3>
+
+<pre class="brush: css notranslate">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>完全な例と説明については、 {{cssxref("overscroll-behavior")}} を参照してください。</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('CSS Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overscroll-behavior-y")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
+ <li>The mapped logical properties: {{cssxref("overscroll-behavior-inline")}}, {{cssxref("overscroll-behavior-block")}}</li>
+</ul>
diff --git a/files/ja/web/css/overscroll-behavior/index.html b/files/ja/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..7f409ead4c
--- /dev/null
+++ b/files/ja/web/css/overscroll-behavior/index.html
@@ -0,0 +1,113 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Reference
+  - overscroll-behavior
+  - 'recipe:css-property'
+translation_of: Web/CSS/overscroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>overscroll-behavior</code></strong> プロパティは、スクロール領域の境界に達したときにブラウザーが何をするかを設定します。これは {{cssxref("overscroll-behavior-x")}} および {{cssxref("overscroll-behavior-y")}} の一括指定です。</span></p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+overscroll-behavior: auto; /* 既定 */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* 二つの値 */
+overscroll-behavior: auto contain;
+
+/* グローバル値 */
+overscroll-behavior: inherit;
+overscroll-behavior: initial;
+overscroll-behavior: unset;
+</pre>
+
+<p>既定では、モバイルブラウザーは「跳ね返る」効果を見せたり、ページの最上部又は最下部 (またはその他のスクロール領域) に達したときにページを更新したりする機能を提供する傾向があります。内容がスクロールするページの上に、内容がスクロールするダイアログが表示されている時、ダイアログボックスのスクロール境界に達したときに、下のページがスクロールし始めるという動きをするのに気が付いたかもしれません。 — これは<strong>スクロール連鎖</strong>と呼ばれています。</p>
+
+<p>場合によっては、この動きが望ましくないことがあります。 <code>overscroll-behavior</code> を使用すると、望ましくないスクロール連鎖を抑止したり、ブラウザー版の Facebook や Twitter アプリなどに見られる「引いて更新」の類の動きを実現したりすることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>overscroll-behavior</code> プロパティは、次の値の一覧のうち１つまたは２つのキーワードで指定します。</p>
+
+<p>２つのキーワードでは、 <code>overscroll-behavior</code> のそれぞれ <code>x</code> 及び <code>y</code> 軸の値を指定します。値が１つだけ指定された場合は、 x および y が同じ値とみなされます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
+ <dt><code>contain</code></dt>
+ <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
+ <dt><code>none</code></dt>
+ <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Preventing_an_underlying_element_from_scrolling" name="Preventing_an_underlying_element_from_scrolling">下の要素がスクロールするのを抑止する</h3>
+
+<p><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior の例</a> (<a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">ソースコード</a>はこちら) は、全画面で擬似連絡先の一覧を、ダイアログボックスでチャットウィンドウを表示します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
+
+<p>どちらの領域もスクロールします。ふつう、チャットウィンドウをスクロール境界に当たるまでスクロールすると、下の連絡先ウィンドウもスクロールを始めます。これは望ましくないことです。これは、次のようにチャットウィンドウに <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> でも可) を使用することで抑止することができます。</p>
+
+<pre class="brush: css notranslate">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>連絡先が冒頭又は末端までスクロールしたときの標準のスクロール末端効果を抑止したいかもしれません (例えば Android 版 Chrome は、冒頭の境界を超えてスクロールしようとするとページを再読み込みします)。これは {{htmlelement("body")}} 要素に <code>overscroll-behavior: none</code> を設定することで抑止することができます。</p>
+
+<pre class="brush: css notranslate">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<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('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.overscroll-behavior")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
+ <li>{{cssxref("-ms-scroll-chaining")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-block-end/index.html b/files/ja/web/css/padding-block-end/index.html
new file mode 100644
index 0000000000..85ea817bc0
--- /dev/null
+++ b/files/ja/web/css/padding-block-end/index.html
@@ -0,0 +1,117 @@
+---
+title: padding-block-end
+slug: Web/CSS/padding-block-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-block
+  - padding-block-end
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-block-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のブロック方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-block-end: 10px;   /* 絶対的な長さ */
+padding-block-end: 1em;    /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-block-end: 5%;     /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-block-end</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_block_end_padding_for_vertical_text" name="Setting_block_end_padding_for_vertical_text">縦書きテキストにおけるブロック方向の末尾のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_end_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-block-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-block-start/index.html b/files/ja/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..d937f99753
--- /dev/null
+++ b/files/ja/web/css/padding-block-start/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-block
+  - padding-block-start
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-block-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のブロック方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-block-start: 10px;      /* 絶対的な長さ */
+padding-block-start: 1em;       /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-block-start: 5%;        /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-block-start</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} があります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Setting_block_start_padding_for_vertical_text" name="Setting_block_start_padding_for_vertical_text">縦書きテキストにおけるブロック方向の先頭のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_start_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-block-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-block/index.html b/files/ja/web/css/padding-block/index.html
new file mode 100644
index 0000000000..c7b929dcaa
--- /dev/null
+++ b/files/ja/web/css/padding-block/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block
+slug: Web/CSS/padding-block
+tags:
+  - CSS
+  - padding-block
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding-block
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-block</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、論理的なブロック方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-block: 10px 20px;  /* 絶対的な長さ */
+padding-block: 1em 2em;   /* テキストの大きさに対する相対値 */
+padding-block: 10px; /* 先頭と末尾の両方を設定 */
+
+/* &lt;percentage&gt; 値 */
+padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */
+
+/* グローバル値 */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+</pre>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("padding-block-end")}}</li>
+ <li>{{cssxref("padding-block-start")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-block</code> プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_block_padding_for_vertical_text" name="Setting_block_padding_for_vertical_text">縦書きテキストにおけるブロック方向のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_block_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-block")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..08210127d8
--- /dev/null
+++ b/files/ja/web/css/padding-bottom/index.html
@@ -0,0 +1,112 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における下側の高さを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+
+<p><img alt="CSS の padding-bottom プロパティの要素ボックスへの影響" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* &lt;percentage&gt; の値 */
+padding-bottom: 10%;
+
+/* グローバル値 */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+</pre>
+
+<p><code>padding-bottom</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_padding_bottom_with_pixels_and_percentages" name="Setting_padding_bottom_with_pixels_and_percentages">ピクセル数とパーセント値で下パディングを設定</h3>
+
+<pre class="brush: css notranslate">.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+</pre>
+
+<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 Box', '#propdef-padding-bottom', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-bottom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="ja/CSS/box model">CSS 基本ボックスモデルの紹介</a></li>
+ <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-inline-end/index.html b/files/ja/web/css/padding-inline-end/index.html
new file mode 100644
index 0000000000..f3003ab5f3
--- /dev/null
+++ b/files/ja/web/css/padding-inline-end/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-inline-end
+slug: Web/CSS/padding-inline-end
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-inline
+  - padding-inline-end
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-inline-end</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な末尾側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-inline-end: 10px;     /* 絶対的な長さ */
+padding-inline-end: 1em;      /* テキストの大きさに対する相対値 */
+
+/* &lt;percentage&gt; 値 */
+padding-inline-end: 5%;       /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-inline-end</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} があります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_end_padding_for_vertical_text" name="Setting_inline_end_padding_for_vertical_text">縦書きテキストにおけるインライン方向の末尾のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_end_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-inline-end")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-inline-start/index.html b/files/ja/web/css/padding-inline-start/index.html
new file mode 100644
index 0000000000..c7b2a54067
--- /dev/null
+++ b/files/ja/web/css/padding-inline-start/index.html
@@ -0,0 +1,115 @@
+---
+title: padding-inline-start
+slug: Web/CSS/padding-inline-start
+tags:
+  - CSS
+  - CSS Logical Property
+  - CSS Property
+  - Experimental
+  - Reference
+  - padding-inline
+  - padding-inline-start
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-inline-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のインライン方向の論理的な先頭側のパディングを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応付けられます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-inline-start: 10px;   /* 絶対的な長さ */
+padding-inline-start: 1em;    /* テキストの大きさに対する相対値 */
+
+/* パーセント値 */
+padding-inline-start: 5%;     /* ブロックコンテナーの幅に対する割合のパディング */
+
+/* グローバル値 */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-inline-start</code> プロパティは {{cssxref("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>これは {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} の何れかのプロパティに対応し、どれに対応するかは {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値によって決まります。</p>
+
+<p>関連プロパティとして、要素の他のマージンを定義する {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-end")}} があります。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Setting_inline_start_padding_for_vertical_text" name="Setting_inline_start_padding_for_vertical_text">縦書きテキストにおけるインライン方向の先頭のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_start_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-inline-start")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応付け先の物理的なプロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-inline/index.html b/files/ja/web/css/padding-inline/index.html
new file mode 100644
index 0000000000..922ac82887
--- /dev/null
+++ b/files/ja/web/css/padding-inline/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline
+slug: Web/CSS/padding-inline
+tags:
+  - CSS
+  - padding-inline
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-inline</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、論理的なインライン方向の先頭と末尾のパディングを設定します。これは要素の書字方向やテキストの向きに応じて物理的なパディングに変換されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+padding-inline: 10px 20px;  /* 絶対的な長さ */
+padding-inline: 1em 2em;   /* テキストの大きさに対する相対値 */
+padding-inline: 10px; /* 先頭と末尾の両方を設定 */
+
+/* &lt;percentage&gt; 値 */
+padding-block: 5% 2%; /* 直近のブロックコンテナーの幅に対する相対値 */
+
+/* グローバル値 */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+</pre>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("padding-inline-end")}}</li>
+ <li>{{cssxref("padding-inline-start")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<p><code>padding-inline</code> プロパティは、 {{CSSxRef("padding-left")}} プロパティと同じ値を取ります。</p>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>これらの値は、 {{cssxref("padding-top")}} と {{cssxref("padding-bottom")}}、または {{cssxref("padding-right")}} と {{cssxref("padding-left")}} プロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_inline_padding_for_vertical_text" name="Setting_inline_padding_for_vertical_text">縦書きテキストにおけるインライン方向のパディングの設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Setting_inline_padding_for_vertical_text", 140, 140)}}</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("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-inline")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>対応する物理的プロパティ: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-left/index.html b/files/ja/web/css/padding-left/index.html
new file mode 100644
index 0000000000..92ac71fb52
--- /dev/null
+++ b/files/ja/web/css/padding-left/index.html
@@ -0,0 +1,110 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-left</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における左側の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* &lt;percentage&gt; の値 */
+padding-left: 10%;
+
+/* グローバル値 */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+</pre>
+
+<p><code>padding-left</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_left_padding_using_pixels_and_percentages" name="Setting_left_padding_using_pixels_and_percentages">左パディングをピクセル数とパーセント値で設定</h3>
+
+<pre class="brush: css notranslate">.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+</pre>
+
+<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 Box', '#propdef-padding-left', 'padding-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-left', 'padding-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-left")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
+ <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} および {{cssxref("padding")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-right/index.html b/files/ja/web/css/padding-right/index.html
new file mode 100644
index 0000000000..621db10f00
--- /dev/null
+++ b/files/ja/web/css/padding-right/index.html
@@ -0,0 +1,110 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-right</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における右側の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* &lt;percentage&gt; の値 */
+padding-right: 10%;
+
+/* グローバル値 */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<p><code>padding-right</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_right_padding_using_pixels_and_percentages" name="Setting_right_padding_using_pixels_and_percentages">右パディングをピクセル数とパーセント値で設定</h3>
+
+<pre class="brush: css notranslate">.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+</pre>
+
+<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 Box', '#propdef-padding-right', 'padding-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-right', 'padding-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-right")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
+ <li>{{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding-top/index.html b/files/ja/web/css/padding-top/index.html
new file mode 100644
index 0000000000..6ab459f59b
--- /dev/null
+++ b/files/ja/web/css/padding-top/index.html
@@ -0,0 +1,112 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-top</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における上側の高さを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素のパディング領域とは、コンテンツと境界線との間の空間のことです。</p>
+
+<p><img alt="CSS の padding-top プロパティの要素ボックスへの影響" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* &lt;percentage&gt; の値 */
+padding-top: 10%;
+
+/* グローバル値 */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+</pre>
+
+<p><code>padding-top</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの <em>width</em> に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_top_padding_using_pixels_and_percentages" name="Setting_top_padding_using_pixels_and_percentages">上パディングをピクセル数とパーセント値で設定</h3>
+
+<pre class="brush: css notranslate">.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+</pre>
+
+<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 Box', '#propdef-padding-top', 'padding-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-top', 'padding-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding-top")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
+ <li>{{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/padding/index.html b/files/ja/web/css/padding/index.html
new file mode 100644
index 0000000000..017db4e7c2
--- /dev/null
+++ b/files/ja/web/css/padding/index.html
@@ -0,0 +1,169 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素の全四辺の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>を一度に設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+
+<div class="note">
+<p><strong>注:</strong> パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の<em>周り</em>に追加の領域を作成します。</p>
+</div>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 四辺すべてに適用 */
+padding: 1em;
+
+/* 上下 | 左右 */
+padding: 5% 10%;
+
+/* 上 | 左右 | 下 */
+padding: 1em 2em 2em;
+
+/* 上 | 右 | 下 | 左 */
+padding: 5px 1em 0 1em;
+
+/* グローバル値 */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<p><code>padding</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。それぞれの値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。負の数は無効です。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じパディングが適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目のパディングは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目のパディングは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、パディングはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>固定値によるパディングの寸法です。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>コンテナーブロックの<em>幅</em>に対するパーセント値によるパディングの寸法です。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_padding_with_pixels" name="Setting_padding_with_pixels">パディングをピクセル数で設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h4&gt;This element has moderate padding.&lt;/h4&gt;
+&lt;h3&gt;The padding is huge in this element!&lt;/h3&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p><span>{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}</span></p>
+
+<h3 id="Setting_padding_with_pixels_and_percentages" name="Setting_padding_with_pixels_and_percentages">パディングをピクセル数とパーセント値で設定</h3>
+
+<pre class="brush: css notranslate">padding: 5%;                /* 全辺: 5% のパディング */
+
+padding: 10px;              /* 全辺: 10px のパディング */
+
+padding: 10px 20px;         /* 上と下: 10px のパディング */
+                            /* 左と右: 20px のパディング */
+
+padding: 10px 3% 20px;      /* 上:     10px のパディング */
+                            /* 左と右: 3% のパディング   */
+                            /* 下:     20px のパディング */
+
+padding: 1em 3px 30px 5px;  /* 上:     1em のパディング  */
+                            /* 右:     3px のパディング  */
+                            /* 下:     30px のパディング */
+                            /* 右:     5px のパディング  */ </pre>
+
+<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 Box', '#padding-shorthand', 'padding')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding', 'padding')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.padding")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
+ <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
+ <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
+</ul>
diff --git a/files/ja/web/css/page-break-after/index.html b/files/ja/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..89851b198c
--- /dev/null
+++ b/files/ja/web/css/page-break-after/index.html
@@ -0,0 +1,147 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - CSS Property
+  - Page Breaks
+  - Reference
+translation_of: Web/CSS/page-break-after
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。</div>
+
+<p><strong><code>page-break-after</code></strong> CSS プロパティは、現在の要素の<em>後で</em>改ページが行われるように調整します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* グローバル値 */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+</pre>
+
+<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p><code>page-break-after</code> プロパティは古いプロパティとなり、 {{cssxref("break-after")}} によって置き換えられました。</p>
+
+<p>互換性のため、 <code>page-break-after</code> はブラウザーから <code>break-after</code> の別名として扱われます。これにより、 <code>page-break-after</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-after</th>
+   <th scope="col">break-after</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd>
+ <dt><code>always</code></dt>
+ <dd>要素の後で必ず改ページが行われるように強制します。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>要素の後で改ページされないようにします。</dd>
+ <dt><code>left</code></dt>
+ <dd>要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。</dd>
+ <dt><code>right</code></dt>
+ <dd>要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">/* footnotes の後で新しいページに移ります */
+div.footnotes {
+  page-break-after: always;
+}
+</pre>
+
+<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('CSS Logical Properties', '#page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>recto</code> と <code>verso</code> の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>プロパティが適用される要素を table rows と table row groups に拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.page-break-after")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li>
+</ul>
diff --git a/files/ja/web/css/page-break-before/index.html b/files/ja/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..fa72a60cca
--- /dev/null
+++ b/files/ja/web/css/page-break-before/index.html
@@ -0,0 +1,148 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ページ付きメディア
+  - Reference
+  - 改ページ
+translation_of: Web/CSS/page-break-before
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。</div>
+
+<p><strong><code>page-break-before</code></strong> CSS プロパティは、現在の要素の<em>前で</em>改ページが行われるように調整します。</p>
+
+<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+page-break-before: auto;
+page-break-before: always;
+page-break-before: avoid;
+page-break-before: left;
+page-break-before: right;
+page-break-before: recto;
+page-break-before: verso;
+
+/* グローバル値 */
+page-break-before: inherit;
+page-break-before: initial;
+page-break-before: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p><code>page-break-before</code> プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。</p>
+
+<p>互換性のため、 <code>page-break-before</code> はブラウザーから <code>break-before</code> の別名として扱われます。これにより、 <code>page-break-before</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-before</th>
+   <th scope="col">break-before</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd>
+ <dt><code>always</code></dt>
+ <dd>要素の前で必ず改ページが行われるように強制します。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>要素の前で改ページされないようにします。</dd>
+ <dt><code>left</code></dt>
+ <dd>要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。</dd>
+ <dt><code>right</code></dt>
+ <dd>要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>左から右に読むページにおいて <code>right</code> と同じ動作をします。右から左に読むページであれば <code>left</code> と同じ働きをします。</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>左から右に読むページにおいて <code>left</code> と同じ動作をします。右から左に読むページであれば <code>right</code> と同じ働きをします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">/* div の前で改ページされないようにします */
+div.note {
+    page-break-before: avoid;
+}
+</pre>
+
+<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('CSS Logical Properties', '#page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>recto</code> と <code>verso</code> の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>プロパティが適用される要素を table rows と table row groups に拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.page-break-before")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li>
+</ul>
diff --git a/files/ja/web/css/page-break-inside/index.html b/files/ja/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..f3ab2e1d65
--- /dev/null
+++ b/files/ja/web/css/page-break-inside/index.html
@@ -0,0 +1,160 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ページ付きメディア
+  - Reference
+  - 改ページ
+translation_of: Web/CSS/page-break-inside
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div>
+
+<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* グローバル値 */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+
+<p><code>page-break-inside</code> プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。</p>
+
+<p>互換性のため、 <code>page-break-inside</code> はブラウザーから <code>break-inside</code> の別名として扱われます。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">page-break-inside</th>
+   <th scope="col">break-inside</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd>
+ <dt><code>avoid</code></dt>
+ <dd>要素の内側で改ページされないようにします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML" name="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="page"&gt;
+  &lt;p&gt;これは最初の段落です。&lt;/p&gt;
+  &lt;section class="list"&gt;
+    &lt;span&gt;リスト&lt;/span&gt;
+    &lt;ol&gt;
+      &lt;li&gt;順序付き項目1&lt;/li&gt;
+&lt;!--       &lt;li&gt;順序付き項目2&lt;/li&gt; --&gt;
+    &lt;/ol&gt;
+  &lt;/section&gt;
+  &lt;ul&gt;
+    &lt;li&gt;順序なし項目1&lt;/li&gt;
+&lt;!--     &lt;li&gt;順序なし項目2&lt;/li&gt; --&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;これは第二段落です。&lt;/p&gt;
+  &lt;p&gt;これは第三段落です。文章の量が多くなっています。&lt;/p&gt;
+  &lt;p&gt;これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<pre class="brush: css">.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 400, 160)}}</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 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>より多くの要素に適用できるように拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.page-break-inside")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li>
+</ul>
diff --git a/files/ja/web/css/paged_media/index.html b/files/ja/web/css/paged_media/index.html
new file mode 100644
index 0000000000..e283297d1c
--- /dev/null
+++ b/files/ja/web/css/paged_media/index.html
@@ -0,0 +1,22 @@
+---
+title: ページ化メディア
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS ページ化メディア
+  - ページ区切り
+  - リファレンス
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{cssref}}</div>
+
+<p><strong>ページ化メディア</strong>のプロパティは、印刷物などの分離したページでコンテンツが分割されるメディアのコンテンツの表現を制御します。ページ区切り、印刷可能領域の制御、左と右のページの違い、要素内の改ページの制御などを設定することができます。広く対応されているプロパティは以下の通りです。</p>
+
+<ul>
+ <li>{{ cssxref("page-break-before") }}</li>
+ <li>{{ cssxref("page-break-after") }}</li>
+ <li>{{ cssxref("page-break-inside") }}</li>
+ <li>{{ cssxref("orphans") }}</li>
+ <li>{{ cssxref("widows") }}</li>
+ <li>{{ cssxref("@page") }}</li>
+</ul>
diff --git a/files/ja/web/css/paint()/index.html b/files/ja/web/css/paint()/index.html
new file mode 100644
index 0000000000..1fbaf88aa9
--- /dev/null
+++ b/files/ja/web/css/paint()/index.html
@@ -0,0 +1,114 @@
+---
+title: paint()
+slug: Web/CSS/paint()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - CSS4-images
+  - Houdini
+  - Reference
+  - Web
+  - ウェブ
+translation_of: Web/CSS/paint()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>paint()</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> の関数で、 PaintWorklet で生成された {{cssxref("&lt;image&gt;")}} の値を定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">paint(<var>workletName</var>, <var>parameters</var>)</pre>
+
+<p>凡例</p>
+
+<dl>
+ <dt><var>workletName</var></dt>
+ <dd>登録された Worklet の名前です。</dd>
+ <dt><var>parameters</var></dt>
+ <dd>PaintWorklet へ渡される省略可能な追加の引数です。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。</p>
+
+<pre class="brush: html hidden">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item 18&lt;/li&gt;
+    &lt;li&gt;item 19&lt;/li&gt;
+    &lt;li&gt;item 20&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: js hidden">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+</pre>
+
+<pre class="brush: css">li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}</pre>
+
+<p>boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。</p>
+
+<p>{{EmbedLiveSample("Examples", 300, 300)}}</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('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.image.paint")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref('PaintWorklet')}}</li>
+ <li>{{domxref('CSS Painting API')}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Painting_API/Guide">CSS Painting API の使用</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{domxref("canvas")}}</li>
+</ul>
diff --git a/files/ja/web/css/paint-order/index.html b/files/ja/web/css/paint-order/index.html
new file mode 100644
index 0000000000..6ec0316ebf
--- /dev/null
+++ b/files/ja/web/css/paint-order/index.html
@@ -0,0 +1,107 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - SVG
+  - ウェブ
+  - 描画順序
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p> <strong><code>paint-order</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストコンテンツやシェイプが描画されるときの塗りつぶしと輪郭 (およびマーカーの描画) の順序を制御することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* 通常 */
+paint-order: normal;
+
+/* 単一の値 */
+paint-order: stroke; /* 最初に輪郭、それから塗りつぶしとマーカーを描画 */
+paint-order: markers; /* 最初にマーカー、それから塗りつぶしと輪郭 */
+
+/* 複数の値 */
+paint-order: stroke fill; /* 最初に輪郭を、それから塗りつぶしを、そしてマーカーを描く */
+paint-order: markers stroke fill; /* マーカー、輪郭、塗りつぶしの順に描く */
+</pre>
+
+<p>値が指定されない場合、既定の描画順序は <code>fill</code>, <code>stroke</code>, <code>markers</code> です。</p>
+
+<p>一つの値で指定されると、それが最初に描画され、続いて他の二つが互いの既定の順序で描画されます。二つの値が指定されると、指定された順序で描画を行い、続いて指定されなかった一つが描画されます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: このプロパティの場合、マーカーは <code>marker-*</code> プロパティ (例えば <code><a href="/ja/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) および <code><a href="/ja/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code> 要素を使用した SVG 図形を描く場合のみ適用されます。 HTML テキストには適用されませんので、その場合は <code>stroke</code> および <code>fill</code> の順序のみが指定できます。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>様々なアイテムを通常の描画順で描画します。</dd>
+ <dt><code>stroke</code> (輪郭),<br>
+ <code>fill</code> (塗りつぶし),<br>
+ <code>markers</code> (マーカー)</dt>
+ <dd>これらの一部またはすべての値を用いて、描画したい順序を指定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 165)}}</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("SVG2", "painting.html#PaintOrder", "paint-order")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.paint-order")}}</p>
diff --git a/files/ja/web/css/percentage/index.html b/files/ja/web/css/percentage/index.html
new file mode 100644
index 0000000000..4677321e72
--- /dev/null
+++ b/files/ja/web/css/percentage/index.html
@@ -0,0 +1,96 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;percentage&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。</p>
+
+<div class="note"><strong>注:</strong> 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("&lt;length&gt;")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;percentage&gt;</code> データ型は、 {{CSSxRef("&lt;number&gt;")}} とそれに続くパーセント記号 (<code>%</code>) から成ります。任意で、先行して符号 (<code>+</code> または <code>-</code>) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。</p>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーションをする時、 <code>&lt;percentage&gt;</code> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>で定義します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Width_and_margin-left" name="Width_and_margin-left">幅と左マージン</h3>
+
+<pre class="brush: html notranslate">&lt;div style="background-color:navy;"&gt;
+  &lt;div style="width:50%; margin-left:20%; background-color:chartreuse;"&gt;
+    Width: 50%, Left margin: 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%; margin-left:60%; background-color:pink;"&gt;
+    Width: 30%, Left margin: 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>以上の HTML は以下のような出力になります。</p>
+
+<p>{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}</p>
+
+<h3 id="Font-size" name="Font-size">font-size</h3>
+
+<pre class="brush: html notranslate">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;Full-size text (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50% (9px)&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200% (36px)&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>以上の HTML は以下のような出力になります。</p>
+
+<p>{{EmbedLiveSample('Font-size', 'auto', 160)}}</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('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>目立った変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>CSS Level 2 (Revision 1) から目立った変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS Level 1 から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.percentage")}}</p>
diff --git a/files/ja/web/css/perspective-origin/index.html b/files/ja/web/css/perspective-origin/index.html
new file mode 100644
index 0000000000..22cf78f1ed
--- /dev/null
+++ b/files/ja/web/css/perspective-origin/index.html
@@ -0,0 +1,395 @@
+---
+title: perspective-origin
+slug: Web/CSS/perspective-origin
+tags:
+  - 3D
+  - CSS
+  - CSS プロパティ
+  - CSS 変形
+  - perspective
+  - perspective-origin
+  - リファレンス
+translation_of: Web/CSS/perspective-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective-origin</code></strong> プロパティは、閲覧者の視点の位置を決めます。これは {{cssxref("perspective")}} プロパティによって<em>消失点</em>として使われます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><strong><code>perspective-origin</code></strong> および {{cssxref('perspective')}} の各プロパティは、三次元空間で変換される子の親に設定するものであり、変換される要素に設定される {{cssxref("transform-function/perspective", "perspective()")}} 変換関数とは異なります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* １値構文 */
+perspective-origin: x-position;
+
+/* ２値構文 */
+perspective-origin: x-position y-position;
+
+/* x-position と y-position がキーワードである場合は、
+   以下の構文も有効 */
+perspective-origin: y-position x-position;
+
+/* グローバル値 */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><em>x-position</em></dt>
+ <dd><em>消失点</em>の横座標上の位置を示します。次のいずれかの値です。
+ <ul>
+  <li>{{cssxref("&lt;length-percentage&gt;")}} は、絶対的な length 値、又は要素の幅に対する相対値で位置を示します。負の数も使えます。</li>
+  <li><code>left</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li>
+  <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li>
+  <li><code>right</code> キーワードは、パーセント値 <code>100%</code> を示すショートカットです。</li>
+ </ul>
+ </dd>
+ <dt><em>y-position</em></dt>
+ <dd><em>消失点</em>の縦座標上の位置を示します。次のいずれかの値です。
+ <ul>
+  <li>{{cssxref("&lt;length&gt;")}} は、絶対的な length 値、又は要素の高さに対する相対値で位置を示します。負の数も使えます。</li>
+  <li><code>top</code> キーワードは、 length 値 <code>0</code> を示すショートカットです。</li>
+  <li><code>center</code> キーワードは、パーセント値 <code>50%</code> を示すショートカットです。</li>
+  <li><code>bottom</code> キーワードは、パーセント値 <code>100%</code> を示すキーワードです。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Changing_the_perspective_origin" name="Changing_the_perspective_origin">視点の変更</h3>
+
+<p>この例は主要な <code>perspective-origin</code> 値で立方体を表示します。</p>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
+    &lt;div class="container"&gt;
+    &lt;div class="cube potl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
+   &lt;div class="container"&gt;
+    &lt;div class="cube potm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube potr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube poml"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200neg"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200pos"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* perspective-origin の値 (例ごとに異なる) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* レイアウトの見栄えをよくする */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}</pre>
+
+<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('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.perspective-origin")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の利用</a></li>
+ <li>{{cssxref('transform-style')}}</li>
+ <li>{{cssxref('transform-function')}}</li>
+ <li>{{cssxref('perspective')}}</li>
+ <li><code><a href="/ja/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> 関数</li>
+</ul>
diff --git a/files/ja/web/css/perspective/index.html b/files/ja/web/css/perspective/index.html
new file mode 100644
index 0000000000..3d51b9620a
--- /dev/null
+++ b/files/ja/web/css/perspective/index.html
@@ -0,0 +1,261 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 変形
+  - Reference
+  - グラフィック
+  - プロパティ
+  - 距離
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>perspective</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 z=0 の平面とユーザーとの間の距離を定めて三次元に配置された要素に遠近感を与えます。</span> z&gt;0 である三次元要素はより大きく、 z&lt;0 である三次元要素はより小さくなります。効果の強度はこのプロパティの値から決められます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の <code>perspective</code> プロパティの値より大きい要素は描画されません。</p>
+
+<p><em>消失点</em>は既定で要素の中心に置かれますが、この位置は {{cssxref("perspective-origin")}} プロパティで変更できます。</p>
+
+<p>このプロパティを <code>0</code> と <code>none</code> 以外の値で使用すると、新たな<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。また、その場合、オブジェクトはそれを含む <code>position: fixed</code> の要素の包含ブロックとして動作します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+perspective: none;
+
+/* &lt;length&gt; 値 */
+perspective: 20px;
+perspective: 3.5em;
+
+/* グローバル値 */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>立体的な変形を一切適用しないことを示すキーワードです。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>ユーザーと z=0 平面間の距離を表す {{cssxref("&lt;length&gt;")}} です。立体的な変形を要素とその内容に適用するときに使います。 <code>0</code> や負の値ならば、立体的な変形は適用されません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_perspective" name="Setting_perspective">視点の設定</h3>
+
+<p>この例は様々な位置に視点が設定された立方体を表示します。どのように立方体が早く縮まるかは、 {{ cssxref("perspective") }} プロパティで定義されます。小さい値ほど、視点は近くなります。</p>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_perspective', 660, 700)}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>以下の HTML は、４つの同じボックスのコピーを、様々な値の視点を設定して作成します。</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers250"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers350"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers500"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers650"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>様々な距離の遠近法を設定するために使用することができる CSS のクラスです。コンテナーボックスや立方体自身、それぞれの面のためのクラスも含みます。</p>
+
+<pre class="brush: css">/* さまざまな perspective の値のためのショートハンドクラス */
+.pers250 {
+  perspective: 250px;
+}
+
+.pers350 {
+  perspective: 350px;
+}
+
+.pers500 {
+  perspective: 500px;
+}
+
+.pers650 {
+  perspective: 650px;
+}
+
+/* コンテナーの div、立方体の div、面の一般的な設定 */
+.container {
+  width: 200px;
+  height: 200px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* 方向に基づいてそれぞれの面を設定 */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* テーブルの見栄えをよくする */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<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('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.perspective")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 変形の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/place-content/index.html b/files/ja/web/css/place-content/index.html
new file mode 100644
index 0000000000..97e92102d4
--- /dev/null
+++ b/files/ja/web/css/place-content/index.html
@@ -0,0 +1,254 @@
+---
+title: place-content
+slug: Web/CSS/place-content
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+  - align-content
+  - justify-content
+  - place-content
+  - リファレンス
+translation_of: Web/CSS/place-content
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code><strong>place-content</strong></code> プロパティは、 {{CSSxRef("align-content")}} および {{CSSxRef("justify-content")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。これらの配置方法を利用するどのレイアウト方法でも使用することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 位置による配置 */
+/* align-content は left 及び right の値を取りません */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* ベースラインによる配置 */
+/* justify-content は baseline の値を取りません */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* 均等配置 */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* グローバル値 */
+place-content: inherit;
+place-content: initial;
+place-content: unset;</pre>
+
+<p>最初の値は {{CSSxRef("align-content")}} プロパティ値で、二番目の値は {{CSSxRef("justify-content")}} の値です。</p>
+
+<div class="warning">
+<p><strong>重要</strong>: 二番目の値がない場合、最初の値に両方に有効な値が設定されていれば、両方に使用されます。どちらかに無効な値であれば、値自体が無効になります。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <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>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>space-between</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。</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>space-around</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>各アイテムは、配置コンテナーの中で均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。</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>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Can be changed in the live sample */
+  direction: ltr; /* Can be changed in the live sample */
+  place-content: flex-end center; /* Can be changed in the live sample */
+}
+
+div &gt; div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div class="small"&gt;Lorem&lt;/div&gt;
+  &lt;div class="small"&gt;Lorem&lt;br/&gt;ipsum&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;br/&gt;impsum&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush:html">&lt;code&gt;writing-mode:&lt;/code&gt;&lt;select id="writingMode"&gt;
+  &lt;option value="horizontal-tb" selected&gt;horizontal-tb&lt;/option&gt;
+  &lt;option value="vertical-rl"&gt;vertical-rl&lt;/option&gt;
+  &lt;option value="vertical-lr"&gt;vertical-lr&lt;/option&gt;
+  &lt;option value="sideways-rl"&gt;sideways-rl&lt;/option&gt;
+  &lt;option value="sideways-lr"&gt;sideways-lr&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;direction:&lt;/code&gt;&lt;select id="direction"&gt;
+  &lt;option value="ltr" selected&gt;ltr&lt;/option&gt;
+  &lt;option value="rtl"&gt;rtl&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;place-content:&lt;/code&gt;&lt;select id="alignContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly" selected&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="safe"&gt;safe&lt;/option&gt;
+  &lt;option value="unsafe"&gt;unsafe&lt;/option&gt;
+&lt;/select&gt;
+&lt;select id="justifyContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center" selected&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-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="safe"&gt;safe&lt;/option&gt;
+  &lt;option value="unsafe"&gt;unsafe&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;
+</pre>
+
+<pre class="brush: js">var update = function () {
+   document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
+}
+
+var alignContentAlignment = document.getElementById("alignContentAlignment");
+alignContentAlignment.addEventListener("change",  update);
+
+var justifyContentAlignment = document.getElementById("justifyContentAlignment");
+justifyContentAlignment.addEventListener("change", update);
+
+var writingM = document.getElementById("writingMode");
+writingM.addEventListener("change", function (evt) {
+   document.getElementById("container").style.writingMode = evt.target.value;
+});
+var direction = document.getElementById("direction");
+direction.addEventListener("change", function (evt) {
+   document.getElementById("container").style.direction = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "370", "300")}}</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 Box Alignment", "#propdef-place-content", "place content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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>
+
+<div>{{Compat("css.properties.place-content")}}</div>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<div>{{Compat("css.properties.place-content.flex_context")}}</div>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<div>{{Compat("css.properties.place-content.grid_context")}}</div>
+
+<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-content")}} プロパティ</li>
+ <li>{{CSSxRef("justify-content")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/place-items/index.html b/files/ja/web/css/place-items/index.html
new file mode 100644
index 0000000000..f77643455b
--- /dev/null
+++ b/files/ja/web/css/place-items/index.html
@@ -0,0 +1,279 @@
+---
+title: place-items
+slug: Web/CSS/place-items
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックスレイアウト
+  - CSS プロパティ
+  - CSS ボックス配置
+  - Reference
+translation_of: Web/CSS/place-items
+---
+<div>{{CSSRef}}</div>
+
+<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>
+
+<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div>
+
+<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>
+
+<pre class="brush:css">/* キーワード値 */
+place-items: auto center;
+place-items: normal start;
+
+/* 位置による配置 */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* ベースラインによる配置 */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* グローバル値 */
+place-items: inherit;
+place-items: initial;
+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>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* 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>
+
+<div class="hidden">
+<pre class="brush: css;">div &gt; 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;
+}
+
+#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;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.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');
+
+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>
+
+<p>{{EmbedLiveSample("Examples", 260, 290)}}</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 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>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.place-items.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.place-items.grid_context")}}</p>
+
+<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>
diff --git a/files/ja/web/css/place-self/index.html b/files/ja/web/css/place-self/index.html
new file mode 100644
index 0000000000..c9eb65a548
--- /dev/null
+++ b/files/ja/web/css/place-self/index.html
@@ -0,0 +1,128 @@
+---
+title: place-self
+slug: Web/CSS/place-self
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ボックス配置
+  - place-self
+  - リファレンス
+translation_of: Web/CSS/place-self
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>place-self</code></strong> プロパティは、 {{cssxref("align-self")}} および {{cssxref("justify-self")}} プロパティの両方を設定する<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>です。最初の値は <code>align-self</code> プロパティの値で、二番目の値は <code>justify-self</code> プロパティの値です。二番目の値が存在しない場合、最初の値がそちらにも使用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div>
+
+<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>
+
+<pre class="brush: css">/* キーワード値 */
+place-self: auto center;
+place-self: normal start;
+
+/* 位置による配置 */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* ベースラインによる配置 */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* グローバル値 */
+place-self: inherit;
+place-self: initial;
+place-self: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>親の {{cssxref("align-items")}} の値で計算します。</dd>
+ <dt><code>normal</code></dt>
+ <dd>このキーワードの効果は、現在のレイアウトモードに依存します。
+ <ul>
+  <li>絶対位置のレイアウトでは、このキーワードは<em>置換</em>の絶対位置ボックスには <code>start</code> のように動作し、<em>その他</em>の絶対位置ボックスには <code>stretch</code> のように動作します。</li>
+  <li>絶対位置指定レイアウトの固定位置指定時は、このキーワードは <code>stretch</code> と同様に動作します。</li>
+  <li>フレックスアイテムでは、このキーワードは <code>stretch</code> と同様に動作します。</li>
+  <li>グリッドアイテムでは、このキーワードは <code>stretch</code> のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは <code>start</code> のように動作します。</li>
+  <li>ブロックレベルボックスと表のセルでは、プロパティは適用されません。</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。</dd>
+ <dt><code>self-end</code></dt>
+ <dd>アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。</dd>
+ <dt><code>center</code></dt>
+ <dd>このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。</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")}} (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、 <code>auto</code> が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<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 Box Alignment", "#place-self-property", "place-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.place-self.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.place-self.grid_context")}}</p>
+
+<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-self")}} プロパティ</li>
+ <li>{{cssxref("justify-self")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/pointer-events/index.html b/files/ja/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..805d07dd34
--- /dev/null
+++ b/files/ja/web/css/pointer-events/index.html
@@ -0,0 +1,164 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - SVG
+  - pointer-events
+  - 'recipe:css-property'
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>pointer-events</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、特定のグラフィック要素がポインターイベントの<a href="/ja/docs/Web/API/Event/target">対象</a>になる可能性のある環境 (存在する場合) を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG のみ */
+pointer-events: visibleFill;    /* SVG のみ */
+pointer-events: visibleStroke;  /* SVG のみ */
+pointer-events: visible;        /* SVG のみ */
+pointer-events: painted;        /* SVG のみ */
+pointer-events: fill;           /* SVG のみ */
+pointer-events: stroke;         /* SVG のみ */
+pointer-events: all;            /* SVG のみ */
+
+/* グローバル値 */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<p><code>pointer-events</code> プロパティは、以下の値の一覧から選択した単一のキーワードとして指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>要素は、 <code>pointer-events</code> プロパティが指定されていないときと同様にふるまいます。SVGコンテンツ内では <code>visiblePainted</code> を指定したときと同じ効果になります。</dd>
+ <dt><code>none</code></dt>
+ <dd>要素がポインターイベントの<a href="/ja/docs/Web/API/Event/target">対象</a>になることはありません。しかし、子孫要素が <code>pointer-events</code> の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。その場合、ポインターイベントはイベントキャプチャ/<a href="/ja/docs/Web/API/Event/bubbles">バブリング</a>の過程で必要に応じて親要素のイベントリスナーをトリガーします。</dd>
+</dl>
+
+<h4 id="SVG_only" name="SVG_only">SVG のみ(HTML では実験的)</h4>
+
+<dl>
+ <dt><code>visiblePainted</code></dt>
+ <dd>SVG の場合のみ (HTML では実験的) の値です。要素の <code>visibility</code> プロパティに <code>visible</code> が設定されていて、かつ、例えば <code>fill</code> プロパティに <code>none</code> 以外の値が設定されている時の塗り (<code>fill</code>)、もしくは <code>stroke</code> プロパティが <code>none</code> 以外の時の線 (<code>stroke</code>) の上にマウスカーソルがある場合のみ、要素がポインターイベントのターゲットになりえます。</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>SVG の場合のみの値です。 <code>visibility</code> プロパティが <code>visible</code> にセットされていて、塗り (<code>fill</code>) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 <code>fill</code> プロパティの値でイベント処理が変化することはありません。</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>SVG の場合のみの値です。 <code>visibility</code> プロパティが <code>visible</code> にセットされていて、線 (<code>stroke</code>) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 <code>stroke</code> プロパティの値でイベント処理が変化することはありません。</dd>
+ <dt><code>visible</code></dt>
+ <dd>SVG の場合のみ (HTML では実験的) の値です。 <code>visibility</code> プロパティが <code>visible</code> にセットされていて、塗り (<code>fill</code>) か線 (<code>stroke</code>) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 <code>fill</code> プロパティや <code>stroke</code> プロパティの値でイベント処理が変化することはありません。</dd>
+ <dt><code>painted</code></dt>
+ <dd>SVG の場合のみ (HTML では実験的) の値です。 <code>fill</code> プロパティが <code>none</code> 以外にセットされている塗りの（すなわち <code>fill</code> ）要素、もしくは <code>stroke</code> のプロパティが <code>none</code> 以外にセットされている線の（すなわち <code>stroke</code> ）要素の上にマウスカーソルがいる場合にのみ要素がポインターイベントのターゲットになりえます。 <code>visibility</code> プロパティの値はイベントプロセスに影響を与えません。</dd>
+ <dt><code>fill</code></dt>
+ <dd>SVGの場合のみの値です。塗り (<code>fill</code>) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 <code>fill</code> プロパティや <code>visibility</code> プロパティの値でイベント処理が変化することはありません。</dd>
+ <dt><code>stroke</code></dt>
+ <dd>SVGの場合のみの値です。線 (<code>stroke</code>) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 <code>stroke</code> プロパティや <code>visibility</code> の値でイベント処理が変化することはありません。</dd>
+ <dt><code>all</code></dt>
+ <dd>SVG の場合のみ (HTML では実験的) の値です。塗り (<code>fill</code>) と線 (<code>stroke</code>) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 <code>fill</code> や <code>stroke</code> や <code>visibility</code> の値でイベント処理が変化することはありません。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>このプロパティが指定されないと、 <code>visiblePainted</code> の値の同じ性質が SVG コンテンツに適用されます。</p>
+
+<p>値を <code>none</code> に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。</p>
+
+<p><code>pointer-events</code> を使用して要素がポインターイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーが起動されない、することができないという意味ではありません。仮に要素の子要素のひとつで、 <code>pointer-events</code> がポインターイベントのターゲットになるよう明示的に設定されていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーを起動します。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません (親要素を「通過」し、その下にあるものがターゲットになります)。</p>
+
+<p><code>pointer-events: none</code> を持った要素は、 <kbd>Tab</kbd> キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。</p>
+
+<p>私たちは HTML で、どのような要素が、どんな時に、ポインターイベントを「捕まえる」かを (<code>auto</code> と <code>none</code> だけではなく) より細かく制御できるようにしたいと思っています。今後の HTML で <code>pointer-events</code> をどのように拡張すべきかを決めるうえで、このプロパティで実現したい具体例があれば、<a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">この wiki ページ</a>の Use Cases セクションに記入してください (きれいに整理してからなどと気にしなくても大丈夫です)。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<p>この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。</p>
+
+<pre class="brush:css notranslate">img {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Disabling_links" name="Disabling_links">リンクの無効化</h3>
+
+<p>この例では、 http://example.com へのリンクのポインターイベントを無効にします。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">a[href="http://example.com"] {
+  pointer-events: none;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<div>{{EmbedLiveSample("Disabling_links", "500", "100")}}</div>
+
+<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('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>このプロパティは HTML 要素に対する拡張であり、 CSS Basic User Interface Module Level 3 の草稿に記述がありますが、現在では同標準の <a href="http://wiki.csswg.org/spec/css4-ui#pointer-events">Level 4</a> に組み込まれています。</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.properties.pointer-events")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>SVG 属性 {{SVGAttr("pointer-events")}}</li>
+ <li>SVG 属性 {{SVGAttr("visibility")}}</li>
+ <li>(X)HTML で使うことを踏まえた <a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit の PointerEventsProperty の仕様書</a></li>
+ <li>{{cssxref("user-select")}} - ユーザーがテキストを選択できるかどうかの制御</li>
+</ul>
diff --git a/files/ja/web/css/position/index.html b/files/ja/web/css/position/index.html
new file mode 100644
index 0000000000..e6ed408e56
--- /dev/null
+++ b/files/ja/web/css/position/index.html
@@ -0,0 +1,347 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>position</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>position</code> プロパティは以下のキーワード値、グローバル値から１つを指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="static"><code>static</code></dt>
+ <dd>要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは<em>効果がありません</em>。これが既定値です。</dd>
+ <dt id="relative"><code>relative</code></dt>
+ <dd>要素は文書の通常のフローに従って配置され、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて<em>自分自身からの相対</em>オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が <code>static</code> であった時と同じです。</dd>
+ <dd><code>z-index</code> の値が <code>auto</code> でない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。 <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> の要素における効果は未定義です。</dd>
+ <dt id="absolute"><code>absolute</code></dt>
+ <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されます。最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd>
+ <dd>この値では、 <code>z-index</code> の値が <code>auto</code> ではない場合、新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">相殺</a>されません。</dd>
+ <dt id="fixed"><code>fixed</code></dt>
+ <dd>要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>に対して相対配置されますが、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している <code>perspective</code> と <code>filter</code> に矛盾のあるブラウザーがあります。) 最終的な位置は <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値によって決定されます。</dd>
+ <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を作成します。印刷文書の場合、要素は<em>各ページ</em>の同じ位置に配置されます。</dd>
+ <dt id="sticky"><code>sticky</code></dt>
+ <dd>要素は文書の通常のフローに従って配置され、<em>直近のスクロールする祖先</em>および<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a> (直近のブロックレベル祖先、表関連要素を含む) に対して <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。</dd>
+ <dd>この値は、常に新しい<a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (<code>overflow</code> が <code>hidden</code>, <code>scroll</code>, <code>auto</code>, <code>overlay</code> として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (<a href="https://github.com/w3c/csswg-drafts/issues/865">GitHub issue on W3C CSSWG</a> を参照)。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<h3 id="Types_of_positioning" name="Types_of_positioning">位置の種類</h3>
+
+<ul>
+ <li><ruby><strong>位置指定要素</strong><rp> (</rp><rt>positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> のいずれかである要素です。 (言い換えれば、 <code>static</code> 以外の全てです。)</li>
+ <li><ruby><strong>相対位置指定要素</strong><rp> (</rp><rt>relatively positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>relative</code> である要素です。 {{Cssxref("top")}} および {{Cssxref("bottom")}} プロパティは、通常の位置からの垂直方向のオフセットを指定します。 {{Cssxref("left")}} および {{Cssxref("right")}} プロパティは、水平方向のオフセットを指定します。</li>
+ <li><ruby><strong>絶対位置指定要素</strong><rp> (</rp><rt>absolutely positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>absolute</code> または <code>fixed</code> である要素です。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティは、この要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の端からのオフセットを指定します。 (包含ブロックは配置される要素の祖先です。) 要素にマージンがある場合は、オフセットにマージンが追加されます。この要素は内容のために新しい <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a> (BFC) を生成します。</li>
+ <li><ruby><strong>粘着位置指定要素</strong><rp> (</rp><rt>stickily positioned element</rt><rp>) </rp></ruby>とは、 <code>position</code> の<a href="/ja/docs/Web/CSS/computed_value">計算値</a>が <code>sticky</code> である要素です。これは<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>がフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば {{Cssxref("top")}} に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>の反対の端が来るまでその位置に「粘着」するものとして扱われます。</li>
+</ul>
+
+<p>ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が <code>auto</code> が設定されると、内容に合うように大きさが調整されます。しかし、非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a>要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり <code>auto</code> の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を <code>auto</code> のままにすることで、利用できる水平の空間を埋めることができます。</p>
+
+<p>以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。</p>
+
+<ul>
+ <li><code>top</code> と <code>bottom</code> の両方を指定すると (<code>auto</code>ではなく)、 <code>top</code> が優先されます。</li>
+ <li><code>left</code> と <code>right</code> の両方を指定すると、 {{Cssxref("direction")}} が <code>ltr</code> (英語、横書き日本語、など) の場合は <code>left</code> が優先され、 {{Cssxref("direction")}} が <code>rtl</code> (ペルシャ語、アラビア語、ヘブライ語、 など)の場合は <code>right</code> が優先されます。</li>
+</ul>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><code>absolute</code> または <code>fixed</code> の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="パフォーマンスとアクセシビリティ">パフォーマンスとアクセシビリティ</h3>
+
+<p><code>fixed</code> または <code>sticky</code> を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 <abbr title="frames per second">fps</abbr> で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3>
+
+<p>相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Relative_positioning', '', '200px')}}</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は<em>配置された直近の祖先</em> (つまり、 <code>static</code> ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">W3C の定義</a>も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Absolute_positioning', '', '420px')}}</p>
+
+<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3>
+
+<p>固定位置指定は絶対位置指定に似ていますが、要素の<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>が<em>ビューポート</em>によって定義される初期包含ブロックであるという点が異なり、祖先の一つに <code>transform</code>, <code>perspective</code>, <code>filter</code> の何れかのプロパティが <code>none</code> 以外 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> を参照) に設定されている場合は例外で、その場合は祖先が<a href="/ja/docs/Web/CSS/Containing_Block">包含ブロック</a>としてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Fixed_positioning', '', '300px')}}</p>
+
+<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3>
+
+<p>粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・</p>
+
+<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>
+
+<p>例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。</p>
+
+<p>粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。</p>
+
+<p>粘着位置指定を想定したとおりに動作させるためには、 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+dl &gt; div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample('Sticky_positioning', '', '300px')}}</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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td><code>sticky</code> 値を追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.position")}}</p>
diff --git a/files/ja/web/css/position_value/index.html b/files/ja/web/css/position_value/index.html
new file mode 100644
index 0000000000..6b72b16c08
--- /dev/null
+++ b/files/ja/web/css/position_value/index.html
@@ -0,0 +1,138 @@
+---
+title: <position>
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - データ型
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;position&gt;</code></strong> (または <strong><code>&lt;bg-position&gt;</code></strong>) は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。</p>
+
+<div class="note">
+<p><strong>注:</strong> <code>&lt;position&gt;</code> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;">The <code>&lt;position&gt;</code> データ型は1～2つのキーワードと、任意のオフセットで定義されます。</p>
+
+<p>キーワード値は <code>center</code>、 <code>top</code>、 <code>right</code>、 <code>bottom</code>、 <code>left</code> です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 <code>center</code> は左右の辺の中心か、上下の辺の中心を表します。</p>
+
+<p>オフセット値を指定する場合は、相対的な {{cssxref("&lt;percentage&gt;")}} 値か絶対的な {{cssxref("&lt;length&gt;")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。</p>
+
+<p>単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の <code>center</code> に設定されます。</p>
+
+<pre class="brush:css notranslate">/* 値1つの構文 */
+<var>keyword</var>                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
+<var>value</var>                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
+
+/* 値2つの構文 */
+<var>keyword</var> <var>keyword</var>          /* それぞれの方向のキーワード（順不同） */
+<var>keyword</var> <var>value</var>            /* キーワードで定義された辺からのオフセット */
+<var>value</var> <var>keyword</var>            /* 水平位置を表す値、垂直位置を表すキーワード */
+<var>value</var> <var>value</var>              /* それぞれの方向（水平、垂直）の距離の値 */
+
+/* 値4つの構文 */
+<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* それぞれの値はその前のキーワードからのオフセット */
+</pre>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
+ [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
+|
+ [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
+ [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
+]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <code>&lt;position&gt;</code> を使用する他のプロパティでは許可されません。</p>
+</div>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>が用いられるため、座標は直線に移動します。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_positions" name="Valid_positions">有効な位置</h3>
+
+<pre class="notranslate">center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+</pre>
+
+<h3 id="Invalid_positions" name="Invalid_positions">無効な位置</h3>
+
+<pre class="example-bad notranslate">left right
+bottom top
+10px 15px 20px 15px
+</pre>
+
+<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 Values', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <code>&lt;position&gt;</code> の定義も使用される。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '&lt;bg-position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td><code>&lt;position&gt;</code> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>キーワードと {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の値の組み合わせを許可。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>&lt;position&gt;</code> を {{cssxref("background-position")}} の値として無名で定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.position")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位の紹介</a></li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li>
+</ul>
diff --git a/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html
new file mode 100644
index 0000000000..8f29cc6752
--- /dev/null
+++ b/files/ja/web/css/privacy_and_the__colon_visited_selector/index.html
@@ -0,0 +1,75 @@
+---
+title: 'プライバシーと :visited セレクター'
+slug: 'Web/CSS/Privacy_and_the_:visited_selector'
+tags:
+  - CSS
+  - Guide
+  - Pseudo-class
+  - Reference
+  - Security
+  - Selectors
+translation_of: 'Web/CSS/Privacy_and_the_:visited_selector'
+---
+<div>{{cssref}}</div>
+
+<p>およそ 2010 年よりも前、 <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref(":visited")}} セレクターによって、ウェブサイトがユーザーの閲覧履歴を明らかにし、ユーザーがどのサイトを訪問したかを把握することができました。これは {{domxref("window.getComputedStyle")}} およびその他の技術を用いて行われていました。この処理はすばやく実行され、ユーザーがどこを訪れたかを特定できるだけでなく、ユーザーの身元に関する多くの情報を推測することも可能になりました。</p>
+
+<p>この問題を緩和するために、ブラウザーは訪問済みリンクから受け取ることができる情報量を制限されるようになりました。</p>
+
+<h2 id="Little_white_lies" name="Little_white_lies">ちょっとした善意の嘘</h2>
+
+<p>ユーザーのプライバシーを保護するために、Firefox や他のブラウザーは特定の状況下でウェブアプリケーションに嘘をつきます。</p>
+
+<ul>
+ <li><code>window.getComputedStyle</code> メソッドや、 {{ domxref("element.querySelector") }} などの類似の関数は、ユーザーがページ上のリンクを訪れたことがないことを示す値を常に返します。</li>
+ <li><code>:visited + span</code> のような兄弟セレクターを使用した場合、隣接する要素 (この例では <code>span</code>) は、リンクが未訪問であるかのようにスタイル付けされます。</li>
+ <li>稀なケースですが、入れ子になったリンク要素を使用していて、マッチしている要素が履歴の中の存在がテストされているリンクとは異なる場合、要素はリンクが未訪問であったかのようにレンダリングされます。</li>
+</ul>
+
+<h2 id="Limits_to_visited_link_styles" name="Limits_to_visited_link_styles">訪問済みリンクスタイルの制限</h2>
+
+<p>訪問済みリンクの視覚的なスタイルづけを行うことはまだできますが、使えるスタイルは制限されています。訪問済みリンクに用いることができるのは次のプロパティだけです:</p>
+
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("border-color")}} (およびそのサブプロパティ)</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{SVGAttr("fill")}} および {{SVGAttr("stroke")}} プロパティの色の部分</li>
+</ul>
+
+<p>さらに、訪問済みリンクにセットできるプロパティであっても、未訪問リンクと訪問済みリンク間で不透明度を変えることはできません。これは、別の状況なら、<code><a href="/js/docs/Web/CSS/color_value#rgba()">rgba()</a></code> や <code><a href="/ja/docs/Web/CSS/color_value#hsla()">hsla()</a></code> のカラー値、もしくは <code><a href="/ja/docs/Web/CSS/color_value#transparent">transparent</a></code> キーワードを使ってできた操作でした。</p>
+
+<p>制限内でスタイルづけをする方法を、次の例で示します。</p>
+
+<pre class="brush: css notranslate">:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* The default value of background-color is `transparent`. You need to
+     specify a different value, otherwise changes on :visited won't apply. */
+}
+
+:visited {
+  outline-color: orange;    /* オレンジのアウトライン */
+  background-color: green;  /* グリーンの背景 */
+  color: yellow;            /* イエローのテキスト */
+}
+</pre>
+
+<h2 id="Impact_on_web_developers" name="Impact_on_web_developers">ウェブ開発者への影響度</h2>
+
+<p>全体として、ウェブ開発者にそれほど大きな影響はないでしょう。しかしながら、サイトの変更が必要になるような特殊なケースが少しだけあります。</p>
+
+<ul>
+ <li>背景画像を使ってリンクをスタイルづけし、訪問済みかどうかを表示する方法はもう動作しないでしょう。訪問済みリンクのスタイルには色以外は使えないからです。</li>
+ <li>それ以外の透明な色は、 <code>:visited</code> セレクター内でスタイル付けした場合には表示されません。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://dev.mozilla.jp/2010/04/privacy-related-changes-coming-to-css-vistited/" title="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">CSS の :visited に行われるプライバシー対策</a> on Mozilla Hacks ブログ翻訳</li>
+ <li><a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/" title="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Plugging the CSS History Leak</a> on the Mozilla Security Blog</li>
+ <li><a class="external" href="http://dbaron.org/mozilla/visited-privacy">Preventing attacks on a user's history through CSS :visited selectors</a></li>
+</ul>
diff --git a/files/ja/web/css/pseudo-classes/index.html b/files/ja/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..2be624f4d8
--- /dev/null
+++ b/files/ja/web/css/pseudo-classes/index.html
@@ -0,0 +1,167 @@
+---
+title: 擬似クラス
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Reference
+  - セレクター
+  - 擬似クラス
+  - 概要
+  - 疑似クラス
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong><dfn>擬似クラス</dfn></strong><rp> (</rp><rt>Pseudo-classes</rt><rp>) </rp></ruby>は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。</span>例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。</p>
+
+<pre class="brush: css no-line-numbers">/* ユーザーのポインターが当たっているすべてのボタン */
+button:hover {
+  color: blue;
+}</pre>
+
+<p>擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の<em>特定の部分</em>にスタイルを適用するために使用します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<p>通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。</p>
+
+<h2 id="Index_of_standard_pseudo-classes" name="Index_of_standard_pseudo-classes">標準擬似クラスの索引</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<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("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td><code>:fullscreen</code> を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>いつ特定のセレクターが HTML 要素に一致するのかを定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td><code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code> を定義<br>
+    <code>:empty</code> の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。<br>
+    {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>正規の (WHATWG) HTML 仕様書から関連する節を複写。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td><code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code> を定義。ただし意味論的な意味は定義していません。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td><code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, <code>:not()</code> を定義。<br>
+    <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> の構文を定義。ただし意味論的な意味は定義していません。<br>
+    {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td><code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code> を定義。<br>
+    {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td><code>:link</code>, <code>:visited</code>, <code>:active</code> を定義。ただし意味論的な意味は定義していません。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a></li>
+</ul>
diff --git a/files/ja/web/css/pseudo-elements/index.html b/files/ja/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..d46d32bce6
--- /dev/null
+++ b/files/ja/web/css/pseudo-elements/index.html
@@ -0,0 +1,125 @@
+---
+title: 擬似要素 (Pseudo-elements)
+slug: Web/CSS/Pseudo-elements
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Pseudo-element
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <ruby><strong>擬似要素</strong><rp> (</rp><rt>Pseudo-elements</rt><rp>) </rp></ruby>はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 各 &lt;p&gt; 要素の最初の行です。 */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の<em>状態</em>に基づいてスタイル付けを行うことができます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<p>擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。</p>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 規則として、単一コロン (<code>:</code>) の代わりに二重コロン (<code>::</code>) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。</p>
+</div>
+
+<h2 id="Index_of_standard_pseudo-elements" name="Index_of_standard_pseudo-elements">標準の擬似要素の索引</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef("::after", "::after (:after)")}}</li>
+ <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::before", "::before (:before)")}}</li>
+ <li>{{CSSxRef("::cue")}}</li>
+ <li>{{CSSxRef("::cue-region")}}</li>
+ <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
+ <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
+ <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::selection")}}</li>
+ <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
+ <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>ブラウザー</th>
+   <th>対応開始バージョン</th>
+   <th>対応内容</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>擬似クラスと擬似要素を定義した。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></li>
+</ul>
diff --git a/files/ja/web/css/quotes/index.html b/files/ja/web/css/quotes/index.html
new file mode 100644
index 0000000000..81545bf8d1
--- /dev/null
+++ b/files/ja/web/css/quotes/index.html
@@ -0,0 +1,141 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 生成コンテンツ
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 生成コンテンツ
+translation_of: Web/CSS/quotes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>quotes</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、引用符がどのように表示されるかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+quotes: none;
+quotes: auto;
+
+/* &lt;string&gt; 値 */
+quotes: "«" "»";           /* <em>open-quote</em> および <em>close-quote</em> をフランス語の引用符に設定 */
+quotes: "«" "»" "‹" "›";   /* ２レベルの引用符を設定 */
+
+/* グローバル値 */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>{{cssxref("content")}} プロパティの <code>open-quote</code> および <code>close-quote</code> の値が引用符を生成しません。</dd>
+ <dt><code>auto</code></dt>
+ <dd>選択された用途に設定された言語の値 (すなわち、 {{htmlattrxref("lang")}} 属性) で使用される適切な引用符が使用されます。</dd>
+ <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
+ <dd><code>open-quote</code> および <code>close-quote</code> を表す {{cssxref("&lt;string&gt;")}} の１つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_quote_marks" name="Basic_quote_marks">基本的な引用符</h3>
+
+<pre class="brush: html">&lt;q&gt;To be or not to be. That's the question!&lt;/q&gt;
+</pre>
+
+<pre class="brush: css">q {
+  quotes: '"' '"' "'" "'";
+}
+q::before {
+  content: open-quote;
+}
+q::after {
+  content: close-quote;
+}</pre>
+
+<p>{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}</p>
+
+<h3 id="Auto_quotes" name="Auto_quotes">自動引用符</h3>
+
+<pre class="brush: html">&lt;div lang="fr"&gt;
+  &lt;q&gt;<span class="tlid-translation translation" lang="fr"><span title="">Ceci est une citation française.</span></span>&lt;/q&gt;
+&lt;div&gt;
+&lt;hr&gt;
+&lt;div lang="ru"&gt;
+  &lt;q&gt;<span class="tlid-translation translation" lang="ru"><span title="">Это русская цитата</span></span>&lt;/q&gt;
+&lt;div&gt;
+&lt;hr&gt;
+&lt;div lang="ja"&gt;
+  &lt;q&gt;<span class="tlid-translation translation" lang="ja"><span title="">これは日本語の引用符です。</span></span>&lt;/q&gt;
+&lt;div&gt;
+&lt;hr&gt;
+&lt;div lang="en"&gt;
+  &lt;q&gt;This is an English quote.&lt;/q&gt;
+&lt;div&gt;
+</pre>
+
+<pre class="brush: css">/*q {
+  quotes: auto;
+}*/
+</pre>
+
+<p>{{EmbedLiveSample('Auto_quotes', "100%", 200)}}</p>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<ul>
+ <li>(Firefox 70 以降) では <code>quotes</code> の既定値はどのような場合も <code>auto</code> であり、その他のブラウザー (Chromium, Safari, Edge) もこの動作をしますので、多くのブラウザーでは明示的に設定しなくても上記の例が動作します。</li>
+ <li>Firefox 3.5 以降では、 quotes プロパティの初期値は <code>-moz-<a class="internal" href="/ja/docs/Web/CSS/initial">initial</a></code> を使用して読み出すことができます。これはそれより前のバージョンの Firefox では有効ではありません。</li>
+</ul>
+
+<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 Content", "#quotes", "quotes")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.quotes")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ Cssxref("content") }} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/radial-gradient()/index.html b/files/ja/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..cd31362e49
--- /dev/null
+++ b/files/ja/web/css/radial-gradient()/index.html
@@ -0,0 +1,174 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Function
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>radial-gradient()</code></strong> 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊形です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央にあるグラデーション、
+   赤で始まり、青へ変わり、緑で終わる */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code> です。</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>グラデーションの形状です。値は <code>circle</code> (つまり、グラデーションの形状が一定の半径の円) か <code>ellipse</code> (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>キーワード</th>
+    <th>説明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>注:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。</p>
+ </div>
+ </dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>他のグラデーションと同様、放射グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。</p>
+
+<p>繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。</p>
+
+<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+<h3 id="放射グラデーションの構成">放射グラデーションの構成</h3>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">放射グラデーションは<em>中心位置</em>、<em>最終的な形状</em>、および二つ以上の<em>色経由点</em>で定義されます。</p>
+
+<p>滑らかなグラデーションを生成するために、 <code>radial-gradient()</code> 関数は中央から<em>最終的な形状</em> (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。</p>
+
+<p>色経由点は、中心から右方向に水平に延びる<em>仮想的なグラデーション光</em>の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を <code>100%</code> としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_gradient" name="Simple_gradient">シンプルなグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p>
+
+<h3 id="Non-centered_gradient" name="Non-centered_gradient">中央から外れたグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p>
+
+<h3 id="More_radial-gradient_examples" name="More_radial-gradient_examples">他の radial-gradient の例</h3>
+
+<p>他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</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 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div>
+
+<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+
+<p>Gecko は <code>radial-gradient(circle gold,red)</code> のような放射グラデーションが動きそうで、 <code>circle</code> と <code>gold</code> との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が <code>radial-gradient()</code> 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの利用</a></li>
+ <li>他のグラデーション関数: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/ratio/index.html b/files/ja/web/css/ratio/index.html
new file mode 100644
index 0000000000..dcd59c98ab
--- /dev/null
+++ b/files/ja/web/css/ratio/index.html
@@ -0,0 +1,97 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/ratio
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>&lt;ratio&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、<a href="/en-US/docs/Web/CSS/@media/aspect-ratio">アスペクト比</a>を<a href="/en-US/docs/Web/CSS/Media_Queries">メディアクエリ</a>内で記述するために使用し、2つの単位のない値で比率を記述します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>メディアクエリ Level 3 では、<code>&lt;ratio&gt;</code> データ型は、厳密な正の {{cssxref("&lt;integer&gt;")}}、スラッシュ ('/', Unicode の <code>U+002F SOLIDUS</code>)、2 番目の厳密な正の {{cssxref("&lt;integer&gt;")}} の順に記述します。スラッシュの前後にはスペースを入れてもかまいません。最初の数値は幅を、2番目の数値は高さを表します。</p>
+
+<p>メディアクエリ Level 4 では、<code>&lt;ratio&gt;</code> データ型が更新され、厳密な正の {{cssxref("&lt;number&gt;")}}、スラッシュ ('/', Unicode の <code>U+002F SOLIDUS</code>)、2 番目の厳密な正の {{cssxref("&lt;number&gt;")}} の順に記述します。それに加えて、単独の {{cssxref("&lt;number&gt;")}} の値が許可されています。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Use_in_a_media_query" name="Use_in_a_media_query">メディアクエリでの使用</h3>
+
+<pre class="brush: css notranslate">@media screen and (min-aspect-ratio: 16/9) { ... }</pre>
+
+<h3 id="Common_aspect_ratios" name="Common_aspect_ratios">一般的なアスペクト比</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">比率</th>
+   <th scope="col">用例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>20 世紀における伝統的な TV 画面の形状です。</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>現代の「ワイド画面」の TV の形状です。</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code></td>
+   <td>1960 年代から用いられている最も一般的な映画スクリーンの形状です。</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code></td>
+   <td>「ワイドスクリーン」、アナモルフィックな映画スクリーンの形状です。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS4 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.ratio")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a></code> メディア特性</li>
+</ul>
diff --git a/files/ja/web/css/reference/index.html b/files/ja/web/css/reference/index.html
new file mode 100644
index 0000000000..a9bc022589
--- /dev/null
+++ b/files/ja/web/css/reference/index.html
@@ -0,0 +1,192 @@
+---
+title: CSS リファレンス
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - 'l10n:priority'
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>この <strong>CSS リファレンス</strong> は、すべての標準 <a href="/ja/docs/Web/CSS">CSS</a> プロパティ、<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>、<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>、<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>、<a href="/ja/docs/Web/CSS/CSS_Functions">関数記法</a>、<a href="/ja/docs/Web/CSS/At-rule">アット規則</a> の <a href="#Keyword_index">アルファベット順の索引</a> として利用できます。また、すべての CSS <a href="#Selectors">種類別セレクター</a> の一覧および <a href="#Concepts">重要な CSS の概念</a> の一覧もあります。また、簡単な <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM リファレンス</a> も含まれています。</p>
+
+<h2 id="Basic_rule_syntax" name="Basic_rule_syntax">基本的な規則と構文</h2>
+
+<h3 id="Style_rule_syntax" name="Style_rule_syntax">スタイル規則の構文</h3>
+
+<pre class="syntaxbox notranslate"><var>スタイル規則</var> <strong>::=</strong>
+    <var>セレクターリスト</var> <strong>{</strong>
+      <var>プロパティリスト</var>
+    <strong>}</strong>
+</pre>
+
+<p>... ここで</p>
+
+<pre class="syntaxbox notranslate"><var>セレクターリスト</var> <strong>::=</strong>
+    <var>セレクター</var>[<strong>:</strong><var>擬似クラス</var>] [<strong>::</strong><var>擬似要素</var>]
+    [<strong>,</strong> <var>セレクターリスト</var>]
+
+<var>プロパティリスト</var> <strong>::=</strong>
+    [<var>プロパティ</var> <strong>:</strong> <var>値</var>] [<strong>;</strong> <var>プロパティリスト</var>]
+</pre>
+
+<p>下記の <a href="#Selectors"><em>セレクター</em></a>、<a href="#Pseudo"><em>疑似クラス</em></a>、<em><a href="#Pseudo">疑似要素</a></em> の一覧を参照してください。 各指定<em>値</em>の構文は、各指定<em>プロパティ</em>に定義されたデータ型に依存します。</p>
+
+<h4 id="Style_rule_examples" name="Style_rule_examples">スタイル規則の例</h4>
+
+<pre class="brush: css notranslate">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>初心者レベルの CSS セレクター構文への入門については、 <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクターのガイド</a>をご覧ください。規則定義内での <a href="/ja/docs/Web/CSS/syntax">CSS 構文</a> エラーは、その規則全体を無効にするので十分に注意してください。無効な規則はブラウザーにより無視されます。 CSS 規則の定義はすべて (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">テキストベース</a> であり、DOM-CSS / CSSOM (規則管理システム) は <a href="https://www.w3.org/TR/cssom/#introduction">オブジェクトベース</a> なので注意してください。</p>
+
+<h3 id="At-rule_syntax" name="At-rule_syntax">アット規則構文</h3>
+
+<p>これには多くの異なる構造的な書式があるため、その各構文は <a href="/ja/docs/Web/CSS/At-rule">アット規則</a> のページをご覧ください。</p>
+
+<h2 id="Index" name="Index">索引</h2>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> この索引のプロパティ名には、CSS 標準の名前と異なる <a href="/ja/docs/Web/CSS/CSS_Properties_Reference">JavaScript 名</a> は含まれて<strong>いません</strong>。</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors" name="Selectors">セレクター</h2>
+
+<p>以下は様々な<a href="/ja/docs/Web/CSS/CSS_Selectors">セレクター</a>で、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。</p>
+
+<h3 id="Basic_selectors" name="Basic_selectors">基本セレクター</h3>
+
+<p><strong>基本セレクター</strong>は基礎的なセレクターです。これらは最も基本的なセレクターで、他のより複雑なセレクターを作成するために頻繁に組み合わせられます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a> <code><var>elementname</var></code></li>
+ <li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> <code>.<var>classname</var></code></li>
+ <li><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a> <code>#<var>idname</var></code></li>
+ <li><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a> <code>[<var>attr</var>=<var>value</var>]</code></li>
+</ul>
+
+<h3 id="Grouping_selectors" name="Grouping_selectors">グループ化セレクター</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a> <code><var>A</var>, <var>B</var></code></dt>
+ <dd><code><var>A</var></code> と <code><var>B</var></code> の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。</dd>
+</dl>
+
+<h3 id="Combinators" name="Combinators">結合子</h3>
+
+<p><ruby>結合子<rp> (</rp><rt>Combinators) </rt></ruby>は二つ以上の単純セレクターの関係、例えば「<code><var>A</var></code> は <code><var>B</var></code> の子である」や「<code><var>A</var></code> はis <code><var>B</var></code> の子孫である」などを確立するためのセレクターです。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a> <code><var>A</var> + <var>B</var></code></dt>
+ <dd><code><var>A</var></code> と <code><var>B</var></code> のそれぞれで選択された要素が同じ親を持ち、かつ <code><var>B</var></code> で選択された要素が <code><var>A</var></code> で選択された要素の水平的な直後にあることを指定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a> <code><var>A</var> ~ <var>B</var></code></dt>
+ <dd><code><var>A</var></code> と <code><var>B</var></code> のそれぞれで選択された要素が同じ親を共有しており、かつ <code><var>A</var></code> で選択された要素が <code><var>B</var></code> の前に — ただし直前である必要はありませんが — 来た場合を指定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a> <code><var>A</var> &gt; <var>B</var></code></dt>
+ <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code> で選択された要素の直接の子であるものを指定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a> <code><var>A</var> <var>B</var></code></dt>
+ <dd><code><var>B</var></code> で選択された要素のうち、 <code><var>A</var></code>, but is not necessarily a direct child.</dd>
+ <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> <code><var>A</var> || <var>B</var></code> {{Experimental_Inline}}</dt>
+ <dd><code><var>B</var></code> で指定された要素のうち、 <code><var>A</var></code> で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。</dd>
+</dl>
+
+<h3 id="Pseudo" name="Pseudo">擬似クラスと擬似要素</h3>
+
+<dl>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a> <code>:</code></dt>
+ <dd>選択された要素が特別な状態にあることを指定します。</dd>
+ <dt><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a> <code>::</code></dt>
+ <dd>HTML に含まれていないエンティティを表します。</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>関連情報:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 仕様書におけるセレクター</a>。</p>
+</div>
+
+<h2 id="Concepts" name="Concepts">概念</h2>
+
+<h3 id="Syntax_and_semantics" name="Syntax_and_semantics">構文と意味</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Syntax">CSS 構文</a></li>
+ <li><a href="/ja/docs/Web/CSS/At-rule">アット規則</a></li>
+ <li><a href="/ja/docs/Web/CSS/Cascade">カスケード</a></li>
+ <li><a href="/ja/docs/Web/CSS/Comments">コメント</a></li>
+ <li><a href="/ja/docs/Glossary/Descriptor_(CSS)">記述子</a></li>
+ <li><a href="/ja/docs/Web/CSS/inheritance">継承</a></li>
+ <li><a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a></li>
+ <li><a href="/ja/docs/Web/CSS/Specificity">優先度</a></li>
+ <li><a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値の種類</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Functions">CSS 関数記法</a></li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/actual_value">実効値</a></li>
+ <li><a href="/ja/docs/Web/CSS/computed_value">算出値</a></li>
+ <li><a href="/ja/docs/Web/CSS/initial_value">初期値</a></li>
+ <li><a href="/ja/docs/Web/CSS/resolved_value">解決値</a></li>
+ <li><a href="/ja/docs/Web/CSS/specified_value">指定値</a></li>
+ <li><a href="/ja/docs/Web/CSS/used_value">使用値</a></li>
+</ul>
+
+<h3 id="Layout" name="Layout">レイアウト</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a></li>
+ <li><a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a></li>
+ <li><a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a></li>
+ <li><a href="/ja/docs/Web/CSS/Layout_mode">レイアウトモード</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a></li>
+ <li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Visual_formatting_model">視覚書式設定モデル</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM" name="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Major_object_types" name="Major_object_types">主なオブジェクトの種類</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (セレクターとスタイル)</li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (スタイルのみ)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="Important_methods" name="Important_methods">重要なメソッド</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a> (<code style="white-space: nowrap;">-moz-</code> 接頭辞付き)</li>
+ <li><a href="/ja/docs/Web/CSS/WebKit_Extensions">WebKit CSS 拡張</a> (ほとんどが <code style="white-space: nowrap;">-webkit-</code> 接頭辞付き)</li>
+ <li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 拡張</a> (<code style="white-space: nowrap;">-ms-</code> 接頭辞付き)</li>
+</ul>
+
+<h2 id="External_Links" name="External_Links">外部リンク</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/CSS/#indices">CSS 目次 (w3.org)</a></li>
+</ul>
diff --git a/files/ja/web/css/repeat()/index.html b/files/ja/web/css/repeat()/index.html
new file mode 100644
index 0000000000..5a247377a9
--- /dev/null
+++ b/files/ja/web/css/repeat()/index.html
@@ -0,0 +1,157 @@
+---
+title: repeat()
+slug: Web/CSS/repeat()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Grid
+  - Function
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/repeat()
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><code><strong>repeat()</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。</span></p>
+
+<p>この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* &lt;track-repeat&gt; 値 */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* &lt;auto-repeat&gt; 値 */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* &lt;fixed-repeat&gt; 値 */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>正の整数で表される長さ。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <code>&lt;percentage&gt;</code> は <code>auto</code> として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。</dd>
+ <dt>{{cssxref("&lt;flex&gt;")}}</dt>
+ <dd>トラックのフレックス要素を明示している <code>fr</code> 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りのスペースを配分する。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>グリッドトラックにあるグリッドアイテムの最も大きい max-content を表す。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>グリッドトラックにあるグリッドアイテムの最も大きい min-content を表す。</dd>
+ <dt><code>auto</code></dt>
+ <dd>最大値としては、 <code>max-content</code> と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。</dd>
+ <dt><code>auto-fill</code></dt>
+ <dd>グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になる。各トラックは定義されているならば、最大トラック幅を調整する関数 (<code>grid-template-rows</code> または <code>grid-template-columns</code> を定義するために使用されるそれぞれ独立した値) として扱われる。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れる。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になる。その他の場合は、指定されたトラックリストは <code>1</code> 回のみ繰り返す。</dd>
+ <dt><code>auto-fit</code></dt>
+ <dd>
+ <p><code>auto-fill</code> と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)</p>
+
+ <p>折り畳まれたトラックは、 <code>0px</code>　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。</p>
+
+ <p>自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば <code>1px</code>) に切り下げます。</p>
+ </dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Specifying_grid_columns_using_repeat" name="Specifying_grid_columns_using_repeat">repeat() を使用したグリッド列の指</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    This item is 50 pixels wide.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item with flexible width.
+  &lt;/div&gt;
+  &lt;div&gt;
+    This item is 50 pixels wide.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item with flexible width.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Inflexible item of 100 pixels width.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}}</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("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.grid-template-columns.repeat")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの線ベースの配置</a></em></li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li>
+</ul>
diff --git a/files/ja/web/css/repeating-linear-gradient()/index.html b/files/ja/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..a34d03a051
--- /dev/null
+++ b/files/ja/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,166 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/repeating-linear-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>repeating-linear-gradient()</code> 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。</p>
+
+<p>他のグラデーションと同じく、線形反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
+
+<p><code>&lt;gradient&gt;</code> は CSS の <code>&lt;image&gt;</code> データ型に所属しますので、 <code>&lt;image&gt;</code> が使用できるところでのみ使用できます。このため、 <code>repeating-linear-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 45度方向に軸を延ばし、青で始め赤で終わり、
+   3回繰り返す反復グラデーション */
+repeating-linear-gradient(45deg, blue, red 33.3%);
+
+/* 右下から左上に延び、青で始め赤で終わり、
+   20px ごとに繰り返す反復グラデーション */
+repeating-linear-gradient(to left top, blue, red 20px);
+
+/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる
+   グラデーション。最後の色経由点が既定で 100% なので、
+   グラデーションは繰り返されない */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、
+   赤に戻るグラデーション */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>グラデーション線の開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd>
+ <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> の角度にそれぞれ対応します。他の値は角度に変換されます。</dd>
+ <dt>{{cssxref("&lt;angle&gt;")}}</dt>
+ <dd>グラデーション線の方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。 <code>0%</code> のパーセント値または <code>0</code> の長さは、グラデーションの先頭を表します。 <code>100%</code> の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
+ <dd>
+ <div class="note">
+ <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/ja/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+                            \---------------------------------/ \---------------/
+                              Definition of the gradient line   List of color stops
+
+where &lt;side-or-corner&gt; = [left | right] || [top | bottom]
+  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Zebra_stripes" name="Zebra_stripes">縞模様</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* 複数の色経由点の位置 */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Zebra_stripes', 120, 120)}}</p>
+
+<h3 id="Ten_repeating_horizontal_bars" name="Ten_repeating_horizontal_bars">10回繰り返す水平線</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}</p>
+
+<p>最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、10本の水平線に相当します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</p>
+</div>
+
+<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 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>他のグラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/repeating-radial-gradient()/index.html b/files/ja/web/css/repeating-radial-gradient()/index.html
new file mode 100644
index 0000000000..651c432c2b
--- /dev/null
+++ b/files/ja/web/css/repeating-radial-gradient()/index.html
@@ -0,0 +1,186 @@
+---
+title: repeating-radial-gradient()
+slug: Web/CSS/repeating-radial-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラデーション
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/repeating-radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>repeating-radial-gradient()</code></strong> 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。</p>
+
+<p>他のグラデーションと同じく、放射反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
+
+<p><code>&lt;gradient&gt;</code> は <code>&lt;image&gt;</code> データ型に属するため、 <code>&lt;image&gt;</code> が使用できるところでしか使用できません。このため、 <code>repeating-radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("&lt;color&gt;")}} データ型を使用するプロパティでは動作しません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央からのグラデーションで、
+   赤で始まり、青に変化し、緑で終わり、
+   それぞれ 30px ごとに色が繰り返される */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* 左上の角付近の楕円形のグラデーションで、
+   赤で始まり、緑に変化し、また戻り、
+   中央と右下の角の間で5回繰り返され、
+   中央と左上の角の間は1回だけ */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code>です。</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>グラデーションの形状です。 <code>circle</code> (グラデーションの形状が一定の半径の円の意味) か <code>ellipse</code> (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>キーワード</th>
+    <th>説明</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。</p>
+ </div>
+ </dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>色経由点の {{cssxref("&lt;color&gt;")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("&lt;percentage&gt;")}} または {{cssxref("&lt;length&gt;")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">repeating-radial-gradient(
+       [[ circle  || <a href="/ja/docs/CSS/length">&lt;length&gt;</a> ]                     [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
+        [ ellipse || [<a href="/ja/docs/CSS/length">&lt;length&gt;</a> | <a href="/ja/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2}] [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
+        [[ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>]? , |
+                                                     at <a href="/ja/docs/Web/CSS/position_value">&lt;position&gt;</a>   ,    &lt;color-stop-list&gt; )
+        \---------------------------------------------------------------/\-----------------/
+                  Contour, size and position of the ending shape          List of color stops
+
+where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+   and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+   and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+   and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+   and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Black_and_white_gradient" name="Black_and_white_gradient">白と黒のグラデーション</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}</p>
+
+<h3 id="Farthest-corner" name="Farthest-corner">最も遠い角</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red 0 5%, green 5% 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Farthest-corner', 120, 120)}}</p>
+
+<p>楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
+</div>
+
+<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 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>他のグラデーション関数: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/replaced_element/index.html b/files/ja/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..0f5d5526fc
--- /dev/null
+++ b/files/ja/web/css/replaced_element/index.html
@@ -0,0 +1,66 @@
+---
+title: 置換要素
+slug: Web/CSS/Replaced_element
+tags:
+  - CSS
+  - Reference
+  - 置換要素
+  - 配置
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> において、<strong>置換要素</strong>は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。</span></p>
+
+<p>もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 {{HTMLElement("iframe")}} のような一部の置換要素では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。</p>
+
+<p>CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがあることだけです。詳しい情報は{{anch("Controlling object position within the content box", "コンテンツボックス内のオブジェクト位置の制御")}}をご覧ください。</p>
+
+<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2>
+
+<p>一般的な置換要素は以下の通りです。</p>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
+
+<p>一部の要素は、特定の場合に限って置換要素として扱われます。</p>
+
+<ul>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>HTML 仕様書では {{HTMLElement("input")}} 要素も置換要素になることがあるとしており、これは <code>"image"</code> 型の {{HTMLElement("input")}} 要素が {{HTMLElement("img")}} と同様に置換要素であるためです。しかし、他のフォームコントロールは、他の型の {{HTMLElement("input")}} 要素も含め、明示的に非置換要素として挙げられています (仕様書では、プラットフォームに依存した既定のレンダリングを「ウィジェット」という用語で記述しています)。</p>
+
+<p>CSS の {{cssxref("content")}} プロパティを使用して挿入されるオブジェクトは<em>無名置換要素</em>です。 HTML のマークアップには存在しないので、「無名」です。</p>
+
+<h2 id="Using_CSS_with_replaced_elements" name="Using_CSS_with_replaced_elements">置換要素における CSS の使用</h2>
+
+<p>CSS はマージンの計算時や一部の <code>auto</code> 値の時など場合によって、特別に置換要素を扱います。</p>
+
+<p>なお、一部の置換要素は、すべてではありませんが、 {{cssxref("vertical-align")}} のように一部の CSS プロパティで使用される固有の寸法やベースラインの定義を持っていることがあります。置換要素のみが固有の寸法を持つことがあります。</p>
+
+<h3 id="Controlling_object_position_within_the_content_box" name="Controlling_object_position_within_the_content_box">コンテンツボックス内のオブジェクト位置の制御</h3>
+
+<p>置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは {{SpecName("CSS3 Images")}} 及び {{SpecName("CSS4 Images")}} 仕様書で定義されています。</p>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd>置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd>要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">HTML 仕様書</a></li>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ja/web/css/resize/index.html b/files/ja/web/css/resize/index.html
new file mode 100644
index 0000000000..ad5e111cc5
--- /dev/null
+++ b/files/ja/web/css/resize/index.html
@@ -0,0 +1,158 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>resize</code></strong> プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+
+<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>
+
+<pre class="brush: css">/* キーワード値 */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* グローバル値 */
+resize: inherit;
+resize: initial;
+resize: unset;</pre>
+
+<p><code>resize</code> プロパティは以下の挙げた単一のキーワード値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>ユーザーが要素の寸法を制御する方法を提供しません。</dd>
+ <dt><code>both</code></dt>
+ <dd>要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>要素はユーザーが寸法を変更できる仕組みを、<em>水平方向</em>について表示します。</dd>
+ <dt><code>vertical</code></dt>
+ <dd>要素はユーザーが寸法を変更できる仕組みを、<em>垂直方向</em>について表示します。</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>要素はユーザーが寸法を変更できる仕組みを、<em>ブロック方向</em>について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>要素はユーザーが寸法を変更できる仕組みを、<em>インライン方向</em>について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>resize</code> は以下の場合は適用されません。</p>
+
+<ul>
+ <li>インライン要素</li>
+ <li>{{cssxref("overflow")}} プロパティが <code>visible</code> に設定されたブロック要素</li>
+</ul>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Disabling_resizability_of_textareas" name="Disabling_resizability_of_textareas">テキストエリアの寸法の変更を無効化</h3>
+
+<p>多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 <code>resize</code> プロパティでこの動作を上書きすることができます。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">textarea {
+  resize: none; /* Disables resizability */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea&gt;Type some text here.&lt;/textarea&gt;</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p>
+
+<h3 id="任意の要素に対する_resize_の使用">任意の要素に対する resize の使用</h3>
+
+<p><code>resize</code> プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="resizable"&gt;
+  &lt;p class="resizable"&gt;
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  &lt;/p&gt;
+&lt;/div&gt;  </pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</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('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>block</code> と <code>inline</code> の値を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.resize")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/ja/web/css/resolution/index.html b/files/ja/web/css/resolution/index.html
new file mode 100644
index 0000000000..3cffaa63d7
--- /dev/null
+++ b/files/ja/web/css/resolution/index.html
@@ -0,0 +1,101 @@
+---
+title: <resolution>
+slug: Web/CSS/resolution
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/resolution
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;resolution&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a> で、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の <a href="/ja/docs/Web/CSS/@media/resolution">resolution</a> で使われ、出力端末のピクセル密度である、解像度を表します。</p>
+
+<p>画面では、長さは物理的な値ではなく、 <em>CSS</em> のインチ、センチメートル、またはピクセルと関連づけられます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;resolution&gt;</code> データ型は、厳密に正の {{cssxref("&lt;number&gt;")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。</p>
+
+<h3 id="Units" name="Units">単位</h3>
+
+<dl>
+ <dt><a id="dpi" name="dpi"><code>dpi</code></a></dt>
+ <dd><a href="https://en.wikipedia.org/wiki/Dots_per_inch">1 インチあたりのドット数</a> を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、<code>1dpi ≈ 0.39dpcm</code> です。</dd>
+ <dt><a id="dpcm" name="dpcm"><code>dpcm</code></a></dt>
+ <dd><a href="https://en.wikipedia.org/wiki/Dots_per_inch">センチメートルあたりのドット数</a> を表します。1 インチは 2.54 cm なので、<code>1dpcm ≈ 2.54dpi</code> です。</dd>
+ <dt><a id="dppx" name="dppx"><code>dppx</code></a></dt>
+ <dd>ピクセル (<code><a href="/ja/docs/Web/CSS/length#px">px</a></code>) あたりのドット数を表します。CSS の <code>in</code> と CSS の <code>px</code> の比率は 1:96 で固定なので、<code>1dppx</code> は <code>96dpi</code> と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。</dd>
+ <dt><a id="x" name="x"><code>x</code></a></dt>
+ <dd><code>dppx</code> の別名です。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注記:</strong> 仮に値 <code>0</code> に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると <code>0</code> は無効で、<code>0dpi</code>、<code>0dpcm</code>、<code>0dppx</code> のどれも表しません。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Use_in_a_media_query" name="Use_in_a_media_query">メディアクエリで使用する</h3>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }</pre>
+
+<h3 id="Valid_resolutions" name="Valid_resolutions">有効な解像度</h3>
+
+<pre>96dpi
+50.82dpcm
+3dppx
+</pre>
+
+<h3 id="Invalid_resolutions" name="Invalid_resolutions">無効な解像度</h3>
+
+<pre class="example-bad">72 dpi     数値と単位の間に空白は許可されていません。
+ten dpi    数値は10進数しか使えません。
+0          単位は必須です。
+</pre>
+
+<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('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td><code>x</code> 単位を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>dppx</code> 単位を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.types.resolution")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/@media/resolution">resolution</a> メディア特性</li>
+ <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの使用</a></li>
+</ul>
diff --git a/files/ja/web/css/resolved_value/index.html b/files/ja/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..3442a82d93
--- /dev/null
+++ b/files/ja/web/css/resolved_value/index.html
@@ -0,0 +1,39 @@
+---
+title: 解析値
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> プロパティの<strong>解析値</strong> は、{{domxref("Window.getComputedStyle", "getComputedStyle()")}}によって返される値です。</p>
+
+<p>ほとんどのプロパティでは<a href="/ja/docs/Web/CSS/computed_value">計算値</a>がそのまま解析値となりますが、古いプロパティ({{cssxref("width")}} と {{cssxref("height")}} を含む)では、代わりに<a href="/ja/docs/Web/CSS/used_value">使用値</a>が解析値となります。プロパティごとの詳細については、以下の仕様のリンクを参照してください。</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("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/right/index.html b/files/ja/web/css/right/index.html
new file mode 100644
index 0000000000..3b18fbb610
--- /dev/null
+++ b/files/ja/web/css/right/index.html
@@ -0,0 +1,143 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<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>
diff --git a/files/ja/web/css/rotate/index.html b/files/ja/web/css/rotate/index.html
new file mode 100644
index 0000000000..bf54017d55
--- /dev/null
+++ b/files/ja/web/css/rotate/index.html
@@ -0,0 +1,122 @@
+---
+title: rotate
+slug: Web/CSS/rotate
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Transforms
+translation_of: Web/CSS/rotate
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate</code></strong> プロパティは、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 <code>transform</code> の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+rotate: none;
+
+/* 角度値 */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* x, y, z 軸名と角度 */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* ベクトルと角度の値 */
+rotate: 1 1 1 90deg;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>角度値</dt>
+ <dd>{{CSSxRef("&lt;angle&gt;")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。<code>rotate()</code> (2次元回転) 関数と等価です。</dd>
+ <dt>x, y, z 軸と角度値</dt>
+ <dd>該当する要素を回転する軸の名前 (<code>"x"</code>, "<code>y</code>", "<code>z"</code>) と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code> (3次元回転) 関数と等価です。</dd>
+ <dt>ベクトルと角度値</dt>
+ <dd>要素を回転させたい直線を表す原点を中心としたベクトルを表す三つの数値 {{CSSxRef("&lt;number&gt;")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("&lt;angle&gt;")}} です。 <code>rotate3d()</code> (3次元回転) 関数と等価です。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>回転を適用しないことを表します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="rotate"&gt;Rotation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.rotate")}}</p>
diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.html
new file mode 100644
index 0000000000..8ab3d2224d
--- /dev/null
+++ b/files/ja/web/css/row-gap/index.html
@@ -0,0 +1,168 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - CSS グリッドレイアウト
+  - CSS フレックスボックス
+  - CSS プロパティ
+  - Reference
+  - row-gap
+translation_of: Web/CSS/row-gap
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>row-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<div class="note">
+<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>では、当初は <code>grid-row-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>row-gap</code> に置き換えられました。しかし、グリッドで <code>grid-row-gap</code> を実装していても <code>row-gap</code> を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;length&gt; 値 */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* &lt;percentage&gt; 値 */
+row-gap: 10%;
+
+/* Global values */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>行を隔てる溝の幅です。 {{CSSxRef("&lt;percentage&gt;")}} 値は要素の寸法に対する相対値です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5]">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p>
+
+<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-row-gap: 20px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</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 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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>
+
+<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
+
+<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
+
+<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li>
+ <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
+</ul>
diff --git a/files/ja/web/css/ruby-align/index.html b/files/ja/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..d12b41aa1b
--- /dev/null
+++ b/files/ja/web/css/ruby-align/index.html
@@ -0,0 +1,152 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ルビ
+  - Reference
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS の <code><strong>ruby-align</strong></code> プロパティは、ベースに対するさまざまなルビの配分を定義します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* グローバル値 */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>ルビをベーステキストの始点に揃えることを示すキーワードです。</dd>
+ <dt><code>center</code></dt>
+ <dd>ルビをベーステキストの中央に揃えることを示すキーワードです。</dd>
+ <dt><code>space-between</code></dt>
+ <dd>ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。</dd>
+ <dt><code>space-around</code></dt>
+ <dd>ルビの要素の範囲内に配分するよう、スペースを付加することを示すキーワードです。また、ルビの周囲にもスペースを付加します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この HTML を、<code>ruby-align</code> のそれぞれの値でレンダリングします。</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;確認用の長いテキスト&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;短いルビ&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Ruby_aligned_at_the_start_of_the_base_text" name="Ruby_aligned_at_the_start_of_the_base_text">ルビをベーステキストの始点に揃える</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;確認用の長いテキスト&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;短いルビ&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: start;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Ruby_aligned_at_the_center_of_the_base_text" name="Ruby_aligned_at_the_center_of_the_base_text">ルビをベーステキストの中央に揃える</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;確認用の長いテキスト&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;短いルビ&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: center;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_ruby_elements" name="Extra_space_distributed_between_ruby_elements">ルビ要素の範囲内にスペースを配分する</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;確認用の長いテキスト&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;短いルビ&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-between;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}</p>
+
+<h3 id="Extra_space_distributed_between_and_around_ruby_elements" name="Extra_space_distributed_between_and_around_ruby_elements">ルビ要素内および周囲にスペースを配分する</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;確認用の長いテキスト&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;短いルビ&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-around;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_elements", 180, 40)}}</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 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.ruby-align")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}</li>
+ <li>CSS のルビ関連プロパティ: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}</li>
+</ul>
diff --git a/files/ja/web/css/ruby-position/index.html b/files/ja/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..b2135adb09
--- /dev/null
+++ b/files/ja/web/css/ruby-position/index.html
@@ -0,0 +1,117 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS ルビ
+  - リファレンス
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS の <code><strong>ruby-position</strong></code> プロパティは、ベース要素に対するルビ要素の位置を定義します。要素の上方 (<code>over</code>)、下方 (<code>under</code>)、文字の間の右側 (<code>inter-character</code>) に配置できます。</p>
+
+<pre class="brush:css">/* キーワード値 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* グローバル値 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd><img alt="over の例" src="https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png" style="height: 31px; width: 77px;">ルビをメインテキストの上 (横書きの場合) または右 (縦書きの場合) に配置することを示すキーワードです。</dd>
+ <dt><code>under</code></dt>
+ <dd><img alt="under の例" src="https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png" style="height: 34px; width: 78px;">ルビをメインテキストの下 (横書きの場合) または左 (縦書きの場合) に配置することを示すキーワードです。</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>ルビをそれぞれの文字の間に配置することを示すキーワードです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この HTML は、 <code>ruby-position</code> のそれぞれの値でレンダリングします。</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Ruby_positioned_over_the_text" name="Ruby_positioned_over_the_text">テキストの上に配置したルビ</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Ruby_positioned_over_the_text", 100, 40)}}</p>
+
+<h3 id="Ruby_positioned_under_the_text" name="Ruby_positioned_under_the_text">テキストの下に配置したルビ</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>結果は以下のとおりです。</p>
+
+<p>{{EmbedLiveSample("Ruby_positioned_under_the_text", 100, 40)}}</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 Ruby', '#rubypos', 'ruby-position')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>HTML のルビ関連要素: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}}, {{HTMLElement("rtc")}}</li>
+ <li>CSS のルビ関連プロパティ: {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}</li>
+</ul>
diff --git a/files/ja/web/css/scale/index.html b/files/ja/web/css/scale/index.html
new file mode 100644
index 0000000000..7385f5cd6a
--- /dev/null
+++ b/files/ja/web/css/scale/index.html
@@ -0,0 +1,134 @@
+---
+title: scale
+slug: Web/CSS/scale
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Transforms
+  - 'recipe:css-property'
+translation_of: Web/CSS/scale
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scale</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して倍率変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 <code>transform</code> の値で変換関数を指定する実際の順序を思い出す手間を軽減します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+scale: none;
+
+/* １つの値 */
+/* 1より大きい値で要素を拡大 */
+scale: 2;
+/* 1より小さい値で要素を縮小 */
+scale: 0.5;
+
+/* ２つの値 */
+scale: 2 0.5;
+
+/* ３つの値 */
+scale: 2 0.5 2;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>１つの数値</dt>
+ <dd>該当する要素の拡大率を指定する {{CSSxRef("&lt;number&gt;")}} であり、 X 及び Y 軸で同じ倍率になります。 <code>scale()</code> (2D 倍率) 関数に１つの値を指定した場合と等価です。</dd>
+ <dt>２つの長さ/パーセント値</dt>
+ <dd>２つの {{CSSxRef("&lt;number&gt;")}} 値で、 2D 倍率における X 軸と Y 軸の拡大率を (それぞれ) 指定します。 <code>scale()</code> (2D 倍率) 関数に２つの値を指定した場合と等価です。</dd>
+ <dt>３つの長さ/パーセント値</dt>
+ <dd>３つの {{CSSxRef("&lt;number&gt;")}} 値で、 3D 倍率における X 軸と Y 軸と Z 軸の拡大率を (それぞれ) 指定します。 <code>translate3d()</code> (3D 倍率) 関数と等価です。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>拡大率が適用されないことを示します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Scaling_an_element_on_hover" name="Scaling_an_element_on_hover">上に乗った際の要素の拡大Scaling an element on hover</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Scaling_an_element_on_hover")}}</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("CSS Transforms 2", "#individual-transforms", "individual transforms")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scale")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref('translate')}}</li>
+ <li>{{cssxref('rotate')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
+
+<p>注: skew は独立した変形値ではありません</p>
diff --git a/files/ja/web/css/scaling_background_images/index.html b/files/ja/web/css/scaling_background_images/index.html
new file mode 100644
index 0000000000..93a268e1c6
--- /dev/null
+++ b/files/ja/web/css/scaling_background_images/index.html
@@ -0,0 +1,102 @@
+---
+title: 背景画像の拡大縮小
+slug: Web/CSS/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<p>CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">大きな画像をタイル状に配置する</h2>
+
+<p>1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。</p>
+
+<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p>
+
+<p>これは以下の CSS を使うことで達成されます。</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(fxlogo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。</p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">画像を引き伸ばす</h2>
+
+<p>以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>その結果はこのようになります。</p>
+
+<p><img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像を拡大する</h2>
+
+<p>この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。</p>
+
+<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特別な値の「contain」と「cover」</h2>
+
+<p>CSS の {{cssxref("background-size")}} には、 {{cssxref("&lt;length&gt;")}} の値の他に、 <code>contain</code> と <code>cover</code> の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。</p>
+
+<h3 id="contain" name="contain">contain</h3>
+
+<p>contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は　コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。</p>
+
+<div style="width: 100%; height: 200px; border: solid 2px;">
+<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p>
+</div>
+
+<p>上の例の CSS は以下のようなものです。</p>
+
+<pre class="brush: css; highlight:[4]">width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: contain;
+border: solid 2px;
+</pre>
+
+<h3 id="cover" name="cover">cover</h3>
+
+<p>cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。</p>
+
+<div style="width: 100%; height: 200px; border: solid 2px;">
+<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p>
+</div>
+
+<p>この例では以下の CSS を使用しています。</p>
+
+<pre class="brush: css; highlight:[4]">width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: cover;
+border: solid 2px;
+</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background")}}</li>
+</ul>
diff --git a/files/ja/web/css/scroll-behavior/index.html b/files/ja/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..8103e98b17
--- /dev/null
+++ b/files/ja/web/css/scroll-behavior/index.html
@@ -0,0 +1,133 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - CSSOM View
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/scroll-behavior
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>scroll-behavior</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ナビゲーションや CSSOM のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>なお、ユーザーが実行したスクロールなど、その他のスクロールはこのプロパティの影響を受けません。このプロパティがルート要素に指定された場合は、代わりにビューポートに適用されます。このプロパティが <code>body</code> 要素に指定された場合は、ビューポートには適用され<em>ません</em>。</p>
+
+<p>ユーザーエージェントは、このプロパティを無視することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* グローバル値 */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<p><code>scroll-behavior</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>スクロールするボックスは瞬時にスクロールします。</dd>
+ <dt><code>smooth</code></dt>
+ <dd>スクロールするボックスは、ユーザーエージェント定義のタイミング関数を使い、ユーザーエージェント定義の時間をかけて、円滑ににスクロールします。もし存在するなら、ユーザーエージェントはプラットフォームの慣例に従うべきです。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Setting_smooth_scroll_behavior" name="Setting_smooth_scroll_behavior">スクロールの動きをスムーズに設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample("Setting_smooth_scroll_behavior", "100%", 250) }}</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('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-behavior")}}</p>
diff --git a/files/ja/web/css/scroll-margin-bottom/index.html b/files/ja/web/css/scroll-margin-bottom/index.html
new file mode 100644
index 0000000000..4d2b2bcbaf
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-bottom/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-bottom
+slug: Web/CSS/scroll-margin-bottom
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-bottom
+translation_of: Web/CSS/scroll-margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-bottom</code> プロパティは、スクロールスナップ領域の下側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* グローバル値 */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーの下側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-bottom")}}</p>
diff --git a/files/ja/web/css/scroll-margin-inline-end/index.html b/files/ja/web/css/scroll-margin-inline-end/index.html
new file mode 100644
index 0000000000..919ec6c03f
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline-end/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-inline-end
+slug: Web/CSS/scroll-margin-inline-end
+tags:
+  - Advanced
+  - CSS
+  - NeedsExample
+  - Reference
+  - 上級者
+translation_of: Web/CSS/scroll-margin-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-inline-end</code> プロパティは、スクロールスナップ領域のインライン方向における末尾側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーのインライン方向における末尾側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-inline-end")}}</p>
diff --git a/files/ja/web/css/scroll-margin-inline-start/index.html b/files/ja/web/css/scroll-margin-inline-start/index.html
new file mode 100644
index 0000000000..e8329858b7
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline-start/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-inline-start
+slug: Web/CSS/scroll-margin-inline-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin-inline
+  - scroll-margin-inline-start
+translation_of: Web/CSS/scroll-margin-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-inline-start</code> プロパティは、スクロールスナップ領域のインライン方向における開始側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* グローバル値 */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーのインライン方向における先頭側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-inline-start")}}</p>
diff --git a/files/ja/web/css/scroll-margin-inline/index.html b/files/ja/web/css/scroll-margin-inline/index.html
new file mode 100644
index 0000000000..ce8b1db68a
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-inline/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-inline
+slug: Web/CSS/scroll-margin-inline
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-inline
+translation_of: Web/CSS/scroll-margin-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-inline</code> プロパティは、インライン方向の scroll-margin の個別指定を設定する一括指定プロパティです。</p>
+
+<p>scroll-margin 系のプロパティは、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em ;
+
+/* グローバル値 */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーの対応する辺からの距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-inline")}}</p>
diff --git a/files/ja/web/css/scroll-margin-left/index.html b/files/ja/web/css/scroll-margin-left/index.html
new file mode 100644
index 0000000000..262ad77a8d
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-left/index.html
@@ -0,0 +1,71 @@
+---
+title: scroll-margin-left
+slug: Web/CSS/scroll-margin-left
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Scroll margin left
+  - Web
+  - scroll-margin
+  - scroll-margin-left
+translation_of: Web/CSS/scroll-margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-left</code> プロパティは、スクロールスナップ領域の左側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* グローバル値 */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーの左側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-left")}}</p>
diff --git a/files/ja/web/css/scroll-margin-right/index.html b/files/ja/web/css/scroll-margin-right/index.html
new file mode 100644
index 0000000000..121d50a284
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-right/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-right
+slug: Web/CSS/scroll-margin-right
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-right
+translation_of: Web/CSS/scroll-margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-right</code> プロパティは、スクロールスナップ領域の右側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* グローバル値 */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーの右側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-right")}}</p>
diff --git a/files/ja/web/css/scroll-margin-top/index.html b/files/ja/web/css/scroll-margin-top/index.html
new file mode 100644
index 0000000000..a79d19eb93
--- /dev/null
+++ b/files/ja/web/css/scroll-margin-top/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin-top
+slug: Web/CSS/scroll-margin-top
+tags:
+  - CSS
+  - CSS Property
+  - CodingScripting
+  - Reference
+  - Web
+  - scroll-margin
+  - scroll-margin-top
+translation_of: Web/CSS/scroll-margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-margin-top</code> プロパティは、スクロールスナップ領域の上側のマージンを定義し、このボックスをスナップポートにスナップするために使用されます。スクロールスナップ領域は変換された境界ボックスによって定義され、四角形の囲みボックスを探して (スクロールコンテナーの座標空間における軸に合わせられ)、それから指定された外部距離が追加されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* グローバル値 */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length&gt;</var></code></dt>
+ <dd>スクロールコンテナーの上側の辺からみた外部の距離です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-margin-top")}}</p>
diff --git a/files/ja/web/css/scroll-margin/index.html b/files/ja/web/css/scroll-margin/index.html
new file mode 100644
index 0000000000..3097d93f26
--- /dev/null
+++ b/files/ja/web/css/scroll-margin/index.html
@@ -0,0 +1,64 @@
+---
+title: scroll-margin
+slug: Web/CSS/scroll-margin
+tags:
+  - CSS
+  - Reference
+  - scroll-margin
+translation_of: Web/CSS/scroll-margin
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scroll-margin</code></strong> プロパティは一括指定プロパティであり、すべての個別指定の <code>scroll-margin</code> プロパティに対して、ちょうど <code>margin</code> プロパティが個別指定の <code>margin-*</code> に値を割り当てるように、値を割り当てます。</p>
+
+<p><code>scroll-margin</code> の値はこのボックスをスナップポートに割り当てるために使用されるスクロールスナップ領域の定義の張り出し部分を表します。スクロールスナップ領域は、変換された境界ボックスを取り、その矩形の境界ボックス (スクロールコンテナーの座標空間内で軸方向に配置) を割り当てて、指定された張り出し部分を追加することによって決定されます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* グローバル値 */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>スクロールコンテナーの辺からの張り出し部分です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-margin")}}</p>
diff --git a/files/ja/web/css/scroll-padding-block-end/index.html b/files/ja/web/css/scroll-padding-block-end/index.html
new file mode 100644
index 0000000000..a088012aff
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-end
+slug: Web/CSS/scroll-padding-block-end
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - 'recipe:css-property'
+  - scroll-padding-block
+  - scroll-padding-block-end
+translation_of: Web/CSS/scroll-padding-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-block-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+scroll-padding-block-end: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* グローバル値 */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートのブロック方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-padding-block-end")}}</p>
diff --git a/files/ja/web/css/scroll-padding-block-start/index.html b/files/ja/web/css/scroll-padding-block-start/index.html
new file mode 100644
index 0000000000..ca9de2a0bd
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block-start/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-block-start
+slug: Web/CSS/scroll-padding-block-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-padding-block
+  - scroll-padding-block-start
+translation_of: Web/CSS/scroll-padding-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-block-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のブロック方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-block-start: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* グローバル値 */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートのブロック方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-block-start")}}</p>
diff --git a/files/ja/web/css/scroll-padding-block/index.html b/files/ja/web/css/scroll-padding-block/index.html
new file mode 100644
index 0000000000..bd02946514
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-block/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-block
+slug: Web/CSS/scroll-padding-block
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Property
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-block
+translation_of: Web/CSS/scroll-padding-block
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-block</code> プロパティは、ブロック軸の scroll-padding 個別指定を設定する一括指定プロパティです。</p>
+
+<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、作者は他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-block: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* グローバル値 */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの対応する辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-block")}}</p>
diff --git a/files/ja/web/css/scroll-padding-bottom/index.html b/files/ja/web/css/scroll-padding-bottom/index.html
new file mode 100644
index 0000000000..e0fd1afbf2
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-bottom/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-bottom
+slug: Web/CSS/scroll-padding-bottom
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-bottom
+translation_of: Web/CSS/scroll-padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-bottom</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の下のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-bottom: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* グローバル値 */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの下辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-bottom")}}</p>
diff --git a/files/ja/web/css/scroll-padding-inline-end/index.html b/files/ja/web/css/scroll-padding-inline-end/index.html
new file mode 100644
index 0000000000..86a5891f2f
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline-end/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-inline-end
+slug: Web/CSS/scroll-padding-inline-end
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-end
+translation_of: Web/CSS/scroll-padding-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-inline-end</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における末尾側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-inline-end: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートのインライン方向の末尾側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-inline-end")}}</p>
diff --git a/files/ja/web/css/scroll-padding-inline-start/index.html b/files/ja/web/css/scroll-padding-inline-start/index.html
new file mode 100644
index 0000000000..108e325ef5
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline-start/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-inline-start
+slug: Web/CSS/scroll-padding-inline-start
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-start
+translation_of: Web/CSS/scroll-padding-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-inline-start</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のインライン方向における先頭側のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-inline-start: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* グローバル値 */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートのインライン方向の先頭側からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-inline-start")}}</p>
diff --git a/files/ja/web/css/scroll-padding-inline/index.html b/files/ja/web/css/scroll-padding-inline/index.html
new file mode 100644
index 0000000000..80b6f84804
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline
+slug: Web/CSS/scroll-padding-inline
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+  - scroll-padding-inline
+  - scroll-padding-inline-end
+  - scroll-padding-inline-start
+translation_of: Web/CSS/scroll-padding-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-inline</code> プロパティは、インライン方向の scroll-padding の個別指定を設定する一括指定プロパティです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>scroll-padding 系のプロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-inline: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* グローバル値 */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの対応する辺からのオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントによって特定されます。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合を検出して他のことを行うことができます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力してくださるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-inline")}}</p>
diff --git a/files/ja/web/css/scroll-padding-left/index.html b/files/ja/web/css/scroll-padding-left/index.html
new file mode 100644
index 0000000000..fbd13252c2
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-left/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-left
+slug: Web/CSS/scroll-padding-left
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - scroll-padding
+  - scroll-padding-left
+translation_of: Web/CSS/scroll-padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-left</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>の左のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-left: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* グローバル値 */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの左辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-left")}}</p>
diff --git a/files/ja/web/css/scroll-padding-right/index.html b/files/ja/web/css/scroll-padding-right/index.html
new file mode 100644
index 0000000000..908780a908
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-right/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-right
+slug: Web/CSS/scroll-padding-right
+tags:
+  - CSS
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-right
+translation_of: Web/CSS/scroll-padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-right</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-right: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* グローバル値 */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-right")}}</p>
diff --git a/files/ja/web/css/scroll-padding-top/index.html b/files/ja/web/css/scroll-padding-top/index.html
new file mode 100644
index 0000000000..10258d7eb3
--- /dev/null
+++ b/files/ja/web/css/scroll-padding-top/index.html
@@ -0,0 +1,74 @@
+---
+title: scroll-padding-top
+slug: Web/CSS/scroll-padding-top
+tags:
+  - CSS
+  - Reference
+  - Web
+  - scroll-padding
+  - scroll-padding-top
+translation_of: Web/CSS/scroll-padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-padding-top</code> プロパティは、スクロールポートの<dfn>最適表示領域</dfn>のオフセットを定義します。ユーザーのビュー内でものを配置するためのターゲット領域として使用される領域です。これにより、他のコンテンツ (固定位置のツールバーやサイドバーなど) によって隠されているスクロールポートの領域を除外したり、単にターゲット要素とスクロールポートの端との間により多くの余裕を持たせたりすることができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-padding-top: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* グローバル値 */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>&lt;length-percentage&gt;</var></code></dt>
+ <dd>スクロールポートの上辺からの内側のオフセットで、有効な長さまたはパーセント値です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットはユーザーエージェントが決定します。これは一般に 0px になりますが、ゼロ以外の値がもっと適切である場合をユーザーエージェントが検出して、他の値を採用することもできます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-padding-top")}}</p>
diff --git a/files/ja/web/css/scroll-padding/index.html b/files/ja/web/css/scroll-padding/index.html
new file mode 100644
index 0000000000..f1cfd2d44c
--- /dev/null
+++ b/files/ja/web/css/scroll-padding/index.html
@@ -0,0 +1,88 @@
+---
+title: scroll-padding
+slug: Web/CSS/scroll-padding
+tags:
+  - CSS
+  - CSS Property
+  - 'recipe:css-shorthand-property'
+  - scroll-snap
+translation_of: Web/CSS/scroll-padding
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scroll-padding</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素のすべての辺にに一度にスクロールパディングを設定します。 {{cssxref("padding")}} プロパティで要素のパディングを設定するのとよく似ています。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>scroll-padding-*</code> プロパティは、スクロールポートの<dfn>最適な表示領域</dfn>のオフセットを定義します。これにより、スクロールポートの中で他のコンテンツ (固定配置されたツールバーやサイドバーなど) に隠れてしまう領域を除外したり、ターゲット要素とスクロールポートの縁の間に余裕を持たせたりすることができます。</p>
+
+<h2 id="Constituent_properties" name="Constituent_properties">構成するプロパティ</h2>
+
+<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+
+<ul>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+scroll-padding: auto;
+
+/* &lt;length&gt; 値 */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* グローバル値 */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length-percentage&gt;")}}</dt>
+ <dd>スクロールポートの対応する縁からの内側へのオフセットを、有効な {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} として指定します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>オフセットがユーザーエージェントによって決定されます。これは一般的には <code>0px</code> になりますが、ゼロ以外の値がより適切であれば、ユーザエージェントは自由に検出して他の値を取ることができます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-padding")}}</p>
diff --git a/files/ja/web/css/scroll-snap-align/index.html b/files/ja/web/css/scroll-snap-align/index.html
new file mode 100644
index 0000000000..43896d458d
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-align/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-snap-align
+slug: Web/CSS/scroll-snap-align
+tags:
+  - Advanced
+  - CSS
+  - Example
+  - NeedsLiveSample
+  - Reference
+  - 上級者
+translation_of: Web/CSS/scroll-snap-align
+---
+<div>{{CSSRef}}</div>
+
+<p><code>scroll-snap-align</code> プロパティは、ボックスのスナップ位置を、そのスナップコンテナーの (配置コンテナーとしての) スナップポート内における (配置主体としての) スナップ領域の配置として指定します。2つの値は、それぞれブロック軸とインライン軸内のスナップ位置合わせを指定します。値が1つだけ指定された場合、2番目の値は同じ値を既定値とします。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+scroll-snap-align: none;
+scroll-snap-align: start end; /* 2つの値を指定すると、1番目がブロック、2番目がインラインとなる */
+scroll-snap-align: center;
+
+/* グローバル値 */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>このボックスでは、その軸のスナップ位置を定義しません。</dd>
+ <dt><code>start</code></dt>
+ <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の先頭位置がこの軸のスナップ位置になります。</dd>
+ <dt><code>end</code></dt>
+ <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の末尾位置がこの軸のスナップ位置になります。</dd>
+ <dt><code>center</code></dt>
+ <dd>このスクロールコンテナーのスナップポートの中で、このボックスのスクロールスナップ領域の中央位置がこの軸のスナップ位置になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="blockIndicator warning">
+<p>Safari は現在のところ、値2つの構文が誤った順になっており、1番目の値がインラインで2番目の値がブロックになっています。 <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">バグ #191865</a> を参照してください。</p>
+</div>
+
+<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("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-snap-align")}}</p>
diff --git a/files/ja/web/css/scroll-snap-coordinate/index.html b/files/ja/web/css/scroll-snap-coordinate/index.html
new file mode 100644
index 0000000000..45bac430de
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-coordinate/index.html
@@ -0,0 +1,156 @@
+---
+title: scroll-snap-coordinate
+slug: Web/CSS/scroll-snap-coordinate
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Deprecated
+  - Reference
+  - scroll-snap-coordinate
+translation_of: Web/CSS/scroll-snap-coordinate
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-coordinate</code></strong> プロパティは、このプロパティは、最も近い祖先のスクロールコンテナーの {{cssxref("scroll-snap-destination")}} に配置される要素内の X 座標と Y 座標の位置をそれぞれの軸で定義します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+scroll-snap-coordinate: none;
+
+/* &lt;position&gt; 値 */
+scroll-snap-coordinate: 50px 50px;                   /* 単一の座標 */
+scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 複数の座標 */
+
+/* グローバル値 */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;</pre>
+
+<p>要素が変形されていた場合は、スナップ座標はそのように変換されるので、スナップ点の配置は要素が表示された時に行われます。</p>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>要素がスナップ点を提供しないことを示します。</dd>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>スナップ座標を要素の境界ボックスの開始側の辺からのオフセットで示します。それぞれの組は、最初の値がスナップ座標の X 座標で、二番目の値は Y 座標です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 &gt; div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 &gt; div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 &gt; div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87ccea;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", "170")}}</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("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-snap-coordinate")}}</p>
diff --git a/files/ja/web/css/scroll-snap-destination/index.html b/files/ja/web/css/scroll-snap-destination/index.html
new file mode 100644
index 0000000000..8b652a802a
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-destination/index.html
@@ -0,0 +1,148 @@
+---
+title: scroll-snap-destination
+slug: Web/CSS/scroll-snap-destination
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Deprecated
+  - Reference
+translation_of: Web/CSS/scroll-snap-destination
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-destination</code></strong> プロパティは、スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}内の要素のスナップポイントが配置される X および Y 座標の位置を定義します。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;position&gt; 値 */
+scroll-snap-destination: 400px 600px;
+
+/* グローバル値 */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>スクロールコンテナーの視覚的なビューポートの先頭側の端からのスナップ距離のオフセットを指定します。最初の値はスナップ距離の X 座標、二番目の値は Y 座標です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;At coordinate (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}</pre>
+
+<div>{{EmbedLiveSample("Example", "100%", "170")}}</div>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.properties.scroll-snap-destination")}}</div>
diff --git a/files/ja/web/css/scroll-snap-stop/index.html b/files/ja/web/css/scroll-snap-stop/index.html
new file mode 100644
index 0000000000..25ba842a38
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-stop/index.html
@@ -0,0 +1,226 @@
+---
+title: scroll-snap-stop
+slug: Web/CSS/scroll-snap-stop
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - Reference
+  - scroll-snap-stop
+  - ウェブ
+translation_of: Web/CSS/scroll-snap-stop
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scroll-snap-stop</code></strong> プロパティは、スクロールコンテナーが可能なスナップ位置を「通り過ぎる」ことを許可するかどうかを定義します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* グローバル値 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>スクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールされた時、可能なスナップ位置を「通り過ぎる」ことがあります。</dd>
+ <dt><code>always</code></dt>
+ <dd>スクロールコンテナーは可能なスナップ位置を「通り過ぎる」ことはありません。最初の要素のスナップ位置にスナップします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は {{cssxref("scroll-snap-type")}} から複製したものに多少の修正を加えたものです。</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR &lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Proximity LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mandatory RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Proximity RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "1630")}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scroll-snap-stop")}}</p>
diff --git a/files/ja/web/css/scroll-snap-type/index.html b/files/ja/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..06c6161a90
--- /dev/null
+++ b/files/ja/web/css/scroll-snap-type/index.html
@@ -0,0 +1,246 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+tags:
+  - CSS
+  - CSS スクロールスナップ
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scroll-snap-type</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、スナップ点が存在する場合にスクロールコンテナーにどれだけ厳密にスナップ点を強制するかを設定します。</p>
+
+<p>スナップ点へ強制するために使用する詳細なアニメーションや力学の指定はこのプロパティでは扱わず、代わりにユーザーエージェントに委ねられます。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* 任意の mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* など */
+
+/* グローバル値 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>このスクロールコンテナーの視覚的な{{Glossary("viewport", "ビューポート")}}がスクロールする時は、スナップ点を無視しなければなりません。</dd>
+ <dt><code>x</code></dt>
+ <dd>スクロールコンテナーは水平軸のみで、スナップ位置に合わせられます。</dd>
+ <dt><code>y</code></dt>
+ <dd>スクロールコンテナーは垂直軸のみで、スナップ位置に合わせられます。</dd>
+ <dt><code>block</code></dt>
+ <dd>スクロールコンテナーはブロック軸のみで、スナップ位置に合わせられます。</dd>
+ <dt><code>inline</code></dt>
+ <dd>スクロールコンテナーはインライン軸のみで、スナップ位置に合わせられます。</dd>
+ <dt><code>both</code></dt>
+ <dd>スクロールコンテナーは両方の軸で、個別にスナップ位置に合わせられます (それぞれの軸で異なる要素に位置が合わせられる可能性があります)。</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければスナップ点に合わせられます。これはスクロールアクションが終了した際に、可能であればその点にはまるということを意味しています。内容が追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されます。</dd>
+ <dt><code>proximity</code></dt>
+ <dd>このスクロールコンテナーの視覚的なビューポートは、現在スクロール中でなければ、ユーザーエージェントのスクロール引数を考慮しつつスナップ点に載るよう動作する可能性があります。コンテンツが追加、移動、削除、リサイズされた場合、スクロール量のオフセットは、そのスナップ点に載り続けるよう調整されることがあります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html">&lt;div class="holster"&gt;
+&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css">/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "1630")}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.scroll-snap-type")}}</p>
diff --git a/files/ja/web/css/scrollbar-color/index.html b/files/ja/web/css/scrollbar-color/index.html
new file mode 100644
index 0000000000..d4367e769e
--- /dev/null
+++ b/files/ja/web/css/scrollbar-color/index.html
@@ -0,0 +1,123 @@
+---
+title: scrollbar-color
+slug: Web/CSS/scrollbar-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+  - scrollbar-color
+  - スクロールバー
+translation_of: Web/CSS/scrollbar-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scrollbar-color</code></strong> プロパティは、スクロールバーのトラックとつまみの色を設定します。</span></p>
+
+<p><strong>トラック</strong>はスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。</p>
+
+<p><strong>つまみ</strong>はスクロールバーの動く部分で、ふつうはトラックの上を動きます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</div>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* &lt;color&gt; 値 */
+scrollbar-color: rebeccapurple green;   /* 二つの有効な色。
+一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
+
+/* グローバル値 */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;scrollbar-color&gt;</code></dt>
+ <dd>スクロールバーの色を定義します。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。</td>
+   </tr>
+   <tr>
+    <td><code>dark</code></td>
+    <td>暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。</td>
+   </tr>
+   <tr>
+    <td><code>light</code></td>
+    <td>明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。</td>
+   </tr>
+   <tr>
+    <td><code>&lt;color&gt; &lt;color&gt;</code></td>
+    <td>最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>メモ</strong>: ユーザーエージェントはビューポートのルート要素に、何らかの <code>scrollbar-color</code> の値を適用しなければなりません。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css notranslate">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<div>{{EmbedLiveSample("Example")}}</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>scrollbar-color</code> プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1</a> を参照してください。</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("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
diff --git a/files/ja/web/css/scrollbar-width/index.html b/files/ja/web/css/scrollbar-width/index.html
new file mode 100644
index 0000000000..441af136f1
--- /dev/null
+++ b/files/ja/web/css/scrollbar-width/index.html
@@ -0,0 +1,130 @@
+---
+title: scrollbar-width
+slug: Web/CSS/scrollbar-width
+tags:
+  - CSS
+  - CSS Property
+  - CSS スクロールバー
+  - CSS プロパティ
+  - Reference
+  - css scrollbars
+  - 'recipe:css-property'
+  - scrollbar-width
+translation_of: Web/CSS/scrollbar-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scrollbar-width</code></strong> プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* キーワード値 */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* グローバル値 */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>&lt;scrollbar-width&gt;</var></dt>
+ <dd>スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>プラットフォーム既定のスクロールバーの幅です。</td>
+   </tr>
+   <tr>
+    <td><code>thin</code></td>
+    <td>プラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。</td>
+   </tr>
+   <tr>
+    <td><code>none</code></td>
+    <td>スクロールバーが表示されませんが、要素はスクロール可能です。</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>注</strong>: ユーザーエージェントは、ビューポートのルート要素に何らかの <code>scrollbar-width</code> の値を設定する必要があります。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css notranslate">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>このプロパティは注意して使用してください。 — <code>scrollbar-width</code> を <code>thin</code> または <code>none</code> に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。</p>
+
+<p>WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.1_%E2%80%94_Keyboard_Accessible_Make_all_functionality_available_from_a_keyboard">MDN WCAG の理解、ガイドライン 2.1 の説明</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.5_Input_Modalities_Make_it_easier_for_users_to_operate_functionality_through_various_inputs_beyond_keyboard.s/">MDN WCAG の理解、ガイドライン 2.5 の説明</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard">Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1</a></li>
+ <li><a class="external" href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" rel="noopener">Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.scrollbar-width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+</ul>
diff --git a/files/ja/web/css/selector_list/index.html b/files/ja/web/css/selector_list/index.html
new file mode 100644
index 0000000000..d98542e8d1
--- /dev/null
+++ b/files/ja/web/css/selector_list/index.html
@@ -0,0 +1,101 @@
+---
+title: セレクターリスト
+slug: Web/CSS/Selector_list
+tags:
+  - CSS
+  - Selector
+  - Selector Lists
+  - Selectors
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <ruby><strong>セレクターリスト</strong><rp> (</rp><rt>selector list</rt><rp>)</rp></ruby> (<code>,</code>) は，すべての一致するノードを選択します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* すべての一致する要素を選択 */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>スタイルシートの大きさを縮小するために、グループセレクターをカンマ区切りのリストにすることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">element, element, element { <em>style properties</em> }</pre>
+
+<h2 id="事例">事例</h2>
+
+<h3 id="Single_Line_Grouping" name="Single_Line_Grouping">単一行のグループ化</h3>
+
+<p>カンマ区切りのリストを使用して単一行にしたグループ化セレクターです。</p>
+
+<pre class="brush: css notranslate">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="Multi_Line_Grouping" name="Multi_Line_Grouping">複数行のグループ化</h3>
+
+<p>カンマ区切りのリストを使用して複数行にしたグループ化セレクターです。</p>
+
+<pre class="brush: css notranslate">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="Selector_list_invalidation" name="Selector_list_invalidation">セレクターリストの無効化</h3>
+
+<p>セレクターリストを使用する欠点は、以下のものが等価ではないことです。</p>
+
+<pre class="brush: css notranslate">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css notranslate">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>これは、セレクターリスト内に未対応のセレクターが一つでもあった場合は、規則全体が無効化されてしまうためです。</p>
+
+<p>この対策方法としては、 {{CSSxRef(":is", ":is()")}} セレクターを使用すれば、単純に引数内の無効なセレクターを無視しますが、 {{CSSxRef(":is", ":is()")}} の詳細度の計算方法の影響で、すべてのセレクターの重みが同じ詳細度になります。</p>
+
+<pre class="brush: css notranslate">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css notranslate">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
+
+<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("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>「セレクターリスト」に改名</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.list")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>The {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 擬似クラスは、セレクターリストの無効化の古い間違いを起こしません。</li>
+</ul>
diff --git a/files/ja/web/css/shape-image-threshold/index.html b/files/ja/web/css/shape-image-threshold/index.html
new file mode 100644
index 0000000000..fe262be09a
--- /dev/null
+++ b/files/ja/web/css/shape-image-threshold/index.html
@@ -0,0 +1,133 @@
+---
+title: shape-image-threshold
+slug: Web/CSS/shape-image-threshold
+tags:
+  - Boundaries
+  - CSS
+  - CSS Property
+  - CSS Shapes
+  - Float Area
+  - Opacity
+  - Property
+  - Reference
+  - Shape
+  - 'recipe:css-property'
+  - shape-image-threshold
+translation_of: Web/CSS/shape-image-threshold
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;number&gt; 値 */
+shape-image-threshold: 0.7;
+
+/* グローバル値 */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;alpha-value&gt;")}}</dt>
+ <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3>
+
+<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+
+&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[9] notranslate">#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}</pre>
+
+<p>シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。</p>
+
+<p>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</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('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.shape-image-threshold")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+</ul>
diff --git a/files/ja/web/css/shape-margin/index.html b/files/ja/web/css/shape-margin/index.html
new file mode 100644
index 0000000000..01ca907161
--- /dev/null
+++ b/files/ja/web/css/shape-margin/index.html
@@ -0,0 +1,125 @@
+---
+title: shape-margin
+slug: Web/CSS/shape-margin
+tags:
+  - CSS
+  - CSS シェイプ
+  - CSS プロパティ
+  - Reference
+  - float
+  - margin
+  - shape-margin
+  - シェイプ
+  - プロパティ
+  - 境界
+  - 浮動領域
+translation_of: Web/CSS/shape-margin
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>shape-margin</code></strong> プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>マージンで、シェイプ (<strong>浮動要素</strong>) の縁と周囲のコンテンツとの間隔を調整することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* &lt;percentage&gt; 値 */
+shape-margin: 60%;
+
+/* グローバル値 */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>シェイプのマージンを {{cssxref("&lt;length&gt;")}} 値又は要素の内包ブロックの幅に対する {{cssxref("&lt;percentage&gt;")}} で設定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+&lt;div class="shape"&gt;&lt;/div&gt;
+We are not quite sure of any one thing in biology; our knowledge of geology
+is relatively very slight, and the economic laws of society are
+uncertain to every one except some individual who attempts to set them
+forth; but before the world was fashioned the square on the hypotenuse
+was equal to the sum of the squares on the other two sides of a right
+triangle, and it will be so after this world is dead; and the inhabitant
+of Mars, if he exists, probably knows its truth as we know it.&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 500, 250)}}</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('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.shape-margin")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html
new file mode 100644
index 0000000000..5691317b29
--- /dev/null
+++ b/files/ja/web/css/shape/index.html
@@ -0,0 +1,81 @@
+---
+title: <shape>
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/shape
+---
+<div>{{CSSRef}}</div>
+
+<p><code>&lt;shape&gt;</code> <a href="/ja/docs/CSS" title="CSS">CSS</a> データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong>  <code>&lt;shape&gt;</code> and <code>rect()</code> <span class="tlid-translation translation" lang="ja"><span title="">は廃止された</span></span>{{cssxref("clip")}}<span class="tlid-translation translation" lang="ja"><span title="">と連動しますが、</span></span> {{cssxref("clip-path")}}が支持されました<span class="tlid-translation translation" lang="ja"><span title="">。</span> <span title="">可能であれば、代わりに</span></span><code>clip-path</code><span class="tlid-translation translation" lang="ja"><span title="">と</span></span>{{cssxref("&lt;basic-shape&gt;")}}<span class="tlid-translation translation" lang="ja"><span title="">データ型を使用してください。</span></span></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rect()</code> 関数記法は、矩形の領域を作ります。</p>
+
+<h3 id="Syntax" name="Syntax"><code>rect()</code> 関数</h3>
+
+<pre class="syntaxbox">rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>)
+</pre>
+
+<p>引数は次の長さを表します: <img class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right; height: 334px; width: 336px;"></p>
+
+<dl style="margin-left: 40px;">
+ <dt><em>top</em></dt>
+ <dd>要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("&lt;length&gt;")}}</dd>
+ <dt><em>right</em></dt>
+ <dd>要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("&lt;length&gt;")}}</dd>
+ <dt><em>bottom</em></dt>
+ <dd>要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("&lt;length&gt;")}}。</dd>
+ <dt><em>left</em></dt>
+ <dd>要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("&lt;length&gt;")}}</dd>
+</dl>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>矩形の <code>&lt;shape&gt;</code> CSS データ型の値は、アニメーション用に補間可能です。<code>top</code>、<code>right</code>、<code>bottom</code> 、<code>left</code> のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた <a href="/ja/docs/CSS/timing-function" title="timing-function">timing function</a> で決められます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:css">img.clip04 {
+  clip: rect(10px, 20px, 20px, 10px);
+}</pre>
+
+<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('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>{{cssxref("clip")}} プロパティと同時に定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("css.types.shape")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連 CSS プロパティ: {{Cssxref("clip")}}</li>
+ <li><a href="/en-US/CSS/-moz-image-rect" title="CSS/-moz-image-rect"><code>-moz-image-rect()</code></a> 関数は <code>rect()</code>と似た座標を使います</li>
+</ul>
diff --git a/files/ja/web/css/shorthand_properties/index.html b/files/ja/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..36faf7a5d5
--- /dev/null
+++ b/files/ja/web/css/shorthand_properties/index.html
@@ -0,0 +1,166 @@
+---
+title: 一括指定プロパティ
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Reference
+  - Shorthand Properties
+  - properties
+  - shorthand
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{cssref}}</div>
+
+<p class="summary"><strong><dfn>一括指定プロパティ</dfn></strong> (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。</p>
+
+<p>CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 {{cssxref("background")}} プロパティは {{cssxref("background-color")}}、 {{cssxref("background-image")}}、 {{cssxref("background-repeat")}}、{{cssxref("background-position")}} の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の {{cssxref("font")}} を使用して定義することができ、ボックスの周囲のマージンは一括指定の {{cssxref("margin")}} を使用して定義することができます。</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">注意するべき場合</h2>
+
+<p>一括指定プロパティはとても便利なものですが、使用するにあたって注意しておかなければならない場合が若干あります。</p>
+
+<ol>
+ <li>その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を<strong>上書き</strong>することになります。つまり、
+
+  <pre class="brush:css notranslate">background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+</pre>
+  とすると背景色を <code>red</code> に設定するのではなく、2番目のルールが優先されて {{cssxref("background-color")}} の既定値である <code>transparent</code> となります。</li>
+ <li>継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 <code>inherit</code> キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、1つ1つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで <code>inherit</code> キーワードを指定するしかありません。</li>
+ <li>一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。
+  <ol>
+   <li>ボックスの境界に関するプロパティを扱う一括指定 ({{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}) は、それぞれの辺を表すために、一貫して1～4つの値の構文を使用します。
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>値1つの構文</em>: <code>border-width: 1em</code> — 1つの値ですべての辺を表します</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>値2つの構文</em>: <code>border-width: 1em 2em</code> — 最初の値は垂直、すなわち上下の辺を、2番目の値は水平、すなわち左右の辺を表します。</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>値3つの構文</em>: <code>border-width: 1em 2em 3em</code> — 最初の値は上辺、 2番目の値は水平、すなわち左右の辺、3番目の値は下辺を表します。</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>値4つの構文</em>: <code>border-width: 1em 2em 3em 4em</code> — 4つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは <em>trouble</em> の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 <code>1em</code> は12時の位置で始まり、3時の位置で <code>2em</code>、それから6時の位置で <code>3em</code>、そして9時の位置で <code>4em</code> です)。</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>同様に、ボックスの角に関する一括指定プロパティ ({{cssxref("border-radius")}} など) は、それぞれの角を表すために一貫して1～4つの値を使用します。
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>値1つの構文</em>: <code>border-radius: 1em</code> — 1つの値がすべての角を表現します</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>値2つの構文</em>: <code>border-radius: 1em 2em</code> — 最初の値は左上と右下の角、2番目の値は右上と左下の角を表します。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>値3つの構文</em>: <code>border-radius: 1em 2em 3em</code> — 最初の値は左上、2番目の値は右上と左下、3番目の値は右下の角をそれぞれ表します。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>値4つの構文</em>: <code>border-radius: 1em 2em 3em 4em</code> — 4つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点に時計回りの順です。</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">background プロパティ</h2>
+
+<p>以下のプロパティによる背景の指定は...</p>
+
+<pre class="brush:css notranslate">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;</pre>
+
+<p>...1つの宣言で一括指定することができます。</p>
+
+<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat left top;</pre>
+
+<p>(一括指定の形式は、実際は上記の個別指定に加えて、 <code>background-attachment: scroll</code> や、 CSS3 ではいくつかの追加プロパティと等価になります。)</p>
+
+<p>CSS3 のプロパティを含む詳しい情報は、 {{cssxref("background")}} をご覧ください。</p>
+
+<h2 id="Font_Properties" name="Font_Properties">font プロパティ</h2>
+
+<p>以下の宣言は ...</p>
+
+<pre class="brush:css notranslate">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>... 以下のように一括指定することができます。</p>
+
+<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>この一括指定宣言は、実際には上記の個別指定宣言に加えて、 <code>font-variant: normal</code> と <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3) と等価になります。</p>
+
+<h2 id="Border_Properties" name="Border_Properties">border プロパティ</h2>
+
+<p>境界線の幅、色、スタイルについては1つの宣言にまとめることができます。例えば、以下の CSS ...</p>
+
+<pre class="brush:css notranslate">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>... は、以下のように簡略化できます。</p>
+
+<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">margin プロパティと padding プロパティ</h2>
+
+<p><code>margin</code> と <code>padding</code> の一括指定も同様に動作します。 <code>margin</code> プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言は ...</p>
+
+<pre class="brush:css notranslate">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>... は以下の値4つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。</p>
+
+<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+
+<p>マージンの値1つ、2つ、3つ、4つの一括指定宣言は次の通りです。</p>
+
+<ul>
+ <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li>
+ <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
+ <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
+ <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
+</ul>
+
+<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">全体一括指定プロパティ</h2>
+
+<p>CSS は全体の一括指定プロパティとして {{cssxref("all")}} を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを以下のいずれかに変更するためのものです。</p>
+
+<p>{{page("/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p>
+
+<p>CSS の継承がどのように動作するかについての詳細については、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a>または <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>一括指定プロパティ: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/ja/web/css/specificity/index.html b/files/ja/web/css/specificity/index.html
new file mode 100644
index 0000000000..0432121930
--- /dev/null
+++ b/files/ja/web/css/specificity/index.html
@@ -0,0 +1,348 @@
+---
+title: 詳細度
+slug: Web/CSS/Specificity
+tags:
+  - CSS
+  - Example
+  - Reference
+  - Web
+  - ウェブ
+  - ガイド
+translation_of: Web/CSS/Specificity
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><ruby><strong>詳細度</strong><rp> (</rp><rt>Specificity</rt><rp>) </rp></ruby>は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの <a href="/ja/docs/Web/CSS/CSS_Reference#Selectors">CSS セレクター</a>で構成される一致規則に基づいています。</p>
+
+<h2 id="How_is_specificity_calculated" name="How_is_specificity_calculated">詳細度の計算方法</h2>
+
+<p>詳細度は CSS 宣言が適用される際の重みであり、一致するセレクターそれぞれの<a href="#Selector_Types">種類</a>の数によって特定されます。複数の宣言が同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。詳細度は同じ要素に対して複数の宣言が行われている場合のみ適用されます。 CSS の規則として、<a href="#Directly_targeted_elements_vs._inherited_styles">直接対象となった要素</a>は要素が祖先から継承した規則よりも常に優先されます。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 文書ツリー内における<a href="#Tree_proximity_ignorance">要素の近接性</a>は、詳細度には影響を与えません。</p>
+</div>
+
+<h3 id="Crescent_order_of_specificity" name="Crescent_order_of_specificity">詳細度の序列（昇順）</h3>
+
+<p>以下のリストは、セレクターを詳細度の小さな順に並べたものです。</p>
+
+<ol>
+ <li><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a> (例えば <code>h1</code>) と 擬似要素 (例えば <code>::before</code>)</li>
+ <li><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> (例えば <code>.example</code>)、属性セレクター (例えば <code>[type="radio"]</code>)、擬似クラス (例えば <code>:hover</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID セレクター</a> (例えば <code>#example</code>)</li>
+</ol>
+
+<p>全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="/ja/docs/Web/CSS/Descendant_combinator" style="white-space: nowrap;">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 <code>:not()</code> の<em>中で</em>宣言されたセレクターは影響を与えます。)</p>
+
+<p>詳しくは<a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2">「カスケードと継承」の「詳細度」</a>または <a href="https://specifishity.com">https://specifishity.com</a> をご覧ください。</p>
+
+<p>要素に追加されたインラインスタイル (例えば <code>style="font-weight: bold;"</code>) は、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度を持っていると考えることもできます。</p>
+
+<h3 id="The_!important_exception" name="The_!important_exception">!important の例外</h3>
+
+<p><code>!important</code> 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には <code>!important</code> は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然の<a href="/en-US/docs/Web/CSS/Cascade">カスケード</a>を破壊するためデバッグが難しくなるので、 <code>!important</code> を使用することは<strong>悪い習慣</strong>であり、使用を避けるべきです。同じ要素に二つの競合する宣言が <code>!important</code> 規則付きで適用された場合、より高い詳細度の宣言が適用されます。</p>
+
+<p><strong>いくつかの経験則</strong></p>
+
+<ul>
+ <li><code>!important</code> を考える前に、<strong>常に</strong>詳細度を使用する方法を探しましょう。</li>
+ <li>ページ固有の CSS が外部の CSS (ブートストラップや正規化 CSS などの外部ライブラリなど) を上書きする場合<strong>のみ</strong>、 <code>!important</code> を使用しましょう。</li>
+ <li><strong>決して</strong>プラグインやマッシュアップを書いている時に、 <code>!important</code> を使わないようにしましょう。</li>
+ <li><strong>決して</strong>サイト全体の CSS で <code>!important</code> を使わないようにしましょう。</li>
+</ul>
+
+<p><strong><code>!important</code> を使用する代わりに、以下のことを検討してください。</strong></p>
+
+<ol>
+ <li>CSS のカスケードをもっと利用する</li>
+ <li>
+  <p>もっと詳細な規則を使う。規則の選択時に要素の前に１つまたは複数の要素を示すと、詳細度が上がり、より優先度が高くなります。</p>
+
+  <pre class="brush: html">&lt;div id="test"&gt;
+  &lt;span&gt;Text&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <pre class="brush: css">div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }</pre>
+
+  <p>順番に関わらず、テキストは最も詳細度が高い規則である緑色になります。 (また、青の規則は規則の順番にかかわらず、赤の規則を上書きします)</p>
+ </li>
+ <li>(2)のナンセンスの特殊なケースとして、何も指定する必要がない場合には、単純にセレクターを複製することで詳細度を高めることができます。
+  <pre class="brush: css">#myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }</pre>
+ </li>
+</ol>
+
+<h4 id="How_!important_can_be_used" name="How_!important_can_be_used">!important の用途</h4>
+
+<h5 id="A_Overriding_inline_styles" name="A_Overriding_inline_styles">A) インラインスタイルの上書き</h5>
+
+<p>サイトの視覚的な側面をグローバルに設定するグローバル CSS ファイルは、それぞれの要素に直接定義されたインラインスタイルによって上書きされることがあります。インラインスタイルと !important はどちらもとても悪い習慣とみなされていますが、時には前者を上書きするために後者が必要とされることがあります。</p>
+
+<p>この場合、特定のスタイルをグローバル CSS ファイルの中で !important として設定することで、要素に直接設定されたインラインスタイルを上書きすることができます。</p>
+
+<pre class="brush: html">&lt;div class="foo" style="color: red;"&gt;What color am I?&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+</pre>
+
+<p>多くの JavaScript フレームワークやライブラリがインラインスタイルを追加します。 <code>!important</code> をとても限定的なセレクターで使用することは、これらのインラインスタイルを上書きする方法の一つです。</p>
+
+<h5 id="B_Overriding_high_specificity" name="B_Overriding_high_specificity">B) 高い詳細度の上書き</h5>
+
+<pre class="brush: css">#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p><code>#someElement</code> の中にある場合であっても、 <code>awesome</code> の段落を常に赤くするにはどうすればよいでしょうか。 <code>!important</code> がないと、第一の規則がより詳細度が高いので、第二の規則に勝ちます。</p>
+
+<h4 id="!important_を上書きする方法"><code>!important</code> を上書きする方法</h4>
+
+<p>A) <code>!important</code> の付いた CSS 規則と、それにより高い詳細度のセレクターを与えるか (タグ、 id、 class のセレクターへの追加)、同じセレクターで既存の位置より後に CSS 規則を追加するかします。これが動作するのは、詳細度が同じであるとき、最後に定義された規則が勝つからです。</p>
+
+<p>詳細度を高める例です。</p>
+
+<pre class="brush: css">table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+</pre>
+
+<p>B) または、既存の物の後に同じセレクターを追加します。</p>
+
+<pre class="brush: css">td { height: 50px !important; }</pre>
+
+<p>C) また、できれば、元の規則を書き換えて、どちらも <code>!important</code> を使用しないようにします。</p>
+
+<pre class="brush: css">[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p>ID セレクターの代わりとして属性セレクターの一部に id を入れると、クラスと同じ詳細度になります。上記の両方のセレクターとも同じ重みをもつようになりました。詳細度が同等の場合、後に定義された規則が優先されます。</p>
+
+<h4 id="For_more_information_visit" name="For_more_information_visit">詳細情報</h4>
+
+<ul>
+ <li><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></li>
+ <li><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li>
+ <li><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></li>
+</ul>
+
+<h3 id="The_is_and_not_exceptions" name="The_is_and_not_exceptions">:is() および :not() の例外</h3>
+
+<p>全一致の擬似クラス {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および否定擬似クラスの {{CSSxRef(":not", ":not()")}} は、詳細度の計算では擬似クラスとは見なされません。しかし、<a href="#Selector_Types">セレクターの種類</a>の数を数える時には、これらの擬似クラスの中に置かれたセレクターは、通常のセレクターのように計算されます。</p>
+
+<div id="The_not_exception-example">
+<p>以下の CSS を...</p>
+
+<pre class="brush: css">div.outer p {
+  color: orange;
+}
+
+div:not(.outer) p {
+  color: blueviolet;
+}
+</pre>
+
+<p>以下の HTML に適用した場合...</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>画面では、以下のように表示されるでしょう。</p>
+
+<p>{{EmbedLiveSample("The_not_exception-example")}}</p>
+</div>
+
+<h3 id="The_where_exception" name="The_where_exception">:where() の例外 {{Experimental_Inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。</p>
+
+<p>この一連の CSS で...</p>
+
+<pre class="brush: css">div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css;">#no-where-support {
+  margin: 0.5em;
+  border: 1px solid red;
+}
+
+#no-where-support:where(*) {
+  display: none !important;
+}
+</pre>
+</div>
+
+<p>... 以下の HTML と一緒に使用されたとき ...</p>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div id="no-where-support"&gt;
+⚠️ Your browser doesn't support the &lt;code&gt;&lt;a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top"&gt;:where()&lt;/a&gt;&lt;/code&gt; pseudo-class.
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>... このように画面に表示されます。</p>
+
+<p>{{EmbedLiveSample("The_where_exception")}}</p>
+
+<h3 id="Form-based_specificity" name="Form-based_specificity">形ベースの詳細度</h3>
+
+<p>詳細度は、セレクターの形に基づきます。次の場合、セレクター <code>*[id="foo"]</code> は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。</p>
+
+<p>以下のスタイル宣言を...</p>
+
+<pre class="brush: css">*#foo {
+  color: green;
+}
+
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<p>この HTML に対して適用すると...</p>
+
+<pre class="brush: html">&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
+</pre>
+
+<p>このようになってしまうでしょう。</p>
+
+<p>{{EmbedLiveSample("Form-based_specificity")}}</p>
+
+<p>なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。</p>
+
+<h3 id="Tree_proximity_ignorance" name="Tree_proximity_ignorance">文書ツリー内の近接性の無視</h3>
+
+<p>指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と...</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+
+html h1 {
+  color: purple;
+}
+</pre>
+
+<p>... 以下の HTML で...</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>... このように描画されるでしょう。</p>
+
+<p>{{EmbedLiveSample("Tree_proximity_ignorance")}}</p>
+
+<p>これは、二つの宣言が同じ<a href="#Selector_Types">セレクター型</a>数ですが、 <code>html h1</code> セレクターが最後に宣言されているからです。</p>
+
+<h3 id="Directly_targeted_elements_vs._inherited_styles" name="Directly_targeted_elements_vs._inherited_styles">直接対象の要素と継承されたスタイル</h3>
+
+<p>直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ...</p>
+
+<pre class="brush: css">#parent {
+  color: green;
+}
+
+h1 {
+  color: purple;
+}</pre>
+
+<p>... 以下の HTML と共に使用します ...</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;body id="parent"&gt;
+    &lt;h1&gt;Here is a title!&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>... 以下のように表示されます。</p>
+
+<p>{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}</p>
+
+<p>これは、 <code>h1</code> セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td><a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>詳細度の計算: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>CSS3 セレクターの詳細度 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{CSS_Key_Concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/specified_value/index.html b/files/ja/web/css/specified_value/index.html
new file mode 100644
index 0000000000..81e1552aea
--- /dev/null
+++ b/files/ja/web/css/specified_value/index.html
@@ -0,0 +1,79 @@
+---
+title: 指定値
+slug: Web/CSS/specified_value
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/specified_value
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><ruby><strong>指定値</strong><rp> (</rp><rt>specified value</rt><rp>) </rp></ruby>は、 <a href="/ja/docs/Web/CSS">CSS</a> プロパティにおいて文書のスタイルシートから受け取る値です。</span>指定されたプロパティの指定値は、以下の規則に従って決定されます。</p>
+
+<ol>
+ <li>文書のスタイルシートが明示的にプロパティに値を指定した場合は、その値が使用されます。</li>
+ <li>文書のスタイルシートが値を指定しなかった場合、可能であれば親要素から値を継承します。</li>
+ <li>上記のいずれも利用できない場合、要素の<a href="/ja/docs/Web/CSS/initial_value">初期値</a>が使用されます。</li>
+</ol>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;My specified color is given explicitly in the CSS.&lt;/p&gt;
+
+&lt;div&gt;The specified values of all my properties default to their
+    initial values, because none of them are given in the CSS.&lt;/div&gt;
+
+&lt;div class="fun"&gt;
+  &lt;p&gt;The specified value of my font family is not given explicitly
+      in the CSS, so it is inherited from my parent. However,
+      the border is not an inheriting property.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<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("CSS2.2", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/string/index.html b/files/ja/web/css/string/index.html
new file mode 100644
index 0000000000..0f874eec29
--- /dev/null
+++ b/files/ja/web/css/string/index.html
@@ -0,0 +1,94 @@
+---
+title: <string>
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/string
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;string&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;string&gt;</code> データ型は任意の数の <a class="external" href="http://ja.wikipedia.org/wiki/Unicode">Unicode</a> 文字を、二重引用符 (<code>"</code>) 又は単一引用符 (<code>'</code>) で囲んで構成します。</p>
+
+<p>多くの文字は文字通りに表現されます。またすべての文字は、それぞれの16進数の <a class="external" href="http://ja.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks">Unicode コードポイント</a>で表現することもできます。例えば、 <code>\22</code> は二重引用符を表し、 <code>\27</code> は単一引用符 (<code>'</code>)、 <code>\A9</code> は著作権記号 (<code>©</code>) を表します。</p>
+
+<p>重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、及びバックスラッシュ自身です。例えば、 <code>\\</code> は単一のバックスラッシュを生成します。</p>
+
+<p>改行文字を出力するには、 <code>\A</code> 又は <code>\00000A</code> のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として <code>\</code> でエスケープすると、コード内で文字列を複数行に渡らせることができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <a href="/ja/docs/Glossary/Entity">HTML エンティティ</a> (<code>&amp;nbsp;</code> や <code>&amp;#8212;</code> など) は、 CSS の <code>&lt;string&gt;</code> の中で使用することはできません。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre>/* 単純な文字列 */
+"This string is demarcated by double quotes."
+'This string is demarcated by single quotes.'
+
+/* 文字のエスケープ */
+"This is a string with \" an escaped double quote."
+"This string also has \22 an escaped double quote."
+'This is a string with \' an escaped single quote.'
+'This string also has \27 an escaped single quote.'
+"This is a string with \\ an escaped backslash."
+
+/* 文字列内の改行 */
+"This string has a \Aline break in it."
+
+/* 2行にわたる文字列 (これら二つの文字列は同じ出力になります) */
+"A really long \
+awesome string"
+"A really long awesome string"
+</pre>
+
+<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 Values', '#strings', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>CSS Level 2 (Revision 1)から重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#strings', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>明示的定義; Unicode の6桁エスケープ文字を許容</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;string&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>暗黙的定義; Unicode の4桁エスケープ文字を許容</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.string")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS の単位と値</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 単位と値</a></li>
+</ul>
diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html
new file mode 100644
index 0000000000..12a2ce4efd
--- /dev/null
+++ b/files/ja/web/css/syntax/index.html
@@ -0,0 +1,83 @@
+---
+title: 構文
+slug: Web/CSS/Syntax
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p>カスケーディングスタイルシート (<a href="/ja/docs/Web/CSS">CSS</a>) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 <em>CSS の構文</em>はこの狙いを反映し、以下のような基本的な構成要素があります。</p>
+
+<ul>
+ <li>識別子である<strong>プロパティ</strong>。人間が読むことができ、どのような特性か考えることのできる<em>名前</em>を定義します。</li>
+ <li>特性がどのようにエンジンに操作されなければならないか表す<strong>値</strong>。どのプロパティも、形式文法及び意味論的な意味で定義され、ブラウザーに実装された、妥当な値を対として持ちます。</li>
+</ul>
+
+<h2 id="CSS_declarations" name="CSS_declarations">CSS の宣言</h2>
+
+<p>CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は<strong>宣言</strong>と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。</p>
+
+<p>CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン '<code>:</code>' (<code>U+003A COLON</code>) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>CSS には<a href="/ja/docs/Web/CSS/Reference">100を超える種類のプロパティ</a>と、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は<em>妥当ではない</em>と見なされ、 CSS エンジンから完全に無視されます。</p>
+
+<h2 id="CSS_declaration_blocks" name="CSS_declaration_blocks">CSS の宣言ブロック</h2>
+
+<p>宣言は、左中括弧 '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>) と右中括弧 '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>) で区切られた構造の中で、<strong>ブロック</strong>にグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>このようなブロックは必然的に<strong>宣言ブロック</strong>と呼ばれ、その中の宣言はセミコロン '<code>;</code>' (<code>U+003B SEMICOLON</code>) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、<em>良い書き方</em>とみなされます。</p>
+
+<p>CSS 宣言ブロックは以下の図のように表すことができます。</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="https://mdn.mozillademos.org/files/17009/declaration-block.png" style="border: 1px solid black; height: 467px; padding: 1em; width: 1160px;"></p>
+
+<div class="note"><strong>注</strong>: 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の {{htmlattrxref("style")}} 属性の中に置くことができます。</div>
+
+<h2 id="CSS_rulesets" name="CSS_rulesets">CSS の規則セット</h2>
+
+<p>もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。</p>
+
+<p>CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件である<a href="/ja/docs/Web/CSS/CSS_Selectors"><strong>セレクター</strong></a>を置きます。<a href="/ja/docs/Web/CSS/Selector_list">セレクターのグループ</a>と宣言ブロックの組を<strong>規則セット</strong>、またはしばしば単に<strong>規則</strong>と呼びます。</p>
+
+<p>CSS の規則セット (または規則) は下記の図のように表現することができます。</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="https://mdn.mozillademos.org/files/17010/ruleset.png" style="border: 1px solid black; height: 334px; padding: 1em; width: 861px;"></p>
+
+<p>ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これを<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケード</a>アルゴリズムと呼びます。</p>
+
+<div class="note">単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。<br>
+<br>
+基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、<em>セレクター</em>全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。</div>
+
+<h2 id="CSS_statements" name="CSS_statements">CSS の文</h2>
+
+<p>規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。</p>
+
+<p><strong>文</strong>は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>文には二種類があります。</p>
+
+<ul>
+ <li><strong>規則セット</strong> (または<em>規則</em>)。ここまで見てきたように、 CSS の宣言の集合を、<a href="/en-US/docs/Web/CSS/CSS_Selectors">セレクター</a>によって表現された状態に関連付けています。</li>
+ <li><strong>アット規則</strong>。アットマーク '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、識別子が後続し、ブロックの外のセミコロンまたは次のブロックの終わりに至るまで続きます。それぞれの種類の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>は、識別子によって定義され、当然ながら独自の内部構文や意味を持つことがあります。アット規則はメタデータ情報 ({{ cssxref("@charset") }} や {{ cssxref("@import") }} など) を伝えたり、条件情報 ({{ cssxref("@media") }} や {{ cssxref("@document") }}) など) を伝えたり、記述的情報 ({{ cssxref("@font-face") }} など) を伝えたりするために使用します。</li>
+</ul>
+
+<p>規則またはアット規則ではない文は、すべて妥当ではなく、無視されます。</p>
+
+<p id="nested_statements">他にも文のグループとして、<strong>入れ子文</strong>があります。これらはアット規則特有のサブセットである<em>条件付きグループ規則</em>の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 <code>@media</code>アット規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では<em>規則セット</em>のみが利用できました。それではあまりに厳しかったので、 <em><a href="/ja/docs/Web/CSS/CSS3#Conditionals">CSS Conditionals Level 3</a></em> では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部のアット規則を含むこともできます。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ja/web/css/tab-size/index.html b/files/ja/web/css/tab-size/index.html
new file mode 100644
index 0000000000..8f510eb9de
--- /dev/null
+++ b/files/ja/web/css/tab-size/index.html
@@ -0,0 +1,96 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - CSS プロパティ
+  - Experimental
+  - Reference
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS の <strong><code>tab-size</code></strong> プロパティは、タブ文字 (<code>U+0009</code>) の表示幅の指定に用います。</p>
+
+<pre class="brush:css">/* &lt;integer&gt; 値 */
+tab-size: 4;
+tab-size: 0;
+
+/* &lt;length&gt; 値 */
+tab-size: 10px;
+tab-size: 2em;
+
+/* グローバル値 */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>タブの空白文字の文字数です。正の数でなければなりません。</dd>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>タブの幅です。正の数でなければなりません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">pre {
+  tab-size: 4; /* スペース 4 つ分となります */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 0; /* インデント除去 */
+}
+</pre>
+
+<pre class="brush: css">pre {
+  tab-size: 2; /* タブの幅をスペース 2 個分に設定 */
+}
+</pre>
+
+<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 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a> - Anne van Kesteren 氏 (Opera) からの CSSWG へのメール</li>
+</ul>
diff --git a/files/ja/web/css/table-layout/index.html b/files/ja/web/css/table-layout/index.html
new file mode 100644
index 0000000000..77f39e854d
--- /dev/null
+++ b/files/ja/web/css/table-layout/index.html
@@ -0,0 +1,106 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 表
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/table-layout
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>table-layout</code></strong> プロパティは、 {{htmlelement("table")}} のセル、行、列のレイアウトに使用されるアルゴリズムを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+table-layout: auto;
+table-layout: fixed;
+
+/* グローバル値 */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{Cssxref("auto")}}</dt>
+ <dd>既定値で、ほとんどのブラウザーが表の自動レイアウトアルゴリズムを使用します。表とセルの幅は中身に合うように調整されます。</dd>
+ <dt><code>fixed</code></dt>
+ <dd>表と列の幅は <code>table</code> 要素と <code>col</code> 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列幅の設定に影響しません。</dd>
+ <dd>"fixed" レイアウト方法に於いては、一度テーブルの一行目のみをダウンロードして解析した後、テーブル全体をレンダリングします。これは自動テーブルレイアウトアルゴリズムよりレンダリング速度を速くする事が出来ますが、後続するセルのコンテンツが用意された列幅に収まらないかもしれません。セルは {{Cssxref("overflow")}} プロパティを使用して、表の幅が分かっている場合、はみ出すコンテンツを切り取るかどうかを定めます。そうでなければ、セルははみ出しません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は表の固定レイアウトを使用し、 {{cssxref("width")}} プロパティとの組み合わせで、表の幅を制限しています。 {{cssxref("text-overflow")}} プロパティを使用して、語が長すぎる場合は省略記号を使用するようにしています。</p>
+
+<p>表のレイアウトが <code>auto</code> である場合、表は指定された <code>width</code> よりも内容に合わせて広がります。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;&lt;td&gt;Ed&lt;/td&gt;&lt;td&gt;Wood&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Albert&lt;/td&gt;&lt;td&gt;Schweitzer&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Jane&lt;/td&gt;&lt;td&gt;Fonda&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;William&lt;/td&gt;&lt;td&gt;Shakespeare&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">table {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</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('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.table-layout")}}</p>
diff --git a/files/ja/web/css/text-align-last/index.html b/files/ja/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..b0497e1fa5
--- /dev/null
+++ b/files/ja/web/css/text-align-last/index.html
@@ -0,0 +1,106 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - CSS Property
+  - CSS テキスト
+  - Experimental
+  - Reference
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>text-align-last</code></strong> プロパティは、ブロックの最後の行、あるいは強制的な改行の直前の行をどのように配置するかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* グローバル値 */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>{{cssxref("text-align")}} の値と同じ方向に配置されます。ただし {{cssxref("text-align")}} が <code>justify</code> である場合は、<code>text-align-last</code> に <code>start</code> を設定した場合と同じ効果になります。</dd>
+ <dt><code>start</code></dt>
+ <dd>文章の記述方向が左から右であれば <code>left</code>、右から左であれば <code>right</code> と同じです。</dd>
+ <dt><code>end</code></dt>
+ <dd>文章の記述方向が左から右であれば <code>right</code>、右から左であれば <code>left</code> と同じです。</dd>
+ <dt><code>left</code></dt>
+ <dd>インライン要素は行ボックスの左端に配置されます。</dd>
+ <dt><code>right</code></dt>
+ <dd>インライン要素は行ボックスの右端に配置されます。</dd>
+ <dt><code>center</code></dt>
+ <dd>インラインコンテンツは行ボックスの中央に配置されます。</dd>
+ <dt><code>justify</code></dt>
+ <dd>テキストは行末揃えになります。テキストは段落の左端から右端までに配置されるでしょう。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}</pre>
+
+<p>{{EmbedLiveSample('Example','560')}}</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 Text', '#text-align-last-property', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-align-last")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-align/index.html b/files/ja/web/css/text-align/index.html
new file mode 100644
index 0000000000..e0a47131a7
--- /dev/null
+++ b/files/ja/web/css/text-align/index.html
@@ -0,0 +1,231 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>text-align</code></strong> は <a href="/en-US/docs/Web/CSS">CSS</a> のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 表の列における文字ベースの配置 */
+text-align: ".";
+text-align: "." center;
+
+/* ブロック配置の値 (標準外の構文) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* グローバル値 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+</pre>
+
+<p><code>text-align</code> プロパティは、以下の方法のうちの一つで指定されます。</p>
+
+<ul>
+ <li>キーワード値 <code><a href="#start">start</a></code>, <code><a href="#end">end</a></code>, <code><a href="#left">left</a></code>, <code><a href="#right">right</a></code>, <code><a href="#center">center</a></code>, <code><a href="#justify">justify</a></code>, <code><a href="#justify-all">justify-all</a></code>, <code><a href="#match-parent">match-parent</a></code> の使用。</li>
+ <li><code><a href="#string">&lt;string&gt;</a></code> 値のみを使用、この場合は他の値の既定値が <code><a href="#right">right</a></code> になります。</li>
+ <li>キーワード値または <code><a href="#string">&lt;string&gt;</a></code> 値の使用。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="start"><code>start</code> {{experimental_inline}}</dt>
+ <dd>書字方向が左から右であれば <code>left</code> と、右から左であれば <code>right</code> と同じです。</dd>
+ <dt id="end"><code>end</code> {{experimental_inline}}</dt>
+ <dd>書字方向が左から右であれば <code>right</code> と、右から左であれば <code>left</code> と同じです。</dd>
+ <dt id="left"><code>left</code></dt>
+ <dd>インラインコンテンツは行ボックスの左辺に寄せられます。</dd>
+ <dt id="right"><code>right</code></dt>
+ <dd>インラインコンテンツは行ボックスの右辺に寄せられます。</dd>
+ <dt id="center"><code>center</code></dt>
+ <dd>インラインコンテンツは行ボックス内で中央寄せされます。</dd>
+ <dt id="justify"><code>justify</code></dt>
+ <dd>インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。</dd>
+ <dt id="justify-all"><code>justify-all</code> {{experimental_inline}}</dt>
+ <dd><code>justify</code> と同じですが、最終行も強制的に両端揃えされます。</dd>
+ <dt id="match-parent"><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd><code>inherit</code> に似ていますが、 <code>start</code> と <code>end</code> 値が親要素の {{cssxref("direction")}} に従って計算され、適切な <code>left</code> か <code>right</code> 値に置き換えられます。</dd>
+ <dt id="string">{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
+ <dd>表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Left_alignment" name="Left_alignment">左揃え</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: left;
+  border: solid;
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Left_alignment","100%","100%")}}</p>
+
+<h3 id="Centered_text" name="Centered_text">中央揃え</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: center;
+  border: solid;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Centered_text","100%","100%")}}</p>
+
+<h3 id="Justify" name="Justify">両端揃え</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: justify;
+  border: solid;
+}</pre>
+
+<h4 id="Result_3" name="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample("Justify","100%","100%")}}</p>
+
+<h3 id="Notes" name="Notes">注</h3>
+
+<p>インラインコンテンツを中央揃えせずにブロック自体を中央揃えする標準互換の方法は、次のように、 left 及び right {{cssxref("margin")}} を <code>auto</code> に設定することです。</p>
+
+<pre class="brush: css notranslate">.something {
+  margin: auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin: 0 auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<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('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td><code>&lt;string&gt;</code> 値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td><code>start</code> と <code>end</code>、<code>match-parent</code> キーワードを追加。名前のなかった初期値を（まさにそれである）<code>start</code> に変更。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-align")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-combine-upright/index.html b/files/ja/web/css/text-combine-upright/index.html
new file mode 100644
index 0000000000..907fb4de0b
--- /dev/null
+++ b/files/ja/web/css/text-combine-upright/index.html
@@ -0,0 +1,115 @@
+---
+title: text-combine-upright
+slug: Web/CSS/text-combine-upright
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Experimental
+  - Reference
+translation_of: Web/CSS/text-combine-upright
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-combine-upright</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。</span>組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収める必要があります。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。</p>
+
+<p>これは、日本語の縦中横 (tate-chū-yoko)、中国語の <span lang="zh-Hant">直書橫向</span> として知られる効果をもたらすために使用されます。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Digits 値 */
+text-combine-upright: digits;     /* 2 桁の数字を垂直テキスト内に水平に収めます */
+text-combine-upright: digits 4;   /* 4 桁までの数字を垂直テキスト内に水平に収めます */
+
+/* グローバル値 */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>何も特別な処理をしません。</dd>
+ <dt><code>all</code></dt>
+ <dd>タイプセットのすべての文字を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。</dd>
+ <dt><code>digits &lt;integer&gt;?</code></dt>
+ <dd>指定した桁数 (整数値) までの連続した ASCII 数字 (U+0030–U+0039) を水平に並べてボックス内に収めます。この幅は、縦書きボックス内で一文字分の空間を取ります。整数値を省略した場合の値は 2 になります。2 ～ 4 までの範囲外の整数値は不正です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example_digits" name="Example_digits">例 (digits)</h2>
+
+<p>digits 値は、数字の桁だけを組み合わせる場合に使用し、all 値よりも必要なマークアップが少なくてすみます。現在、これをサポートしているブラウザーはあまりありません。</p>
+
+<pre class="brush: html">&lt;p lang="ja" class="exampleText"&gt;平成20年4月16日に&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.exampleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}</pre>
+
+<p>{{EmbedLiveSample("Example_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>
+
+<h2 id="Example_all" name="Example_all">例 (all)</h2>
+
+<p>all 値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーでサポートされています。</p>
+
+<pre class="brush: html">&lt;p lang="zh-Hant"&gt;民國&lt;span class="num"&gt;105&lt;/span
+&gt;年&lt;span class="num"&gt;4&lt;/span
+&gt;月&lt;span class="num"&gt;29&lt;/span&gt;日&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+</pre>
+
+<p>{{EmbedLiveSample("Example_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</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("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td><code>digits</code> 値の追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-combine-upright")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..b4def7fe00
--- /dev/null
+++ b/files/ja/web/css/text-decoration-color/index.html
@@ -0,0 +1,118 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML スタイル
+  - HTML 色
+  - Reference
+  - text-decoration-color
+  - 色
+translation_of: Web/CSS/text-decoration-color
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>text-decoration-color</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{ cssxref("text-decoration-line") }} でテキストに追加された装飾の色を設定します。</p>
+
+<p>色はプロパティ値のスコープにある装飾、すなわち下線、上線、打消し線、それにスペルミスに印をつけるために使われるような波線などに適用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code&gt;text-decoration-color で) 線の色を指定することで実現できます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;color&gt; 値 */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* グローバル値 */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>装飾線の色です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;p&gt;This paragraph has &lt;s&gt;some erroneous text&lt;/s&gt;
+    inside it that I want to call attention to.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-color: cyan;
+}
+
+s {
+  text-decoration-line: <code>line-through</code>;
+  text-decoration-color: red;
+  text-decoration-style: wavy;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples') }}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p>
+
+<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td>
+   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
+   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.text-decoration-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>色に関する他のプロパティ: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/text-decoration-line/index.html b/files/ja/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..f7ab8d370e
--- /dev/null
+++ b/files/ja/web/css/text-decoration-line/index.html
@@ -0,0 +1,109 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/text-decoration-line
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-line</code></strong> プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一のキーワード */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: blink;
+
+/* 複数のキーワード */
+text-decoration-line: underline overline;               /* 2つの装飾線 */
+text-decoration-line: overline underline line-through;  /* 複数の装飾線 */
+
+/* グローバル値 */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+</pre>
+
+<p><code>text-decoration-line</code> プロパティは <code>none</code> または以下のリストにある<strong>1つ以上の</strong>空白で区切られた値を指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>テキストの装飾を行いません。</dd>
+ <dt><code>underline</code></dt>
+ <dd>テキストの各行に下線を引きます。</dd>
+ <dt><code>overline</code></dt>
+ <dd>テキストの各行の上線を引きます。</dd>
+ <dt><code>line-through</code></dt>
+ <dd>テキストの各行の中央を貫く線を引きます。</dd>
+ <dt><code>blink</code> {{deprecated_inline}}</dt>
+ <dd>テキストが点滅します (表示と非表示を交互に繰り返します)。準拠するユーザーエージェントはテキストを点滅させないかもしれません。この値は<strong>非推奨</strong>であり、 <a href="/ja/docs/Web/CSS/animation">CSS アニメーション</a>に取って代わりました。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;p class="wavy"&gt;Here's some text with wavy red underline!&lt;/p&gt;
+&lt;p class="both"&gt;This text has lines both above and below it.&lt;/p&gt;</pre>
+
+<pre class="brush: css">.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+.both {
+  text-decoration-line: underline overline;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '') }}</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 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-decoration-line")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>
+</ul>
diff --git a/files/ja/web/css/text-decoration-skip-ink/index.html b/files/ja/web/css/text-decoration-skip-ink/index.html
new file mode 100644
index 0000000000..a0c130adbb
--- /dev/null
+++ b/files/ja/web/css/text-decoration-skip-ink/index.html
@@ -0,0 +1,118 @@
+---
+title: text-decoration-skip-ink
+slug: Web/CSS/text-decoration-skip-ink
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Experimental
+  - Reference
+  - Web
+  - text-decoration-skip-ink
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/text-decoration-skip-ink
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-skip-ink</code></strong> プロパティは、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-skip-ink.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><code>text-decoration-skip-ink</code> は {{cssxref("text-decoration")}} 一括指定の一部ではありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一キーワード */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+text-decoration-skip-ink: all;
+
+/* グローバルキーワード */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。</dd>
+ <dt><code>auto</code></dt>
+ <dd>既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う<em>可能性があります</em>。つまり、線が文字を横切ろうとするところで中断されます。</dd>
+ <dt><code>all</code></dt>
+ <dd>ブラウザーは、下線や上線が文字に触れたり近づいたりしないように<em>必ず</em>中断を行います。これは、 <code>auto</code> の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。</dd>
+ <dd><img alt='"text-decoration-skip-ink" の例' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;You should go on a quest for a cup of coffee.&lt;/p&gt;
+&lt;p class="no-skip-ink"&gt;Or maybe you'd prefer some tea?&lt;/p&gt;
+&lt;p&gt;この文は、 text-decoration-skip-ink: auto の使用例を示しています。&lt;/p&gt;
+&lt;p class="skip-ink-all"&gt;この文は、 text-decoration-skip-ink: all の使用例を示しています。&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  font-size: 1.5em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto; /* this is the default anyway */
+}
+
+.no-skip-ink {
+  text-decoration-skip-ink: none;
+}
+
+.skip-ink-all{
+  text-decoration-skip-ink: all;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", 250)}}</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("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.text-decoration-skip-ink")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref('text-decoration')}}</li>
+ <li>{{cssxref('text-decoration-skip')}}</li>
+</ul>
diff --git a/files/ja/web/css/text-decoration-skip/index.html b/files/ja/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..f39fe86f4f
--- /dev/null
+++ b/files/ja/web/css/text-decoration-skip/index.html
@@ -0,0 +1,110 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Experimental
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/text-decoration-skip
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-decoration-skip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。</span>これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> 他の多くのブラウザーでは、より単純な {{cssxref("text-decoration-skip-ink")}} プロパティへの対応に集中しています。</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* 複数のキーワード */
+text-decoration-skip: objects spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* グローバル値 */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。</dd>
+ <dt><code>objects</code></dt>
+ <dd>要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。</dd>
+ <dt><code>spaces</code></dt>
+ <dd>すべての空白をスキップします。すべての <a href="https://www.unicode.org/reports/tr44/#White_Space">Unicode ホワイトスペース文字</a>、すべての単語区切りに加えて、子孫の {{cssxref("letter-spacing")}} または {{cssxref("word-spacing")}} すべてです。</dd>
+ <dt><code>leading-spaces</code></dt>
+ <dd>先頭の空白のみがスキップされるという点を除いて、 <code>spaces</code> と同じです。</dd>
+ <dt><code>trailing-spaces</code></dt>
+ <dd>末尾の空白のみがスキップされるという点を除いて、 <code>spaces</code> と同じです。</dd>
+ <dt><code>edges</code></dt>
+ <dd>テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語で、区切って下線を引くのに重要です。)</dd>
+ <dd><img alt='"text-decoration-skip: edges;" の例です。' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png"></dd>
+ <dt><code>box-decoration</code></dt>
+ <dd>テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。<em>装飾ボックス</em>はボックスの装飾の上に描画を行いません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Hey, grab a cup of &lt;em&gt;coffee!&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edges;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</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("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-decoration-skip")}}</p>
diff --git a/files/ja/web/css/text-decoration-style/index.html b/files/ja/web/css/text-decoration-style/index.html
new file mode 100644
index 0000000000..5473f5af42
--- /dev/null
+++ b/files/ja/web/css/text-decoration-style/index.html
@@ -0,0 +1,115 @@
+---
+title: text-decoration-style
+slug: Web/CSS/text-decoration-style
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Layout
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/text-decoration-style
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-style</code></strong> プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され <code>text-decoration-line</code> で定義された線ごとに異なる種類を定義する方法はありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。</p>
+
+<p>線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* グローバル値 */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>solid</dt>
+ <dd>単独線を描画します。</dd>
+ <dt>double</dt>
+ <dd>二重線を描画します。</dd>
+ <dt>dotted</dt>
+ <dd>点線を描画します。</dd>
+ <dt>dashed</dt>
+ <dd>破線を描画します。</dd>
+ <dt>wavy</dt>
+ <dd>波線を描画します。</dd>
+ <dt>-moz-none{{ non-standard_inline }}</dt>
+ <dd>線を描画しません。代わりに {{ cssxref("text-decoration-line") }}<code>: none</code> を使用してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css" style="display: none;">.example {
+       -moz-text-decoration-line: underline;
+       -moz-text-decoration-style: wavy;
+       -moz-text-decoration-color: red;
+    -webkit-text-decoration-line: underline;
+    -webkit-text-decoration-style: wavy;
+    -webkit-text-decoration-color: red;
+}</pre>
+
+<pre class="brush: css">.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;p class="wavy"&gt;This text has a wavy red line beneath it.&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '') }}</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 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td>
+   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
+   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-decoration-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>
+</ul>
diff --git a/files/ja/web/css/text-decoration/index.html b/files/ja/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..f13e611120
--- /dev/null
+++ b/files/ja/web/css/text-decoration/index.html
@@ -0,0 +1,139 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-decoration
+  - text-decoration-color
+  - text-decoration-line
+  - text-decoration-style
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-decoration</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、テキストの装飾的な線の表示を設定します。</span>これは {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} およびさらに新しい {{cssxref("text-decoration-thickness")}} プロパティの一括指定です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>文字列装飾は、子孫の文字列要素に適用されます。つまり、要素に文字列装飾が指定されれば、子要素では装飾を外すことができません。例えば、 <code>&lt;p&gt;This text has &lt;em&gt;some emphasized words&lt;/em&gt; in it.&lt;/p&gt;</code> という文と、 <code>p { text-decoration: underline; }</code> のスタイル規則では、段落全体に下線が引かれます。 <code>em { text-decoration: none; }</code> のスタイル規則を適用しても変化せず、段落全体に下線が引かれたままになります。しかし、 <code>em { text-decoration: overline; }</code> の規則で "some emphasized words" に第二の装飾が施されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>text-decoration</code> プロパティは、個別指定の text-decoration プロパティを表す1つまたは複数の値を空白で区切って指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("text-decoration-line")}}</dt>
+ <dd>使用する装飾の種類を設定します。 <code>underline</code> や <code>line-through</code> などです。</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>装飾の色を設定します。</dd>
+ <dt>{{cssxref("text-decoration-style")}}</dt>
+ <dd>装飾に使用する線のスタイルを設定します。 <code>solid</code>, <code>wavy</code>, <code>dashed</code> などです。</dd>
+ <dt>{{cssxref("text-decoration-thickness")}}</dt>
+ <dd>装飾に使われる線の太さを設定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+</pre>
+
+<pre class="brush: html">&lt;p class="under"&gt;This text has a line underneath it.&lt;/p&gt;
+&lt;p class="over"&gt;This text has a line over it.&lt;/p&gt;
+&lt;p class="line"&gt;This text has a line going through it.&lt;/p&gt;
+&lt;p&gt;This &lt;a class="plain" href="#"&gt;link will not be underlined&lt;/a&gt;,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.&lt;/p&gt;
+&lt;p class="underover"&gt;This text has lines above &lt;em&gt;and&lt;/em&gt; below it.&lt;/p&gt;
+&lt;p class="thick"&gt;This text has a really thick purple underline in supporting browsers.&lt;/p&gt;
+&lt;p class="blink"&gt;This text might blink for you,
+    depending on the browser you use.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples','auto','320')}}</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('CSS4 Text Decoration')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>{{cssxref("text-decoration-thickness")}} を追加。なお、これはまだ公式には一括指定の一部ではありません。これはまだ未定義です。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>一括指定プロパティへ変更。 {{cssxref('text-decoration-style')}} の値への対応を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>実質的な変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-decoration")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>text-decoration の個別指定プロパティは、 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}} です。</li>
+ <li>{{cssxref("list-style")}} 属性は HTML の {{HTMLElement("ol")}} および {{HTMLElement("ul")}} のリストの表示方法を制御します。</li>
+</ul>
diff --git a/files/ja/web/css/text-emphasis-color/index.html b/files/ja/web/css/text-emphasis-color/index.html
new file mode 100644
index 0000000000..8eaa6de6d8
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-color/index.html
@@ -0,0 +1,101 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+tags:
+  - CSS
+  - CSS スタイル
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML 色
+  - Reference
+  - 文字列強調
+translation_of: Web/CSS/text-emphasis-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-color</code></strong> プロパティは、圏点の色を設定します。この値は一括指定の {{cssxref("text-emphasis")}} を使用して設定することもできます。</span></p>
+
+<pre class="brush:css no-line-numbers">/* 初期値 */
+text-emphasis-color: currentColor;
+
+/* &lt;color&gt; */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* グローバル値 */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>記号の色を定義します。 color が存在しない場合、既定で <code>currentColor</code> になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h3 {
+  text-emphasis-color: #555;
+  text-emphasis-style: "*";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Here's an example:&lt;/p&gt;
+
+&lt;h3&gt;This has emphasis marks!&lt;/h3&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 450, 100)}}</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 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-emphasis-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} データ型</li>
+ <li>他の強調記号に関するプロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, {{cssxref("text-emphasis-position")}}.</li>
+ <li>色に関する他のプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML 要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/text-emphasis-position/index.html b/files/ja/web/css/text-emphasis-position/index.html
new file mode 100644
index 0000000000..2a0ee36975
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-position/index.html
@@ -0,0 +1,144 @@
+---
+title: text-emphasis-position
+slug: Web/CSS/text-emphasis-position
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/text-emphasis-position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>text-emphasis-position</code></strong> プロパティは、圏点が描かれる位置を設定します。ルビテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。</p>
+
+<pre class="brush:css no-line-numbers">/* 初期値 */
+text-emphasis-position: over right;
+
+/* キーワード値 */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* グローバル値 */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Preferred_position" name="Preferred_position">望ましい位置</h2>
+
+<p>圏点の望ましい位置は言語に依存します。例えば日本語では、望ましい位置は <span class="css">over right</span> です。一方中国語では、望ましい位置は <span class="css">under right</span> となります。下記の情報の表は、日本語、モンゴル語、中国語における望ましい圏点の位置を要約するものです。</p>
+
+<table>
+ <caption>望ましい圏点とルビの位置</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col">言語</th>
+   <th colspan="2" scope="col">望ましい位置</th>
+   <th colspan="2" rowspan="2" scope="col">説明</th>
+  </tr>
+  <tr>
+   <th>横書き</th>
+   <th>縦書き</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>日本語</td>
+   <td rowspan="2">over</td>
+   <td rowspan="2">right</td>
+   <td rowspan="2"><img alt="日本語の横書きテキストでは、圏点は強調される各文字の上に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="日本語のテキストの上に適用された圏点 (分かりやすいよう青で表示)"></td>
+   <td rowspan="3"><img alt="日本語の縦書きテキストでは、圏点が強調される各文字の右に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="日本語のテキストの右に適用された圏点"></td>
+  </tr>
+  <tr>
+   <td>モンゴル語</td>
+  </tr>
+  <tr>
+   <td>中国語</td>
+   <td>under</td>
+   <td>right</td>
+   <td><img alt="中国語簡体字の横書きテキストでは、圏点は強調される各文字の下に表示されます。" src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="中国語のテキストの下に適用された圏点 (分かりやすいよう青で表示)"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>メモ</strong>: {{cssxref("text-emphasis")}} 一括指定プロパティを使用して、 <code>text-emphasis-position</code> を設定することはできず、また初期化されることもありません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><dfn>over</dfn></code></dt>
+ <dd>横書きモードでテキストの上に圏点を描きます。</dd>
+ <dt><code><dfn>under</dfn></code></dt>
+ <dd>横書きモードでテキストの下に圏点を描きます。</dd>
+ <dt><code><dfn>right</dfn></code></dt>
+ <dd>縦書きモードでテキストの右に圏点を描きます。</dd>
+ <dt><code><dfn>left</dfn></code></dt>
+ <dd>縦書きモードでテキストの左に圏点を描きます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。</p>
+
+<pre class="brush: css">ruby {
+  text-emphasis: none;
+}
+</pre>
+
+<p>編集者によっては、圏点と競合する場合にルビを隠すことを好みます。 HTML では、これは次のパターンで実現できます。</p>
+
+<pre class="brush: css">em {
+  text-emphasis: dot; /* &lt;em&gt; 要素に text-emphasis を設定 */
+}
+
+em rt {
+  display: none; /* &lt;em&gt; 要素内のルビを隠す */
+}</pre>
+
+<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 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-emphasis-position")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-emphasis-style/index.html b/files/ja/web/css/text-emphasis-style/index.html
new file mode 100644
index 0000000000..23aebe92d6
--- /dev/null
+++ b/files/ja/web/css/text-emphasis-style/index.html
@@ -0,0 +1,110 @@
+---
+title: text-emphasis-style
+slug: Web/CSS/text-emphasis-style
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-emphasis
+translation_of: Web/CSS/text-emphasis-style
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis-style</code></strong> プロパティは、圏点の表示を設定します。設定や解除に一括指定の {{cssxref("text-emphasis")}} を使用することもできます。</p>
+
+<pre class="brush:css no-line-numbers">/* 初期値 */
+text-emphasis-style: none; /* 圏点なし */
+
+/* &lt;string&gt; 値 */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+text-emphasis-style: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+
+/* キーワード値 */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: dot;
+text-emphasis-style: circle;
+text-emphasis-style: double-circle;
+text-emphasis-style: triangle;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* グローバル値 */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>圏点なし。</dd>
+ <dt><code>filled</code></dt>
+ <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
+ <dt><code>open</code></dt>
+ <dd>図形は中抜きになります。</dd>
+ <dt><code>dot</code></dt>
+ <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd>
+ <dt><code>circle</code></dt>
+ <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd>
+ <dt><code>triangle</code></dt>
+ <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd>
+ <dt><code>sesame</code></dt>
+ <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は <code>'﹆'</code> (<code>U+FE46</code>) です。</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre><code>h2 {
+  text-emphasis-style: sesame;
+}</code></pre>
+
+<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 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-emphasis-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連プロパティ: {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}}</li>
+ <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li>
+</ul>
diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html
new file mode 100644
index 0000000000..62fb199b05
--- /dev/null
+++ b/files/ja/web/css/text-emphasis/index.html
@@ -0,0 +1,140 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+tags:
+  - CSS
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - Reference
+  - text-emphasis
+  - text-emphasis-color
+  - text-emphasis-style
+  - 一括指定プロパティ
+translation_of: Web/CSS/text-emphasis
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p>
+
+<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
+
+<div class="note">
+<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 初期値 */
+text-emphasis: none; /* 圏点なし */
+
+/* &lt;string&gt; 値 */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+
+/* キーワード値 */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* 色と組み合わせたキーワード値 */
+text-emphasis: filled sesame #555;
+
+/* グローバル値 */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>圏点なし。</dd>
+ <dt><code>filled</code></dt>
+ <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
+ <dt><code>open</code></dt>
+ <dd>図形は中抜きになります。</dd>
+ <dt><code>dot</code></dt>
+ <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd>
+ <dt><code>circle</code></dt>
+ <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd>
+ <dt><code>triangle</code></dt>
+ <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd>
+ <dt><code>sesame</code></dt>
+ <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
+
+<p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h2 {
+  text-emphasis: triangle #D55;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;これは重要です！&lt;/h2&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</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 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-emphasis")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li>
+ <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li>
+</ul>
diff --git a/files/ja/web/css/text-indent/index.html b/files/ja/web/css/text-indent/index.html
new file mode 100644
index 0000000000..72f47374bf
--- /dev/null
+++ b/files/ja/web/css/text-indent/index.html
@@ -0,0 +1,137 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>text-indent</code></strong> プロパティは、ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>包含ブロック要素のコンテンツボックスの左端 (右書きの場合は右端) に、水平に空白が挿入されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 値 */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* &lt;percentage&gt; 値
+   包含ブロックの幅に対する割合 */
+text-indent: 15%;
+
+/* Keyword values */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Global values */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>{{cssxref("&lt;length&gt;")}} を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は {{cssxref("&lt;length&gt;")}} をご覧ください。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>包含ブロックの幅の {{cssxref("&lt;percentage&gt;")}} 分だけ字下げされます。</dd>
+ <dt><code>each-line</code> {{experimental_inline}}</dt>
+ <dd><strong>強制的な改行</strong>の後の各行も、ブロックコンテナーの先頭行と同様に字下げします。ただし<strong>自動折り返し</strong>の次の行はインデントしません。</dd>
+ <dt><code>hanging</code> {{experimental_inline}}</dt>
+ <dd>インデントされる行が逆になります。つまり、先頭行<strong>以外の</strong>すべての行を字下げします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Simple_indent" name="Simple_indent">単純なインデントの例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<p>{{ EmbedLiveSample('Simple_indent','100%','100%') }}</p>
+
+<h2 id="Percentage_indent_example" name="Percentage_indent_example">パーセント表記のインデントの例</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<p>{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}</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 Text', '#text-indent-property', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td><code>hanging</code> と <code>each-line</code> キーワードを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>text-indent</code> がアニメーション可能に。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>display: inline-block</code> と無名ブロックボックスの場合の動作が明確に定義されるようになりました。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.text-indent")}}</p>
diff --git a/files/ja/web/css/text-justify/index.html b/files/ja/web/css/text-justify/index.html
new file mode 100644
index 0000000000..f121ff0d09
--- /dev/null
+++ b/files/ja/web/css/text-justify/index.html
@@ -0,0 +1,118 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - text-justify
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>text-justify</code></strong> プロパティは、要素に {{cssxref("text-align")}}<code>: justify;</code> が設定された時にテキストに適用される両端揃えの種類を設定します。</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* 非推奨の値 */
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>text-justify</code> プロパティは、以下の値のリストのうち一つのキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。</dd>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは <code>text-justify</code> をまったく設定しない場合に使われる既定の揃え方です。</dd>
+ <dt><code>inter-word</code></dt>
+ <dd>単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd><code>inter-character</code> と同じ動作を見せます。この値は後方互換性のためのものです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+</div>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<div>{{EmbedLiveSample("Examples","100%",400)}}</div>
+
+<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 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.properties.text-justify")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-orientation/index.html b/files/ja/web/css/text-orientation/index.html
new file mode 100644
index 0000000000..8ac5a69a73
--- /dev/null
+++ b/files/ja/web/css/text-orientation/index.html
@@ -0,0 +1,107 @@
+---
+title: text-orientation
+slug: Web/CSS/text-orientation
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Reference
+  - 日本語処理
+translation_of: Web/CSS/text-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト ({{cssxref("writing-mode")}} が <code>horizontal-tb</code> 以外の場合) でのみ効果があります。</span>これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div>
+
+<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>
+
+<pre class="brush:css">/* キーワード値 */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* グローバル値 */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+</pre>
+
+<p><code>text-orientation</code> プロパティは、以下のリストから単一のキーワードとして指定されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>mixed</code></dt>
+ <dd>このキーワードは、横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。</dd>
+ <dt><code>upright</code></dt>
+ <dd>このキーワードは、横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。このキーワードは、すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。これは、ユーザ側でどのように設定されていても、対象のテキストの {{cssxref("direction")}} に <code>ltr</code> が指定されているものとします。</dd>
+ <dt><code>sideways</code></dt>
+ <dd>このキーワードは、全行を横書きで書いて 90°回転したようにレイアウトします。{{cssxref("writing-mode")}} が <code>vertical-rl</code> の場合は右へ回転、<code>vertical-lr</code> の場合は左へ回転します。</dd>
+ <dt><code>sideways-right</code></dt>
+ <dd>これは、互換性を維持するためのキーワードであり、<code>sideways</code> の別名です。</dd>
+ <dt><code>use-glyph-orientation</code></dt>
+ <dd>SVG 要素上で、このキーワードは、非推奨の SVG プロパティ <code>glyph-orientation-vertical</code> と <code>glyph-orientation-horizontal</code> の値を使用します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolet semper quisquam.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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 Writing Modes', '#text-orientation', 'text-orientation')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.text-orientation")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の縦書きに関連する CSS プロパティ: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}}</li>
+ <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li>
+ <li><a href="https://www.w3.org/International/articles/vertical-text/">縦書きテキストのスタイル付け (中国語、日本語、韓国語、モンゴル語)</a></li>
+ <li>広範なブラウザーの対応状況テキスト結果: <a href="https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation">https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation</a></li>
+</ul>
diff --git a/files/ja/web/css/text-overflow/index.html b/files/ja/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..b6b8699236
--- /dev/null
+++ b/files/ja/web/css/text-overflow/index.html
@@ -0,0 +1,319 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 基本ユーザーインターフェイス
+  - Reference
+translation_of: Web/CSS/text-overflow
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>text-overflow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('<code>…</code>') を表示するか、独自の文字列を表示するかです。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>text-overflow</code> プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">overflow: hidden;
+white-space: nowrap;</pre>
+
+<p><code>text-overflow</code> プロパティは、<em>インライン</em>の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>text-overflow</code> プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。</p>
+
+<p>それぞれの値は以下のうちの一つです。</p>
+
+<ul>
+ <li>キーワード値のうちの一つ: <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
+ <li>フェードの長さを制御するための <code><a href="#fade( &lt;length> | &lt;percentage> )">fade()</a></code> 関数に {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} が渡されたもの</li>
+ <li><code><a href="#&lt;string>">&lt;string&gt;</a></code></li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="clip"><code>clip</code></dt>
+ <dd>このプロパティの既定値です。このキーワード値は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが <code>text-overflow</code> の空文字列に対応していれば、 <code>text-overflow: '';</code> を指定することができます。</dd>
+ <dt id="ellipsis"><code>ellipsis</code></dt>
+ <dd>このキーワード値は、切り取られたテキストを表現するために省略記号 (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) を表示します。省略記号は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。</dd>
+ <dt id="&lt;string>"><code>&lt;string&gt;</code> {{experimental_inline}}</dt>
+ <dd>クリップされたテキストを表すために使われる {{cssxref("&lt;string&gt;")}} です。この文字列は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。</dd>
+ <dt id="fade"><code>fade</code> {{experimental_inline}}</dt>
+ <dd>このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。</dd>
+ <dt id="fade( &lt;length> | &lt;percentage> )"><code>fade( &lt;length&gt; | &lt;percentage&gt; )</code> {{experimental_inline}}</dt>
+ <dd>このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。</dd>
+ <dd>引数はフェード効果が適用される範囲を指定します。 {{cssxref("&lt;percentage&gt;")}} は行ボックスの幅に対する割合になります。 <code>0</code> よりも小さい値は <code>0</code> に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
+
+<p class="note"><strong>注:</strong> 以下の表の「実際の結果」は、 MDN エディターが文字列値の <code>text-overflow</code> プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col" style="width: 15em;">CSS value</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
+  </tr>
+  <tr>
+   <th scope="col">期待される結果</th>
+   <th scope="col">実際の結果</th>
+   <th scope="col">期待される結果</th>
+   <th scope="col">実際の結果</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em>visible overflow</em></td>
+   <td style="font-family: monospace;">1234567890</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">0987654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip</code></td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">1234567890</div>
+   </td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ''</code></td>
+   <td style="font-family: monospace;">12345</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">54321</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">.4321</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip clip</code></td>
+   <td style="font-family: monospace;">123456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">6543…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">6543.</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis clip</code></td>
+   <td style="font-family: monospace;">…3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis ellipsis</code></td>
+   <td style="font-family: monospace;">…34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">…43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis '.'</code></td>
+   <td style="font-family: monospace;">…34.</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">…43.</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' clip</code></td>
+   <td style="font-family: monospace;">,3456</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">,4321</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' ellipsis</code></td>
+   <td style="font-family: monospace;">,34…</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">,43…</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' '.'</code></td>
+   <td style="font-family: monospace;">,34.</td>
+   <td style="direction: ltr;">
+    <div style="">1234567890</div>
+   </td>
+   <td style="font-family: monospace;">,43.</td>
+   <td style="direction: rtl;">
+    <div style="">1234567890</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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><a href="https://drafts.csswg.org/css-overflow-4/#text-overflow">CSS Overflow Module Level 4</a></td>
+   <td></td>
+   <td><code>&lt;string&gt;</code> および <code>fade</code> の値と <code>fade()</code> 関数を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>以前の版のこのインターフェイスは <em>勧告候補</em> に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は <em>"草案"</em> レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。</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.properties.text-overflow")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
+ <li>単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-rendering/index.html b/files/ja/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..581c2fd82e
--- /dev/null
+++ b/files/ja/web/css/text-rendering/index.html
@@ -0,0 +1,130 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS の <strong><code>text-rendering</code></strong> プロパティは、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。</span></p>
+
+<p>ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* グローバル値 */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>text-rendering</code> プロパティは SVG のプロパティであり、 CSS 標準では定義されていません。しかしながら、 Windows, MacOS, Linux の Gecko や WebKit のブラウザーは、このプロパティを HTML 及び XML コンテンツに適用することができます。</p>
+</div>
+
+<p>とても目に見えやすい効果は <code>optimizeLegibility</code> で、一部のフォント (例えば、 Microsoft <em>Calibri</em>, <em>Candara</em>, <em>Constantia</em>, <em>Corbel</em>, または <em>DejaVu</em> フォントファミリ) において 20px より小さい文字に合字 (ff, fi, fl, など) を適用します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。</dd>
+ <dt><code>optimizeSpeed</code></dt>
+ <dd>ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。</dd>
+ <dt><code>optimizeLegibility</code></dt>
+ <dd>ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。</dd>
+ <dt><code>geometricPrecision</code></dt>
+ <dd>
+ <p>ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。</p>
+
+ <p>SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ9で倍率140%のフォントを要求すると、フォントの大きさの結果は12.6となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを12に丸めます。結果的に、テキストは段階的な倍率になります。</p>
+
+ <p>しかし、 <code>geometricPrecision</code> は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮できます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。</p>
+
+ <p class="note"><strong>メモ</strong>: WebKit は指定された値を厳密に適用しますが、 Gecko は値を <code>optimizeLegibility</code> と同様に扱います。</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Automatic_application_of_optimizeLegibility" name="Automatic_application_of_optimizeLegibility">optimizeLegibility の自動的な適用</h3>
+
+<p><code>font-size</code> が <code>20px</code> 未満の場合にブラウザーが自動的に <code>optimizeLegibility</code> を使用する方法を紹介します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="small"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="big"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Automatic_application_of_optimizeLegibility') }}</p>
+
+<h3 id="optimizeSpeed_vs_optimizeLegibility" name="optimizeSpeed_vs_optimizeLegibility">optimizeSpeed と optimizeLegibility</h3>
+
+<p>この例は、 <code>optimizeSpeed</code> と <code>optimizeLegibility</code> の (このブラウザーでの) 表示方法の違いを紹介します (ブラウザーによって違います)。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="speed"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="legibility"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('optimizeSpeed_vs_optimizeLegibility') }}</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('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-rendering")}}</p>
diff --git a/files/ja/web/css/text-shadow/index.html b/files/ja/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..fdd7a81eba
--- /dev/null
+++ b/files/ja/web/css/text-shadow/index.html
@@ -0,0 +1,152 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Property
+  - CSS Styles
+  - CSS Text Decoration
+  - CSS スタイル
+  - CSS テキスト装飾
+  - CSS プロパティ
+  - HTML Colors
+  - HTML Styles
+  - HTML スタイル
+  - HTML 色
+  - Reference
+  - Styles
+  - Styling HTML
+  - color
+  - 'recipe:css-property'
+  - スタイル
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-shadow</code></strong> は CSS のプロパティで、テキストに影を追加します。文字列及びその<code><a href="/ja/docs/Web/CSS/text-decoration">装飾</a></code>に適用される影のカンマで区切られたリストを受け付けます。</span>それぞれの影は、要素からの X および Y オフセット、影の明るさ、影の色のうちいくつかの組み合わせで記述します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* color および blur-radius は既定値を使用 */
+text-shadow: 5px 10px;
+
+/* グローバル値 */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>このプロパティは、影のカンマで区切られたリストとして指定します。</p>
+
+<p>それぞれの影は2つ又は3つの <code>&lt;length&gt;</code> 値と、任意でその後に <code>&lt;color&gt;</code> 値を続けることで指定します。最初の2つの <code>&lt;length&gt;</code> 値は、 <code>&lt;offset-x&gt;</code> 及び <code>&lt;offset-y&gt;</code> の値です。3番目の <code>&lt;length&gt;</code> 値は、任意で、 <code>&lt;blur-radius&gt;</code> です。 <code>&lt;color&gt;</code> 値は影の色です。</p>
+
+<p>複数の影が与えられた場合は、影は手前から奥に向けて適用され、最初に指定された影が一番上になります。</p>
+
+<p>このプロパティは {{cssxref("::first-line")}} 及び {{cssxref("::first-letter")}} の両方の<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>に適用されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。</dd>
+ <dt><code>&lt;offset-x&gt; &lt;offset-y&gt;</code></dt>
+ <dd>必須。これらの <code>&lt;length&gt;</code> 値はテキストに対する影のオフセットを指定します。 <code>&lt;offset-x&gt;</code> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <code>&lt;offset-y&gt;</code> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が <code>0</code> ならば、影はテキストの真後ろに配置されますが、 <code>&lt;blur-radius&gt;</code> の効果により一部だけが見えるかもしれません。</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>省略可。これは {{ cssxref("&lt;length&gt;") }} 値です。指定されなければ、既定では <code>0</code> になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Simple_shadow" name="Simple_shadow">単純な影</h3>
+
+<div>
+<pre class="brush: css notranslate">.red-text-shadow {
+  text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Multiple_shadows" name="Multiple_shadows">複数の影</h3>
+
+<div>
+<pre class="brush:css notranslate">.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</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 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>CSS プロパティ <code>text-shadow</code> は <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">CSS2 で不適切に定義され</a>、 CSS2 (Level 1) で削除されました。 CSS Text Module Level 3 仕様で構文を改善しました。その後、 <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> に移動しました。</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-shadow")}}</p>
+
+<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3>
+
+<ul>
+ <li>Gecko には {{cssxref("transition")}} にバグがあり、色が指定された <code>text-shadow</code> から色が指定されていない <code>text-shadow</code> への移行が動作しません ({{bug(726550)}})。これは Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> 又は <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリースされる予定です) で修正されています。</li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}} データ型 (影の色を指定するため)</li>
+ <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使った HTML の要素への色の適用</a></li>
+</ul>
diff --git a/files/ja/web/css/text-size-adjust/index.html b/files/ja/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..42a5364f7a
--- /dev/null
+++ b/files/ja/web/css/text-size-adjust/index.html
@@ -0,0 +1,86 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS モバイル文字サイズ調整
+  - Experimental
+  - NeedsExample
+  - リファレンス
+translation_of: Web/CSS/text-size-adjust
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>text-size-adjust</code></strong> プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。</p>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* &lt;percentage&gt; 値 */
+text-size-adjust: 80%;
+
+/* グローバル値 */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+</pre>
+
+<p>モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。</p>
+
+<p>こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 <code>text-size-adjust</code> プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>text-size-adjust</code> プロパティは <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code> の何れかで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="none"><code>none</code></dt>
+ <dd>ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した <code>none</code> 値を取り消すのに使います。</dd>
+ <dt id="&lt;percentage>"><code>&lt;percentage&gt;</code></dt>
+ <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
+   <td>{{Spec2("CSS Text Size Adjust")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.text-size-adjust")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a class="link-https" href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16">Apple のドキュメント</a></li>
+ <li>L. David Baron による、 <a class="external" href="http://dbaron.org/log/20111126-font-inflation">Gecko の挙動の説明</a></li>
+ <li><a class="external" href="https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS">Microsoft のドキュメント</a></li>
+</ul>
diff --git a/files/ja/web/css/text-transform/index.html b/files/ja/web/css/text-transform/index.html
new file mode 100644
index 0000000000..bcd53bafe2
--- /dev/null
+++ b/files/ja/web/css/text-transform/index.html
@@ -0,0 +1,373 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+  - Text
+  - 'recipe:css-property'
+  - 日本語処理
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>text-transform</code></strong> プロパティは、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>text-transform</code> プロパティは、以下のように言語固有の大文字・小文字の扱いを考慮します。</p>
+
+<ul>
+ <li>
+  <p>トルコ語 (<code>tr</code>)、アゼルバイジャン語 (<code>az</code>)、クリミア・タタール語 (<code>crh</code>)、ヴォルガ・タタール語 (<code>tt</code>)、バシキール語 (<code>ba</code>) などのチュルク語族にはドットの有無が異なる 2 種類の <code>i</code> があり、大文字・小文字のペアも <code>i</code>/<code>İ</code> と <code>ı</code>/<code>I</code> の 2 組があります。</p>
+ </li>
+ <li>
+  <p>ドイツ語 (<code>de</code>) では、<code>ß</code> の大文字が <code>SS</code> になります。</p>
+ </li>
+ <li>
+  <p>オランダ語 (<code>nl</code>) では二重音字 <code>ij</code> が、単語の最初の文字のみ大文字にする <code>text-transform: capitalize</code> を指定しても <code>IJ</code> になります。</p>
+ </li>
+ <li>
+  <p>ギリシャ語 (<code>el</code>) では離接的接続のエータ (<code>ή</code>/<code>Ή</code>) を除き、単語全体が大文字であるときに母音のアクセント記号がなくなります (<code>ά</code>/<code>Α</code>)。また、1 文字目にアクセント記号がある二重母音はアクセント記号がなくなり、2 文字目の母音にトレマがつきます (<code>άι</code>/<code>ΑΪ</code>)。</p>
+ </li>
+ <li>
+  <p>ギリシャ語 (<code>el</code>) で、小文字のシグマは <code>σ</code> と <code>ς</code> の 2 種類あります。<code>ς</code> は、単語の末尾にあるシグマに限り使用します。大文字のシグマ (<code>Σ</code>) に <code>text-transform: lowercase</code> を適用すると、ブラウザーは状況に応じて正しい小文字を選択しなければなりません。</p>
+ </li>
+ <li>アイルランド語 (<code>ga</code>) では、頭文字が大文字化されていても特定の接頭辞文字が小文字のままになります。例えば <code>text-transform: uppercase</code> は <code>ar aon tslí</code> を、予想される <code>AR AON TSLÍ </code> ではなく <code>AR AON tSLÍ</code> にします (Firefox に限る)。大文字化によりハイフンが削除される場合もあり、<code>an t-uisce</code> は <code>AN tUISCE </code> になります (また、<code>text-transform: lowercase</code> ではハイフンが適切に再挿入されます)。</li>
+</ul>
+
+<p>言語は HTML の <code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code> 属性や XML の <code><a href="/ja/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 属性で定義します。</p>
+
+<div class="note">
+<p><strong>注:</strong> これらの特定のケースはブラウザーにより異なりますので、<a href="#Browser_compatibility">ブラウザーの互換性</a>を確認してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* グローバル値 */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+</pre>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>
+ <p>それぞれの単語の最初の<em>文字</em>を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。</p>
+
+ <div class="note"><code>capitalize</code> が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。</div>
+
+ <div class="note"><code>capitalize</code> キーワードは CSS 1 及び CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は <code>-</code> および <code>_</code> を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は <code>ⓐ</code> のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の <code>capitalize</code> の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。</div>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>すべての文字を大文字に変換させるキーワードです。</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>すべての文字を小文字に変換させるキーワードです。</dd>
+ <dt><code>none</code></dt>
+ <dd>すべての文字を変換させないキーワードです。</dd>
+ <dt><code>full-width</code></dt>
+ <dd>一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。</dd>
+ <dt><code>full-size-kana</code></dt>
+ <dd>このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>テキストの長い区間に <code>text-transform</code> の値を <code>uppercase</code> で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="none" name="none"><code>none</code></h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: none
+  &lt;strong&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: none;
+}
+strong { float: right; }</pre>
+
+<p>文字を変換しない例です。</p>
+
+<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p>
+
+<h3 id="capitalize_General" name="capitalize_General">capitalize (一般的)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: capitalize
+  &lt;strong&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>頭文字を大文字にする例です。</p>
+
+<p>{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}</p>
+
+<h3 id="capitalize_Punctuation" name="capitalize_Punctuation">capitalize (句読点)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: capitalize
+  &lt;strong&gt;&lt;span&gt;(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。</p>
+
+<p>{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}</p>
+
+<h3 id="capitalize_Symbols" name="capitalize_Symbols">capitalize (記号)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: capitalize
+  &lt;strong&gt;&lt;span&gt;ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。</p>
+
+<p>{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}</p>
+
+<h3 id="capitalize_Dutch_ij_digraph" name="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong lang="nl"&gt;The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: capitalize
+  &lt;strong&gt;&lt;span lang="nl"&gt;The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: capitalize;
+}
+strong { float: right; }</pre>
+
+<p>オランダ語の二重音字 <em>ij</em> を1文字として扱わなければならないことを示す例です。</p>
+
+<p>{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}</p>
+
+<h3 id="uppercase_General" name="uppercase_General">uppercase (一般的)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: uppercase
+  &lt;strong&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>テキストを大文字に変換する例です。</p>
+
+<p>{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}</p>
+
+<h3 id="uppercase_Greek_Vowels" name="uppercase_Greek_Vowels">uppercase&gt; (ギリシャ語の母音字)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: uppercase
+  &lt;strong&gt;&lt;span&gt;Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: uppercase;
+}
+strong { float: right; }</pre>
+
+<p>離接的接続の <em>eta</em> を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。</p>
+
+<p>{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}</p>
+
+<h3 id="lowercase_General" name="lowercase_General">lowercase (一般的)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: lowercase
+  &lt;strong&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>テキストを小文字に変換する例です。</p>
+
+<p>{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}</p>
+
+<h3 id="lowercase_Greek_Σ" name="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: lowercase
+  &lt;strong&gt;&lt;span&gt;Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>ギリシャ文字のシグマ (<code>Σ</code>) が、状況に応じて一般的な小文字のシグマ (<code>σ</code>) または単語の末尾での表記 (<code>ς</code>) に変換される例です。</p>
+
+<p>{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}</p>
+
+<h3 id="lowercase_Lithuanian" name="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;Ĩ is a Lithuanian LETTER as is J́&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: lowercase
+  &lt;strong&gt;&lt;span lang="lt"&gt;Ĩ is a Lithuanian LETTER as is J́&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: lowercase;
+}
+strong { float: right; }</pre>
+
+<p>これはリヒテンシュタインの文字 <code>Ĩ</code> および <code>J́</code> が小文字に変換されるとドットを保持する様子を示します。</p>
+
+<p>{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}</p>
+
+<h3 id="full-width_General" name="full-width_General">full-width (一般)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: full-width
+  &lt;strong&gt;&lt;span&gt;0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }</pre>
+
+<p>一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。</p>
+
+<p>{{ EmbedLiveSample('full-width_General', '100%', '175px') }}</p>
+
+<h3 id="full-width_Japanese_half-width_katakana" name="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Initial String
+  &lt;strong&gt;ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強&lt;/strong&gt;
+&lt;/p&gt;
+&lt;p&gt;text-transform: full-width
+  &lt;strong&gt;&lt;span&gt;ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強&lt;/span&gt;&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }</pre>
+
+<p>日本語の半角カタカナは、8ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の2つのコードポイントで表現されます。 <code>full-width</code> は、これらの文字を全角に変換する際に、1つのコードポイントにまとめます。</p>
+
+<p>{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}</p>
+
+<h3 id="full-size-kana">full-size-kana</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+&lt;p&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p:nth-of-type(2) {
+  text-transform: full-size-kana;
+}</pre>
+
+<p>{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}</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 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>対象の文字を {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} から、 Unicode の数字又は文字一般のカテゴリーに属するすべての文字に拡張。 <code>capitalize</code> の動作を、最初の区切り文字や記号を無視して単語の先頭の文字に適用するように変更。表意文字とアルファベット文字を自然な形で混在させるための <code>full-width</code> および <code>full-size-kana</code> キーワードを追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>対象の文字を {{SpecName('CSS1', '#text-transform', 'text-transform')}} から、2 種類の表記を持つ非ラテン文字に拡張。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-transform")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/ja/web/css/text-underline-offset/index.html b/files/ja/web/css/text-underline-offset/index.html
new file mode 100644
index 0000000000..46dab30ce4
--- /dev/null
+++ b/files/ja/web/css/text-underline-offset/index.html
@@ -0,0 +1,104 @@
+---
+title: text-underline-offset
+slug: Web/CSS/text-underline-offset
+tags:
+  - CSS
+  - CSS Text Decoration
+  - CSS テキスト装飾
+  - Property
+  - Reference
+  - text-decoration
+  - text-underline-offset
+  - プロパティ
+translation_of: Web/CSS/text-underline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>text-underline-offset</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、 ({{cssxref("text-decoration")}} を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。</p>
+
+<p><code>text-underline-offset</code> は {{cssxref('text-decoration')}} の一括指定の一部ではありません。一つの要素が複数の <code>text-decoration</code> による線を持つため、 <code>text-underline-offset</code> は下線のみに影響し、 <code>overline</code> や <code>line-through</code> などの他の装飾線には影響<strong>しません</strong>。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 単一のキーワード */
+text-underline-offset: auto;
+
+/* 長さ */
+text-underline-offset: 0.1em;
+text-underline-offset: 3px;
+
+/* パーセント値 */
+text-underline-offset: 20%;
+
+/* グローバル値 */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+</pre>
+
+<p><code>text-underline-offset</code> プロパティは、以下のリストのうち一つの値で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>ブラウザーが下線の適切なオフセットを選択します。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>下線のオフセットを {{cssxref('length')}} で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 <code>em</code> 単位を使用することを推奨します。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>下線のオフセットを、要素のフォントにおける <strong>1 em</strong> に対する {{cssxref('percentage')}} で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: html">&lt;p class="oneline"&gt;Here's some text with an offset wavy red underline!&lt;/p&gt;
+&lt;br&gt;
+&lt;p class="twolines"&gt;This text has lines both above and below it. Only the bottom one is offset.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  text-decoration: underline wavy red;
+  text-underline-offset: 1em;
+}
+
+.twolines {
+  text-decoration-color: purple;
+  text-decoration-line: underline overline;
+}</pre>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '') }}</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('CSS4 Text Decoration', '#underline-offset', 'text-underline-offset')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.text-underline-offset")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-thickness")}}</li>
+</ul>
diff --git a/files/ja/web/css/time-percentage/index.html b/files/ja/web/css/time-percentage/index.html
new file mode 100644
index 0000000000..c5f9254b40
--- /dev/null
+++ b/files/ja/web/css/time-percentage/index.html
@@ -0,0 +1,56 @@
+---
+title: <time-percentage>
+slug: Web/CSS/time-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Reference
+  - time-percentage
+  - units
+  - values
+  - 値
+  - 単位
+translation_of: Web/CSS/time-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;time-percentage&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。</p>
+
+<h2 id="Use_in_calc()" name="Use_in_calc()">calc() での使用</h2>
+
+<p>許可されている型として <code>&lt;time-percentage&gt;</code> が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。</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('CSS4 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;time-percentage&gt;</code> を定義。 <code>calc()</code> を追加</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.time-percentage")}}</p>
diff --git a/files/ja/web/css/time/index.html b/files/ja/web/css/time/index.html
new file mode 100644
index 0000000000..8be9e47e20
--- /dev/null
+++ b/files/ja/web/css/time/index.html
@@ -0,0 +1,92 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;time&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、時間の値を秒単位またはミリ秒単位で表現します。これは {{cssxref("animation")}} や {{cssxref("transition")}} および関連するプロパティで使用されています。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;time&gt;</code> データ型は、 {{cssxref("&lt;number&gt;")}} の直後に下記の単位を続けます。省略可能ですが、その前に単一の <code>+</code> または <code>-</code> を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 数値の <code>0</code> は単にに関わらず常に同じですが、単位は省略できません。言い換えれば、 <code>0</code> は無効であり、 <code>0s</code> または <code>0ms</code> を表すものではありません。</p>
+</div>
+
+<h3 id="Units" name="Units">単位</h3>
+
+<dl>
+ <dt><strong><code id="s">s</code></strong></dt>
+ <dd>秒単位の時間を表します。例: <code>0s</code>, <code>1.5s</code>, <code>-60s</code></dd>
+ <dt><strong><code id="ms">ms</code></strong></dt>
+ <dd>ミリ秒単位の時間を表します。例: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>s</code> と <code>ms</code> の間の変換は、論理的に <code>1s</code> = <code>1000ms</code> となります。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Valid_times" name="Valid_times">正しい時間</h3>
+
+<pre>12s         正の整数
+-456ms      負の整数
+4.3ms       整数でない数値
+14mS        単位では大文字小文字が区別されませんが、大文字は推奨されません。
++0s         先導する + と単位を伴うゼロです
+-0ms        先導する - と単位を伴うゼロです
+</pre>
+
+<h3 id="Invalid_times" name="Invalid_times">正しくない時間</h3>
+
+<pre>0           単位なしのゼロは &lt;length&gt; では使えますが、他のすべての単位では無効です。
+12.0        これは <a title="CSS/number">&lt;number&gt;</a> で &lt;time&gt; ではありません。単位が必須です。
+7 ms        <a title="CSS/number">&lt;number&gt;</a> と単位の間に空白を置いてはいけません。
+</pre>
+
+<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('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>s</code> と <code>ms</code> の正規の定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td><code>s</code> と <code>ms</code> の非公式な定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.time")}}</p>
diff --git a/files/ja/web/css/tools/index.html b/files/ja/web/css/tools/index.html
new file mode 100644
index 0000000000..fb51e9d15d
--- /dev/null
+++ b/files/ja/web/css/tools/index.html
@@ -0,0 +1,30 @@
+---
+title: ツール
+slug: Web/CSS/Tools
+tags:
+  - CSS
+  - Guide
+  - NeedsUpdate
+  - ガイド
+translation_of: Web/CSS/Tools
+---
+<div></div>
+
+<p>CSS は強力な機能を多数提供していますが、その中には使いこなすのが面倒だったり、引数が多かったりするので、作業をしながら視覚化できると便利です。このページでは、これらの機能を使ってコンテンツのスタイルを整えるための CSS を構築するのに役立つ便利なツールへのリンクをいくつか紹介しています。</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Other_tools" name="Other_tools">その他のツール</h2>
+
+<ul>
+ <li>CSS アニメーション - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></li>
+ <li>端末のディスプレイ情報を調べる ({{Glossary("responsive web design")}} で役立ちます) - <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>CSS メニュー - <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>強力でモダンな CSS リンターで、一貫性のある規約を施行し、スタイルシートでのエラーを回避するのに役立ちます - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS">CSS</a></li>
+</ul>
diff --git a/files/ja/web/css/top/index.html b/files/ja/web/css/top/index.html
new file mode 100644
index 0000000000..4dbceec996
--- /dev/null
+++ b/files/ja/web/css/top/index.html
@@ -0,0 +1,136 @@
+---
+title: top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/top
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>top</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> のプロパティで、<ruby><a href="/ja/docs/Web/CSS/position">位置指定要素</a><rp> (</rp><rt>positioned elements</rt><rp>) </rp></ruby>の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><code>top</code> の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。</p>
+
+<ul>
+ <li><code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されている場合、 <code>top</code> プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。</li>
+ <li><code>position</code> が <code>relative</code> に設定されている場合、 <code>top</code> プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。</li>
+ <li><code>position</code> が <code>sticky</code> に設定されている場合、 <code>top</code> プロパティは粘着制約矩形の計算に使用されます。</li>
+ <li><code>position</code> が <code>static</code> に設定されている場合、 <code>top</code> プロパティは<em>効果がありません</em>。</li>
+</ul>
+
+<p><code>top</code> と {{cssxref("bottom")}} の両方が指定されており、 <code>position</code> が <code>absolute</code> または <code>fixed</code> に設定されており、<em>かつ</em> {{cssxref("height")}} が未指定 (<code>auto</code> または <code>100%</code> のどちらか) の場合は、 <code>top</code> と <code>bottom</code> の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または <code>position</code> が <code>relative</code> に設定されていた場合は、 <code>top</code> プロパティが優先されて <code>bottom</code> プロパティは無視されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+top: 3px;
+top: 2.4em;
+
+/* 包含ブロックの高さに対する &lt;percentage&gt; */
+top: 10%;
+
+/* キーワード値 */
+top: auto;
+
+/* グローバル値 */
+top: inherit;
+top: initial;
+top: 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("bottom")}} プロパティに基づいて決まり、 <code>height: auto</code> は内容物の高さに基づいて決まります。また、 <code>bottom</code> も <code>auto</code> であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。</li>
+  <li><em>相対位置指定要素</em>では、通常の位置から要素までの距離は {{Cssxref("bottom")}} に基づきます。また、 <code>bottom</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>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+div {
+  position: absolute;
+  top: 10%;
+  right: 40%;
+  bottom: 20%;
+  left: 15%;
+  background: gold;
+  border: 1px solid blue;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;この内容の寸法は、辺の位置によって決まります。&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Examples','100%','200')}}</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 Positioning', '#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>sticky の位置の動作を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.top")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("inset")}} は関連する {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} プロパティすべての一括指定です</li>
+ <li>対応する論理プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/ja/web/css/touch-action/index.html b/files/ja/web/css/touch-action/index.html
new file mode 100644
index 0000000000..53d4d83b61
--- /dev/null
+++ b/files/ja/web/css/touch-action/index.html
@@ -0,0 +1,165 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+tags:
+  - CSS
+  - CSS Property
+  - Pointer Events
+  - Reference
+  - 'recipe:css-property'
+  - ポインターイベント
+translation_of: Web/CSS/touch-action
+---
+<p>{{CSSRef}}</p>
+
+<p>CSS の <strong><code>touch-action</code></strong> プロパティは、タッチ画面のユーザーが要素のある領域をどのように操作できるか (例えば、ブラウザー内に組み込まれたパンまたはズーム機能) を設定します。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+touch-action: auto;
+touch-action: none;
+touch-action: pan-x;
+touch-action: pan-left;
+touch-action: pan-right;
+touch-action: pan-y;
+touch-action: pan-up;
+touch-action: pan-down;
+touch-action: pinch-zoom;
+touch-action: manipulation;
+
+/* グローバル値 */
+touch-action: inherit;
+touch-action: initial;
+touch-action: unset;
+</pre>
+
+<p>既定で、パン (スクロール) およびピンチ操作はブラウザーとは独立して別に扱われます。{{domxref("Pointer_events", "ポインターイベント", "", 1)}}を使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに {{domxref("HTMLElement/pointercancel_event", "pointercancel")}} イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために {{domxref("HTMLElement/pointermove_event", "pointermove")}} および {{domxref("HTMLElement/pointerup_event", "pointerup")}} リスナーの中で独自の振る舞いを提供することができます。{{domxref("Touch_events", "タッチイベント", "", 1)}}を使用するアプリケーションは、 {{domxref("Event.preventDefault","preventDefault()")}} を呼び出すことでブラウザーがジェスチャーを扱うのを無効にすることができますが、イベントリスナーが呼び出される前に、 <code>touch-action</code> を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。</p>
+
+<p>ジェスチャーが開始されると、ブラウザーはタッチ要素の <code>touch-action</code> の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 <code>touch-action</code> は通常、その要素の子孫のいずれかに <code>touch-action</code> を明示的に指定する必要なく、独自の動作を持つ最上位の要素にのみ適用されます。</p>
+
+<div class="blockIndicator note">
+<p>ジェスチャーが開始された後、 <code>touch-action</code> の値を変更しても、現在のジェスチャーの動作には影響を与えません。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>touch-action</code> プロパティは次の何れかの形で指定することができます。</p>
+
+<ul>
+ <li><code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code> のキーワードのうち一つと、<em>または</em></li>
+ <li><code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, のキーワードのうち一つと、加えて任意のキーワード <code><a href="#pinch-zoom">pinch-zoom</a></code>。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。</dd>
+ <dt id="pan-x"><code>pan-x</code></dt>
+ <dd>指１本で水平にパンするジェスチャーを有効にします。 <strong>pan-y</strong>, <strong>pan-up</strong>, <strong>pan-down</strong>, <strong>pinch-zoom</strong> と組み合わせることができます。</dd>
+ <dt id="pan-y"><code>pan-y</code></dt>
+ <dd>指１本で垂直にパンするジェスチャーを有効にします。 <strong>pan-x</strong>, <strong>pan-left</strong>, <strong>pan-right</strong>, <strong>pinch-zoom</strong> と組み合わせることができます。</dd>
+ <dt id="manipulation"><code>manipulation</code></dt>
+ <dd>パンおよびズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーが<strong>クリック</strong>イベントの生成を待つ必要がなくなります。これは "<strong>pan-x pan-y pinch-zoom</strong>" の別名です (互換性のために、これも有効です)。</dd>
+</dl>
+
+<dl>
+ <dt id="pan-keywords"><code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> {{experimental_inline}}</dt>
+ <dd>指定された方向へのスクロールを始める指１本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (<strong>pan-up</strong>) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に <strong>pan-left</strong> はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "<strong>pan-left pan-right</strong>" は "<strong>pan-x</strong>" の方がより単純なので不正ですが、 "<strong>pan-left pan-down</strong>" 有効です)。</dd>
+ <dt id="pinch-zoom"><code>pinch-zoom</code></dt>
+ <dd>複数の指でのページのパンやズーム有効にします。これは <strong>pan-</strong> のあらゆる値と組み合わせることができます。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><code>touch-action: none;</code> の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="すべてのジェスチャーの無効化">すべてのジェスチャーの無効化</h3>
+
+<p>最も一般的な使い方は、要素 (およびスクロールしないその子孫) のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div id="map"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#map {
+  height: 400px;
+  width: 400px;
+  background: blue;
+  touch-action: none;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Disabling_all_gestures')}}</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('Compat', '#touch-action', 'touch-action')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td><code>pinch-zoom</code> プロパティ値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 3', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 3')}}</td>
+   <td><code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> プロパティ値を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>最新の勧告</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">
+<p>このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+</div>
+
+<p>{{compat("css.properties.touch-action")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Pointer_events","Pointer Events")}}</li>
+ <li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li>
+ <li>Google Developers Blog <a href="https://developers.google.com/web/updates/2017/01/scrolling-intervention">Making touch scrolling fast by default</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Scroll_Snap">スクロールスナップ</a></li>
+</ul>
diff --git a/files/ja/web/css/transform-box/index.html b/files/ja/web/css/transform-box/index.html
new file mode 100644
index 0000000000..54c06483cd
--- /dev/null
+++ b/files/ja/web/css/transform-box/index.html
@@ -0,0 +1,90 @@
+---
+title: transform-box
+slug: Web/CSS/transform-box
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+  - CSS プロパティ
+  - CSS 変形
+  - Experimental
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Reference
+translation_of: Web/CSS/transform-box
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transform-box</code></strong> プロパティは、 {{cssxref("transform")}} と {{cssxref("transform-origin")}} プロパティに関連したレイアウトボックスを定義します。</p>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+transform-box: content-box;
+transform-box: border-box;
+transform-box: fill-box;
+transform-box: stroke-box;
+transform-box: view-box;
+
+/* グローバル値 */
+transform-box: inherit;
+transform-box: initial;
+transform-box: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>transform-box</code> プロパティは、以下のキーワードの 1 つで指定されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>
+ <p>コンテンツボックスを参照ボックスとして使用します。 {{htmlElement("table")}} の参照ボックスは、テーブルボックスではなく、安定ラッパーボックスの境界ボックスになります。</p>
+ </dd>
+ <dt><code>border-box</code></dt>
+ <dd>参照ボックスとして、境界ボックスが使用されます。テーブルの参照ボックスはテーブルボックスではなく、テーブルをラップしているボックスの境界ボックスとなります。</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>参照ボックスとしてバウンディングボックスが使用されます。</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>ストロークのバウンディングボックスを基準ボックスとしています。</dd>
+ <dt><code>view-box</code></dt>
+ <dd>参照ボックスとして、直近の {{Glossary("SVG")}} を使用します。SVG ビューポートに {{SVGAttr("viewBox")}} 属性が指定されていた場合、参照ボックスは <code>viewBox</code> 属性によって設定された座標系の原点に配置されます。また、参照ボックスの寸法は <code>viewBox</code> 属性の幅と高さの値に設定されています。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 Transforms', '#transform-box', 'transform-box')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.transform-box")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Using_CSS_transforms">CSS 変形の利用</a></li>
+ <li>{{cssxref("transform")}}, {{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/index.html b/files/ja/web/css/transform-function/index.html
new file mode 100644
index 0000000000..192ef4aa4c
--- /dev/null
+++ b/files/ja/web/css/transform-function/index.html
@@ -0,0 +1,293 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Data Type
+  - Layout
+  - Reference
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>&lt;transform-function&gt;</code> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、要素の外見の変形を表します。変換<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは {{cssxref("transform")}} プロパティの中で使用されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;transform-function&gt;</code> データ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は二次元または三次元の座標操作を適用します。</p>
+
+<h3 id="Matrix_transformation" name="Matrix_transformation">行列変換</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
+ <dd>二次元の同次変換行列を記述します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
+ <dd>三次元の変換を4×4の同次行列で記述します。</dd>
+</dl>
+
+<h3 id="Perspective" name="Perspective">視点距離</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
+ <dd>ユーザーと z=0 平面との間の距離を設定します。</dd>
+</dl>
+
+<h3 id="Rotation" name="Rotation">回転</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
+ <dd>要素を二次元平面上で特定の点を中心に回転します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
+ <dd>要素を三次元空間で特定の軸を中心に回転します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
+ <dd>要素を水平軸を中心に回転します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
+ <dd>要素を垂直軸を中心に回転します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
+ <dd>要素を Z 軸を中心に回転します。</dd>
+</dl>
+
+<h3 id="Scaling_resizing" name="Scaling_resizing">拡大縮小</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
+ <dd>要素を二次元平面上で拡大または縮小します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt>
+ <dd>要素を三次元空間で拡大または縮小します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
+ <dd>要素を水平に拡大または縮小します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
+ <dd>要素を垂直に拡大または縮小します。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
+ <dd>要素を Z 軸方向に拡大または縮小します。</dd>
+</dl>
+
+<h3 id="Skewing_distortion" name="Skewing_distortion">歪め</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
+ <dd>要素を二次元平面上で歪ませます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
+ <dd>要素を水平方向に歪ませます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
+ <dd>要素を垂直方向に歪ませます。</dd>
+</dl>
+
+<h3 id="Translation_moving" name="Translation_moving">平行移動</h3>
+
+<dl>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
+ <dd>要素を二次元平面上で平行移動させます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
+ <dd>要素を三次元空間で平行移動させます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
+ <dd>要素を水平方向に平行移動させます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
+ <dd>要素を垂直方向に平行移動させます。</dd>
+ <dt><code><a href="/ja/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
+ <dd>要素を Z 軸方向に平行移動させます。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>HTML 要素の寸法や形状を記述するために様々な座標モデルが用いられることがあり、同様に変換にも適用されます。最も一般的なものは、<a href="https://ja.wikipedia.org/wiki/%E7%9B%B4%E4%BA%A4%E5%BA%A7%E6%A8%99%E7%B3%BB">直交座標系</a>ですが、<a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">同次座標系</a>が用いられることもあります。</p>
+
+<h3 id="Cartesian_coordinates" name="Cartesian_coordinates">直交座標系</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right;"></a></p>
+
+<p>直交座標系では、二次元の点は、 X 座標 (横座標) と Y 座標 (縦座標) の二つの値を使用して記述します。これは <code>(x, y)</code> のベクトル表記で表現されます。</p>
+
+<p>CSS (および多くのコンピューターグラフィック) では、原点 <code>(0, 0)</code> が各要素の<em>左上</em>を表します。正の座標は原点から下および右に向かい、負の座標は上および左に向かいます。従って、右に2単位、下に5単位では <code>(2, 5)</code> となり、左に3単位、上に12単位では <code>(-3, -12)</code> となります。</p>
+
+<h3 id="Transformation_functions" name="Transformation_functions">変換関数</h3>
+
+<p>変換関数は、座標の値を操作することによって要素の外見を変更します。線形変換関数は、次のように2×2の行列で記述されます。</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p>
+
+<p>関数は行列の乗算によって要素に適用されます。つまり、それぞれの座標は行列の値に基づいて変化します。</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>一行の中に複数の変換を適用することもできます。</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>この記法で、最もよく使われる回転、拡大縮小、傾斜の変換を記述し、合成することができます。 (実際、すべての変換が記述できる線形関数です。) 変換の合成は右から左の順に効果的に適用されます。</p>
+
+<p>しかし、主要な変換のうち平行移動は線形ではなく、従ってこの記法を使用する場合は特例とする必要があります。平行移動のベクトル <code>(tx, ty)</code> は、二つの追加の引数で別に表現しなければなりません。</p>
+
+<div class="note">
+<p><strong>注:</strong> 直交座標よりも難解ですが、<a class="external" href="https://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1%E5%B9%BE%E4%BD%95%E5%AD%A6">射影幾何学</a>の<a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">同次座標</a>は3×3の変換行列を使用するので、線形関数として平行移動をより簡単に表現できます。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Transform_function_comparison" name="Transform_function_comparison">変換関数の比較</h3>
+
+<p>次の例では、 DOM 要素と変換から作成された 3D 立方体と、立方体を変換するためのさまざまな変換関数を選択できる選択メニューを提供しています。</p>
+
+<p>1 つを選択すると、立方体に変換が適用されます。 2 秒後に立方体は開始状態に戻ります。立方体の開始状態は、 <code>transform3d()</code> を使用してわずかに回転され、すべての変換の効果を見ることができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;section id="example-element"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+  &lt;/section&gt;
+
+  &lt;div class="select-form"&gt;
+    &lt;label&gt;Select a transform function&lt;/label&gt;
+    &lt;select&gt;
+      &lt;option selected&gt;Choose a function&lt;/option&gt;
+      &lt;option&gt;rotate(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateX(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateY(360deg)&lt;/option&gt;
+      &lt;option&gt;rotateZ(360deg)&lt;/option&gt;
+      &lt;option&gt;rotate3d(1, 1, 1, 90deg)&lt;/option&gt;
+      &lt;option&gt;scale(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleX(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleY(1.5)&lt;/option&gt;
+      &lt;option&gt;scaleZ(1.5)&lt;/option&gt;
+      &lt;option&gt;scale3d(1, 1.5, 1.5)&lt;/option&gt;
+      &lt;option&gt;skew(17deg, 13deg)&lt;/option&gt;
+      &lt;option&gt;skewX(17deg)&lt;/option&gt;
+      &lt;option&gt;skewY(17deg)&lt;/option&gt;
+      &lt;option&gt;translate(100px, 100px)&lt;/option&gt;
+      &lt;option&gt;translateX(100px)&lt;/option&gt;
+      &lt;option&gt;translateY(100px)&lt;/option&gt;
+      &lt;option&gt;translateZ(100px)&lt;/option&gt;
+      &lt;option&gt;translate3d(50px, 50px, 50px)&lt;/option&gt;
+      &lt;option&gt;perspective(200px)&lt;/option&gt;
+      &lt;option&gt;matrix(1, 2, -1, 1, 80, 80)&lt;/option&gt;
+      &lt;option&gt;matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  width: 400px;
+  height: 200px;
+  padding: 50px;
+  background-image: linear-gradient(135deg, white, cyan, white);
+}
+
+#example-element {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transition: transform 1.5s;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+.select-form {
+  margin-top: 50px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selectElem = document.querySelector('select');
+const example = document.querySelector('#example-element');
+
+selectElem.addEventListener('change', () =&gt; {
+  if(selectElem.value === 'Choose a function') {
+    return;
+  } else {
+    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
+    setTimeout(function() {
+      example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
+    }, 2000)
+  }
+})</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Transform_function_comparison', '100%', 300)}}</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('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>三次元変換関数を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.types.transform-function")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS の {{cssxref("transform")}} プロパティ</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/matrix()/index.html b/files/ja/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..02af2d3f7d
--- /dev/null
+++ b/files/ja/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,113 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+tags:
+  - CSS
+  - CSS 変換
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix()</code></strong> 関数は、二次元同次変換行列を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>matrix(a, b, c, d, tx, ty)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> の短縮形です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>matrix()</code> 関数は6つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。</p>
+
+<div class="note"><strong>メモ:</strong> Firefox 16 までは、 Gecko は {{cssxref("&lt;length&gt;")}} 値を <var>tx</var> および <var>ty</var> で受け付けていました。</div>
+
+<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>a</var> <var>b</var> <var>c</var> <var>d</var></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、線形変換を記述します。</dd>
+ <dt><var>tx</var> <var>ty</var></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、適用する変換を記述します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="changed"&gt;Changed&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 350, 350)}}</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 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/ja/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
+</ul>
diff --git a/files/ja/web/css/transform-function/matrix3d()/index.html b/files/ja/web/css/transform-function/matrix3d()/index.html
new file mode 100644
index 0000000000..c34354f047
--- /dev/null
+++ b/files/ja/web/css/transform-function/matrix3d()/index.html
@@ -0,0 +1,240 @@
+---
+title: matrix3d()
+slug: Web/CSS/transform-function/matrix3d()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/matrix3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>matrix3d()</code></strong> 関数は、 4x4 の三次元同次変換行列を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>matrix3d()</code> 関数は16の値で指定します。列優先の順で記述します。</p>
+
+<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、線形変換を記述します。</dd>
+ <dt><var>a4</var> <var>b4</var> <var>c4 d4</var></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、適用する変換を記述します。</dd>
+</dl>
+
+<div class="note"><strong>注:</strong> Firefox 16 までは、 Gecko は {{cssxref("&lt;length&gt;")}} 値を <var>a4</var>, <var>b4</var>, <var>c4</var> で受け付けていました。</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">この変換は三次元空間に適用され、平面で表現することはできません。</td>
+   <td colspan="1" rowspan="2">一般的な三次元<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F">アファイン変換</a>は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="つぶれる立方体の例">つぶれる立方体の例</h3>
+
+<p>次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで <code>matrix3d()</code> 変換を適用することができます。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section id="example-element" tabindex="0"&gt;
+  &lt;div class="face front"&gt;1&lt;/div&gt;
+  &lt;div class="face back"&gt;2&lt;/div&gt;
+  &lt;div class="face right"&gt;3&lt;/div&gt;
+  &lt;div class="face left"&gt;4&lt;/div&gt;
+  &lt;div class="face top"&gt;5&lt;/div&gt;
+  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#example-element {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transition: transform 1.5s;
+  transform: rotate3d(1, 1, 1, 30deg);
+  margin: 50px auto;
+}
+
+#example-element:hover, #example-element:focus {
+  transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<div>{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}}</div>
+
+<h3 id="行列変換と拡大縮小の例">行列変換と拡大縮小の例</h3>
+
+<p>もう一つの <code>transform3d()</code> の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="foo"&gt;
+Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<div>{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}</div>
+
+<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("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
+</ul>
diff --git a/files/ja/web/css/transform-function/perspective()/index.html b/files/ja/web/css/transform-function/perspective()/index.html
new file mode 100644
index 0000000000..ba64284843
--- /dev/null
+++ b/files/ja/web/css/transform-function/perspective()/index.html
@@ -0,0 +1,158 @@
+---
+title: perspective()
+slug: Web/CSS/transform-function/perspective()
+tags:
+  - CSS
+  - CSS 変換
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/perspective()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>perspective()</code></strong> 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p><code>perspective()</code> 変形関数は、変形される要素に適用される {{cssxref('transform')}} 値の一部です。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>perspective()</code> を使用してしている視点距離は {{cssxref("&lt;length&gt;")}} 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。</p>
+
+<pre class="syntaxbox notranslate">perspective(d)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>d</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>この変換は三次元空間に適用され、平面で表現することはできません。</p>
+   </td>
+   <td colspan="1" rowspan="2">この変換は ℝ<sup>3</sup> では線形変換ではないので、デカルト座標行列を使用して表現することはできません。</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Without perspective:&lt;/p&gt;
+&lt;div class="no-perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;With perspective (9cm):&lt;/p&gt;
+&lt;div class="perspective-box-far"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;With perspective (4cm):&lt;/p&gt;
+&lt;div class="perspective-box-closer"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples', '250', '350') }}</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("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/rotate()/index.html b/files/ja/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..38d18aca73
--- /dev/null
+++ b/files/ja/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,153 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - CSS 変換
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate()</code></strong> 関数は、要素を二次元平面上の特定の点を中心に、変形させずに回転させます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p>要素が回転する中心となる特定の点 — 前述 — は、<strong>変形原点</strong>とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rotate()</code> で生成される回転の量は、 {{cssxref("&lt;angle&gt;")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180度で回転したものは<em>点対称</em>と呼ばれます。</p>
+
+<pre class="syntaxbox notranslate">rotate(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>a</var></dt>
+ <dd>{{ cssxref("&lt;angle&gt;") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example", "auto", 180)}}</p>
+
+<h3 id="Combining_rotation_with_another_transformation" name="Combining_rotation_with_another_transformation">回転とその他の変形の組み合わせ</h3>
+
+<p>複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Rotated&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Rotated + Translated&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translated + Rotated&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}}</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 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/ja/web/css/transform-function/rotate3d()/index.html b/files/ja/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..9590e855db
--- /dev/null
+++ b/files/ja/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,153 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - CSS 変形
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>rotate3d()</code></strong> 関数は、要素を三次元空間内の固定した軸を中心に、変形させずに回転させます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>3D 空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は [x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが<em>正規化</em>されていない場合 (すなわち、3つの座標の2乗の合計が1ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル [0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。</p>
+
+<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rotate3d()</code> で行う回転の量は、3つの {{cssxref("&lt;number&gt;")}} および1つの {{cssxref("&lt;angle&gt;")}} で指定します。 <code>&lt;number&gt;</code> は回転軸を表すベクトルの X, Y, Z 座標を表します。 <code>&lt;angle&gt;</code> は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。</p>
+
+<pre class="syntaxbox">rotate3d(<var>x</var>, <var>y</var>, <var>z</var>, <var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>x</var></code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。</dd>
+ <dt><code><var>y</var></code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。</dd>
+ <dt><code><var>z</var></code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。</dd>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{ cssxref("&lt;angle&gt;") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <td rowspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td>
+  </tr>
+  <tr>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+  </tr>
+  <tr>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+  </tr>
+  <tr>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Rotating_on_the_y-axis" name="Rotating_on_the_y-axis">Y 軸に沿って回転</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
+
+<h3 id="Rotating_on_a_custom_axis" name="Rotating_on_a_custom_axis">独自の軸に沿って回転</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/rotatex()/index.html b/files/ja/web/css/transform-function/rotatex()/index.html
new file mode 100644
index 0000000000..e7bfbd1d8c
--- /dev/null
+++ b/files/ja/web/css/transform-function/rotatex()/index.html
@@ -0,0 +1,114 @@
+---
+title: rotateX()
+slug: Web/CSS/transform-function/rotateX()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - CSS 変形
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/rotateX()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>rotateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>rotateX(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(1, 0, 0, a)</code> と等価です。</p>
+</div>
+
+<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rotateX()</code> で生成される回転の量は、 {{cssxref("&lt;angle&gt;")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p>
+
+<pre class="syntaxbox">rotateX(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{ cssxref("&lt;angle&gt;") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateX(45deg);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/rotatey()/index.html b/files/ja/web/css/transform-function/rotatey()/index.html
new file mode 100644
index 0000000000..f6e15b36a3
--- /dev/null
+++ b/files/ja/web/css/transform-function/rotatey()/index.html
@@ -0,0 +1,114 @@
+---
+title: rotateY()
+slug: Web/CSS/transform-function/rotateY()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - CSS 変形
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/rotateY()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>rotateY()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>rotateY(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 1, 0, a)</code> と等価です。</p>
+</div>
+
+<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rotateY()</code> で生成される回転の量は、 {{cssxref("&lt;angle&gt;")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p>
+
+<pre class="syntaxbox notranslate">rotateY(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{ cssxref("&lt;angle&gt;") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateY(60deg);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/rotatez()/index.html b/files/ja/web/css/transform-function/rotatez()/index.html
new file mode 100644
index 0000000000..aec4b6a9ce
--- /dev/null
+++ b/files/ja/web/css/transform-function/rotatez()/index.html
@@ -0,0 +1,114 @@
+---
+title: rotateZ()
+slug: Web/CSS/transform-function/rotateZ()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - CSS 変形
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/rotateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>rotateZ()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>rotateZ(a)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate</a>(a)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/rotate3d">rotate3d</a>(0, 0, 1, a)</code> と等価です。</p>
+</div>
+
+<div class="note"><strong>メモ:</strong> 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>rotateZ()</code> で生成される回転の量は、 {{cssxref("&lt;angle&gt;")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。</p>
+
+<pre class="syntaxbox">rotateZ(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{ cssxref("&lt;angle&gt;") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">この変形は三次元空間に適用され、平面で表すことはできません。</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateZ(45deg);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "auto", 180)}}</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("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/scale()/index.html b/files/ja/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..585964f29b
--- /dev/null
+++ b/files/ja/web/css/transform-function/scale()/index.html
@@ -0,0 +1,158 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - CSS
+  - CSS 変形
+  - CSS 関数
+  - Reference
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scale()</code></strong> は <a href="/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は<a href="https://en.wikipedia.org/wiki/Homothetic_transformation"> 相似変換</a> を定義します)。</p>
+
+<p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p>
+
+<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>scale()</code> 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。</p>
+
+<pre class="syntaxbox notranslate">scale(<var>sx</var>)
+
+scale(<var>sx</var>, <var>sy</var>)
+</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<dl>
+ <dt><code><var>sx</var></code></dt>
+ <dd>変倍ベクトルの横座標を表す {{cssxref("&lt;number&gt;")}}。</dd>
+ <dt><code><var>sy</var></code></dt>
+ <dd>変倍ベクトルの縦座標を表す {{cssxref("&lt;number&gt;")}}。定義されない場合、これのデフォルト値は <code><var>sx</var></code> であり、要素の形を保つ一様な変倍となります。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> 上のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> 上の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> 上のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> 上の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Scaling_the_X_and_Y_dimensions_together" name="Scaling_the_X_and_Y_dimensions_together">X と Y の大きさを一緒に変倍する</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p>
+
+<h3 id="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin" name="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin">X と Y の大きさを別々に変倍し、原点を平行移動させる</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p>
+
+<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p>
+
+<p>詳しくは以下の文書を参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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 Transforms", "#funcdef-transform-scale", "scale()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>互換性の情報は <code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/scalex()/index.html b/files/ja/web/css/transform-function/scalex()/index.html
new file mode 100644
index 0000000000..72dbcfc046
--- /dev/null
+++ b/files/ja/web/css/transform-function/scalex()/index.html
@@ -0,0 +1,116 @@
+---
+title: scaleX()
+slug: Web/CSS/transform-function/scaleX()
+translation_of: Web/CSS/transform-function/scaleX()
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="https://developer.mozilla.org/ja/docs/Web/CSS">CSS</a>の<strong><code>scaleX()</code></strong> 関数は、要素をX軸に沿って（水平に）拡縮する変形を定義します。</div>
+
+<div>結果は <a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-function" title="CSS の &lt;transform-function> データ型は、要素の外見の変形を表します。変形関数は二次元または三次元空間で要素を回転、拡大縮小、歪曲、移動させることができます。これは transform プロパティの中で使用されます。"><code>&lt;transform-function&gt;</code></a> データ型になります。</div>
+
+<div></div>
+
+<div></div>
+
+<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p>
+
+<p>係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleX(-1)</code> は<a href="http://en.wikipedia.org/wiki/Axial_symmetry" rel="noopener">軸の線対称</a>を定義し、垂直軸は原点を通過します (<a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform-origin" title="CSS の transform-origin プロパティは、要素の変形 (transform) における原点を設定します。"><code>transform-origin</code></a> プロパティで指定)。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>scaleX(sx)</code>は<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> </span></font></code><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code>または<code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code>と等価です。</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">scaleX(<em>s</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the abscissa of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples","200","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/scaley()/index.html b/files/ja/web/css/transform-function/scaley()/index.html
new file mode 100644
index 0000000000..213942b13c
--- /dev/null
+++ b/files/ja/web/css/transform-function/scaley()/index.html
@@ -0,0 +1,93 @@
+---
+title: scaleY()
+slug: Web/CSS/transform-function/scaleY()
+tags:
+  - CSS
+  - CSS 変形
+  - CSS 関数
+  - リファレンス
+translation_of: Web/CSS/transform-function/scaleY()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>scaleY()</code></strong> 関数は、要素を Y 軸に沿って (垂直に) 拡縮する変形を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p>
+
+<p>係数が 1 である場合を除いて、各要素点の縦座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 <code>scaleY(-1)</code> は<a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">軸の線対称</a>を定義し、水平軸は原点を通過します ({{cssxref("transform-origin")}} プロパティで指定)。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>scaleY(sy)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/scale">scale</a>(1, sy)</code> または <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d</a>(1, sy, 1)</code> と等価です。</p>
+
+<p><code>transform: rotateX(180deg);</code>  === <code>transform: scaleY(-1);</code></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">scaleY(s)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} で、要素のそれぞれの点を規則的に適用する拡大縮小係数を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleY(0.6);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Examples", 200, 200)}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/skew()/index.html b/files/ja/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..f99a4a1ea0
--- /dev/null
+++ b/files/ja/web/css/transform-function/skew()/index.html
@@ -0,0 +1,154 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>skew()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。</p>
+
+<p>それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>skew()</code> で生成される回転の量は、 {{cssxref("&lt;angle&gt;")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。1つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。</p>
+
+<pre class="syntaxbox notranslate">skew(<var>ax</var>)
+
+skew(<var>ax</var>, <var>ay</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>ax</var></code></dt>
+ <dd>{{cssxref("&lt;angle&gt;")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。</dd>
+ <dt><code><var>ay</var></code></dt>
+ <dd>{{cssxref("&lt;angle&gt;")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は <code>0</code> となり、水平方向にのみゆがめます。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Skewing_on_the_x-axis_only" name="Skewing_on_the_x-axis_only">X 軸のみの変形</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  margin: 20px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}}</p>
+
+<h3 id="Skewing_on_both_axes" name="Skewing_on_both_axes">両方の軸の変形</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  margin: 20px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}}</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 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="/ja/docs/Web/CSS/transform-function/skewX">skewX()</a></li>
+ <li><a href="/ja/docs/Web/CSS/transform-function/skewY">skewY()</a></li>
+</ul>
diff --git a/files/ja/web/css/transform-function/skewx()/index.html b/files/ja/web/css/transform-function/skewx()/index.html
new file mode 100644
index 0000000000..d84043f6ef
--- /dev/null
+++ b/files/ja/web/css/transform-function/skewx()/index.html
@@ -0,0 +1,113 @@
+---
+title: skewX()
+slug: Web/CSS/transform-function/skewX()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/skewX()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>skewX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p>
+
+<div class="note">
+<p><strong>注:</strong> <code>skewX(a)</code> は <code><a href="/ja/docs/Web/CSS/transform-function/skew">skew</a>(a)</code> と等価です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">skewX(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{cssxref("&lt;angle&gt;")}} で、横座標方向にゆがめるのに使用する角度を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewX(10deg); /* Equal to skew(10deg) */
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 200, 200)}}</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 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/skewy()/index.html b/files/ja/web/css/transform-function/skewy()/index.html
new file mode 100644
index 0000000000..8d19654b1d
--- /dev/null
+++ b/files/ja/web/css/transform-function/skewy()/index.html
@@ -0,0 +1,109 @@
+---
+title: skewY()
+slug: Web/CSS/transform-function/skewY()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/skewY()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>skewY()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">skewY(<var>a</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>a</var></code></dt>
+ <dd>{{cssxref("&lt;angle&gt;")}} で、縦座標方向にゆがめるのに使用する角度を表します。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(a)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="skewed"&gt;Skewed&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewY(40deg);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 200, 200)}}</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 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/translate()/index.html b/files/ja/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..a2c8c98f51
--- /dev/null
+++ b/files/ja/web/css/transform-function/translate()/index.html
@@ -0,0 +1,153 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translate()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が動くかの座標を定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 単一の &lt;length-percentage&gt; 値 */
+transform: translate(200px);
+transform: translate(50%);
+
+/* 二つの &lt;length-percentage&gt; 値 */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>単一の <code>&lt;length-percentage&gt;</code> values</dt>
+ <dd>この値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は <code>0</code> に設定されます。例えば、 <code>translate(2)</code> は <code>translate(2, 0)</code> と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。</dd>
+ <dt>二つの <code>&lt;length-percentage&gt;</code> 値</dt>
+ <dd>この値は2つの {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2つ目にパーセント値が使用された場合は、高さからの相対値です。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">translate({{cssxref("&lt;length-percentage&gt;")}} , {{cssxref("&lt;length-percentage&gt;")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>)
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_a_single-axis_translation" name="Using_a_single-axis_translation">単一軸を使用した変形</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p>
+
+<h3 id="Combining_y-axis_and_x-axis_translation" name="Combining_y-axis_and_x-axis_translation">Y 軸と X 軸の変換の組み合わせ</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</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 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/translate3d()/index.html b/files/ja/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..2096870fb1
--- /dev/null
+++ b/files/ja/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,141 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translate3d()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を 3D 空間内で再配置します。返値は {{cssxref("&lt;transform-function&gt;")}} データ型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>tx</var></code></dt>
+ <dd>変換ベクトルの横座標を表す {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。</dd>
+ <dt><code><var>ty</var></code></dt>
+ <dd>変換ベクトルの縦座標を表す {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。</dd>
+ <dt><code><var>tz</var></code></dt>
+ <dd>変換ベクトルの z 成分を表す {{cssxref("&lt;length&gt;")}} です。 {{cssxref("&lt;percentage&gt;")}} 値は指定できません。この場合、これを含む変換は無効とされます。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p>
+   </td>
+   <td colspan="1" rowspan="2">ℝ<sup>3</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">単一軸を使用した変換</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p>
+
+<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">z 軸と x 軸を組み合わせた変換</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</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("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/translatex/index.html b/files/ja/web/css/transform-function/translatex/index.html
new file mode 100644
index 0000000000..e709d708d2
--- /dev/null
+++ b/files/ja/web/css/transform-function/translatex/index.html
@@ -0,0 +1,119 @@
+---
+title: translateX()
+slug: Web/CSS/transform-function/translateX
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/translateX
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
+
+<div class="note">
+<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;length-percentage&gt; values */
+transform: translateX(200px);
+transform: translateX(50%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>変換ベクトルの横座標を表す {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">translateX({{cssxref("&lt;length-percentage&gt;")}})
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* translate(10px) と等価 */
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 250, 250)}}</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 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/translatey()/index.html b/files/ja/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..e0fd47a7bb
--- /dev/null
+++ b/files/ja/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,114 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translateX()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/en-US/docs/Web/CSS/CSS_Functions">function</a>で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
+
+<div class="note">
+<p><strong>注:</strong> <code>translateX(tx)</code> は <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0)</code> または <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)</code> と等価です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* &lt;length-percentage&gt; values */
+transform: translateX(200px);
+transform: translateX(50%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>変換ベクトルの横座標を表す {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* translate(10px) と等価 */
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 250, 250)}}</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 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-function/translatez()/index.html b/files/ja/web/css/transform-function/translatez()/index.html
new file mode 100644
index 0000000000..75367b6518
--- /dev/null
+++ b/files/ja/web/css/transform-function/translatez()/index.html
@@ -0,0 +1,122 @@
+---
+title: translateZ()
+slug: Web/CSS/transform-function/translateZ()
+tags:
+  - 3D
+  - CSS
+  - CSS Function
+  - CSS Transforms
+  - Function
+  - Reference
+translation_of: Web/CSS/transform-function/translateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translateZ()</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> <a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>は、3 次元空間の z 軸に沿って、すなわちビューアーに近づくまたは遠ざかって、要素を移動させます。その結果は {{cssxref("&lt;transform-function&gt;")}} データ型となります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>この変換は、 {{cssxref("&lt;length&gt;")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。</p>
+
+<p>上記のデモでは、 <code><a href="/ja/docs/Web/CSS/perspective">perspective: 550px;</a></code> (3D空間を作成するため) と <code><a href="/ja/docs/Web/CSS/transform-style">transform-style. preserve-3d;</a></code> (従って、子つまり立方体の6辺も3D空間に配置されています) が、立方体に設定されています。</p>
+
+<div class="note">
+<p><strong>注:</strong> <code>translateZ(tz)</code> は、<code><a href="/ja/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code> と等価です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">translateZ(<var>tz</var>)
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code><var>tz</var></code></dt>
+ <dd>変換ベクトルの z 成分を表す{{cssxref("&lt;length&gt;")}}。正の値では要素がビューアーに向かって移動し、負の値で移動すると遠ざかります。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
+   <th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">この変換は 3 次元空間に適用されます。平面上では表現できません。</td>
+   <td colspan="1" rowspan="2">この変換は ℝ<sup>3</sup> の線形変換ではなく、デカルト座標系の行列では表現できません。</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例では、2 つのボックスが作成されます。 1 つは通常変換されずにページ上に配置されます。 2 番目の方法は、3D 空間を作成するためのパースペクティブを適用して変更し、ユーザーに向かって移動します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+</pre>
+
+<p>本当にここで重要なのは、class "moved" です。それが何をするかを見てみましょう。 まず、<code><a href="/ja/docs/Web/CSS/transform-function/perspective">perspective()</a></code> 関数は、ビューアーを、z=0 (本質的にスクリーンの表面) にある平面に対してビューアーを配置します。<code>500px</code> の値は、ユーザーが z=0 にある画像の「正面」に 500 ピクセルあることを意味します。</p>
+
+<p>次に、<code>translateZ()</code> 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、2D ディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の 3D ディスプレイデバイスを使用して見たときに要素をより近く見せるという効果があります。</p>
+
+<p>なお、 <code>perspective()</code> の値が <code>translateZ()</code> の値よりも小さい場合、例えば <code>transform: perspective(200px) translateZ(300px);</code> の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。</p>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 250, 250)}}</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('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>3D 変換関数を CSS Transforms 標準に追加。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型の互換性情報をご覧ください。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ja/web/css/transform-origin/index.html b/files/ja/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..ae06a595f3
--- /dev/null
+++ b/files/ja/web/css/transform-origin/index.html
@@ -0,0 +1,478 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+  - Reference
+  - 'default value: center'
+  - 'recipe:css-property'
+  - transform-origin
+translation_of: Web/CSS/transform-origin
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>transform-origin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<ruby>変形<rp> (</rp><rt>transform</rt><rp>) </rp></ruby>における原点を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>変形の原点とは、それを中心に変形が適用される点です。例えば、 <code><a href="/ja/docs/Web/CSS/transform-function/rotate">rotate()</a></code> 関数における変形の原点は、回転の中心です。</p>
+
+<p>このプロパティは最初にプロパティ値の反対に平行移動し、それから要素の変形を適用し、プロパティ値の分だけ平行移動する形でで適用されます。<br>
+ すなわち、</p>
+
+<pre class="brush: css notranslate">transform-origin: -100% 50%;
+transform: rotate(45deg);
+</pre>
+
+<p>この定義は以下の変形と同じです。</p>
+
+<pre class="brush: css notranslate">transform-origin: 0 0;
+transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);</pre>
+
+<p>既定で、変形の原点は <code>center</code> です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css notranslate">/* 値１つの構文 */
+transform-origin: 2px;
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* グローバル値 */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p><code>transform-origin</code> プロパティは、オフセットを表す１～３つの値を使用して指定することができます。明示的に定義されなかったオフセットは、それぞれの対応する<a href="/ja/docs/Web/CSS/initial_value">初期値</a>にリセットされます。</p>
+
+<p>２つ以上の値が定義され、どちらもの値もキーワードでない場合、または使われているキーワードが <code>center</code> だけであった場合、最初の値は水平方向のオフセットであり、二番目の値は垂直方向のオフセットです。</p>
+
+<ul>
+ <li>値１つの構文:
+  <ul>
+   <li>値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又は <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
+  </ul>
+ </li>
+ <li>値２つの構文:
+  <ul>
+   <li>一方の値は {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>left</code>, <code>center</code>, <code>right</code> のうちの１つでなければなりません。</li>
+   <li>もう一方の値は、 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 又はキーワードの <code>top</code>, <code>center</code>, <code>bottom</code> のうちの１つでなければなりません。</li>
+  </ul>
+ </li>
+ <li>値３つの構文:
+  <ul>
+   <li>１番目と２番目の値は、値２つの構文と同じです。</li>
+   <li>３番目の値は {{cssxref("&lt;length&gt;")}} でなければなりません。これは常に Z オフセットを表します。</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><var>x-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの左端から変形の原点までの距離を示す値です。</dd>
+ <dt><var>offset-keyword</var></dt>
+ <dd><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、対応するオフセットを表します。</dd>
+ <dt><var>y-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} の、ボックスの右端から変形の原点までの距離を示す値です。</dd>
+ <dt><var>x-offset-keyword</var></dt>
+ <dd><code>left</code>, <code>right</code>, <code>center</code> のいずれかのキーワードで、ボックスの左端から変形の原点までの距離を示します。</dd>
+ <dt><var>y-offset-keyword</var></dt>
+ <dd><code>top</code>, <code>bottom</code>, <code>center</code> のいずれかのキーワードで、ボックスの上端から変形の原点までの距離を示します。</dd>
+ <dt><var>z-offset</var></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 値 ({{cssxref("&lt;percentage&gt;")}} を指定すると文が無効になります) で、ユーザーの視点と z=0 原点の距離を示します。</dd>
+</dl>
+
+<p>キーワードは便利な速記であり、次の {{cssxref("&lt;percentage&gt;")}} 値に相当します。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">キーワード</th>
+   <th scope="col">値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>コード</th>
+   <th>サンプル</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html notranslate">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+-webkit-transform: none;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html notranslate">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html notranslate">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html notranslate">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+-webkit-transform-origin: 100% 100%;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -1em -3em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html notranslate">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -1em -3em;
+-webkit-transform-origin: -1em -3em;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html notranslate">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html notranslate">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html notranslate">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html notranslate">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+-webkit-transform: skewX(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html notranslate">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css notranslate">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+-webkit-transform: skewY(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.transform-origin")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
+ <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
+</ul>
diff --git a/files/ja/web/css/transform-style/index.html b/files/ja/web/css/transform-style/index.html
new file mode 100644
index 0000000000..07e0eb8a4f
--- /dev/null
+++ b/files/ja/web/css/transform-style/index.html
@@ -0,0 +1,176 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+  - Experimental
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/transform-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>transform-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>平面化した場合、子要素は自身の 3D 空間に存在しなくなります。</p>
+
+<p>このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+transform-style: flat;
+transform-style: preserve-3d;
+
+/* グローバル値 */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>flat</code></dt>
+ <dd>要素の子要素を要素自身の平面上に配置することを示します。</dd>
+ <dt><code>preserve-3d</code></dt>
+ <dd>要素の子要素を 3D 空間に配置することを示します。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Transform_style_demonstration" name="Transform_style_demonstration">変換スタイルのデモ</h3>
+
+<p>この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で <code>transform-style: preserve-3d</code> が設定されているため、3D 空間で変換され、意図したとおりに表示されます。</p>
+
+<p>また、これと <code>transform-style: flat</code> の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section id="example-element"&gt;
+  &lt;div class="face front"&gt;1&lt;/div&gt;
+  &lt;div class="face back"&gt;2&lt;/div&gt;
+  &lt;div class="face right"&gt;3&lt;/div&gt;
+  &lt;div class="face left"&gt;4&lt;/div&gt;
+  &lt;div class="face top"&gt;5&lt;/div&gt;
+  &lt;div class="face bottom"&gt;6&lt;/div&gt;
+&lt;/section&gt;
+
+&lt;div class="checkbox"&gt;
+  &lt;label for="preserve"&gt;&lt;code&gt;preserve-3d&lt;/code&gt;&lt;/label&gt;
+  &lt;input type="checkbox" id="preserve" checked&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#example-element {
+  margin: 50px;
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotate3d(1, 1, 1, 30deg);
+}
+
+.face {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: inherit;
+  font-size: 60px;
+  color: #fff;
+}
+
+.front {
+    background: rgba(90,90,90,.7);
+    transform: translateZ(50px);
+}
+
+.back {
+    background: rgba(0,210,0,.7);
+    transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(210,0,0,.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0,0,210,.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(210,210,0,.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(210,0,210,.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const cube = document.getElementById('example-element');
+const checkbox = document.getElementById('preserve');
+
+checkbox.addEventListener('change', () =&gt; {
+  if(checkbox.checked) {
+    cube.style.transformStyle = 'preserve-3d';
+  } else {
+    cube.style.transformStyle = 'flat';
+  }
+})</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}</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('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.transform-style")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
+</ul>
diff --git a/files/ja/web/css/transform/index.html b/files/ja/web/css/transform/index.html
new file mode 100644
index 0000000000..8d137e227e
--- /dev/null
+++ b/files/ja/web/css/transform/index.html
@@ -0,0 +1,152 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 変形
+  - Reference
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/ja/docs/Web/CSS">CSS</a> のプロパティ <strong><code>transform</code></strong> は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>の座標空間を変更します。</div>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p>
+
+<div class="warning">
+<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/en-US/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css">/* キーワード値 */
+transform: none;
+
+/* 関数値 */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* 複数の関数値 */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* グローバル値 */
+transform: inherit;
+transform: initial;
+transform: unset;
+</pre>
+
+<p><code>transform</code> プロパティには、キーワード値 <code><a href="#none">none</a></code> か <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code> の値のいずれかが指定されます。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>適用される 1 つ以上の <a href="/ja/docs/Web/CSS/transform-function">CSS 変形関数</a>です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>変形を何も適用しないことを指定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Transformed element&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", "400", "160")}}</p>
+
+<p>その他の例は、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Transforms の利用</a> および {{cssxref("&lt;transform-function&gt;")}} をご覧ください。</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p>
+
+<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p>
+
+<p>詳しくは以下の文書を参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>3D 変換関数を追加。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.transform")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
+ <li>{{cssxref("&lt;transform-function&gt;")}} データ型にすべての変形関数の説明があります</li>
+ <li>CSS 変形機能を視覚化するオンラインツール: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li>
+</ul>
diff --git a/files/ja/web/css/transition-delay/index.html b/files/ja/web/css/transition-delay/index.html
new file mode 100644
index 0000000000..9094d98eb4
--- /dev/null
+++ b/files/ja/web/css/transition-delay/index.html
@@ -0,0 +1,357 @@
+---
+title: transition-delay
+slug: Web/CSS/transition-delay
+tags:
+  - CSS
+  - CSS トランジション
+  - CSS プロパティ
+  - Reference
+  - リファレンス
+translation_of: Web/CSS/transition-delay
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <code>transition-delay</code> プロパティは、値が変更されたときにプロパティの<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">トランジション効果</a>が始まるまでの待ち時間を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>待ち時間はゼロ、正の数、負の数で指定します。</p>
+
+<ul>
+ <li><code>0s</code> (又は <code>0ms</code>) の値は直ちにトランジション効果が始まります。</li>
+ <li>正の数の場合は、指定された時間の長さの分だけトランジション効果が始まるのが遅れます。</li>
+ <li>負の数の場合は、直ちにトランジション効果が、効果の途中から始まります。言い換えれば、効果は指定された時間の長さの分だけ既に実行されていたかのように動きます。</li>
+</ul>
+
+<p>複数の待ち時間を指定することができ、複数のプロパティのトランジションを行うときに有用です。それぞれの待ち時間は、マスターリストである {{cssxref("transition-property")}} プロパティによって指定された対応するプロパティに適用されます。マスターリストよりも指定された待ち時間が少ない場合は、充足するまで待ち時間のリストが繰り返して使用されます。また待ち時間の数が多い場合は、リストが適切な長さに切り詰められます。どちらの場合も、 CSS の宣言として妥当です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;time&gt; 値 */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* グローバル値 */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>プロパティの値の変更からアニメーション効果が始まるまでの待ち時間を表す {{cssxref("&lt;time&gt;")}} 形式の値。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>
+<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+</div>
+
+<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+</div>
+
+<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+</div>
+
+<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+</div>
+</div>
+
+<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', '#transition-delay-property', 'transition-delay')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.transition-delay")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの利用</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/transition-duration/index.html b/files/ja/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..c5bb4f0bbf
--- /dev/null
+++ b/files/ja/web/css/transition-duration/index.html
@@ -0,0 +1,349 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transitions
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-duration</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、トランジションによるアニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定します。既定値は <code>0s</code> であり、これはアニメーションを実行しないことを示します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>このプロパティには複数の所要時間を指定することができます。それぞれの時間は、マスターリストを務める {{ cssxref("transition-property") }} プロパティの指定値で対応するプロパティに適用されます。指定した所要時間の数がマスターリストで指定したプロパティの数より少ない場合は、不足している値は初期値 (<code>0s</code>) になります。また所要時間の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、CSS の宣言として妥当です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;time&gt; 値 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* グローバル値 */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>プロパティの古い値から新しい値へ遷移するのにかかる時間を表す {{cssxref("&lt;time&gt;")}} 形式の値です。<code>0s</code> の時間は、遷移が起こらないこと、すなわち、2 つの状態間の切り替えが瞬間的であることを示します。負の値を指定すると、宣言は無効になります。</dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css; notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css; notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css; notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html notranslate"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css; notranslate">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js notranslate">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<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', '#transition-duration-property', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.transition-duration")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの使用</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-property')}}</li>
+ <li>{{cssxref('transition-timing-function')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/transition-property/index.html b/files/ja/web/css/transition-property/index.html
new file mode 100644
index 0000000000..114e45fde5
--- /dev/null
+++ b/files/ja/web/css/transition-property/index.html
@@ -0,0 +1,103 @@
+---
+title: transition-property
+slug: Web/CSS/transition-property
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transitions
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/transition-property
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-property</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">トランジション効果</a>を適用する CSS プロパティを指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note"><strong>注:</strong> <a href="/ja/docs/Web/CSS/CSS_animated_properties">アニメーション可能なプロパティのセット</a>は変更される可能性があります。これにより、将来意図しない結果を引き起こす可能性があるため、リストで現状アニメーションしないとしているプロパティを使用することは避けてください。</div>
+
+<p>一括指定プロパティ (例えば {{cssxref("background")}}) を指定すると、その個別指定のサブプロパティすべてをアニメーションさせることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+transition-property: none;
+transition-property: all;
+
+/* &lt;custom-ident&gt; 値 */
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+
+/* 複数の値 */
+transition-property: test1, animation4;
+transition-property: all, height, color;
+transition-property: all, -moz-specific, sliding;
+
+/* グローバル値 */
+transition-property: inherit;
+transition-property: initial;
+transition-property: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>どのプロパティもトランジションを行いません。</dd>
+ <dt><code>all</code></dt>
+ <dd>トランジションが可能なすべてのプロパティで、トランジションを行います。</dd>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>値が変更されたとき、トランジション効果を適用するプロパティを識別する文字列です。</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>中心となる <a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>の記事に、 CSS トランジションの例がいくつかあります。</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', '#transition-property-property', 'transition-property')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.transition-property")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジションの使用</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-duration')}}</li>
+ <li>{{cssxref('transition-timing-function')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/transition-timing-function/index.html b/files/ja/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..c2c229f701
--- /dev/null
+++ b/files/ja/web/css/transition-timing-function/index.html
@@ -0,0 +1,286 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+tags:
+  - CSS
+  - CSS Reference
+  - 'CSS:Mozilla Extensions'
+  - Fixit
+  - NeedsNewCompatTable
+translation_of: Web/CSS/transition-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>transition-timing-function</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">トランジション効果</a>の作用を受ける CSS プロパティにおいて、中間状態の値を算出する方法を設定するために使用されます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは、簡単に言えば加速曲線を定義するもので、それによりトランジション実行中の値の変更速度を操作することができます。</p>
+
+<p>この加速曲線は、トランジションが行われるプロパティごとに 1 つの {{cssxref("&lt;timing-function&gt;")}} を用いて定義されます。</p>
+
+<p>複数のタイミング関数を指定することができます。それぞれのタイミング関数は、 {{ cssxref("transition-property") }} で指定されたように対応するプロパティに適用され、 <code>transition-property</code> のリストとして振るまいます。指定されたタイミング関数が <code>transition-property</code> のリストより少ない場合は、ユーザーエージェントはリスト内の値をそれぞれのトランジションプロパティのうちの値になるまで繰り返してどの値が使用されるかを計算します。関数の数が多い場合は、リストを適切な長さに切り詰めます。どちらの場合も、 CSS の宣言として妥当です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">/* キーワード値 */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* 関数値 */
+transition-timing-function: steps(4, jump-end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* 段階式の関数のキーワード */
+transition-timing-function: steps(4, jump-start);
+transition-timing-function: steps(10, jump-end);
+transition-timing-function: steps(20, jump-none);
+transition-timing-function: steps(5, jump-both);
+transition-timing-function: steps(6, start);
+transition-timing-function: steps(8, end);
+
+/* 複数のタイミング関数 */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* グローバル値 */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>各々の {{cssxref("&lt;timing-function&gt;")}} は {{ cssxref("transition-property") }} で指定された、トランジションを行うプロパティに対応するタイミング関数を表します。
+ <p>非段階のキーワード値 (ease, linear, ease-in-out, など) はそれぞれ4つの固定点による二次元ベジェ曲線を表しており、 cubic-bezier() 関数の値は定義済みの値以外を使用することができます。 The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.</p>
+
+ <dl>
+  <dt><code>ease</code></dt>
+  <dd>Equal to <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.</dd>
+  <dt><code>linear</code></dt>
+  <dd>Equal to <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code>, transitions at an even speed.</dd>
+  <dt><code>ease-in</code></dt>
+  <dd>Equal to <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code>, starts off slowly, with the transition speed increasing until complete.</dd>
+  <dt><code>ease-out</code></dt>
+  <dd>Equal to <code>cubic-bezier(0, 0, 0.58, 1.0)</code>, starts transitioning quickly, slowing down the transition continues. •</dd>
+  <dt><code>ease-in-out</code></dt>
+  <dd>Equal to <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code>, starts transitioning slowly, speeds up, and then slows down again.</dd>
+  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+  <dd>An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.</dd>
+  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
+  <dd>Displays the transition along <em>n stops along the transition, displaying each stop for </em>equal lengths of time. For example, if <em>n</em> is 5,  there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:
+  <dl>
+   <dt><code>jump-start</code></dt>
+   <dd>Denotes a left-continuous function, so that the first jump happens when the transition begins;</dd>
+   <dt><code>jump-end</code></dt>
+   <dd>Denotes a right-continuous function, so that the last jump happens when the animation ends;</dd>
+   <dt><code>jump-none</code></dt>
+   <dd>There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration</dd>
+   <dt><code>jump-both</code></dt>
+   <dd>Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.</dd>
+   <dt><code>start</code></dt>
+   <dd>Same as <code>jump-start.</code></dd>
+   <dt><code>end</code></dt>
+   <dd>Same as <code>jump-end.</code></dd>
+  </dl>
+  </dd>
+  <dt><code>step-start</code></dt>
+  <dd>Equal to <code>steps(1, jump-start)</code></dd>
+  <dt><code>step-end</code></dt>
+  <dd>Equal to <code>steps(1, jump-end)</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div>
+<h3 id="Cubic-Bezier_examples">Cubic-Bezier examples</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration: 7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration: 2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   transition-timing-function: ease;
+}
+.easein {
+   transition-timing-function: ease-in;
+}
+.easeout {
+   transition-timing-function: ease-out;
+}
+.easeinout {
+   transition-timing-function: ease-in-out;
+}
+.linear {
+   transition-timing-function: linear;
+}
+.cb {
+   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Cubic-Bezier_examples")}}</div>
+</div>
+
+<div>
+<h3 id="Step_examples">Step examples</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration:7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration:2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   transition-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   transition-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   transition-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   transition-timing-function: steps(5, jump-both);
+}
+.step-start {
+   transition-timing-function: step-start;
+}
+.step-end {
+   transition-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Step_examples")}}</div>
+</div>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p>Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p>
+
+<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</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', '#transition-timing-function-property', 'transition-timing-function') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.transition-timing-function")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="CSS transition の使用">CSS transition の使用</a></li>
+ <li>{{cssxref('transition')}}</li>
+ <li>{{cssxref('transition-property')}}</li>
+ <li>{{cssxref('transition-duration')}}</li>
+ <li>{{cssxref('transition-delay')}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/transition/index.html b/files/ja/web/css/transition/index.html
new file mode 100644
index 0000000000..0c17a379e7
--- /dev/null
+++ b/files/ja/web/css/transition/index.html
@@ -0,0 +1,108 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transitions
+  - CSS プロパティ
+  - CSS 遷移
+  - Reference
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>transition</code></strong> プロパティは、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の<a href="/en-US/docs/Web/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">一括指定プロパティ</a>です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>{{原語併記("遷移", "transition")}} によって、要素の2つの状態間の変化を定義することができます。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような<a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">疑似クラス</a>で定義するか、 JavaScript を使用して動的に設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* 1つのプロパティへの適用 */
+/* プロパティ名 | 時間 */
+transition: margin-right 4s;
+
+/* プロパティ名 | 時間 | 遅延 */
+transition: margin-right 4s 1s;
+
+/* プロパティ名 | 時間 | 時間関数 */
+transition: margin-right 4s ease-in-out;
+
+/* プロパティ名 | 時間 | 時間関数 | 遅延 */
+transition: margin-right 4s ease-in-out 1s;
+
+/* 2つのプロパティへの適用 */
+transition: margin-right 4s, color 1s;
+
+/* 変化するすべてのプロパティへの適用 */
+transition: all 0.5s ease-out;
+
+/* グローバル値 */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p><code>transition</code> プロパティは、1つまたは複数の単体プロパティによる遷移を、コンマで区切って指定します。</p>
+
+<p>それぞれの単体プロパティの遷移では、単体のプロパティ（または特別な値である <code>all</code> および <code>none</code>）に適用される遷移を記述します。記述は以下の通りです。</p>
+
+<ul>
+ <li>遷移を適用するプロパティを表す0～1個の値。以下のうちの一つです。
+  <ul>
+   <li><code>none</code> キーワード</li>
+   <li><code>all</code> キーワード</li>
+   <li>CSS プロパティの名前である {{cssxref("&lt;custom-ident&gt;")}}</li>
+  </ul>
+ </li>
+ <li>使用するタイミング関数を表す0～1個の {{cssxref("&lt;single-transition-timing-function&gt;")}} の値</li>
+ <li>0～2個の {{cssxref("&lt;time&gt;")}} の値。1番目の値は {{cssxref("transition-duration")}} に割り当てられる時間として解釈され、2番目の値は {{cssxref("transition-delay")}} に割り当てられる時間として解釈されます。</li>
+</ul>
+
+<p>プロパティ値の一覧が同じ長さではない場合については、 <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">how things are handled</a> を参照してください。 <span id="result_box" lang="ja"><span>つまり、実際にアニメーション化されているプロパティの数を超える余分な遷移の記述は無視されます。</span></span></p>
+
+<h3 id="Formal_syntax" name="Formal_syntax">構文形式</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_transitions" title="ja/CSS/CSS transitions">CSS transitions</a> の記事に、トランジションの例がいくつかあります。</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', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_transitions">CSS transitions の利用</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ja/web/css/translate/index.html b/files/ja/web/css/translate/index.html
new file mode 100644
index 0000000000..9d135968d6
--- /dev/null
+++ b/files/ja/web/css/translate/index.html
@@ -0,0 +1,121 @@
+---
+title: translate
+slug: Web/CSS/translate
+tags:
+  - CSS
+  - CSS Property
+  - CSS 変形
+  - Experimental
+  - Reference
+  - Transforms
+translation_of: Web/CSS/translate
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong><code>translate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、平行移動による変形を独自に、 {{CSSxRef("transform")}} プロパティから独立して指定することができます。これは一般的なユーザーインターフェイスの用途に適しており、 <code>transform</code> の値で指定する変形関数を正確に思い出す必要がなくなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+translate: none;
+
+/* 単一の値 */
+translate: 100px;
+translate: 50%;
+
+/* 二つの値 */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* 三つの値 */
+translate: 50% 105px 5rem;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>単一の {{cssxref("&lt;length-percentage&gt;")}} 値</dt>
+ <dd>単一の {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値で、 X 軸および Y 軸方向が同じ移動量の二次元の平行移動を指定します。 <code>translate()</code> (二次元の平行移動) 関数に単一の値を指定したものと同等です。</dd>
+ <dt>二つの {{cssxref("&lt;length-percentage&gt;")}} 値</dt>
+ <dd>二つの {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} 値で、二次元の平行移動における X および Y 軸方向の移動量を (それぞれ) 指定します。 <code>translate()</code> (二次元の平行移動) 関数に二つの値を指定したものと同等です。</dd>
+ <dt>三つの値</dt>
+ <dd>二つの {{cssxref("&lt;length-percentage&gt;")}} 値と一つの {{cssxref("&lt;length&gt;")}} 値で、三次元の平行移動における X, Y, Z 軸の移動量を (それぞれ) 指定します。 <code>translate3d()</code> (三次元の平行移動) 関数と同等です。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>平行移動が適用されないことを指定します。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="translate"&gt;Translation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.translate")}}</p>
diff --git a/files/ja/web/css/type_selectors/index.html b/files/ja/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..52fdecc83d
--- /dev/null
+++ b/files/ja/web/css/type_selectors/index.html
@@ -0,0 +1,85 @@
+---
+title: 要素型セレクター
+slug: Web/CSS/Type_selectors
+tags:
+  - CSS
+  - HTML
+  - Node
+  - Reference
+  - Selectors
+  - セレクター
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{ CSSRef }}</div>
+
+<p>CSS の<strong>要素型セレクター</strong> (type selector) は、ノード名で要素をマッチさせます。つまり、文書内にある指定された型の要素をすべて選択します。</p>
+
+<pre class="brush: css no-line-numbers">/* すべての &lt;a&gt; 要素。 */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">要素名 { <em>スタイルプロパティ</em> }
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;テキストを持つspanタグです。&lt;/span&gt;
+&lt;p&gt;テキストを持つpタグです。&lt;/p&gt;
+&lt;span&gt;追加のテキストを持つspanタグです。&lt;/span&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 150)}}</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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。このデータにコントリビュートしたい場合は、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> を確認してプルリクエストを送ってください。</div>
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/ja/web/css/unicode-bidi/index.html b/files/ja/web/css/unicode-bidi/index.html
new file mode 100644
index 0000000000..907ad46033
--- /dev/null
+++ b/files/ja/web/css/unicode-bidi/index.html
@@ -0,0 +1,117 @@
+---
+title: unicode-bidi
+slug: Web/CSS/unicode-bidi
+tags:
+  - BiDi
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Reference
+  - リファレンス
+translation_of: Web/CSS/unicode-bidi
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>unicode-bidi</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{Cssxref("direction")}} プロパティと共に、文書内の双方向テキストの扱いを指定します。例えば、テキストブロックに左から右 (LTR) 方向と右から左 (RTL) 方向へ記述されるテキストの両方が含まれる場合、ユーザエージェントは、複雑な Unicode アルゴリズムを用いてテキストの表示方法を決定します。 <code>unicode-bidi</code> プロパティは、このアルゴリズムを上書きして開発者がテキストの埋め込みを制御できるようにします。</p>
+
+<p><code>unicode-bidi</code> と {{cssxref("direction")}} プロパティだけは、 {{cssxref("all")}} 一括指定プロパティによる影響を受けません。</p>
+
+<p class="warning"><strong>メモ:</strong> このプロパティは文書型定義 (DTD) デザイナー向けです。ウェブデザイナー等の作者は、このアルゴリズムを<strong>上書きすべきではありません</strong>。</p>
+
+<pre class="brush:css">/* キーワード値 */
+unicode-bidi: normal;
+unicode-bidi: embed;
+unicode-bidi: isolate;
+unicode-bidi: bidi-override;
+unicode-bidi: isolate-override;
+unicode-bidi: plaintext;
+/* グローバル値 */
+unicode-bidi: inherit;
+unicode-bidi: initial;
+unicode-bidi: unset;</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>要素は、双方向アルゴリズムを尊重し、追加の埋め込みのレベルを提供しません。インライン要素に対しては、要素の境界に渡って、並べ替え作業を省略します。</dd>
+ <dt><code>embed</code></dt>
+ <dd>要素がインラインの場合、この値は双方向アルゴリズムを尊重し、追加の埋め込みのレベルを開きます。この埋め込みレベルの方向は、{{Cssxref("direction")}} プロパティにより与えられます。</dd>
+ <dt><code>bidi-override</code></dt>
+ <dd>インライン要素に対しては、この値で上書きされます。ブロックコンテナ要素に対しては、この値でインラインレベルの子孫を上書きし、別のブロックコンテナ要素は上書きしません。これは、要素内部に作用することを意味し、並べ替えは {{Cssxref("direction")}} による順序に従います。双方向アルゴリズムの省略された部分は無視されます。</dd>
+ <dt><code>isolate</code></dt>
+ <dd>このキーワードは、要素のコンテナの記述方向が、要素の内容を考慮せずに計算されることを示します。要素はその兄弟から <em>隔離</em> (isolated) されます。双方向解決アルゴリズムが適用される時、そのコンテナ要素は、対象の要素を 1 個またはいくつかの <code>U+FFFC Object Replacement Character</code> として処理します。つまり、画像要素のように扱います。</dd>
+ <dt><code>isolate-override</code></dt>
+ <dd>このキーワードは、周囲のコンテンツに <code>isolate</code> キーワードの隔離処理を適用し、内部のコンテンツに <code>bidi-override</code> キーワードの上書き処理を適用します。</dd>
+ <dt><code>plaintext</code></dt>
+ <dd>このキーワードは、要素の記述方向を、その親要素の双方向状態や {{cssxref("direction")}} プロパティの値を考慮せずに計算します。記述方向は、Unicode Bidirectional Algorithm の P2 および P3 規則を用いて計算されます。<br>
+ この値により、Unicode Bidirectional Algorithm に従うツールを用いてすでに整形されたデータを表示できます。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.bible-quote {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="bible-quote"&gt;
+  A line of text
+&lt;/div&gt;
+&lt;div&gt;
+  Another line of text
+&lt;/div&gt;
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td><code>plaintext</code> および <code>isolate</code>、<code>isolate-override</code> キーワードを追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.unicode-bidi")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("direction")}}</li>
+</ul>
diff --git a/files/ja/web/css/universal_selectors/index.html b/files/ja/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..fe1421ca54
--- /dev/null
+++ b/files/ja/web/css/universal_selectors/index.html
@@ -0,0 +1,106 @@
+---
+title: 全称セレクター
+slug: Web/CSS/Universal_selectors
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - セレクター
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の<ruby><strong>全称セレクター</strong><rp> (</rp><rt>universal selector</rt><rp>) </rp></ruby> (<code>*</code>) は、すべての種類の要素にマッチします。</p>
+
+<pre class="brush: css no-line-numbers">/* すべての要素を選択 */
+* {
+  color: green;
+}</pre>
+
+<p>CSS3 から、アスタリスクは{{cssxref("CSS_Namespaces", "名前空間")}}と組み合わせて使用できるようになりました。</p>
+
+<ul>
+ <li><code>ns|*</code> - 名前空間 <em>ns</em> の中ですべての要素にマッチします</li>
+ <li><code>*|*</code> - すべての要素にマッチします</li>
+ <li><code>|*</code> - 名前空間が宣言されていないすべての要素にマッチします</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">* { <em>スタイルプロパティ</em> }</pre>
+
+<p>アスタリスクは単純セレクターを伴う場合に省略可能です。たとえば、 <code>*.warning</code> と <code>.warning</code> は等価です。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* フロート要素の後の兄弟要素で自動的にフロートをクリアする */
+.floating + * {
+  clear: left;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;A green span&lt;/span&gt; in a red paragraph.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;A red span&lt;/span&gt; in a green paragraph.
+&lt;/p&gt;</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</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('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>名前空間に関する振る舞いを定義し、疑似要素の中でセレクターを省略できる旨を明記</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。このデータにコントリビュートしたい場合は、 <a href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> を確認してプルリクエストを送ってください。</p>
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/ja/web/css/unset/index.html b/files/ja/web/css/unset/index.html
new file mode 100644
index 0000000000..b152e2de23
--- /dev/null
+++ b/files/ja/web/css/unset/index.html
@@ -0,0 +1,130 @@
+---
+title: unset
+slug: Web/CSS/unset
+tags:
+  - CSS
+  - CSS カスケードと継承
+  - CSS 値
+  - Keyword
+  - Layout
+  - Reference
+  - Style
+  - unset
+  - スタイル
+  - レイアウト
+translation_of: Web/CSS/unset
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>unset</code></strong> は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ<a href="/ja/docs/Web/CSS/initial_value">初期値</a>を設定します。</span>言い換えれば、前者の<a href="/ja/docs/Web/CSS/inheritance#Inherited_properties">継承プロパティ</a>の場合は {{cssxref("inherit")}} キーワードのように動作し、後者の<a href="/ja/docs/Web/CSS/inheritance#Non-inherited_properties">非継承プロパティ</a>の場合は {{cssxref("initial")}} キーワードのように動作します。</p>
+
+<p><strong><code>unset</code></strong> はあらゆる CSS プロパティに対して、一括指定の {{cssxref("all")}} を含み、適用することができます。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Color" name="Color">色</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;このテキストは赤です。&lt;/p&gt;
+&lt;div class="foo"&gt;
+  &lt;p&gt;このテキストも赤です。&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="bar"&gt;
+  &lt;p&gt;このテキストは緑色 (既定の継承値) です。&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.foo {
+  color: blue;
+}
+.bar {
+  color: green;
+}
+
+p {
+  color: red;
+}
+.bar p {
+  color: unset;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{ EmbedLiveSample('Color') }}</p>
+
+<h3 id="Border" name="Border">境界線</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;This text has a red border.&lt;/p&gt;
+&lt;div&gt;
+  &lt;p&gt;This text has a red border.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="bar"&gt;
+  &lt;p&gt;This text has a black border (initial default, not inherited).&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 1px solid green;
+}
+
+p {
+  border: 1px solid red;
+}
+
+.bar p {
+  border-color: unset;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{ EmbedLiveSample('Border', 'auto', 200) }}</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('CSS4 Cascade', '#inherit-initial', 'unset') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Level 3 から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#inherit-initial', 'unset') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>初回定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.types.global_keywords.unset")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("initial")}} を使用すると、プロパティを初期値に設定します。</li>
+ <li>{{cssxref("revert")}} を使用すると、プロパティをユーザーエージェントのスタイルシート (又はもしあれば、ユーザーのスタイル) で設定された値に初期化します。</li>
+ <li>{{cssxref("inherit")}} を使用すると、要素のプロパティを親と同じ値にします。</li>
+ <li>{{cssxref("all")}} プロパティは、すべてのプロパティを一度に initial, inherit, revert, unset の状態にします。</li>
+</ul>
diff --git a/files/ja/web/css/url()/index.html b/files/ja/web/css/url()/index.html
new file mode 100644
index 0000000000..31168a5324
--- /dev/null
+++ b/files/ja/web/css/url()/index.html
@@ -0,0 +1,179 @@
+---
+title: url()
+slug: Web/CSS/url()
+tags:
+  - CSS
+  - CSS 関数
+  - Layout
+  - Reference
+  - Web
+  - url()
+  - レイアウト
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>url()</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです <code><strong>url()</strong></code> 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the &lt;url&gt; データ型の値になります。</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 単純な使い方 */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* 関連するプロパティ */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* 代替付きのプロパティ */
+cursor: url(pointer.cur), pointer;
+
+/* 関連する一括指定プロパティ */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* 他の CSS 関数の引数として */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* 一括指定ではない複数の値の一部として */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* @-規則 */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+</pre>
+
+<p>相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。</p>
+
+<p class="task-list-item"><code><strong>url()</strong></code> 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, <a href="/ja/docs/Web/CSS/@font-face">@font-face</a> ブロック内での <a href="/ja/docs/Web/CSS/@font-face/src">src</a>, <a href="/ja/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a> 値として使用することができます。</p>
+
+<p>CSS 第1水準では、 <code>url()</code> 関数表記は真に URL のみが記述されていました。 CSS 第2水準では、 <code>url()</code> の定義は任意の URI に広げられ、 URN を含むようになりました。 CSS Values and Units 第3水準では再び狭められ、 <code>url()</code> は真に <code>&lt;url&gt;</code> のみを記述するようになりました。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt>&lt;url&gt;</dt>
+  <dd>含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。
+  <pre class="syntaxbox notranslate">&lt;css_property&gt;: url("https://example.com/image.png")
+&lt;css_property&gt;: url('https://example.com/image.png')
+&lt;css_property&gt;: url(https://example.com/image.png)</pre>
+  </dd>
+  <dt>パス</dt>
+  <dd><a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">SVG 図形</a>の ID への参照 -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, <code>rect</code> -- パスとして図形の形状を使用します。</dd>
+ </dl>
+ </dd>
+ <dt><code style="white-space: nowrap;">&lt;url-modifier&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>将来的に <code>url()</code> 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">url( <a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a> &lt;url-modifier&gt;* )</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="content_property" name="content_property">content プロパティ</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2] notranslate">li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+
+<h3 id="data-uri">data-uri</h3>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6] notranslate">.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("data-uri", "100%", 50)}}</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('CSS4 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>CSS 第2水準 (第1稿) から重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS 第1水準から重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/url/index.html b/files/ja/web/css/url/index.html
new file mode 100644
index 0000000000..95d1814a2e
--- /dev/null
+++ b/files/ja/web/css/url/index.html
@@ -0,0 +1,97 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - URI
+  - URL
+  - urn
+  - レイアウト
+translation_of: Web/CSS/url
+---
+<div>{{CssRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;url&gt;</code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p>
+
+<div class="note">
+<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p>
+
+<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code>&lt;uri&gt;</code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code>&lt;url&gt;</code> のみを記述します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;url&gt;</code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p>
+
+<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
+&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
+&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
+</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p>
+</div>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css">.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<pre class="brush: css">ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+</pre>
+
+<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('CSS4 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>CSS Level 2 (Revision 1) から重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>CSS Level 1 から重要な変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/ja/web/css/used_value/index.html b/files/ja/web/css/used_value/index.html
new file mode 100644
index 0000000000..80cd1f5827
--- /dev/null
+++ b/files/ja/web/css/used_value/index.html
@@ -0,0 +1,130 @@
+---
+title: 使用値
+slug: Web/CSS/used_value
+tags:
+  - CSS
+  - Reference
+  - レイアウト
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> プロパティの<ruby><strong>使用値</strong><rp> (</rp><rt>used value</rt><rp>) </rp></ruby>は、<a href="/ja/docs/Web/CSS/computed_value">計算値</a>において行われたすべての計算が実行された後の値です。</p>
+
+<p>{{glossary("user agent", "ユーザーエージェント")}}が計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ ({{cssxref("width")}} や {{cssxref("line-height")}} など) の使用値はピクセル数です。一括指定プロパティ ({{cssxref("background")}} など) の使用値は、各成分 ({{cssxref("background-color")}} や {{cssxref("background-size")}} など) のプロパティに、 {{cssxref("position")}} や {{cssxref("float")}} が加味されたものと一致します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは<a href="/ja/docs/Web/CSS/resolved_value">解決値</a>であり、これはプロパティによって<a href="/ja/docs/Web/CSS/computed_value">計算値</a>または<a href="/ja/docs/Web/CSS/used_value">使用値</a>のどちらかになります。</p>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例は、三つの要素の <code>width</code> の使用値を計算および表示します (大きさを変更すると更新されます)。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="no-width"&gt;
+  &lt;p&gt;明示的な幅の指定なし&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;明示的に幅に 50% を指定&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;明示的に幅に inherit を指定&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* 結果を見やすくする */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', '80%', 372) }}</p>
+
+<h2 id="Difference_from_computed_value" name="Difference_from_computed_value">計算値との違い</h2>
+
+<p>CSS 2.0 では、プロパティの計算の最後のステップとして<em>計算値</em>のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (<code>display</code>, <code>font-size</code>, <code>line-height</code> など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (<a class="external" href="https://www.w3.org/TR/CSS2/changes.html#q21.36">CSS 2.1 Changes: Specified, computed, and actual values</a> より取得)。</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<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("CSS2.2", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td>
+    <p>変更なし。</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/user-modify/index.html b/files/ja/web/css/user-modify/index.html
new file mode 100644
index 0000000000..d6aea5cdea
--- /dev/null
+++ b/files/ja/web/css/user-modify/index.html
@@ -0,0 +1,89 @@
+---
+title: user-modify
+slug: Web/CSS/user-modify
+tags:
+  - CSS
+  - CSS プロパティ
+  - Deprecated
+  - Mozilla 拡張
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+  - 標準外
+  - 非推奨
+translation_of: Web/CSS/user-modify
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}</div>
+
+<p><strong><code>user-modify</code></strong> プロパティは Firefox では効果がありません。元々は要素の内容をユーザーが編集できるかどうかを決める予定でした。</p>
+
+<pre class="brush:css">/* キーワード値 */
+user-modify: read-only;
+user-modify: read-write;
+user-modify: write-only;
+
+/* グローバル値 */
+user-modify: inherit;
+user-modify: initial;
+user-modify: unset;
+</pre>
+
+<div class="warning">
+<p>このプロパティは {{HTMLAttrxRef("contenteditable")}} 属性に置き換えられました。</p>
+</div>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>-moz-user-modify</code> プロパティは、以下のリストにあるキーワード値の一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>read-only</code></dt>
+ <dd>既定値です。内容は読み取り専用です。</dd>
+ <dt><code>read-write</code></dt>
+ <dd>ユーザーが内容を読み書きできます。</dd>
+ <dt><code>read-write-plaintext-only</code> {{Non-standard_Inline}}</dt>
+ <dd><code>read-write</code> と同じですが、リッチテキスト書式は失われます。</dd>
+ <dt><code>write-only</code></dt>
+ <dd>ユーザーが内容を編集できますが、読むことはできません。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="readwrite"&gt;The user is able to change this text.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティは仕様書で定義されていません。類似のプロパティである <code>user-focus</code> が、 <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">CSS3 UI 仕様書の早期の草稿</a>で提案されましたが、作業グループによって拒絶されました。</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.properties.user-modify")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-input")}}</li>
+ <li>{{CSSxRef("-moz-user-select")}}</li>
+</ul>
diff --git a/files/ja/web/css/user-select/index.html b/files/ja/web/css/user-select/index.html
new file mode 100644
index 0000000000..804b0c0903
--- /dev/null
+++ b/files/ja/web/css/user-select/index.html
@@ -0,0 +1,153 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - CSS
+  - CSS Property
+  - Property
+  - Reference
+  - Selection
+  - 'recipe:css-property'
+  - user-select
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>user-select</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ユーザーが文章を範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには何の影響も与えません。</p>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* グローバル値 */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Mozilla 特有の値 */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* WebKit 特有の値 */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /* Safari では動作しません。 "none" または
+                             "text" を使ってください。さもないと、
+                             &lt;html&gt; コンテナーで入力可能になってしまいます。 */
+
+/* Microsoft 特有の値 */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: <code>user-select</code> は継承されるプロパティではありませんが、多くの場合、初期値の <code>auto</code> は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して<em>おり</em>、いくつかの問題を発生させています。現在までに、 Chromium は<a class="external external-icon" href="https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de" rel="noopener">この問題を修正し</a>、最終的な動作が仕様書に合うようにすることを選択しています。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p><code>auto</code> の使用値は下記のように決められます。</p>
+
+ <ul>
+  <li><code>::before</code> と <code>::after</code> の擬似要素では、使用値は <code>none</code> になります。</li>
+  <li>編集可能な要素の場合、使用値は <code>contain</code> になります。</li>
+  <li>上記以外で、親要素の <code>user-select</code> の使用値が <code>all</code> の場合、対象要素の使用値も <code>all</code> になります。</li>
+  <li>上記以外で、親要素の <code>user-select</code> の使用値が <code>none</code> の場合、対象要素の使用値も <code>none</code> になります。</li>
+  <li>上記以外の場合、使用値は <code>text</code> になります。</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>ユーザーはテキストを範囲選択できます。</dd>
+ <dt><code>all</code></dt>
+ <dd>この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。</dd>
+ <dt><code>contain</code></dt>
+ <dd>要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。</dd>
+ <dd><code>element</code>{{non-standard_inline}} (IE 特有のエイリアス)</dd>
+ <dd><code>contain</code> と同じです。 Internet Explorer だけが対応しています。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注:</strong> CSS UI 4 では、 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05"><code>user-select: element</code> が <code>contain</code> に名称が変わります。</a></p>
+</div>
+
+<h2 id="公式定義">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;このテキストを選択できるはずです。&lt;/p&gt;
+&lt;p class="unselectable"&gt;ちょっと、このテキストの選択はできませんよ！&lt;/p&gt;
+&lt;p class="all"&gt;一度クリックすると、このテキスト全体を選択します。&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>初回定義。 <code>-webkit-user-select</code> は <code>user-select</code> の非推奨のエイリアスであることも定義した。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<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.properties.user-select")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref("::selection")}} 擬似要素</li>
+ <li>JavaScript の {{domxref("Selection")}} オブジェクト</li>
+</ul>
diff --git a/files/ja/web/css/using_css_custom_properties/index.html b/files/ja/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..0008b66d3e
--- /dev/null
+++ b/files/ja/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,288 @@
+---
+title: CSS カスタムプロパティ (変数) の使用
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - CSS Variables
+  - CSS 変数
+  - Guide
+  - Web
+  - ウェブ
+  - カスケード変数
+  - カスタムプロパティ
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{cssref}}</div>
+
+<p><strong>カスタムプロパティ</strong> (<strong>CSS 変数</strong>や<strong>カスケード変数</strong>と呼ばれることもあります) は、 CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。それらは、カスタムプロパティ記法 (たとえば、<strong><code>--main-color: black;</code></strong>) によって設定し、 <code>var()</code> 関数 (たとえば、 <code>color: <strong>var(--main-color)</strong>;</code>) を使ってアクセスします。</p>
+
+<p>複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 <code>--main-text-color</code> は <code>#00ff00</code> より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。</p>
+
+<p>カスタムプロパティはカスケードの対象であり、親から値を継承します。</p>
+
+<h2 id="Basic_usage" name="Basic_usage">基本的な使用方法</h2>
+
+<p>カスタムプロパティの宣言は、ハイフン2つ (<code>--</code>) で始まるカスタムプロパティ名と、何らかの有効な CSS 値になるプロパティ値を使用することで行われます。他のプロパティと同様、これは規則セットの中で次のように書きます。</p>
+
+<pre class="brush:css; highlight:[2]  language-css"><em>element</em> {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>なお、規則セットに指定されたセレクターは、カスタムプロパティを使用することができるスコープを定義します。よく使われる方法は、カスタムプロパティを {{cssxref(":root")}} 擬似クラスで定義することで、これにより HTML 文書の全体にわたって適用することができます。</p>
+
+<pre class="brush: css">:root {
+  --main-bg-color: brown;
+}</pre>
+
+<p>但し、これは常にこうしなければならないわけではありません。カスタムプロパティのスコープを制限する良い理由があるかもしれません。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ</strong>: カスタムプロパティの名前は大文字小文字を区別します。 — <code>--my-color</code> は <code>--My-color</code> とは別なカスタムプロパティとして扱われます。</p>
+</div>
+
+<p>前述の通り、普通のプロパティ値の代わりに {{cssxref("var()")}} 関数の中でカスタムプロパティ名を使用することで、カスタムプロパティの値を使用することができます。</p>
+
+<pre class="brush:css; highlight:[2]  language-css"><em>element</em> {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<h2 id="First_steps_with_custom_properties" name="First_steps_with_custom_properties">カスタムプロパティの最初のステップ</h2>
+
+<p>それぞれ異なるクラスの要素に同じ色を適用するシンプルな CSS から始めましょう。</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32]">.one {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: brown;
+}
+</pre>
+
+<p>これを下の HTML に適用します。</p>
+
+<pre class="brush:html">&lt;div&gt;
+  &lt;div class="one"&gt;1:&lt;/div&gt;
+  &lt;div class="two"&gt;2: Text &lt;span class="five"&gt;5 - more text&lt;/span&gt;&lt;/div&gt;
+  &lt;input class="three"&gt;
+  &lt;textarea class="four"&gt;4: Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>このようになるはずです。</p>
+
+<p>{{EmbedLiveSample("First_steps_with_custom_properties",600,180)}}</p>
+
+<p>CSS 中に同じ宣言が繰り返し出てくることに注意してください。いろいろな場所で背景色が <code>brown</code> に設定されています。 CSS の宣言によっては、カスケードの上流でこれを宣言し、 CSS の継承によってこの問題を自然に解決することもできます。些末なプロジェクトを除いて、常にこの手法が使えるわけではありません。 {{cssxref(":root")}} 擬似クラスでカスタムプロパティを宣言し、文書内の必要な場所で使用することで、繰り返して書く必要性を減らすことができるのです。</p>
+</div>
+
+<div id="sample2">
+<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
+  --main-bg-color: brown;
+}
+
+.one {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<div style="display: none;">
+<pre class="brush:html">&lt;div&gt;
+    &lt;div class="one"&gt;&lt;/div&gt;
+    &lt;div class="two"&gt;Text &lt;span class="five"&gt;- more text&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="three"&gt;
+    &lt;textarea class="four"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>この結果は前の例と同じになるはずであり、望んだプロパティを一つの標準的な宣言で実現することができます。</p>
+
+<h2 id="Inheritance_of_custom_properties" name="Inheritance_of_custom_properties">カスタムプロパティの継承</h2>
+
+<p>カスタムプロパティは継承されます。これはつまり、もし与えられた要素にカスタムプロパティの値がない場合、その値は親の値を使用するということです。 HTML を見てみましょう。</p>
+
+<pre class="brush: html">&lt;div class="one"&gt;
+  &lt;div class="two"&gt;
+    &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>下記の CSS を適用するとします。</p>
+
+<pre class="brush: css">.two {
+  --test: 10px;
+}
+
+.three {
+  --test: 2em;
+}
+</pre>
+
+<p>この場合、 <code>var(--test)</code> の結果は以下の通りです。</p>
+
+<ul>
+ <li><code>class="two"</code> の要素: <code>10px</code></li>
+ <li><code>class="three"</code> の要素: <code>2em</code></li>
+ <li><code>class="four"</code> の要素: <code>10px</code> (親から継承)</li>
+ <li><code>class="one"</code> の要素: <em>無効な値</em>、これはすべてのカスタムプロパティの既定値です。</li>
+</ul>
+
+<p>これらはカスタムプロパティであり、実際には他のプログラミング言語で見られるような変数ではないことに留意してください。値は必要に応じて計算され、他の規則で使用するために格納されるわけではありません。例えば、要素にプロパティを設定して、兄弟の子孫の規則で受け取ることを期待することはできません。通常の CSS と同様、プロパティは一致するセレクターおよびその子孫に対してのみ設定されます。</p>
+
+<h2 id="Custom_property_fallback_values" name="Custom_property_fallback_values">カスタムプロパティ代替値</h2>
+
+<p><code><a href="/ja/docs/Web/CSS/var">var()</a></code> 関数を使用して、指定された変数が定義されていない場合の<strong>代替値</strong>を複数定義することができます。<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素</a>および<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> で作業するときに便利なことがあります。</p>
+
+<div class="blockIndicator note">
+<p><strong><u>代替値</u>はブラウザーの互換性を修正するためには使用されません。</strong>ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。<u><strong>これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり</strong></u>、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。</p>
+</div>
+
+<p>関数の最初の引数は、代替される<a href="https://www.w3.org/TR/css-variables/#custom-property">カスタムプロパティ</a>の名前です。関数の二番目の引数は、もしあれば、参照された<a href="https://www.w3.org/TR/css-variables/#custom-property">カスタムプロパティ</a>が無効であった場合に代わりに使用される代替値です。この関数は引数を2つだけ受け付けるので、最初のカンマの後のものは、すべて二番目の引数として割り当てます。二番目の引数が無効な場合、例えばカンマで区切られたリストが提供された場合、次のように代替処理は失敗します。</p>
+
+<pre class="brush: css">.two {
+  color: var(--my-var, red); /* --my-var が定義されていなければ red */
+}
+
+.three {
+  background-color: var(--my-var, var(--my-background, pink)); /* my-var 及び --my-background が定義されていなければ pink */
+}
+
+.three {
+  background-color: var(--my-var, --my-background, pink); /* 無効: "--my-background, pink" */
+}</pre>
+
+<p>代替としてのカスタムプロパティを含めるには、上記の二番目の例のようにすることが、複数の代替値を提供するための正しい方法です。この技法は変数全体を解釈するのにより時間が掛かるので、性能上の問題が見られます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 代替値の構文は、<a href="https://www.w3.org/TR/css-variables/#custom-property">カスタムプロパティ</a>の場合のように、カンマを使用することができます。例えば、 <code>var(--foo, red, blue)</code> は <code>red, blue</code> という代替値を定義します。 — 最初のカンマから関数の終わりまでが代替値とみなされます。</p>
+</div>
+
+<h2 id="Validity_and_values" name="Validity_and_values">値と妥当性</h2>
+
+<p>それぞれのプロパティに結び付けられるという CSS の妥当性の伝統的な概念は、カスタムプロパティに関してはあまり使いやすものではありません。カスタムプロパティの値が解析されるとき、ブラウザーはそれがどこで使用されるのか知りません。そのため、ほぼすべての値を<em>妥当</em>なものとみなす必要があります。</p>
+
+<p>残念なことに、これらの値は妥当であっても、意味のない可能性がある場所で <code>var()</code> 関数表記で使用することができてしまいます。プロパティとカスタム変数が無効な CSS 文を生成する可能性があることから、<em>計算時に妥当</em>という新しい概念が導かれます。</p>
+
+<h2 id="What_happens_with_invalid_variables" name="What_happens_with_invalid_variables">無効な変数では何が起こるか</h2>
+
+<p>ブラウザーが無効な <code>var()</code> による置き換えに遭遇した場合、プロパティの初期値または継承値が使用されます。</p>
+
+<p>以下のコードスニペットを考えてみてください。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;この段落は初期値で黒です。&lt;/p&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:root { --text-color: 16px; }
+p { color: blue; }
+p { color: var(--text-color); }
+</pre>
+
+<p>期待通りに、ブラウザーは <code>var(--text-color)</code> の場所を <code>--text-color</code> の値で置き換えようとしますが、 <code>16px</code> は {{cssxref("color")}} に妥当なプロパティ値ではありません。置き換え後、プロパティは意味をなさなくなります。ブラウザーはこの状況を二段階で扱います。</p>
+
+<ol>
+ <li>color プロパティが継承可能であるかを確認します。可能ですが、 <code>&lt;p&gt;</code> には color プロパティを持つ親がありません。よって次の段階に進みます。</li>
+ <li>値を<strong>既定の初期値</strong>、つまり、黒に設定します。</li>
+</ol>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('What_happens_with_invalid_variables')}}</p>
+
+<p>置き換えが無効な場合は代替値ではなく、初期値に置き換えられるため、段落の色は青にはなりません。変数による置き換えなしで <code>color: 16px</code> と書いた場合は、構文エラーとなります。その場合はそれ以前の宣言が使用されます。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: CSS プロパティと値の組に構文エラーがあるとその行が無視されるので、無効な代替値を使用した継承値 -- 無効なカスタムプロパティの値を使用すること -- は無視されず、継承される値になります。</p>
+</div>
+
+<h2 id="Values_in_JavaScript" name="Values_in_JavaScript">JavaScript での値</h2>
+
+<p>カスタムプロパティを JavaScript で使用するには、標準のプロパティのようにします。</p>
+
+<pre class="brush: js">// インラインスタイルから値を取得
+element.style.getPropertyValue("--my-var");
+
+// あらゆる場所の変数を取得
+getComputedStyle(element).getPropertyValue("--my-var");
+
+// インラインスタイルに値を設定
+element.style.setProperty("--my-var", jsVar + 4);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 初期仕様のカスタムプロパティの接頭辞は <code>var-</code> でしたが、最新の仕様では <code>--</code> に変更されました。 Firefox 31 以上は最新仕様に従っています。 ({{bug(985838)}})</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("--*", "Custom properties")}}</li>
+</ul>
diff --git a/files/ja/web/css/value_definition_syntax/index.html b/files/ja/web/css/value_definition_syntax/index.html
new file mode 100644
index 0000000000..f0152a8043
--- /dev/null
+++ b/files/ja/web/css/value_definition_syntax/index.html
@@ -0,0 +1,440 @@
+---
+title: 値の定義構文
+slug: Web/CSS/Value_definition_syntax
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Syntax
+translation_of: Web/CSS/Value_definition_syntax
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS の値の定義構文</strong>は、形式文法であり、 CSS プロパティや関数の有効な値の組み合わせ定義するのに使われます。この構文に加えて、有効な値の組み合わせは意味的な制約で有効値の集まりをさらに制限できます (例えば、数値を正の値に限定します)。</p>
+
+<p>定義構文ではどの値が許可され、相互作用が可能であるかを記述します。成分は、<em>リテラル</em>とみなされる文字列、<em>キーワード</em>や、CSS データ型の値、またはその他の CSS プロパティのいずれかです。</p>
+
+<h2 id="Component_value_types" name="Component_value_types">コンポーネント値型</h2>
+
+<h3 id="Keywords" name="Keywords">キーワード</h3>
+
+<h4 id="Generic_keywords" name="Generic_keywords">共通キーワード</h4>
+
+<p>引用符なしのリテラルで、字句通りの意味が事前に定義されているキーワードです。例: <code>auto</code>, <code>smaller</code>, <code>ease-in</code></p>
+
+<h4 id="The_specific_case_of_inherit_initial_and_unset" name="The_specific_case_of_inherit_initial_and_unset"><code>inherit</code>, <code>initial</code>, <code>unset</code> の特殊な場合</h4>
+
+<p>すべての CSS プロパティで、 CSS 全体で定義されているキーワード <code>inherit</code>, <code>initial</code>, <code>unset</code> を使うことができます。これらは値定義に現れず、暗黙的に定義されています。</p>
+
+<h3 id="Literals" name="Literals">リテラル</h3>
+
+<p>CSS のスラッシュ ('<code>/</code>') やカンマ ('<code>,</code>') のようないくつかの文字は、文字自身として現れ、プロパティ定義で値の区切りに使われます。カンマはよく、列挙する値や数学的な関数の引数の区切りに使われます。スラッシュはよく、意味的に異なるものの、共通の構文を持つ値の集まりの区切りに使われます。よくあるのは、<ruby>一括指定<rp> (</rp><rt>shorthand</rt><rp>) </rp></ruby>プロパティで、同じ型だが異なるプロパティに属する成分を区切る使い方です。</p>
+
+<p>どちらの記号も値定義に文字通り現れます。</p>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<h4 id="Basic_data_types" name="Basic_data_types">基本データ型</h4>
+
+<p>データの種類によっては CSS 全体で使われ、仕様書のすべての値に一度だけ定義されるものがあります。これは<em>基本データ型</em>と呼ばれ、名前を記号 '<code>&lt;</code>' と '<code>&gt;</code>' で囲って表現されます。例: {{CSSxRef("&lt;angle&gt;")}}, {{CSSxRef("&lt;string&gt;")}}, …</p>
+
+<h4 id="Non-terminal_data_types" name="Non-terminal_data_types">非終端データ型 (Non-terminal data types)</h4>
+
+<p>一般的でないデータ型ですが、非終端データ型も '<code>&lt;</code>' と '<code>&gt;</code>' で囲います。</p>
+
+<p>非終端データ型には 2 種類あります:</p>
+
+<ul>
+ <li>引用符で囲われた、<em>同名プロパティを共有</em>するデータ型。データ型はそのプロパティと同じ値集合を共有します。ショートハンドプロパティの定義によく使われます。</li>
+ <li><em>同名プロパティを共有しない</em>データ型。このデータ型は基本データ型に非常に近いものです。唯一の違いは、物理的な定義位置です。通常、このデータ型を使うプロパティの定義に物理的に非常に近い場所で定義されます。</li>
+</ul>
+
+<h2 id="Component_value_combinators" name="Component_value_combinators">構成値の組み合わせ</h2>
+
+<h3 id="Brackets" name="Brackets">角括弧</h3>
+
+<p><em>角括弧</em>はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。<strong>ひとまとまりの成分の結合優先順を無視する</strong>ために使われます。</p>
+
+<pre class="syntaxbox notranslate">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>thin bold 3em</code>。 <code>bold</code> は角括弧で定義された成分と並列なので、その後に出現しなければなりません。</li>
+</ul>
+
+<h3 id="Juxtaposition" name="Juxtaposition">並列</h3>
+
+<p>いくつかのキーワード、リテラル、データ型を順に置き、1 つ以上の空白で区切る置き方を<em>並列</em>と呼びます。並列の成分は<strong>どれも必須で、記述順どおりに出現する必要があります</strong>。</p>
+
+<pre class="syntaxbox notranslate">bold &lt;length&gt; , thin
+</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>thin 1em, bold</code>。対象は記述通りの順でなければなりません</li>
+ <li><code>bold 1em thin</code>。対象は必須です。リテラルであるカンマも存在する必要があります</li>
+ <li><code>bold 0.5ms, thin</code>。<code>ms</code> 値は {{cssxref("&lt;length&gt;")}} ではありません。</li>
+</ul>
+
+<h3 id="Double_ampersand" name="Double_ampersand">二重アンパサンド</h3>
+
+<p>2 つ以上の成分を二重アンパサンド <code>&amp;&amp;</code> で区切ると、<strong>対象すべてが必須だが出現順は問わない</strong>という意味になります。</p>
+
+<pre class="syntaxbox notranslate">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>次の値には一致します。</p>
+
+<ul>
+ <li><code>bold</code>。どちらの成分も出現しなければなりません。</li>
+ <li><code>bold 1em bold</code>。どちらの成分も 1 度だけ出現しなければなりません。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 並列は二重アンパサンドより優先されます。例えば <code>bold thin &amp;&amp; &lt;length&gt;</code> は <code>[ bold thin ] &amp;&amp; &lt;length&gt;</code> と同じ意味です。これは <code>bold thin &lt;length&gt;</code> や <code>&lt;length&gt; bold thin</code> を含みますが、<code>bold &lt;length&gt; thin</code> は含みません。</p>
+</div>
+
+<h3 id="Double_bar" name="Double_bar">二重バー</h3>
+
+<p>2 つ以上の成分を二重バー <code>||</code> で区切ると、すべての対象が省略可能であることを意味します。<strong>少なくともいずれか 1つ が存在する必要がありますが、順序は問いません</strong>。<a href="/ja/docs/CSS/Shorthand_properties">一括指定プロパティ</a>の値定義に使われます。</p>
+
+<pre class="syntaxbox notranslate">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>blue yellow</code>。各成分は最大で 1回 だけ出現できます。</li>
+ <li><code>bold</code>。どの対象の値もこのキーワードを使えません。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 二重アンパサンドは二重バーより優先されます。例えば <code>bold || thin &amp;&amp; &lt;length&gt;</code> は <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code> と同じ意味です。 <code>bold</code>, <code>thin &lt;length&gt;</code>, <code>bold thin &lt;length&gt;</code>, <code>thin &lt;length&gt; bold</code> を含みますが、<code>&lt;length&gt; bold thin</code> は 含みません。 bold を省略しないのなら、<code>thin &amp;&amp; &lt;length&gt;</code> 成分全体よりも前か後ろに置く必要があるからです。</p>
+</div>
+
+<h3 id="Single_bar" name="Single_bar">単一バー</h3>
+
+<p>2 つ以上の対象を単一バー <code>|</code> で区切ると、全対象が排他的な選択肢であることを意味します。<strong>選択肢のうち 1 つだけが存在する必要があります</strong>。利用可能なキーワードを列挙する際に使われます。</p>
+
+<pre class="syntaxbox notranslate">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>center 3%</code>。各成分は 1 つだけ存在しなければなりません。</li>
+ <li><code>3em 4.5em</code>。成分は最大で 1 回だけ存在できます。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>注:</strong> 二重バーは単一バーより優先されます。例えば <code>bold | thin || &lt;length&gt;</code> は <code>bold | [ thin || &lt;length&gt; ]</code> と同じ意味です。<code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, や <code>thin &lt;length&gt; </code>を含みますが、<code>bold &lt;length&gt;</code> は含みません。<code>|</code> 結合子の両側それぞれから 1つだけ対象が存在できるからです。</p>
+</div>
+
+<h2 id="Component_value_multipliers" name="Component_value_multipliers">成分値の乗算子</h2>
+
+<p>乗算子は、それ以前にある対象を何回繰り返せるかを表す記号です。乗算子がなければ、対象は 1 度だけ出現する必要があります。</p>
+
+<p>乗算子は足し合わせることはできず、他のどの結合子より優先される点に注意してください。</p>
+
+<h3 id="Asterisk" name="Asterisk">アスタリスク (*)</h3>
+
+<p>アスタリスク乗算子は対象の <strong>0 回以上</strong>の出現を示します。</p>
+
+<pre class="syntaxbox notranslate">bold smaller*</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> など</li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>smaller</code>。<code>bold</code> は並列で、他のどの <code>smaller</code> キーワードより先に出現する必要があります。</li>
+</ul>
+
+<h3 id="Plus" name="Plus">プラス (+)</h3>
+
+<p>プラス乗算子は対象の <strong>1 回以上</strong>の出現を示します。</p>
+
+<pre class="syntaxbox notranslate">bold smaller+</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> など</li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>bold</code>。<code>smaller</code> が少なくとも 1 回 出現しなければなりません。</li>
+ <li><code>smaller</code>。<code>bold</code> は並列で、他のどの <code>smaller</code> キーワードよりも前に出現しなければなりません。</li>
+</ul>
+
+<h3 id="Question_mark" name="Question_mark">疑問符 (?)</h3>
+
+<p><em>疑問符乗算子</em>は、対象は省略可能で、<strong>0 回または 1 回</strong>出現することを意味します。</p>
+
+<pre class="syntaxbox notranslate">bold smaller?</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>bold smaller smaller</code> 。<code>smaller</code> は最大で 1 回しか出現できません。</li>
+ <li><code>smaller</code>。<code>bold</code> は並列で、他のどの <code>smaller</code> キーワードよりも前に出現する必要があります。</li>
+</ul>
+
+<h3 id="Curly_braces" name="Curly_braces">波括弧 ({ })</h3>
+
+<p>波括弧乗算子は、カンマで区切った 2 つの整数を囲うもので、対象が<strong>少なくともA回、最大でB回</strong>出現することを示します。</p>
+
+<pre class="syntaxbox notranslate">bold smaller{1,3}</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>bold</code>。<code>smaller</code> が少なくとも 1 度出現する必要があります。</li>
+ <li><code>bold smaller smaller smaller smaller</code>。<code>smaller</code> は最大で 1度しか出現できません。</li>
+ <li><code>smaller</code>。<code>bold</code> は並列で、他のどの <code>smaller</code> キーワードよりも前に出現する必要があります。</li>
+</ul>
+
+<h3 id="Hash_mark" name="Hash_mark">ハッシュ記号 (#)</h3>
+
+<p>ハッシュ記号乗算子は対象が (プラス乗算子のように) 1 回以上繰り返されるが、それぞれがカンマ ('<code>,</code>') で区切られている必要があることを示します。</p>
+
+<pre class="syntaxbox notranslate">bold smaller#</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code> など</li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>bold</code>。<code>smaller</code> が少なくとも 1 度出現する必要があります。</li>
+ <li><code>bold smaller smaller smaller</code>。<code>smaller</code> の出現部がそれぞれカンマで区切られている必要があります。</li>
+ <li><code>smaller</code>。<code>bold</code> は並列で、どの <code>smaller</code> キーワードよりも前に出現する必要があります。</li>
+</ul>
+
+<h3 id="Exclamation_point" name="Exclamation_point">強調点 (!)</h3>
+
+<p>グループの後の<em>強調点乗算子</em>は、グループが必須であり、少なくとも1つの値を生み出す必要があることを示します。グループ内の項目の文法が内容全体を省略することができるとしていても、少なくとも1つの成分値を省略することはできません。</p>
+
+<pre class="syntaxbox notranslate">[ bold? smaller? ]!
+</pre>
+
+<p>この例は次の値に一致します。</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>smaller</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>次の値には一致しません。</p>
+
+<ul>
+ <li><code>bold</code> も <code>smaller</code> もないものは、どちらか一つが現れる必要があります。</li>
+ <li><code>smaller bold</code>。 <code>bold</code> は並列であり、 <code>smaller</code> キーワードの前に現れる必要があります。</li>
+ <li><code>bold smaller bold</code>。 <code>bold</code> および <code>smaller</code> は一度だけしか現れてはいけません。</li>
+</ul>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">記号</th>
+   <th scope="col">名前</th>
+   <th scope="col">説明</th>
+   <th scope="col">例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">結合子</th>
+  </tr>
+  <tr>
+   <td></td>
+   <td>並列</td>
+   <td>どちらも必須でこの順で出現する必要あり</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>二重アンパサンド</td>
+   <td>どちらも必須だが出現順は問わない</td>
+   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>二重バー</td>
+   <td>どちらかが存在する必要があり、出現順は問わない</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>単一バー</td>
+   <td>1つだけ存在する必要あり</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>角括弧</td>
+   <td>結合優先順を変える</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">乗算子</th>
+  </tr>
+  <tr>
+   <td></td>
+   <td>乗算子なし</td>
+   <td>1回</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>アスタリスク</td>
+   <td>0 回以上</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>プラス記号</td>
+   <td>1 回以上</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>疑問符</td>
+   <td>0 回か 1 回 (<em>省略可能 (optional)</em> を表す)</td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>波括弧</td>
+   <td>少なくとも <code>A</code> 回、最大で <code>B</code> 回</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>ハッシュ記号 (シャープ、ナンバー)</td>
+   <td>1 回以上。各出現がカンマ ('<code>,</code>') で区切られている必要がある</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+  <tr>
+   <td><code>!</code></td>
+   <td>強調点</td>
+   <td>グループが少なくとも1つの値を生み出す必要がある</td>
+   <td><code>[ bold? smaller? ]!</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>ハッシュ記号乗算子を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>二重アンパサンド結合子を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/var()/index.html b/files/ja/web/css/var()/index.html
new file mode 100644
index 0000000000..664aae3132
--- /dev/null
+++ b/files/ja/web/css/var()/index.html
@@ -0,0 +1,103 @@
+---
+title: var()
+slug: Web/CSS/var()
+tags:
+  - CSS
+  - CSS カスタムプロパティ
+  - CSS 変数
+  - CSS 関数
+  - Experimental
+  - Reference
+  - var
+  - var()
+  - 変数
+translation_of: Web/CSS/var()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>var()</code></strong> 関数は、他のプロパティの値の一部に代わって<a href="/ja/docs/Web/CSS/--*">カスタムプロパティ</a> (「CSS 変数」と呼ばれることもあります) の値を挿入できます。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/var.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p><code>var()</code> 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。)</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p>関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの2番目の引数は、フォールバック値として機能します。 最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。</p>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> フォールバックの構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば <code>var(--foo, red, blue)</code> では、 <code>red, blue</code> をフォールバックとして定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、フォールバック値と見なされます。</p>
+</div>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;custom-property-name&gt;</code></dt>
+ <dd>カスタムプロパティの名前で、二つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。</dd>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>カスタムプロパティのフォールバック値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり <code>)</code>, <code>]</code>, <code>}</code>, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<pre class="notranslate">/* フォールバック */
+/* コンポーネント内のスタイル: */
+.component .header {
+  color: var(--header-color, blue); /* header-color という変数は設定されていないため、フォールバック値である blue がセットされます */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* より規模の大きなアプリケーションのスタイルでは */
+.component {
+  --text-color: #080;
+}
+</pre>
+
+<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 Variables', '#using-variables', 'var()')}}</td>
+   <td>{{Spec2('CSS3 Variables')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.custom-property.var")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("env","env(…)")}} – ユーザーエージェントによって制御される読み取り専用環境変数</li>
+ <li><a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数の利用</a></li>
+</ul>
diff --git a/files/ja/web/css/vertical-align/index.html b/files/ja/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..48ad8c1d5e
--- /dev/null
+++ b/files/ja/web/css/vertical-align/index.html
@@ -0,0 +1,254 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+tags:
+  - CSS
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>vertical-align</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、インラインボックス、インラインブロック、表セルボックスの垂直方向の配置を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>vertical-align は、2 つの場面で使用することができます。</p>
+
+<ul>
+ <li>行ボックスの中でインライン要素の縦方向の整列方法を決める場合。例えば、テキストの行の中で {{HTMLElement("img")}} の縦方向の位置を決めるために使います。</li>
+</ul>
+
+<div id="vertical-align-inline">
+<pre class="hidden brush: html notranslate">&lt;p&gt;
+top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+&lt;p&gt;
+text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+
+</pre>
+
+<pre class="hidden brush: css notranslate">#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+
+<ul>
+ <li>表内のセルの内容を垂直方向に整列する場合</li>
+</ul>
+
+<div id="vertical-align-table">
+<pre class="hidden brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
+    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
+    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
+    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
+    &lt;td&gt;
+      &lt;p&gt;There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.&lt;/p&gt;
+&lt;p&gt;There is another theory which states that this has already happened.&lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+</pre>
+
+<pre class="hidden brush: css notranslate">table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+
+<p><code>vertical-align</code> はインライン要素、インラインブロック要素、表セル要素だけに適用できることに注意してください。つまり、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>の縦方向の整列には使えないのです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* &lt;length&gt; 値 */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* &lt;percentage&gt; 値 */
+vertical-align: 20%;
+
+/* グローバル値 */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<p><code>vertical-align</code> プロパティは、以下の値のうち一つで指定します。</p>
+
+<h3 id="Values_for_inline_elements" name="Values_for_inline_elements">インライン要素用の値</h3>
+
+<h4 id="Parent-relative_values" name="Parent-relative_values">親要素との相対値</h4>
+
+<p>以下の値は、親要素に対しての縦方向の整列方法を表します。</p>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>要素のベースラインを親要素のベースラインに揃えます。 {{HTMLElement("textarea")}} のような、一部の <a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a> のベースラインは HTML 仕様で未定義であり、このため、このキーワードの挙動はブラウザにより異なるかもしれません。</dd>
+ <dt><code>sub</code></dt>
+ <dd>要素のベースラインを親要素の subscript-baseline に揃えます。</dd>
+ <dt><code>super</code></dt>
+ <dd>要素のベースラインを親要素の superscript-baseline に揃えます。</dd>
+ <dt><code>text-top</code></dt>
+ <dd>要素の上端を親要素のフォントの上端に揃えます。</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>要素の下端を親要素のフォントの下端に揃えます。</dd>
+ <dt><code>middle</code></dt>
+ <dd>要素の中央を親要素の <code>baseline + x-height の半分</code> に揃えます。</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>&lt;length&gt; 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセンテージで指定します。負の値を使えます。</dd>
+</dl>
+
+<h4 id="Line-relative_values" name="Line-relative_values">行との相対値</h4>
+
+<p>以下の値は、親要素ではなく、行全体に対しての縦方向の整列方法を表します。</p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>要素と子孫要素の上端を行全体の上端に揃えます。</dd>
+ <dt><code>bottom</code></dt>
+ <dd>要素と子孫要素の下端を行全体の下端に揃えます。</dd>
+</dl>
+
+<p>ベースラインを持たない要素では、代わりにマージン境界の下端が使われます。</p>
+
+<h3 id="Values_for_table_cells" name="Values_for_table_cells">表セル用の値</h3>
+
+<dl>
+ <dt><code>baseline</code> (および <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>)</dt>
+ <dd>セルのベースラインを、行内でベースライン揃えにされた他のすべてのセルのベースラインに揃えます。</dd>
+ <dt><code>top</code></dt>
+ <dd>セルの上端のパディング境界を行の上端に揃えます。</dd>
+ <dt><code>middle</code></dt>
+ <dd>セルのパディングボックスが行の中央になるようにします。</dd>
+ <dt><code>bottom</code></dt>
+ <dd>セルの下端のパディング境界を行の下端に揃えます。</dd>
+</dl>
+
+<p>負の値を使用することができます。</p>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;An &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a default alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-top alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-bottom alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a middle alignment.&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+</pre>
+
+<h4 id="Result" name="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</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('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>{{cssxref("&lt;length&gt;")}} 値を追加し、 {{cssxref("display")}} が <code>table-cell</code> である要素で使えるようにした。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.vertical-align")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#Center_item">フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節</a></li>
+ <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
+ <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
+ <li><a href="https://christopheraue.net/design/vertical-align">Vertical-Align: All You Need To Know</a></li>
+</ul>
diff --git a/files/ja/web/css/viewport_concepts/index.html b/files/ja/web/css/viewport_concepts/index.html
new file mode 100644
index 0000000000..41fe9d0dca
--- /dev/null
+++ b/files/ja/web/css/viewport_concepts/index.html
@@ -0,0 +1,160 @@
+---
+title: ビューポートの概念
+slug: Web/CSS/Viewport_concepts
+tags:
+  - Best practices
+  - CSS
+  - Guide
+  - Mobile
+  - Resource
+  - layout viewport
+  - viewport
+  - virtual viewport
+translation_of: Web/CSS/Viewport_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">この記事では、ビューポートの概念 — ビューポートとは何か、ビューポートとは何か、 CSS, SVG, モバイル端末における影響 — および、視覚ビューポートとレイアウトビューポートの違いをを説明します。</p>
+
+<h2 id="What_is_a_viewport" name="What_is_a_viewport">ビューポートとは何か</h2>
+
+<p>ビューポートはコンピューターグラフィックの中で現在表示されている領域を表します。ウェブブラウザーの用語では、これは一般にブラウザーウィンドウのうち、ユーザーインターフェイス、メニューバーなどを除いた部分です。すなわち、あなたが見ている文書の部分です。</p>
+
+<p>文書は、この記事のように、とても長くなることがあります。今のビューポートは現在見えているものすべてであり、特に「ビューポートとは何か」の節や、おそらくナビゲーションメニューの一部もあるでしょう。ビューポートの大きさは画面の大きさ、ブラウザーが全画面モードであるかどうか、ユーザーがズームしているかどうかに依存します。この文書における<em>関連情報</em>の節のように、ビューポートの外にあるコンテンツは、スクロールして表示するまで画面上で表示されていません。</p>
+
+<ul>
+ <li>アプリケーションを全画面にする必要がないような大きなモニターでは、ビューポートはブラウザーのウィンドウの大きさです。</li>
+ <li>多くのモバイル端末やブラウザーが全画面モードである場合、ビューポートは画面全体です。</li>
+ <li>全画面モードでは、ビューポートは端末の画面であり、ウィンドウはブラウザーのウィンドウであり、ビューポートと同じか小さく、文書はウェブサイトで、これはビューポートよりも高さや幅が大きくなることがあります。</li>
+</ul>
+
+<p>まとめると、ビューポートは基本的に文書のうち、現在見えている部分です。</p>
+
+<h3 id="Viewport_sizes_are_mutable" name="Viewport_sizes_are_mutable">ビューポートの大きさは変化する</h3>
+
+<p>ビューポートの幅はウィンドウの幅であるとは限りません。ウィンドウや文書の幅や高さを Chrome や Firefox で求めるには、次のようにします。</p>
+
+<pre class="brush: js notranslate">document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+</pre>
+
+<pre class="brush: js notranslate">document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+</pre>
+
+<p>ビューポートの大きさや、同様の大きさを求めるのに役立つ DOM プロパティがあります。</p>
+
+<ul>
+ <li>文書の要素の {{DOMxRef("Element.clientWidth")}} は、文書の内部的な幅を <a href="/ja/docs/Mozilla/Mobile/Viewport_meta_tag#A_pixel_is_not_a_pixel">CSS ピクセル</a>単位で、パディングを含みます (ただし、境界、マージン、ある場合は垂直スクロールバーは含みませｎ)。<strong>これがビューポートの幅です</strong>。</li>
+ <li>{{DOMxRef("Window.innerWidth")}} は、ブラウザーウィンドウのビューポートの CSS ピクセル単位の幅で、もしあれば垂直スクロールバーの幅を含みます。</li>
+ <li>{{DOMxRef("Window.outerWidth")}} は、ブラウザーウィンドウの外寸の幅で、すべてのウィンドウ{{glossary("chrome", "クローム")}}を含みます。</li>
+</ul>
+
+<p>これらを実験してみると、 <code>innerWidth</code> と <code>outerWidth</code> は同じに見えましたが、　<code>innerHeight</code>　よりも <code>outerHeight</code> の方が高さが 100px だけ高くなっていました。これは <code>outerHeight</code> にはブラウザーのクロームが含まれているためです。測定はアドレスバーとブックマークバーの合計の高さが 100px のブラウザーで行われましたが、ウィンドウの左右にはクロームが表示されていません。</p>
+
+<p><code>innerHeight</code> と <code>innerWidth</code> 内の領域は、一般的に<strong>レイアウトビューポート</strong>と考えられています。ブラウザのクロームはビューポートの一部とはみなされません。</p>
+
+<p>拡大すると、 Firefox と Chrome の両方で、 <code>innerWidth</code> と <code>clientWidth</code> の新しい CSS ピクセルサイズが報告されます。 <code>outerWidth</code> と <code>outerHeight</code> で返される値はブラウザーに依存します。 Firefox では新しい値を CSS ピクセルで報告しますが、 Chrome では長さを既定のピクセルサイズで返します。拡大縮小すると次のようになるかもしれません。</p>
+
+<pre class="brush: js notranslate">document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 in Firefox, 1200 in chrome */
+</pre>
+
+<pre class="brush: js notranslate">document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 in Firefox, 900 in chrome */
+</pre>
+
+<p>The viewport was originally 1200 x 800 pixels. Upon zooming in, the viewport became 800 x 533 pixels. This is the <em>layout viewport</em>. Sticky headers or footers, with the following styles, will stick to the top and bottom of the <em>layout viewport</em> respectively.</p>
+
+<pre class="brush: css notranslate">body &gt; header {
+  position: fixed;
+  top: 0;
+}
+body &gt; footer {
+  position: fixed;
+  bottom: 0;
+}
+</pre>
+
+<p>We got the 800 x 533 measurement when we zoomed in using the keyboard. The header and footer stayed flush against the top and bottom of the window. But what if we had pinched-zoomed on a tablet? What if a dynamic keyboard pops open on a phone?</p>
+
+<p>The web contains two viewports, the <strong>layout viewport</strong> and the <strong>visual viewport</strong>. The visual viewport is the part of the web page that is currently visible in the browser and can change. When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.</p>
+
+<p>Sticky headers or footers, as discussed above, stick to the top and bottom of the <em>layout viewport</em>, and therefore remain in view when we zoom in with the keyboard. If you pinch-zoom, the layout viewport may not be fully visible. If you magnify from the middle of the layout viewport, the content would expand in all four directions. If you had a sticky header or footer, they would still be stuck to the top or bottom of the layout viewport, but they may not be visible at the top and bottom of the device's screen — which is the visual viewport. The visual viewport is the currently visible portion of the layout viewport. If you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom.</p>
+
+<p>The visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn't scale with the dimensions of a page. The visual viewport is the same size as the layout viewport or smaller.</p>
+
+<p>For a page containing iframes, objects, or external SVG, both the containing pages and each included file has their own unique window object. Only the top-level window has a visual viewport that may be distinct from the layout viewport. For included documents, the visual viewport and layout viewport are the same.</p>
+
+<h3 id="CSS" name="CSS">CSS</h3>
+
+<p>The layout viewport and visual viewport described above are not the only viewports you will encounter. Any sub-viewport that is fully or partially displayed within the layout viewport is considered a visual viewport.</p>
+
+<p>We generally think of width and height media queries as being relative to the width and height of the browser window. They are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and SVG. In CSS, we also have length units based on the viewport size. A <code>vh</code> unit is 1% of the layout viewport's height. Similarly, the <code>vw</code> unit is 1% of the layout viewport's width.</p>
+
+<h4 id="&lt;iframe>"><code>&lt;iframe&gt;</code></h4>
+
+<p>Inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. You can set any height and width on an iframe, but the whole document may not be visible.</p>
+
+<p>If you use viewport length units in your CSS within the iframe document, <code>1vh</code> will be 1% of the height of the iframe, and <code>1vw</code> will be 1% of the width of the document.</p>
+
+<pre class="brush: css notranslate">iframe {
+    width: 50vw;
+}
+</pre>
+
+<p>If the iframe is set to 50vw, it will be 50% of the width of the <code>1200px</code> parent document in our example above, or <code>600px</code>, with <code>1vw</code> being <code>6px</code>. When zoomed in, the iframe shrinks to <code>400px</code> and <code>1vw</code> becomes <code>4px</code>.</p>
+
+<p>A width-based media query within the iframe document is relative to the iframe's viewport.</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 500px) {
+    p {
+        color: red;
+    }
+}
+</pre>
+
+<p>If the above CSS is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.</p>
+
+<h4 id="SVG" name="SVG">SVG</h4>
+
+<p>In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the {{SVGElement("svg")}} element.</p>
+
+<pre class="brush: html notranslate">&lt;svg height="300" width="400"&gt;&lt;/svg&gt;</pre>
+
+<p>In this examples, the viewport has an aspect ratio of 3::4, and is, but default, 400 by 300 units, with a unit generally being a CSS pixel.</p>
+
+<p>SVG also has an internal coordinate system defined via the <a href="/ja/docs/Web/SVG/Attribute/viewBox">viewbox</a> attribute, which is not related to this viewport discussion.</p>
+
+<p>If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the {{CSSxRef("@media")}} query in your SVG's CSS is relative to that container, not the browser.</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* css goes here */
+}</pre>
+
+<p>Generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. The width media query in the SVG is based on the element in which the SVG is contained — the {{htmlelement("img")}} if the source is an SVG file, the SVG itself if the SVG is included directly into the HTML, or the parent if the parent element has a width assigned and — not the viewport’s width. With the above media query being in our SVG file, the CSS is applied if the SVG container is between 400 and 500px.</p>
+
+<h3 id="JavaScript" name="JavaScript">JavaScript</h3>
+
+<p>The <a href="/ja/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> provides a mechanism for querying and modifying the properties of the visual viewport.</p>
+
+<h2 id="Mobile_Viewports" name="Mobile_Viewports">モバイルのビューポート</h2>
+
+<p>Mobile devices come in all <s>shapes and</s> sizes, with screens of differing device pixel ratios. The mobile browser's viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following:</p>
+
+<pre class="brush: html notranslate">&lt;meta name="viewport" content="width=device-width"&gt;</pre>
+
+<p>The <code>width</code> property controls the size of the viewport. It should preferably be set to <code>device-width</code>, which is the width of the screen in CSS pixels at a scale of 100%. There are other properties, including <code>maximum-scale</code>, <code>minimum-scale</code>, and <code>user-scalable</code>, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted.</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/@viewport">@viewport CSS at-rule</a></li>
+ <li><a href="/ja/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a></li>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/ja/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/ja/web/css/visibility/index.html b/files/ja/web/css/visibility/index.html
new file mode 100644
index 0000000000..b5bf1930e9
--- /dev/null
+++ b/files/ja/web/css/visibility/index.html
@@ -0,0 +1,177 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Layout
+  - Reference
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>visibility</code></strong> は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは {{HTMLElement("table")}} の行や列を隠すこともできます。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>要素を不可視にして<em>レイアウトから除去する</em>には、 <code>visibility</code> を使用する代わりに {{cssxref("display")}} プロパティを <code>none</code> に設定してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* グローバル値 */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<p><code>visibility</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>要素のボックスが可視になります。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>要素のボックスは不可視になります (描画されません) が、レイアウトには通常通り影響します。子孫要素は <code>visibility</code> が <code>visible</code> に設定されていれば可視になります。(<a href="/ja/docs/Web/HTML/Global_attributes/tabindex">タブ順</a>で操作された時などに) 要素はフォーカスを受け取ることができません。</dd>
+ <dt><code>collapse</code></dt>
+ <dd>
+ <ul>
+  <li>{{HTMLElement("table")}} の行、列、列グループ、行グループでは、行や列が不可視になり、 (表の列や行に <code>{{Cssxref("display")}}: none</code> が適用された場合のように) 占めていた領域も除去されます。しかし、他の行や列の寸法は、不可視になった行や列のセルが存在するときのように計算されます。この値は表全体の幅や高さを強制的に再計算することなく、すばやく行や列を不可視にすることができます。</li>
+  <li>フレックス項目では、不可視になり、占めていた領域は削除されます。</li>
+  <li><a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> 要素では、通常は寸法に影響するその他のスタイルに関わらず、要素の寸法が常にゼロと計算されますが、マージンは有効になります。</li>
+  <li>その他の要素では、 <code>collapse</code> は <code>hidden</code> と同じと扱われます。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>要素の <code>visibility</code> の値に <code>hidden</code> を使用すると、 <a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>から削除されます。これは要素及びその子孫要素が読み上げ技術でアナウンスされない結果になります。</p>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>visibility の値は<em>可視</em>及び<em>不可視</em>の間で補間可能です。従って、開始または終了の値の一つが <code>visible</code> でない限りは、補間は行われません。値は離散的なステップとして補間され、タイミング関数の <code>0</code> と <code>1</code> 間の値が、 <code class="css">visible</code> に対応し、タイミング関数の他の値 (トランジションの開始点または終了点でのみ、または [0、1] の外側の y 値を有する <code class="css">cubic-bezier()</code> 関数の結果として) はより近い終了点に対応します。</p>
+
+<h2 id="Notes" name="Notes">注</h2>
+
+<ul>
+ <li>現在の一部のブラウザーでは、 <code>visibility:collapse</code> の対応がないか、部分的に不正確です。表の行や列以外の要素に用いた場合、誤って <code>visibility:hidden</code> のように扱われることがあります。</li>
+ <li><code>visibility:collapse</code> を用いた表の、折り畳まれたセルに入れ子の表があると、入れ子の表で <code>visibility:visible</code> が明示的に指定されていない限りは、表のレイアウトが変わる可能性があります。</li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="visible"&gt;The first paragraph is visible.&lt;/p&gt;
+&lt;p class="not-visible"&gt;The second paragraph is NOT visible.&lt;/p&gt;
+&lt;p class="visible"&gt;The third paragraph is visible. Notice the second paragraph is still occupying space.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Basic_example')}}</p>
+
+<h3 id="Table_example" name="Table_example">表の例</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1.1&lt;/td&gt;
+    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
+    &lt;td&gt;1.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="collapse"&gt;
+    &lt;td&gt;2.1&lt;/td&gt;
+    &lt;td&gt;2.2&lt;/td&gt;
+    &lt;td&gt;2.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;3.1&lt;/td&gt;
+    &lt;td&gt;3.2&lt;/td&gt;
+    &lt;td&gt;3.3&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Table_example')}}</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 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>フレックスアイテムに適用する <code>collapse</code> の値を定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.visibility")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/ja/web/css/visual_formatting_model/index.html b/files/ja/web/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..4501dbb707
--- /dev/null
+++ b/files/ja/web/css/visual_formatting_model/index.html
@@ -0,0 +1,150 @@
+---
+title: 視覚整形モデル
+slug: Web/CSS/Visual_formatting_model
+tags:
+  - CSS
+  - CSS Box Model
+  - Guide
+  - Reference
+  - visual formatting model
+translation_of: Web/CSS/Visual_formatting_model
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">CSS の<ruby><strong>視覚整形モデル</strong><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>は、ユーザーエージェントが文書ツリーをどのように受け取り、視覚メディア用に処理して表示するかを説明するものです。これには、コンピューター画面のような{{glossary("continuous media", "連続メディア")}}と、ブラウザーの印刷機能によって印刷された本や文書のような{{glossary("paged media", "ページ付きメディア")}}が含まれます。情報の大部分は、連続メディアとページ付きメディアに等しく適用されます。</p>
+
+<p>視覚整形モデルでは、文書ツリーの各要素は、モデルに応じてゼロ個以上のボックスを生成します。これらのボックスのレイアウトは、次のようにして制御されます。</p>
+
+<ul>
+ <li>ボックスの寸法と種類</li>
+ <li>位置決定方法 (通常フロー、浮動、絶対位置指定)</li>
+ <li>文書ツリー内の他の要素</li>
+ <li>外部情報 ({{glossary("viewport", "ビューポート")}}の寸法、画像の固有の寸法、など)</li>
+</ul>
+
+<p>視覚整形モデルに関する情報の多くは CSS2 で定義されていますが、様々なレベル 3 の仕様書ではこの情報が追加されています。仕様書を読む際には、 CSS2 で定義されているモデルが参照されていることが多いので、他のレイアウト仕様書を読む際には、 CSS2 で定義されているモデルとそれを説明するために使用されている用語を理解しておくことが重要です。</p>
+
+<p>この文書では、モデルを定義して関連する用語や概念をいくつか紹介し、より詳細な情報を説明している MDN のより具体的なページへのリンクを紹介します。</p>
+
+<h2 id="The_role_of_the_viewport" name="The_role_of_the_viewport">ビューポートの役割</h2>
+
+<p>連続メディアでは、{{glossary("viewport", "ビューポート")}}はブラウザーのウィンドウから見える領域です。ユーザーエージェントはビューポートの寸法が変更されたときに、ページのレイアウトを変更することがあります。 — 例えば、ウィンドウの寸法を変更した場合や、モバイル端末の向きを変更した場合です。</p>
+
+<p>ビューポートが文書の寸法よりも小さい場合、ユーザーエージェントは文書の表示されていない部分へスクロールする方法を提供する必要があります。もっともよくあるのは、横書きで、上から下へ書く言語の場合、<strong>ブロック方向</strong>のスクロールです。しかし、<strong>インライン方向</strong>のスクロールを設計する必要がある場合もあるかもしれません。</p>
+
+<h2 id="Box_generation" name="Box_generation">ボックスの生成</h2>
+
+<p><strong>ボックスの生成</strong>は CSS の視覚整形モデルの一部で、文書内の要素からボックスを作ることです。生成されたボックスは様々な種類を持ち、視覚整形モデルに影響します。生成されるボックスの種類は CSS の {{cssxref("display")}} プロパティによって決まります。</p>
+
+<p>当初 CSS2 で定義された <code>display</code> プロパティは、 <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a> で拡張されました。これに加え、 display にまつわる用語の一部が CSS2 から何年にもわたって更新され明確化されました。</p>
+
+<p>CSS はソース文書を読み取り、キャンバスにレンダリングします。これを行うために、中間的な構造である<strong>ボックスツリー</strong>を生成し、レンダリングされる文書の書式構造を表現します。ボックスツリー内のそれぞれのボックスは、キャンバス上の空間や時間において対応する要素 (または擬似要素) を表現しており、ボックスツリー内のテキストは対応するテキストノードの内容のように表現します。</p>
+
+<p>それから、それぞれの要素について、 CSS はその要素の <code>display</code> プロパティの値に応じてゼロ個以上のボックスを生成します。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: ボックスはよく display の種類によって参照されます。例えば、 <code>display: block</code> の要素によって生成されたボックスは「ブロックボックス」と呼ばれたり、単に「ブロック」と呼ばれたりします。ただし、ブロックボックス、ブロックレベルボックス、ボックスコンテナーはすべて微妙に異なることに注意してください。詳しくは下記の{{anch("Block boxes", "ブロックボックス")}}を参照してください。</p>
+</div>
+
+<h3 id="主ボックス">主ボックス</h3>
+
+<p>要素が1つ以上のボックスを生成する場合、そのうちの一つが<ruby><strong>主ボックス</strong><rp> (</rp><rt>principal box</rt><rp>) </rp></ruby>となります。これがボックスツリー内の子孫ボックスと生成コンテンツを含み、様々な配置方法の対象となるボックスとなります。</p>
+
+<p>要素によっては、主ボックスに加えて追加のボックスを生成することがあり、例えば、 <code>display: list-item</code> は複数のボックス (例えば <strong>主ブロックボックス</strong>や<strong>子マーカーボックス</strong>) を生成します。また、値によっては (<code>none</code> や <code>contents</code> など) 要素やその子孫が全くボックスを生成しなくなります。</p>
+
+<h3 id="Anonymous_boxes" name="Anonymous_boxes">無名ボックス</h3>
+
+<p><ruby><strong>無名ボックス</strong><rp> (</rp><rt>anonymous box</rt><rp>) </rp></ruby>は、ボックスに使用する HTML 要素がない場合に作成されます。このような状況は、例えば、親要素で <code>display: flex</code> を宣言した場合に、その中に他の要素に含まれないテキストが直接存在する場合に発生します。ボックスツリーを修正するために、そのテキストの周りに無名ボックスが作成されます。これはフレックスアイテムとして動作しますが、対象となる要素がないため、通常のボックスのように対象を設定したり、スタイルを設定したりすることはできません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}</p>
+
+<p>同じことは、ブロック要素にテキストが混在している場合にも起こります。次の例では、 <code>&lt;div&gt;</code> の中に文字列があり、文字列の中央にはテキストの一部を含む <code>&lt;p&gt;</code> 要素があります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}</p>
+
+<p>文字列はボックスツリーの中で3つのボックスに分割されます。段落要素の前の文字列の部分は無名ボックスに包まれ、次にボックスを生成する <code>&lt;p&gt;</code> があり、さらに別の無名ボックスがあります。</p>
+
+<p>これらの無名ボックスについて考慮すべきことは、直接の親からスタイルを継承するということですが、無名ボックスを対象にして、それらがどのように見えるかを変更することはできません。この例では、コンテナーの子を対象にするために直接子セレクターを使用しています。これは、無名ボックスは親ブロックの子ではないので、無名ボックスを変更するものではありません。</p>
+
+<p><strong>インライン無名ボックス</strong>は、文字列がインライン要素によって分割されたとき、、例えば文に <code>&lt;em&gt;&lt;/em&gt;</code> で囲まれた区間がある場合に作成されます。これにより、文が3つのインラインボックスに分割されます。強調された区間の前の無名インラインボックス、 <code>&lt;em&gt;</code> 要素で包まれた区間、そして最後の無名インラインボックスです。無名ブロックボックスと同様に、これらの無名インラインボックスは <code>&lt;em&gt;</code> の場合とは異なり、独立してスタイルを設定することはできず、コンテナーのスタイルを継承するだけです。</p>
+
+<p>他にも無名ボックスを生成する整形コンテキストがあります。<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">グリッドレイアウト</a>は上記の<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>の例と同様に動作し、テキストの文字列を無名ボックス付きのグリッドアイテムに変換します。<a href="/ja/docs/Web/CSS/CSS_Columns">段組み</a>レイアウトは段の周りに無名の段ボックスを生成します。これらもスタイル付けなどの対象にすることはできません。<a href="/ja/docs/Web/CSS/CSS_Table">表レイアウト</a>は適切な表構造を生成するために無名ボックスを追加します。例えば、 <code>display: table-row</code> が付いたボックスがない場合、無名の表の行を追加するなどです。</p>
+
+<h3 id="Line_boxes" name="Line_boxes">行ボックス</h3>
+
+<p><strong>行ボックス</strong>は、テキストの各行を包むボックスのことです。アイテムを浮動させた後に、背景色のあるブロックを続けると、行ボックスとそれを含むブロックの違いがわかります。</p>
+
+<p>次の例では、浮動している <code>&lt;div&gt;</code> の後に続く行ボックスは、浮動要素を回り込むように短くなっています。浮動したアイテムがフローから抜けるので、ボックスの背景は浮動要素の後ろを走っています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}</p>
+
+<h2 id="Positioning_schemes_and_in-flow_and_out-of-flow_elements" name="Positioning_schemes_and_in-flow_and_out-of-flow_elements">配置の仕組みとフロー内・フロー外の要素</h2>
+
+<p>CSS では、ボックスをレイアウトするための配置の仕組みが3種類あります。 — <strong>通常フロー</strong>、<strong>浮動</strong>、<strong>絶対位置指定</strong>です。</p>
+
+<h3 id="Normal_flow" name="Normal_flow">通常フロー</h3>
+
+<p>CSS において、<ruby><strong>通常フロー</strong><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby>にはブロックボックスのブロックレベル整形、インラインボックスのインラインレベル整形、それにブロックレベルおよびインラインレベルボックスの相対位置指定と粘着位置指定があります。</p>
+
+<p>詳しくは <a href="/ja/docs/Web/CSS/CSS_Flow_Layout">フローレイアウト</a>を参照してください。</p>
+
+<h3 id="Floats" name="Floats">浮動要素</h3>
+
+<p>浮動モデルでは、ボックスは、まず通常の流れに従ってレイアウトされ、その後、流れから取り出され、ふつう左または右に配置されます。コンテンツは、フロートの側面に沿って折り返されます。</p>
+
+<p>詳しくは<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動要素</a>を参照してください。</p>
+
+<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3>
+
+<p>絶対位置指定モデルでは (固定位置指定も含む)、ボックスは完全に通常フローから外され、包含ブロック (固定位置指定の場合はビューポート) を基準とした位置に配置されます。</p>
+
+<p>要素が浮動要素、絶対位置指定、ルート要素のいずれかであれば、<strong>フロー外</strong>と呼ばれます。フロー外ではない要素は<strong>フロー内</strong>と呼ばれます。</p>
+
+<p>詳しくは<a href="/ja/docs/Web/CSS/CSS_Positioning">CSS 位置指定レイアウト</a>を参照してください。</p>
+
+<h2 id="Formatting_contexts_and_the_display_property" name="Formatting_contexts_and_the_display_property">整形コンテキストと display プロパティ</h2>
+
+<p>ボックスは<strong>外部表示型</strong>、すなわち <code>block</code> または <code>inline</code> で表すことができます。この外部表示型はページ上でそのボックスが他の要素との間でどのようにふるまうかを示します。</p>
+
+<p>ボックスには内部表示型もあり、これは子がどのように動作するかを示します。通常ブロックかつインラインレイアウト、または通常フローであれば、この表示型は <code>flow</code> です。これは、子要素が <code>block</code> または <code>inline</code> のどちらかであることを示します。</p>
+
+<p>しかし、内部表示型は <code>grid</code> や <code>flex</code> になる可能性もあり、この場合は直接の子がグリッドまたはフレックスアイテムとして表示されます。このような場合、要素はグリッドやフレックスの<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">整形コンテキスト</a>を生成しているといいます。多くの点でこれはブロックの整形コンテキストに似ていますが、子要素は通常のフローのアイテムではなく、フレックスやグリッドのアイテムとして動作します。</p>
+
+<p>ブロックレベルとインラインレベルの各ボックスの相互作用は、 {{cssxref("display")}} の MDN ドキュメントで説明しています。</p>
+
+<p>また、 display の特定の値については、ボックスレイアウトの観点から、これらの整形コンテキストがどのように機能するかを以下のリファレンスで説明しています。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS フレックスボックスレイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Table">CSS 表レイアウト</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters">リスト</a></li>
+</ul>
+
+<h3 id="Independent_formatting_contexts" name="Independent_formatting_contexts">独立整形コンテキスト</h3>
+
+<p>要素は、それを含むブロックの整形コンテキストに参加するか、独立した整形コンテキストを確立するかします。例えば、グリッドコンテナーは、その子に対して新しい<strong>グリッド整形コンテキスト</strong>を確立します。</p>
+
+<p><strong>独立整形コンテキスト</strong>には浮動要素を含み、マージンは整形コンテキストの境界を越えて相殺されることはありません。そのため、新しいブロック整形コンテキストを作成することで、ボックス内に浮動要素が収まるようにすることができます。浮動状態を解除するために {{cssxref("overflow")}} プロパティの値を変更して、新しいブロック整形コンテキストが生成することがあります。新しい値 <code>display: flow-root</code> は、 overflow の値が変更されたことによって望ましくない問題が発生することなく、この有用な効果を得るために新しい<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を生成します。</p>
+
+<h3 id="Block_boxes" name="Block_boxes">ブロックボックス</h3>
+
+<p>仕様書では、ブロックボックス、ブロックレベルボックス、ブロックコンテナーのことを、あるところでは<strong>ブロックボックスと</strong>呼んでいます。これらはやや異なるものであり、ブロックボックスという用語は曖昧さがない場合にのみ使用すべきです。</p>
+
+<h4 id="Block_containers" name="Block_containers">ブロックコンテナー</h4>
+
+<p><strong>ブロックコンテナー</strong>は、インライン整形コンテキストに参加するインラインレベルのボックスのみを含むか、ブロック整形コンテキストに参加するブロックレベルのボックスのみを含むかします。このため、上で説明した動作では、すべてのアイテムがブロックまたはインラインの書式設定コンテキストに参加できるように、無名ボックスが導入されています。要素は、ブロックレベルまたはインラインレベルのボックスを含む場合にのみ、ブロックコンテナーとなります。</p>
+
+<h4 id="Inline-level_and_block-level_boxes" name="Inline-level_and_block-level_boxes">インラインレベルボックスとブロックレベルボックス</h4>
+
+<p>これらはブロックコンテナーの内部に含まれるボックスであり、それぞれインラインレイアウトとブロックレイアウトに参加します。</p>
+
+<h4 id="Block_boxes_2" name="Block_boxes_2">ブロックボックスの場合</h4>
+
+<p>ブロックボックスとは、ブロックレベルボックスでありながらブロックコンテナーでもあるものを指します。 CSS の <code>display</code> で説明されているように、ボックスがブロックレベルのボックスであってもブロックコンテナーにはならないこともあります (例えば、フレックスコンテナーやグリッドコンテナーになることもあります)。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ja/web/css/webkit_extensions/index.html b/files/ja/web/css/webkit_extensions/index.html
new file mode 100644
index 0000000000..2b5e5a202f
--- /dev/null
+++ b/files/ja/web/css/webkit_extensions/index.html
@@ -0,0 +1,614 @@
+---
+title: WebKit CSS 拡張
+slug: Web/CSS/WebKit_Extensions
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+translation_of: Web/CSS/WebKit_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Safari や Chrome のような WebKit または blink ベースのアプリケーションは、数多くの特殊な <strong><a href="/ja/docs/Web/CSS">CSS</a> の WebKit 拡張</strong>に対応しています。これらの拡張には一般に <code>-webkit</code> の接頭辞が付きます。 <code>-webkit</code> の接頭辞が付いたプロパティの多くは <code>-apple</code> の接頭辞でも動作します。少数ながら <code>-epub</code> の接頭辞も存在します。</p>
+
+<h2 id="WebKit-only_properties" name="WebKit-only_properties">WebKit 独自のプロパティ</h2>
+
+<div class="note">
+<p><strong>メモ:</strong> ウェブサイトで使用しないでください。これらのプロパティは WebKit アプリケーションでしか動作しません。</p>
+</div>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-animation-trigger")}}</li>
+ <li>{{CSSxRef("-webkit-app-region")}}</li>
+ <li>{{CSSxRef("-webkit-appearance")}}*</li>
+ <li>{{CSSxRef("-webkit-aspect-ratio")}}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-backdrop-filter")}}</li>
+ <li>{{CSSxRef("-webkit-background-composite")}}</li>
+ <li>{{CSSxRef("border-block-end","-webkit-border-after")}}**</li>
+ <li>{{CSSxRef("border-block-end-color","-webkit-border-after-color")}}**</li>
+ <li>{{CSSxRef("border-block-end-style","-webkit-border-after-style")}}**</li>
+ <li>{{CSSxRef("border-block-end-width","-webkit-border-after-width")}}**</li>
+ <li>{{CSSxRef("border-block-start","-webkit-border-before")}}**</li>
+ <li>{{CSSxRef("border-block-start-color","-webkit-border-before-color")}}**</li>
+ <li>{{CSSxRef("border-block-start-style","-webkit-border-before-style")}}**</li>
+ <li>{{CSSxRef("border-block-start-width","-webkit-border-before-width")}}**</li>
+ <li>{{CSSxRef("border-inline-end", "-webkit-border-end")}}**</li>
+ <li>{{CSSxRef("border-inline-end-color","-webkit-border-end-color")}}**</li>
+ <li>{{CSSxRef("border-inline-end-style","-webkit-border-end-style")}}**</li>
+ <li>{{CSSxRef("border-inline-end-width","-webkit-border-end-width")}}**</li>
+ <li>{{CSSxRef("-webkit-border-fit")}}</li>
+ <li>{{CSSxRef("-webkit-border-horizontal-spacing")}}</li>
+ <li>{{CSSxRef("border-inline-start", "-webkit-border-start")}}**</li>
+ <li>{{CSSxRef("border-inline-start-color", "-webkit-border-start-color")}}**</li>
+ <li>{{CSSxRef("border-inline-start-style", "-webkit-border-start-style")}}**</li>
+ <li>{{CSSxRef("border-inline-start-width", "-webkit-border-start-width")}}**</li>
+ <li>{{CSSxRef("-webkit-border-vertical-spacing")}}</li>
+ <li>{{CSSxRef("align-items","-webkit-box-align")}}**</li>
+ <li>{{CSSxRef("flex-direction", "-webkit-box-direction")}}**</li>
+ <li>{{CSSxRef("-webkit-box-flex-group")}}**</li>
+ <li>{{CSSxRef("flex-grow", "-webkit-box-flex")}}**</li>
+ <li>{{CSSxRef("flex-flow", "-webkit-box-lines")}}**</li>
+ <li>{{CSSxRef("order", "-webkit-box-ordinal-group")}}**</li>
+ <li>{{CSSxRef("flex-direction","-webkit-box-orient")}}**</li>
+ <li>{{CSSxRef("justify-content", "-webkit-box-pack")}}**</li>
+ <li>{{CSSxRef("-webkit-box-reflect")}}**</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-column-axis")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-after")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-before")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-inside")}}</li>
+ <li>{{CSSxRef("-webkit-column-progression")}}</li>
+ <li>{{CSSxRef("-webkit-cursor-visibility")}}</li>
+</ul>
+
+<h3 id="D-I">D-I</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-dashboard-region")}}</li>
+ <li>{{CSSxRef("-webkit-font-size-delta")}}</li>
+ <li>{{CSSxRef("-webkit-font-smoothing")}}</li>
+ <li>{{CSSxRef("-webkit-highlight")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-character")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-after")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-before")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-webkit-initial-letter")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-line-align")}}</li>
+ <li>{{CSSxRef("-webkit-line-box-contain")}}</li>
+ <li>{{CSSxRef("-webkit-line-clamp")}}</li>
+ <li>{{CSSxRef("-webkit-line-grid")}}</li>
+ <li>{{CSSxRef("-webkit-line-snap")}}</li>
+ <li>{{CSSxRef("-webkit-locale")}}</li>
+ <li>{{CSSxRef("-webkit-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-logical-width")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-margin-after-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-after")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before")}}</li>
+ <li>{{CSSxRef("-webkit-margin-bottom-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-collapse")}}</li>
+ <li>{{CSSxRef("margin-block-end", "-webkit-margin-end")}}**</li>
+ <li>{{CSSxRef("margin-block-start", "-webkit-margin-start")}}**</li>
+ <li>{{CSSxRef("-webkit-margin-top-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-direction")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-increment")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-repetition")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-speed")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-style")}}</li>
+ <li>{{CSSxRef("-webkit-marquee")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-outset")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-slice")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-source")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-width")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-source-type")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-width")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-width")}}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-nbsp-mode")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{CSSxRef("padding-block-end","-webkit-padding-after")}}**</li>
+ <li>{{CSSxRef("padding-block-start","-webkit-padding-before")}}**</li>
+ <li>{{CSSxRef("padding-inline-end","-webkit-padding-end")}}**</li>
+ <li>{{CSSxRef("padding-inline-start","-webkit-padding-start")}}**</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-x")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-y")}}</li>
+ <li>{{CSSxRef("-webkit-print-color-adjust")}}</li>
+</ul>
+
+<h3 id="R-S">R-S</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-rtl-ordering")}}</li>
+ <li>{{CSSxRef("-webkit-svg-shadow")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-tap-highlight-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-combine")}}</li>
+ <li>{{CSSxRef("-webkit-text-decoration-skip")}}</li>
+ <li>{{CSSxRef("-webkit-text-decorations-in-effect")}}</li>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-security")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}</li>
+ <li>{{CSSxRef("-webkit-text-zoom")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin-x")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin-y")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin-z")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-user-drag")}}</li>
+ <li>{{CSSxRef("-webkit-user-modify")}}</li>
+</ul>
+</div>
+
+<p>* 一部は標準化され、接頭辞がなくなりました。<br>
+ ** 新しい構文が標準化されています。プロパティは新しい構文にリンクしています。古い構文は一部のブラウザーが対応しています。</p>
+
+<h2 id="WebKit-prefixed_properties_on_the_standards_track" name="WebKit-prefixed_properties_on_the_standards_track">標準化過程にある WebKit の接頭辞のついたプロパティ</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li>
+ <li>{{CSSxRef("-webkit-font-size-delta")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+</ul>
+</div>
+
+<h2 id="Formerly_proprietary_properties_that_are_now_standard" name="Formerly_proprietary_properties_that_are_now_standard">以前は独自プロパティであったものが標準化されたもの</h2>
+
+<div class="note">
+<p><strong>メモ:</strong> CSS の互換性を最大化したい場合は、以下に挙げた接頭辞付きのプロパティの代わりに接頭辞のない標準のプロパティを使用してください。</p>
+</div>
+
+<div class="index">
+<h3 id="A_2">A</h3>
+
+<ul>
+ <li>{{CSSxRef("align-content","-webkit-align-content")}}</li>
+ <li>{{CSSxRef("align-items","-webkit-align-items")}}</li>
+ <li>{{CSSxRef("align-self","-webkit-align-self")}}</li>
+ <li>{{CSSxRef("animation","-webkit-animation")}}</li>
+ <li>{{CSSxRef("animation-delay","-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("animation-direction","-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("animation-duration","-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("animation-name","-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("animation-play-state","-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}</li>
+</ul>
+
+<h3 id="B_2">B</h3>
+
+<ul>
+ <li>{{CSSxRef("backface-visibility","-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("background-clip","-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("background-origin","-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("background-size","-webkit-background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-image","-webkit-border-image")}}</li>
+ <li>{{CSSxRef("border-radius","-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}</li>
+ <li>{{CSSxRef("box-decoration-break","-webkit-box-decoration-break")}}</li>
+ <li>{{CSSxRef("box-shadow","-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing","-webkit-box-sizing")}}</li>
+</ul>
+
+<h3 id="C_2">C</h3>
+
+<ul>
+ <li>{{CSSxRef("clip-path","-webkit-clip-path")}}</li>
+ <li>{{CSSxRef("column-count","-webkit-column-count")}}</li>
+ <li>{{CSSxRef("column-fill","-webkit-column-fill")}}</li>
+ <li>{{CSSxRef("column-gap","-webkit-column-gap")}}</li>
+ <li>{{CSSxRef("column-rule","-webkit-column-rule")}}</li>
+ <li>{{CSSxRef("column-rule-color","-webkit-column-rule-color")}}</li>
+ <li>{{CSSxRef("column-rule-style","-webkit-column-rule-style")}}</li>
+ <li>{{CSSxRef("column-rule-width","-webkit-column-rule-width")}}</li>
+ <li>{{CSSxRef("column-span","-webkit-column-span")}}</li>
+ <li>{{CSSxRef("column-width","-webkit-column-width")}}</li>
+ <li>{{CSSxRef("columns","-webkit-columns")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{CSSxRef("filter","-webkit-filter")}}</li>
+ <li>{{CSSxRef("flex","-webkit-flex")}}</li>
+ <li>{{CSSxRef("flex-basis","-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("flex-direction","-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("flex-flow","-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("flex-grow","-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("flex-shrink","-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("flex-wrap","-webkit-flex-wrap")}}</li>
+ <li>{{CSSxRef("-webkit-font-feature-settings")}}</li>
+ <li>{{CSSxRef("-webkit-font-kerning")}}</li>
+ <li>{{CSSxRef("-webkit-font-variant-ligatures")}}</li>
+</ul>
+
+<h3 id="G-J">G-J</h3>
+
+<ul>
+ <li>{{CSSxRef("grid","-webkit-grid")}}</li>
+ <li>{{CSSxRef("grid-area","-webkit-grid-area")}}</li>
+ <li>{{CSSxRef("grid-auto-columns","-webkit-grid-auto-columns")}}</li>
+ <li>{{CSSxRef("grid-auto-flow","-webkit-grid-auto-flow")}}</li>
+ <li>{{CSSxRef("grid-auto-rows","-webkit-grid-auto-rows")}}</li>
+ <li>{{CSSxRef("grid-column","-webkit-grid-column")}}</li>
+ <li>{{CSSxRef("grid-column-end","-webkit-grid-column-end")}}</li>
+ <li>{{CSSxRef("grid-column-gap","-webkit-grid-column-gap")}}</li>
+ <li>{{CSSxRef("grid-column-start","-webkit-grid-column-start")}}</li>
+ <li>{{CSSxRef("grid-gap","-webkit-grid-gap")}}</li>
+ <li>{{CSSxRef("grid-row","-webkit-grid-row")}}</li>
+ <li>{{CSSxRef("grid-row-end","-webkit-grid-row-end")}}</li>
+ <li>{{CSSxRef("grid-row-gap","-webkit-grid-row-gap")}}</li>
+ <li>{{CSSxRef("grid-row-start","-webkit-grid-row-start")}}</li>
+ <li>{{CSSxRef("grid-template","-webkit-grid-template")}}</li>
+ <li>{{CSSxRef("grid-template-areas","-webkit-grid-template-areas")}}</li>
+ <li>{{CSSxRef("grid-template-columns","-webkit-grid-template-columns")}}</li>
+ <li>{{CSSxRef("grid-template-rows","-webkit-grid-template-rows")}}</li>
+</ul>
+
+<h3 id="H-L">H-L</h3>
+
+<ul>
+ <li>{{CSSxRef("hyphens","-webkit-hyphens")}}</li>
+ <li>{{CSSxRef("justify-content","-webkit-justify-content")}}</li>
+ <li>{{CSSxRef("justify-items","-webkit-justify-items")}}</li>
+ <li>{{CSSxRef("justify-self","-webkit-justify-self")}}</li>
+ <li>{{CSSxRef("line-break","-webkit-line-break")}}</li>
+</ul>
+
+<h3 id="M_2">M</h3>
+
+<ul>
+ <li>{{CSSxRef("mask","-webkit-mask")}}</li>
+ <li>{{CSSxRef("mask-clip","-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("mask-composite","-webkit-mask-composite")}}</li>
+ <li>{{CSSxRef("mask-image","-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("mask-origin","-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("mask-position","-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("mask-repeat","-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("mask-size","-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-R">O-R</h3>
+
+<ul>
+ <li>{{CSSxRef("opacity","-webkit-opacity")}}</li>
+ <li>{{CSSxRef("order","-webkit-order")}}</li>
+ <li>{{CSSxRef("perspective","-webkit-perspective")}}</li>
+ <li>{{CSSxRef("perspective-origin","-webkit-perspective-origin")}}</li>
+ <li>{{CSSxRef("ruby-position","-webkit-ruby-position")}}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{CSSxRef("scroll-snap-type","-webkit-scroll-snap-type")}}</li>
+ <li>{{CSSxRef("shape-image-threshold","-webkit-shape-image-threshold")}}</li>
+ <li>{{CSSxRef("shape-margin","-webkit-shape-margin")}}</li>
+ <li>{{CSSxRef("shape-outside","-webkit-shape-outside")}}</li>
+</ul>
+
+<h3 id="T_2">T</h3>
+
+<ul>
+ <li>{{CSSxRef("text-decoration", "-epub-text-decoration")}}</li>
+ <li>{{CSSxRef("text-decoration-color", "-webkit-text-color-decoration")}}</li>
+ <li>{{CSSxRef("text-decoration-line", "-webkit-text-decoration-line")}}</li>
+ <li>{{CSSxRef("text-decoration-style", "-webkit-text-decoration-style")}}</li>
+ <li>{{CSSxRef("text-emphasis", "-epub-text-emphasis")}}</li>
+ <li>{{CSSxRef("text-emphasis","-webkit-text-emphasis")}}</li>
+ <li>{{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("text-emphasis-color","-webkit-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("text-emphasis-position","-webkit-text-emphasis-position")}}</li>
+ <li>{{CSSxRef("text-emphasis-style","-epub-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("text-emphasis-style","-webkit-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("text-justify","-webkit-text-justify")}}</li>
+ <li>{{CSSxRef("text-orientation","-webkit-text-orientation")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("text-underline-position","-webkit-text-underline-position")}}</li>
+ <li>{{CSSxRef("transform","-webkit-transform")}}</li>
+ <li>{{CSSxRef("transform-origin","-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("transform-style","-webkit-transform-style")}}</li>
+ <li>{{CSSxRef("transition","-webkit-transition")}}</li>
+ <li>{{CSSxRef("transition-delay","-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("transition-duration","-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("transition-property","-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="U-W">U-W</h3>
+
+<ul>
+ <li>{{CSSxRef("user-select","-webkit-user-select")}}</li>
+ <li>{{CSSxRef("word-break", "-epub-word-break")}}</li>
+ <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Supported_in_non-webkit_browsers_without_a_prefix_but_not_standard" name="Supported_in_non-webkit_browsers_without_a_prefix_but_not_standard">WebKit 以外のブラウザーで接頭辞なしのものが対応されているが、標準ではないもの</h2>
+
+<p>以下のプロパティは1つ以上のブラウザーが接頭辞なしで対応していますが、標準化路線には乗っていません。</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("mask-position-x","-webkit-mask-position-x")}}*</li>
+ <li>{{CSSxRef("mask-position-y","-webkit-mask-position-y")}}*</li>
+</ul>
+</div>
+
+<p>* Firefox が接頭辞なしで対応、 Safari が接頭辞付きで対応。</p>
+
+<h2 id="Supported_in_Firefox_with_-webkit-_prefix" name="Supported_in_Firefox_with_-webkit-_prefix"><code>-webkit-</code> 接頭辞付きで Firefox が対応しているもの</h2>
+
+<p>以下のプロパティは Firefox が <code>-webkit-</code> 接頭辞付きで対応しています。多くのものは同様に接頭辞なしでも対応しています。前述の<a href="#Formerly_proprietary_properties_that_are_now_standard">以前は独自プロパティであったものが標準化されたもの</a>を参照してください。</p>
+
+<div class="blockIndicator note">
+<p>メモ: 多数のウェブサイトが古いコードで -webkit- 接頭辞の付いたプロパティを使用しているため、 Edge や Firefox は -webkit- 接頭辞のついた多くのプロパティを -moz-, -ms-, 接頭辞なしの同等のプロパティに転送しています。</p>
+</div>
+
+<div class="index">
+<h3 id="A_3">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-align-content")}}</li>
+ <li>{{CSSxRef("-webkit-align-items")}}</li>
+ <li>{{CSSxRef("-webkit-align-self")}}</li>
+ <li>{{CSSxRef("-webkit-animation")}}</li>
+ <li>{{CSSxRef("-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("-webkit-animation-timing-function")}}</li>
+ <li>{{CSSxRef("-webkit-appearance")}}*</li>
+</ul>
+
+<h3 id="B_3">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("-webkit-background-size")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-image")}}</li>
+ <li>{{CSSxRef("-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("-webkit-box-align")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-direction")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-flex")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-orient")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-pack")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("-webkit-box-sizing")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-right-radius")}}</li>
+</ul>
+
+<h3 id="F_2">F</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-filter")}}</li>
+ <li>{{CSSxRef("-webkit-flex")}}</li>
+ <li>{{CSSxRef("-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("-webkit-flex-wrap")}}</li>
+</ul>
+
+<h3 id="J">J</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-justify-content")}}</li>
+</ul>
+
+<h3 id="M_3">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-mask")}}</li>
+ <li>{{CSSxRef("-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}*</li>
+ <li>{{CSSxRef("-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-P">O-P</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-order")}}</li>
+ <li>{{CSSxRef("-webkit-perspective")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin")}}</li>
+</ul>
+
+<h3 id="T_3">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}**</li>
+ <li>{{CSSxRef("-webkit-transform")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("-webkit-transition")}}</li>
+ <li>{{CSSxRef("-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="U_2">U</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-user-select")}}</li>
+</ul>
+</div>
+
+<p>* Firefox では <code>-moz-</code> と <code>-webkit-</code> の接頭辞に対応していますが、 接頭辞のないものには対応していません。 Microsoft Edge と IE Mobile は、同様に相互運用性のためにこのプロパティを <code>-ms-</code> ではなく <code>-webkit-</code> の接頭辞付きで対応しています。<br>
+ ** これらの値は、標準ではなく標準化路線にもなっていませんが、対応しています。<br>
+ *** 代わりにフレックスボックスプロパティを使用してください。</p>
+
+<h2 id="Deprecated_-webkit-_properties" name="Deprecated_-webkit-_properties">非推奨の <code>-webkit-</code> プロパティ</h2>
+
+<p>以下のプロパティはいったん -webkit- 接頭辞付きで対応していましたが、すでに <code>-webkit-</code> 接頭辞のありなしに関わらず、主要なブラウザーで対応されなくなりました。</p>
+
+<div class="index">
+<ul>
+ <li><code>-webkit-alt*</code></li>
+ <li><code>-webkit-color-correction</code></li>
+ <li><code>-webkit-flow-from</code></li>
+ <li><code>-webkit-flow-into</code></li>
+ <li><code>-webkit-grid-columns</code> ({{cssxref("grid-column")}} を参照)</li>
+ <li><code>-webkit-grid-rows</code> ({{cssxref("grid-row")}} を参照)</li>
+ <li><code>-webkit-hyphenate-charset</code></li>
+ <li><code>-webkit-image-set</code></li>
+ <li><code>-webkit-mask-attachment</code></li>
+ <li><code>-webkit-match-nearest-mail-blockquote-color</code></li>
+ <li>{{CSSxRef("-webkit-overflow-scrolling")}}</li>
+ <li><code>-webkit-region-break-after</code></li>
+ <li><code>-webkit-region-break-before</code></li>
+ <li><code>-webkit-region-break-inside</code></li>
+ <li><code>-webkit-region-fragment</code></li>
+ <li><code>-webkit-shape-inside</code></li>
+ <li><code>-webkit-touch-callout</code> ({{cssxref("touch-action")}} を参照)</li>
+ <li><code>background-origin-x</code> (unprefixed!)</li>
+ <li><code>background-origin-y</code> (unprefixed!)</li>
+</ul>
+</div>
+
+<p>* Still supported in the Safari Technology Preview, but not in a generally released browser.</p>
+
+<h2 id="Pseudo-classes" name="Pseudo-classes">疑似クラス</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li>
+ <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li>
+ <li>{{CSSxRef(":any-link", ":-webkit-any-link")}} *</li>
+ <li>{{CSSxRef(":autofill",":-webkit-autofill")}}</li>
+ <li>{{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}</li>
+ <li>{{CSSxRef(":drag",":-webkit-drag")}}</li>
+ <li>{{CSSxRef(":full-page-media",":-webkit-full-page-media")}}</li>
+ <li>{{CSSxRef(":full-screen", ":-webkit-full-screen")}}*</li>
+ <li>{{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}</li>
+ <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li>
+ <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li>
+</ul>
+</div>
+
+<p>* 標準化されました。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> セレクターのチェーンまたはグループ内に無効な疑似クラスがあった場合、セレクターのリスト全体が無効になります。</p>
+</div>
+
+<h2 id="Pseudo-elements" name="Pseudo-elements">疑似要素</h2>
+
+<p>ウェブの互換性のため、 Blink, WebKit, Gecko のブラウザーは、 <code>::-webkit-</code> がついたすべての疑似要素を妥当として扱います。</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-webkit-file-upload-button")}}</li>
+ <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-input-placeholder")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-optimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-suboptimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-outer-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-value")}}</li>
+ <li>{{CSSxRef("::-webkit-search-cancel-button")}}</li>
+ <li>{{CSSxRef("::-webkit-search-results-button")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-thumb")}}</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>メモ:</strong> 一般に、セレクターのチェーンまたはグループ内に無効な疑似要素または疑似クラスがあった場合、セレクターのリスト全体が無効になります。擬似要素 (疑似クラスではない) に -webkit- という接頭辞が付いている場合、 Firefox 63 以降, Blink, WebKit, Gecko のブラウザーはセレクターのリストを妥当とみなし、無効にしないようにします。</p>
+</div>
+
+<h2 id="Media_features" name="Media_features">メディア特性</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li>
+</ul>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">Styling Form Controls on the WebKit Trac</a></li>
+ <li><a href="/ja/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 拡張</a></li>
+ <li><a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 拡張</a></li>
+</ul>
diff --git a/files/ja/web/css/white-space/index.html b/files/ja/web/css/white-space/index.html
new file mode 100644
index 0000000000..df1f143540
--- /dev/null
+++ b/files/ja/web/css/white-space/index.html
@@ -0,0 +1,248 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>white-space</code></strong> プロパティは、要素内の{{Glossary("whitespace", "ホワイトスペース")}}をどのように扱うかを設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>メモ:</strong> <em>要素の内部で</em>折り返しを行うには、代わりに {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* グローバル値 */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p><code>white-space</code> プロパティは、以下の値の一覧から選択した単一のキーワードで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>連続するホワイトスペースはまとめられます。ソース内の改行文字もホワイトスペースとして扱われます。行ボックスを埋めるために、必要なら行を折り返します。</dd>
+ <dt><code>nowrap</code></dt>
+ <dd><code>normal</code> と同じくホワイトスペースを詰めますが、行の折り返しは行いません。</dd>
+ <dt><code>pre</code></dt>
+ <dd>連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と、 {{HTMLElement("br")}} 要素でのみ行います。</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行います。</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>連続するホワイトスペースは詰められて 1 つになります。行の折り返しは、改行文字や {{HTMLElement("br")}} 要素のあるときか、行ボックスを埋めるのに必要なときに行われます。</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd>下記の点を除いて、動作は <code>pre-wrap</code> と同じです。
+ <ul>
+  <li>そのまま残された連続するホワイトスペースは、行末にあるものを含め、空間を占有します。</li>
+  <li>残されたそれぞれのホワイトスペースの後で、ホワイトスペースの間を含め、改行する可能性があります。</li>
+  <li>そのような残された空白は空間を占有し、ぶら下がらず、ボックスの固有の寸法に (min-content size および max-content size に) 影響します。</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>次の表に、<code>white-space</code> 値の動作をまとめます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>改行</th>
+   <th>空白とタブ文字</th>
+   <th>テキストの折り返し</th>
+   <th>行末の空白</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>まとめる</td>
+   <td>まとめる</td>
+   <td>折り返す</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>まとめる</td>
+   <td>まとめる</td>
+   <td>折り返さない</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返さない</td>
+   <td>そのまま</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返す</td>
+   <td>ぶら下げ</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>そのまま</td>
+   <td>まとめる</td>
+   <td>折り返す</td>
+   <td>除去</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>そのまま</td>
+   <td>そのまま</td>
+   <td>折り返す</td>
+   <td>折り返す</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Line_breaks_inside_pre_elements" name="Line_breaks_inside_pre_elements">&lt;pre&gt; 要素内での改行</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* 現行ブラウザー */
+}</pre>
+
+<h2 id="See_it_in_action" name="See_it_in_action">操作して確認する</h2>
+
+<div class="hidden" id="See_it_in_action_LiveSample">
+<pre class="brush: html">&lt;div id="css-code" class="box"&gt;
+  p { white-space:
+  &lt;select&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;nowrap&lt;/option&gt;
+    &lt;option&gt;pre&lt;/option&gt;
+    &lt;option&gt;pre-wrap&lt;/option&gt;
+    &lt;option&gt;pre-line&lt;/option&gt;
+    &lt;option&gt;break-spaces&lt;/option&gt;
+  &lt;/select&gt; }
+&lt;/div&gt;
+&lt;div id="results" class="box"&gt;
+  &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220, 220, 220);
+  font-size: 16px;
+  font-family: monospace;
+}
+
+#css-code select {
+  font-family: inherit;
+}
+
+#results {
+  background-color: rgb(230, 230, 230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Source" name="Source">ソース</h3>
+
+<pre class="brush: html">&lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Result" name="CSS_Result">CSS を加えた結果</h3>
+
+<p>{{EmbedLiveSample("See_it_in_action_LiveSample", "100%", 500)}}</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 Text", "#propdef-white-space", "white-space")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>折り返しアルゴリズムの詳細を記述。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "text.html#white-space-prop", "white-space")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</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.properties.white-space")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><em>内部での</em>折り返しを定義するプロパティ: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li>
+</ul>
diff --git a/files/ja/web/css/widows/index.html b/files/ja/web/css/widows/index.html
new file mode 100644
index 0000000000..e850b680b4
--- /dev/null
+++ b/files/ja/web/css/widows/index.html
@@ -0,0 +1,119 @@
+---
+title: widows
+slug: Web/CSS/widows
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 断片化
+  - CSS 段組みレイアウト
+  - リファレンス
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>widows</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/Paged_Media">ページ</a>、領域、<a href="/ja/docs/Web/CSS/CSS_Columns">段</a>の<em>先頭</em>に表示されるブロックコンテナーの最小行数を設定します。</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;integer&gt; 値 */
+widows: 2;
+widows: 3;
+
+/* グローバル値 */
+widows: inherit;
+widows: initial;
+widows: unset;
+</pre>
+
+<div class="note">
+<p>組版において、 <em>widow</em> とは段落の最後の行がページの先頭に単独で現れることです。 (段落は前のページから続きます。)</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;これは幾らかのテキストを含む最初の段落です。&lt;/p&gt;
+  &lt;p&gt;これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。&lt;/p&gt;
+  &lt;p&gt;これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">div {
+  background-color: #8cffa0;
+  columns: 3;
+  widows: 2;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 400, 160)}}</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 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td><code>widows</code> をページ、領域、段など、断片の種類によらず適用するように拡張</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>段組みに関する <code>widows</code> の考慮の勧告</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2>
+
+<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.properties.widows")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Paged_Media">ページ付きメディア</a></li>
+</ul>
diff --git a/files/ja/web/css/width/index.html b/files/ja/web/css/width/index.html
new file mode 100644
index 0000000000..c840d40914
--- /dev/null
+++ b/files/ja/web/css/width/index.html
@@ -0,0 +1,209 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - CSS
+  - CSS Property
+  - CSS プロパティ
+  - Reference
+  - dimensions
+  - 'recipe:css-property'
+  - size
+  - width
+  - 寸法
+translation_of: Web/CSS/width
+---
+<p>{{CSSRef}}</p>
+
+<p><strong><code>width</code></strong> は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">コンテンツ領域</a>の幅を設定しますが、 {{cssxref("box-sizing")}} を <code>border-box</code> に設定すると、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界領域</a>の幅を設定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは、 {{cssxref("width")}} を上書きします。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; 値 */
+width: 75%;
+
+/* キーワード値 */
+width: max-content;
+width: min-content;
+width: fit-content(20em);
+width: auto;
+
+/* グローバル値 */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p><code>width</code> プロパティは以下のいずれかの値で指定します。</p>
+
+<ul>
+ <li>キーワード値 <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code> のうちの一つ。</li>
+ <li><code><a href="#&lt;length>">&lt;length&gt;</a></code> または <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>。</li>
+</ul>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>絶対的な値で幅を定義します。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>親となる包含ブロックの幅に対するパーセント値で定義します。</dd>
+ <dt><code>auto</code></dt>
+ <dd>指定された要素の幅をブラウザーが計算して決めます。</dd>
+ <dt><code>max-content</code></dt>
+ <dd>望ましい固有の幅です。</dd>
+ <dt><code>min-content</code></dt>
+ <dd>最小の固有の幅です。</dd>
+ <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
+ <dd>利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち <code>min(max-content, max(min-content, &lt;length-percentage&gt;))</code> です。</dd>
+</dl>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>ページを拡大してテキストサイズを大きくしたときに、 <code>width</code> を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG の理解、 ガイドライン 1.4 の説明</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Default_width" name="Default_width">既定の幅</h3>
+
+<pre class="brush:css notranslate">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html notranslate">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="Pixels_and_ems" name="Pixels_and_ems">ピクセル数と em 単位</h3>
+
+<pre class="brush: css notranslate">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
+&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="Percentage" name="Percentage">パーセント値</h3>
+
+<pre class="brush: css notranslate">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="max-content">max-content</h3>
+
+<pre class="brush:css; notranslate">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+  width: max-content;
+}</pre>
+
+<pre class="brush:html notranslate">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
+
+<h3 id="min-content">min-content</h3>
+
+<pre class="brush:css notranslate">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+  width: min-content;
+}</pre>
+
+<pre class="brush:html notranslate">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</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('CSS4 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code><code>fit-content</code> を追加</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>適用対象の要素を詳しく記載</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.width")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a></li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+ <li>対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li>
+</ul>
diff --git a/files/ja/web/css/will-change/index.html b/files/ja/web/css/will-change/index.html
new file mode 100644
index 0000000000..e4afdd056f
--- /dev/null
+++ b/files/ja/web/css/will-change/index.html
@@ -0,0 +1,143 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 変更予定
+  - Reference
+  - 'recipe:css-property'
+  - transition
+  - トランジション
+translation_of: Web/CSS/will-change
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>will-change</code></strong> プロパティは、どのような要素の変更が予測されているかブラウザーに助言します。ブラウザーは要素が実際に変更される前に、最適化をセットアップすることができます。</span>この種の最適化は、実際に変化が求められる前に、潜在的に高コストの処理を行うことで、ページの応答を向上させることができます。</p>
+
+<div class="warning">
+<p><strong>重要:</strong> <code>will-change</code> は既存の性能問題を扱うための最終解決手段として使用することを意図しています。予想されるパフォーマンス問題に使用しないでください。</p>
+</div>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* &lt;custom-ident&gt; の例 */
+will-change: opacity;          /* &lt;custom-ident&gt; の例 */
+will-change: left, top;        /* 2つの &lt;animateable-feature&gt; の例 */
+
+/* グローバル値 */
+will-change: inherit;
+will-change: initial;
+will-change: unset;
+</pre>
+
+<p>このプロパティを適切に使用するには、少々注意が必要です。</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>will-change を多くの要素に適用しすぎないでください。</em>ブラウザーはすでに可能な限りすべての最適化を試みています。 <code>will-change</code> を試みるような強力な最適化は、大量のマシンリソースを使ってしまい、使い切ってしまった場合、ページの速度の低下や多量のリソース消費を引き起こします。</p>
+ </li>
+ <li>
+  <p><em>控えめに使用してください。</em>最適化においてブラウザーが行う通常の動作は、可能な限り早く最適化を解除して、通常に戻すことです。しかし、スタイルシートに直接 <code>will-change</code> を追加することは、対象の要素の変更が間近であることを示し続けることであり、ブラウザーはそうでない場合よりも長い間最適化を維持し続けなければなりません。そのため、変化が発生する前後にスクリプトコードを使って <code>will-change</code> のオン/オフを切り替えることを習慣づけると良いでしょう。</p>
+ </li>
+ <li>
+  <p><em>事前の最適化を行うために will-change を要素に適用しないでください。</em> ページが良く動作している場合、少々のスピードアップのためだけに <code>will-change</code> プロパティを要素に追加しないでください。 <code>will-change</code> は既存のパフォーマンス問題を扱うための最終手段として使われるべきものです。そのため、パフォーマンス問題に先んじて使うべきではありません。 過度な <code>will-change</code> の使用は、過度にメモリを消費するとともに、ブラウザーが起こりうる変化に対する準備をしようとすることで、より複雑なレンダリングが発生する原因となります。これはパフォーマンスの悪化につながります。</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>処理するために十分な時間を与えてください。</em>このプロパティは、ユーザーエージェントに変更する可能性のあるプロパティについて事前に通知するための方法として用意されています。そして、ブラウザーは、プロパティの変更が実際に発生する前に、プロパティの変更に必要な事前最適化の適用を選択できます。そのため、ブラウザーに実際の最適化を行うためのいくばくかの時間を与えることが重要になります。少なくとも少し早めに何らかの変更が行われることを予測する方法を見つけてから、<code>will-change</code> を設定してください。</p>
+ </li>
+ <li>
+  <p><a href="/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>を生成するプロパティ値 (例えば will-change: opacity) を、手前に生成される重ね合わせコンテキストとして使用する場合、<em>will-change は実際に要素の視覚的な表現に影響を与える可能性があることに注意してください</em>。</p>
+ </li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>このキーワードは特定の意図を表現しません。ユーザーエージェントは通常通りの経験則と最適化を適用します。</dd>
+</dl>
+
+<p><code>&lt;animateable-feature&gt;</code> は次の値のいずれかである場合。</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>まもなく要素のスクロール位置をアニメーション化、または変更することが予想されることを示します。</dd>
+ <dt><code>contents</code></dt>
+ <dd>まもなく要素のコンテンツに対して何らかのアニメーション化、または変更が予想されることを示します。</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>まもなく要素で指定された名前のプロパティをアニメーション化、または変更されることが予想されることを示します。指定されたプロパティが一括指定プロパティの場合、それが展開されたすべてのプロパティが予想の対象となります。 <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, <code>contents</code> の値は指定できません。仕様では特定の値についての動作を定義していませんが、一般的に <code>transform</code> は合成レイヤーのヒントとなります。特定の CSS プロパティに対しては、 <a href="https://github.com/operasoftware/devopera/pull/330">現在のところ Chrome は2つのアクションを取ります</a>。新しい合成レイヤーを構築するか、または新しい{{Glossary("stacking context","重ね合わせコンテキスト")}}を構築します。</dd>
+</dl>
+
+<h3 id="Via_stylesheet" name="Via_stylesheet">スタイルシートで</h3>
+
+<p>しかし、ページが大きく複雑なアルバムやスライドデッキプレゼンテーションのようなキー押下で遷移するアプリケーションの場合、スタイルシートに <code>will-change</code> を含めた方が適切なこともあります。これによって、ブラウザーは事前に切り替えの準備を行い、キーが押されるとすぐに、てきぱきとしたページ間の切り替えができます。しかし、スタイルシートで <code>will-change</code> プロパティを直接使用するのは注意してください。ブラウザーが必要なくなったメモリを最適化のために保存し続けることになる可能性があるからです。</p>
+
+<pre class="brush: css notranslate">.slide {
+  will-change: transform;
+}</pre>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Via_script" name="Via_script">スクリプトから</h3>
+
+<p>これはスクリプトから <code>will-change</code> プロパティを適用する方法を示しています。おそらく多くの場合はこのようにします。</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('element');
+
+// 要素がホバーされたとき、will-change を設定する
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // アニメーションのキーフレームブロックで
+  // 変更されるであろう最適化可能なプロパティ
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<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('CSS Will Change', '#will-change', 'will-change')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.will-change")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+</ul>
diff --git a/files/ja/web/css/word-break/index.html b/files/ja/web/css/word-break/index.html
new file mode 100644
index 0000000000..e2cdd24962
--- /dev/null
+++ b/files/ja/web/css/word-break/index.html
@@ -0,0 +1,148 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+  - 日本語処理
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>word-break</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+<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>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* 非推奨 */
+
+/* グローバル値 */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p><code>word-break</code> プロパティは、下記のリストの中から 1 つを選んで指定します。</p>
+
+<h3 class="brush:css" id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>既定の改行規則を使用します。</dd>
+ <dt><code>break-all</code></dt>
+ <dd>CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
+ <div class="hidden">翻訳メモ:<br>
+ 英語版: 「Chinese/Japanese/Korean」 (3つ)<br>
+ 日本語: 「中国語、台湾語、日本語、韓国語」 (4つ)<br>
+ という翻訳が以前から続いているので、それに従うことにしました。</div>
+ </dd>
+ <dt><code>keep-all</code></dt>
+ <dd>CJK テキストの改行を許可しません。 CJK 以外のテキストについては <code>normal</code> と同じ挙動となります。</dd>
+ <dt><code>break-word</code> {{Deprecated_Inline}}</dt>
+ <dd>{{cssxref("overflow-wrap")}} プロパティの値とは関係なく、 <code>word-break: normal</code> や <code>overflow-wrap: anywhere</code> と同じ効果になります。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>word-break: break-word</code> および <code>overflow-wrap: break-word</code> ({{cssxref("overflow-wrap")}} を参照) とは対照的に、 <code>word-break: break-all</code> はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。</p>
+</div>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
+&lt;p class="normal narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="keepAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;4. &lt;code&gt;word-break: break-word&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakWord narrow"&gt;This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.narrow {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keepAll {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Examples', '100%', 600)}}</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 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<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.properties.word-break")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/ja/web/css/word-spacing/index.html b/files/ja/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..f3bf74f567
--- /dev/null
+++ b/files/ja/web/css/word-spacing/index.html
@@ -0,0 +1,127 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - CSS
+  - CSS Text
+  - CSS テキスト
+  - CSS プロパティ
+  - Reference
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>word-spacing</code></strong> プロパティは、タグや単語の間隔に関する挙動を指定します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+word-spacing: normal;
+
+/* &lt;length&gt; 値 */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* &lt;percentage&gt; 値 */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* グローバル値 */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>現在のフォントやブラウザ―で定義された普通の単語の間隔です。</dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>フォントによって定義された単語の間隔に追加する間隔を定義します。</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>文字の advance width を基準とした追加する間隔の量をパーセントで指定します。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="mozdiv1"&gt;Here are many words...&lt;/div&gt;
+&lt;div id="mozdiv2"&gt;...and many more!&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+} </pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+
+<p><code>word-spacing</code> で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。</p>
+
+<p>フォントファミリによって文字の幅が異なるため、読みやすい <code>word-spacing</code> は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<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 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>以前の値を、<code>&lt;spacing-limit&gt;</code> 値で置き換え。この値は、以前と同じ値か、追加された<code>&lt;percentage&gt;</code> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<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.properties.word-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+</ul>
diff --git a/files/ja/web/css/writing-mode/index.html b/files/ja/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..d11a7ba60d
--- /dev/null
+++ b/files/ja/web/css/writing-mode/index.html
@@ -0,0 +1,225 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 書字方向
+  - Reference
+  - リファレンス
+  - レイアウト
+  - 日本語処理
+translation_of: Web/CSS/writing-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>writing-mode</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は <code>html</code> 要素) に設定してください。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>このプロパティは、<em>ブロックのフロー方向</em>を指定します。これは、ブロックレベルコンテナが積まれる方向と、インラインレベルのコンテンツがブロックコンテナ内でフローする方向です。このように、 <code>writing-mode</code> プロパティはブロックレベルのコンテンツの順序も決定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワードの値 */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* グローバルの値 */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;</pre>
+
+<p><code>writing-mode</code> プロパティは、以下のいずれかの値として指定されます。横書きの場合は<a href="https://www.w3.org/International/questions/qa-scripts.en">その言葉の書字方向</a>も影響し、左書き (<code>ltr</code>、英語やその他の多くの言葉) や右書き (<code>rtl</code>、ヘブライ語やアラビア語) のどちらかになります。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd><code>ltr</code> の言語では、コンテンツは左から右へ水平に流れます。 <code>rtl</code> の言語では、コンテンツは右から左へ水平に流れます。次の水平の行は、前の行の下に配置されます。</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd><code>ltr</code> の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置されます。 <code>rtl</code> の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の右に配置されます。</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd><code>ltr</code> の言語では、コンテンツは上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置されます。 <code>rtl</code> の言語では、コンテンツは下から上へ垂直に流れ、次の垂直の行は前の行の左に配置されます。</dd>
+ <dt><code>sideways-rl</code> {{experimental_inline}}</dt>
+ <dd><code>ltr</code> の言語では、コンテンツは下から上へ垂直に流れます。 <code>rtl</code> の言語では、コンテンツは上から下へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを右へ横倒しにします。</dd>
+ <dt><code>sideways-lr</code> {{experimental_inline}}</dt>
+ <dd><code>ltr</code> の言語では、コンテンツは上から下へ垂直に流れます。 <code>rtl</code> の言語では、コンテンツは下から上へ垂直に流れます。垂直方向に並べられる書体を含むすべてのグリフを左へ横倒しにします。</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>SVG1 文書を除き、非推奨です。CSS では、<code>horizontal-tb</code> を代わりに使用してください。</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>SVG1 文書を除き、非推奨です。CSS では、<code>horizontal-tb</code> を代わりに使用してください。</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>SVG1 文書を除き、非推奨です。CSS では、<code>horizontal-tb</code> を代わりに使用してください。</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>SVG1 文書を除き、非推奨です。CSS では、<code>vertical-rl</code> を代わりに使用してください。</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>SVG1 文書を除き、非推奨です。CSS では、<code>vertical-rl</code> を代わりに使用してください。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、すべての書字方向を示し、各モードでさまざまな言語のテキストを表示します。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML は単純な {{HTMLElement("table")}} であり、行方向に書字方向を、列方向にその書字方向を使用して、さまざまな種類のテキストが表示される様子を表します。</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Value&lt;/th&gt;
+    &lt;th&gt;Vertical script&lt;/th&gt;
+    &lt;th&gt;Horizontal (LTR) script&lt;/th&gt;
+    &lt;th&gt;Horizontal (RTL) script&lt;/th&gt;
+    &lt;th&gt;Mixed script&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;horizontal-tb&lt;/td&gt;
+    &lt;td class="example Text1"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text1"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text1"&gt;&lt;span&gt;מלל ארוך לדוגמא&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text1"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;vertical-lr&lt;/td&gt;
+    &lt;td class="example Text2"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text2"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text2"&gt;&lt;span&gt;מלל ארוך לדוגמא&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text2"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;vertical-rl&lt;/td&gt;
+    &lt;td class="example Text3"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text3"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text3"&gt;&lt;span&gt;מלל ארוך לדוגמא&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text3"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;sideways-lr&lt;/td&gt;
+    &lt;td class="example Text4"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text4"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text4"&gt;&lt;span&gt;מלל ארוך לדוגמא&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text4"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;sideways-rl&lt;/td&gt;
+    &lt;td class="example Text5"&gt;&lt;span&gt;我家没有电脑。&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text5"&gt;&lt;span&gt;Example text&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text5"&gt;&lt;span&gt;מלל ארוך לדוגמא&lt;/span&gt;&lt;/td&gt;
+    &lt;td class="example Text5"&gt;&lt;span&gt;1994年に至っては&lt;/span&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<p>いくつかの予備的な CSS だけで、少し良く見えるようになります。</p>
+
+<pre class="brush: css">table {
+  border-collapse:collapse;
+}
+td, th {
+  border: 1px black solid; padding: 3px;
+}
+th {
+  background-color: lightgray;
+}
+.example {
+  height:75px;
+  width:75px;
+}</pre>
+</div>
+
+<p>コンテンツの方向を調整する CSS は次のようになります。</p>
+
+<pre class="brush:css;">.example.Text1 span, .example.Text1 {
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+  -ms-writing-mode: horizontal-tb;
+}
+
+.example.Text2 span, .example.Text2 {
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+.example.Text3 span, .example.Text3 {
+  writing-mode: vertical-rl;
+  -webkit-writing-mode: vertical-rl;
+  -ms-writing-mode: vertical-rl;
+}
+
+.example.Text4 span, .example.Text4 {
+  writing-mode: sideways-lr;
+  -webkit-writing-mode: sideways-lr;
+  -ms-writing-mode: sideways-lr;
+}
+
+.example.Text5 span, .example.Text5 {
+  writing-mode: sideways-rl;
+  -webkit-writing-mode: sideways-rl;
+  -ms-writing-mode: sideways-rl;
+}
+</pre>
+
+<h3 id="Actual_result" name="Actual_result">結果</h3>
+
+<p>{{EmbedLiveSample("Example", 400, 500)}}</p>
+
+<p>以下の画像は、ブラウザーの <code>writing-mode</code> の対応が不完全な場合のために、出力結果がどのように見えるかを示したものです。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17087/Screenshot_2020-02-05_21-04-30.png" style="height: 508px; width: 493px;"></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("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td><code>sideways-lr</code> および <code>sideways-rl</code> を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.writing-mode")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>SVG <code><a href="/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code> 属性</li>
+ <li>{{Cssxref("direction")}}</li>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("text-orientation")}}</li>
+ <li>{{Cssxref("text-combine-upright")}}</li>
+ <li><a href="/docs/Web/CSS/CSS_Logical_Properties">CSS 論理的プロパティ</a></li>
+ <li><a href="https://www.w3.org/International/articles/vertical-text/">Styling vertical text (Chinse, Japanese, Korean and Mongolian)</a></li>
+ <li>広範なブラウザーの対応試験結果: <a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">https://w3c.github.io/i18n-tests/results/writing-mode-vertical</a></li>
+</ul>
diff --git a/files/ja/web/css/z-index/index.html b/files/ja/web/css/z-index/index.html
new file mode 100644
index 0000000000..e5e6ec70b0
--- /dev/null
+++ b/files/ja/web/css/z-index/index.html
@@ -0,0 +1,139 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+  - CSS プロパティ
+  - CSS 位置指定レイアウト
+  - Reference
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS の <strong><code>z-index</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/position">位置指定</a>要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>位置指定されたボックス (つまり、 <code>position</code> が <code>static</code> 以外のもの) では、 <code>z-index</code> プロパティが以下のことを定義します。</p>
+
+<ol>
+ <li>現在の<a href="/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>におけるボックスの重ね合わせレベル</li>
+ <li>ボックスがローカルな重ね合わせコンテキストを作るかどうか</li>
+</ol>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers">/* キーワード値 */
+z-index: auto;
+
+/* &lt;integer&gt; 値 */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* 負の数は優先度を下げる */
+
+/* グローバル値 */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<p><code>z-index</code> プロパティは、キーワード <code><a href="#auto">auto</a></code> 又は <code><a href="#&lt;integer>">&lt;integer&gt;</a></code> のどちらかで指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。</dd>
+ <dt><a id="&lt;integer>" name="&lt;integer>"><code>&lt;integer&gt;</code></a></dt>
+ <dd>この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル <code>0</code> のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19]">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</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', 'animation behavior for z-index')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>z-index</code> をアニメーション可能として定義</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</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.properties.z-index")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS {{Cssxref("position")}} プロパティ</li>
+ <li><a href="/ja/docs/Web/CSS/Understanding_z-index">CSS の z-index の理解</a></li>
+</ul>
diff --git a/files/ja/web/css/zoom/index.html b/files/ja/web/css/zoom/index.html
new file mode 100644
index 0000000000..756ce7b514
--- /dev/null
+++ b/files/ja/web/css/zoom/index.html
@@ -0,0 +1,142 @@
+---
+title: zoom
+slug: Web/CSS/zoom
+tags:
+  - CSS
+  - CSS プロパティ
+  - Microsoft 拡張
+  - Non-standard
+  - WebKit 拡張
+  - リファレンス
+  - 標準外
+translation_of: Web/CSS/zoom
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><span class="seoSummary"> <a href="/en-US/docs/Web/CSS">CSS</a> の標準外の <strong><dfn><code>zoom</code></dfn></strong> プロパティは、要素の拡大率を制御するために使用することができます。</span>できれば、このプロパティの代わりに {{cssxref("transform-function/scale", "transform: scale()")}} を使用してください。ただし、 CSS 変換とは異なり、 <code>zoom</code> は要素のレイアウト時の大きさに影響します。</p>
+
+<pre class="brush: css no-line-numbers">/* キーワード値 */
+zoom: normal;
+zoom: reset;
+
+/* &lt;percentage&gt; 値 */
+zoom: 50%;
+zoom: 200%;
+
+/* &lt;number&gt; 値 */
+zoom: 1.1;
+zoom: 0.7;
+
+/* グローバル値 */
+zoom: inherit;
+zoom: initial;
+zoom: unset;</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>要素を通常のサイズでレンダリングします。</dd>
+ <dt><code>reset</code> {{non-standard_inline}}</dt>
+ <dd>ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで <kbd>Ctrl</kbd>-<kbd>-</kbd> または <kbd>Ctrl</kbd>+<kbd>+</kbd> のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみサポートされています。</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>ズーム率です。 <code>100%</code> と <code>normal</code> は等価です。 <code>100%</code> よりも大きな値はズームイン、 <code>100%</code>よりも小さな値はズームアウトします。</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>ズーム率です。対応するパーセンテージ (<code>1.0</code> = <code>100%</code> = <code>normal</code>) に相当します。 <code>1.0</code> よりも大きな値はズームイン、 <code>1.0</code> よりも小さな値はズームアウトします。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="First_example" name="First_example">最初の例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="small"&gt;Small&lt;/p&gt;
+&lt;p class="normal"&gt;Normal&lt;/p&gt;
+&lt;p class="big"&gt;Big&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p.small {
+  zoom: 75%;
+}
+p.normal {
+  zoom: normal;
+}
+p.big {
+  zoom: 2.5;
+}
+p {
+  display: inline-block;
+}
+p:hover {
+  zoom: reset;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('First_example')}}</p>
+
+<h3 id="Second_example" name="Second_example">2番目の例</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="a" class="circle"&gt;&lt;/div&gt;
+&lt;div id="b" class="circle"&gt;&lt;/div&gt;
+&lt;div id="c" class="circle"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div.circle {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  zoom: 1.5;
+}
+div#a {
+  background-color: gold;
+  zoom: normal;
+}
+div#b {
+  background-color: green;
+  zoom: 200%;
+}
+div#c {
+  background-color: blue;
+  zoom: 2.9;
+}
+</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample('Second_example')}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>このプロパティは標準外であり、 Internet Explorer を起源としています。 Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">Safari CSS Referenceで説明しています</a>。マイクロソフトの Rossen Atanassov は <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">GitHubに非公式の仕様案を公開しています</a>。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("css.properties.zoom")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>CSS-Tricks' CSS Almanac の <a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> の記事</a></li>
+ <li> <a href="/ja/docs/Web/CSS/@viewport/zoom"><code>zoom</code> ビューポート記述子</a>、 <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> で使用</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936">Bug 390936: Implement Internet Explorer <code>zoom</code> property for CSS </a>on the Firefox issue tracker Bugzilla</li>
+</ul>