2021/08/13 時点の英語版に同期

1 files changed, 59 insertions, 86 deletions

diff --git a/files/ja/web/css/overflow-x/index.md b/files/ja/web/css/overflow-x/index.md
index 29e7d447c8..902b646df2 100644
--- a/files/ja/web/css/overflow-x/index.md
+++ b/files/ja/web/css/overflow-x/index.md
@@ -3,26 +3,23 @@ title: overflow-x
 slug: Web/CSS/overflow-x
 tags:
   - CSS
-  - CSS Box Model
-  - CSS Property
-  - CSS プロパティ
   - CSS ボックスモデル
-  - Reference
-  - overflow
-  - 'recipe:css-property'
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.overflow-x
 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>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
+**`overflow-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+{{EmbedInteractiveExample("pages/css/overflow-x.html")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-x: visible;
 overflow-x: hidden;
 overflow-x: clip;
@@ -32,64 +29,61 @@ overflow-x: auto;
 /* グローバル値 */
 overflow-x: inherit;
 overflow-x: initial;
+overflow-x: revert;
 overflow-x: unset;
-</pre>
+```
+
+`overflow-x` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
+
+### 値
 
-<p><code>overflow-x</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+- `visible`
+  - : 内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。 {{cssxref("overflow-y")}} が `hidden`, `scroll`, `auto` のいずれかであり、このプロパティが `visible` である場合は、暗黙に `auto` に計算します。
+- `hidden`
+  - : 水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+- `clip` {{experimental_inline}}
+  - : `hidden` のように、内容が要素のパディングボックスで切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
+- `scroll`
+  - : 水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+- `auto`
+  - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
 
-<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>
+{{CSSInfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<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;
+```html
+<ul>
+ - <code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-x:scroll&lt;/code&gt; — 常にスクロールバーを表示
-    &lt;div id="div2"&gt;
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
+ - <code>overflow-x:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+  </li>
 
-  &lt;li&gt;&lt;code&gt;overflow-x:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
-    &lt;div id="div3"&gt;
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    &lt;/div&gt;
-  &lt;/li&gt;
+ - <code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+  </li>
 
-  &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>
+ - <code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+    <div id="div4">
+  </li>
+</ul>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css notranslate">#div1, #div2, #div3, #div4 {
+```css
+#div1, #div2, #div3, #div4 {
   border: 1px solid black;
   width:  250px;
   margin-bottom: 12px;
@@ -99,41 +93,20 @@ overflow-x: unset;
 #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>
+{{EmbedLiveSample("Examples", "100%", "270")}}
 
-<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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.overflow-x")}}</p>
+{{Compat}}
 
-<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>
+- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}