2021/12/01 時点の英語版に同期

CSS Fragmentation 関連の文書を更新

8 files changed, 492 insertions, 621 deletions

diff --git a/files/ja/web/css/box-decoration-break/index.md b/files/ja/web/css/box-decoration-break/index.md
index e2069cb608..446af77edf 100644
--- a/files/ja/web/css/box-decoration-break/index.md
+++ b/files/ja/web/css/box-decoration-break/index.md
@@ -3,66 +3,69 @@ title: box-decoration-break
 slug: Web/CSS/box-decoration-break
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 断片化
-  - Experimental
-  - Reference
+  - CSS プロパティ
+  - 実験的
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.box-decoration-break
 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>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>
+**`box-decoration-break`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[断片](/ja/docs/Web/CSS/CSS_Fragmentation)が複数の行、段、ページに渡る場合に描画する方法を指定します。
 
-<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
 
-<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>
+- {{Cssxref("background")}}
+- {{Cssxref("border")}}
+- {{Cssxref("border-image")}}
+- {{Cssxref("box-shadow")}}
+- {{Cssxref("clip-path")}}
+- {{Cssxref("margin")}}
+- {{Cssxref("padding")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 box-decoration-break: slice;
 box-decoration-break: clone;
 
 /* グローバル値 */
 box-decoration-break: initial;
 box-decoration-break: inherit;
+box-decoration-break: revert;
 box-decoration-break: unset;
-</pre>
+```
 
-<p><code>box-decoration-break</code> プロパティは、以下の一覧にあるキーワード値の一つで指定します。</p>
+`box-decoration-break` プロパティは、以下の一覧にあるキーワード値の一つで指定します。
 
-<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>
+- `slice`
+  - : 要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページの部分に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
+- `clone`
+  - : それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }} はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 {{ Cssxref("background-repeat") }}`: no-repeat` がついた背景画像であっても、複数回繰り返されます。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Inline_box_fragments" name="Inline_box_fragments">インラインボックスの断片化</h3>
+### インラインボックスの断片化
 
-<p>改行を含むインライン要素は次のように整形されます。</p>
+改行を含むインライン要素は次のように整形されます。
 
-<pre class="brush:css">.example {
+```css
+.example {
   background: linear-gradient(to bottom right, yellow, green);
   box-shadow:
     8px 8px 10px 0px deeppink,
@@ -77,77 +80,60 @@ box-decoration-break: unset;
 }
 
 ...
-&lt;span class="example"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+<span class="example">The<br>quick<br>orange fox</span>
+```
 
-<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>
+![box-decoration-break:slice と例で与えられたスタイルでスタイル付けされたインライン要素のレンダリングの画面ショット](box-decoration-break-inline-slice.png)
 
-<p>上記のスタイルに <code>box-decoration-break: clone</code> を追加すると、</p>
+上記のスタイルに `box-decoration-break: clone` を追加すると、
 
-<pre class="brush:css">-webkit-box-decoration-break: clone;
+```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>
+![box-decoration-break:clone と例で与えられたスタイルでスタイル付けされたインライン要素のレンダリングの画面ショット](box-decoration-break-inline-clone.png)
 
-<p>これはインライン要素に大きな <code>border-radius</code> の値を使用した例です。二番目の <code>"iM"</code> には、 <code>"i"</code> と <code>"M"</code> の間に改行があります。それに対して、最初の <code>"iM"</code> には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。</p>
+ブラウザーで[上記の二つのインラインの例を試してみる](https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html)ことができます。
 
-<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>
+これはインライン要素に大きな `border-radius` の値を使用した例です。二番目の `"iM"` には、 `"i"` と `"M"` の間に改行があります。それに対して、最初の `"iM"` には改行がありません。なお、２つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。
 
-<p>ブラウザーで<a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">上の例を試してみる</a>ことができます。</p>
+![2 つ目のインライン要素の例のレンダリングのスクリーンショット。](box-decoration-break-slice-inline-2.png)
 
-<h3 id="Block_box_fragments" name="Block_box_fragments">ブロックボックスの断片化</h3>
+ブラウザーで[上の例を試してみる](https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html)ことができます。
 
-<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>
+![例で使用したブロック要素を断片化せずにレンダリングした画面です。](box-decoration-break-block.png)
 
-<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>
+![box-decoration-break:slice でスタイル付けされた例で使用されている断片ブロックのレンダリングの画面ショットです。](box-decoration-break-block-slice.png)
 
-<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>
+そして、同じ例を `box-decoration-break: clone` で整形すると、次のような結果になります。
 
-<p>なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。</p>
+![box-decoration-break:clone でスタイル付けされた例で使用されている断片ブロックのレンダリングの画面ショットです。](box-decoration-break-block-clone.png)
 
-<p>ブラウザーで<a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">上の例を試してみる</a>ことができます。</p>
+それぞれの断片に同じ境界線、ボックスの影、背景が複製されることに注意してください。
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+ブラウザーで[上の例を試してみる](https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html)ことができます。
 
-<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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.box-decoration-break")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}</li>
-</ul>
+- {{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}
diff --git a/files/ja/web/css/break-after/index.md b/files/ja/web/css/break-after/index.md
index 2c4374e1be..30c81c89e0 100644
--- a/files/ja/web/css/break-after/index.md
+++ b/files/ja/web/css/break-after/index.md
@@ -3,19 +3,20 @@ title: break-after
 slug: Web/CSS/break-after
 tags:
   - CSS
-  - CSS Fragmentation
-  - CSS Multi-column Layout
-  - CSS Property
-  - NeedsExample
-  - Reference
-  - 'recipe:css-property'
+  - CSS 断片化
+  - CSS 段組みレイアウト
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.break-after
 translation_of: Web/CSS/break-after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>break-after</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、生成されたボックスの後で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+**`break-after`** は [CSS](/ja/docs/Web/CSS) のプロパティで、生成されたボックスの後で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。
 
-<pre class="brush:css no-line-numbers notranslate">/* 一般の区切り値 */
+```css
+/* 一般の区切り値 */
 break-after: auto;
 break-after: avoid;
 break-after: always;
@@ -40,154 +41,123 @@ break-after: region;
 /* グローバル値 */
 break-after: inherit;
 break-after: initial;
+break-after: revert;
 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>
+```
+
+区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の `break-after` の値、次の要素の {{cssxref("break-before")}} の値、包含要素の {{cssxref("break-inside")}} の値です。
+
+分割が行われるかどうかを判断するためには、以下の規則が適用されます。
+
+1. 考慮される 3 つの値の中の何れかに*区切りを強制する値* (`always`, `left`, `right`, `page`, `column`, `region` の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 `break-before` の値は `break-after` の値より優先し、それは更に `break-inside` よりも優先します)。
+2. 考慮される 3 つの値の中に*区切りを防止する値* (`avoid`, `avoid-page`, `avoid-region`, `avoid-column` の何れか) が含まれていた場合は、その場所で区切りは適用されません。
+
+強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 `avoid` に関する値に解決される要素の境界には追加されません。
+
+## 構文
+
+`break-after` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
+
+### 値
+
+### 一般の区切り値
+
+- `auto`
+  - : 該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+- `avoid`
+  - : 該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+- `always` {{experimental_inline}}
+  - : 該当するボックスの直後で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
+- `all` {{experimental_inline}}
+  - : 該当するボックスの直後で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
+
+#### 改ページ値
+
+- `avoid-page`
+  - : 該当するボックスの直後の改ページを禁止します。
+- `page`
+  - : 該当するボックスの直後で改ページを行います。
+- `left`
+  - : 該当するボックスの直後で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
+- `right`
+  - : 該当するボックスの直後で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
+- `recto` {{experimental_inline}}
+  - : 該当するボックスの直後で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
+- `verso` {{experimental_inline}}
+  - : 該当するボックスの直後で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
+
+#### 段区切り値
+
+- `avoid-column`
+  - : 該当するボックスの直後の段区切りを禁止します。
+- `column`
+  - : 該当するボックスの直後で段区切りを行います。
+
+#### 領域区切り値
+
+- `avoid-region` {{experimental_inline}}
+  - : 該当するボックスの直後の領域区切りを禁止します。
+- `region` {{experimental_inline}}
+  - : 該当するボックスの直後で領域区切りを行います。
+
+## 改ページの別名
+
+互換性のため、古い {{cssxref("page-break-after")}} はブラウザーから `break-after` の別名として扱われます。これにより、 `page-break-after` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
+
+| page-break-after | break-after |
+| ---------------- | ----------- |
+| `auto`           | `auto`      |
+| `left`           | `left`      |
+| `right`          | `right`     |
+| `avoid`          | `avoid`     |
+| `always`         | `page`      |
+
+> **Note:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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>
+次の例では、すべての段にまたがる `<h1>` (`column-span: all` を使用して実現) と、一連の `<h2>` と段落を `column-width: 200px` を使用して段組みレイアウトしたコンテナーを用意しています。
 
-<p>既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 <code>break-after: column</code> を <code>&lt;p&gt;</code> 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に <code>&lt;h2&gt;</code> がきちんと配置されます。</p>
+既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 `break-after: column` を `<p>` 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に `<h2>` がきちんと配置されます。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;article&gt;
-  &lt;h1&gt;Main heading&lt;/h1&gt;
+```html
+<article>
+  <h1>大見出し</h1>
 
-  &lt;h2&gt;Subheading&lt;/h2&gt;
+  <h2>小見出し</h2>
 
-  &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;
+  <p>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.</p>
 
-  &lt;h2&gt;Subheading&lt;/h2&gt;
+  <h2>小見出し</h2>
 
-  &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;
+  <p>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.</p>
 
-  &lt;h2&gt;Subheading&lt;/h2&gt;
+  <h2>小見出し</h2>
 
-  &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.
+  <p>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;
+  <h2>小見出し</h2>
 
-  &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>
+  <p>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.</p>
+</article>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">html {
+```css
+html {
   font-family: helvetica, arial, sans-serif;
 }
 
@@ -211,47 +181,22 @@ p {
 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>
-
-<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>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}
+
+## 仕様書
+
+{{Specifications("css.properties.break-after.multicol_context")}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)
diff --git a/files/ja/web/css/break-before/index.md b/files/ja/web/css/break-before/index.md
index 2850a4bd25..c58f33f457 100644
--- a/files/ja/web/css/break-before/index.md
+++ b/files/ja/web/css/break-before/index.md
@@ -6,14 +6,17 @@ tags:
   - CSS プロパティ
   - CSS 断片化
   - CSS 段組みレイアウト
-  - Reference
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.break-before
 translation_of: Web/CSS/break-before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>break-before</code></strong> プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+[CSS](/ja/docs/Web/CSS) の **`break-before`** プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。
 
-<pre class="brush:css no-line-numbers">/* 一般の区切り値 */
+```css
+/* 一般の区切り値 */
 break-before: auto;
 break-before: avoid;
 break-before: always;
@@ -38,154 +41,162 @@ break-before: region;
 /* グローバル値 */
 break-before: inherit;
 break-before: initial;
+break-before: revert;
 break-before: unset;
-</pre>
+```
 
-<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の <code>break-before</code> の値、包含要素の {{cssxref("break-inside")}} の値です。</p>
+区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の `break-before` の値、包含要素の {{cssxref("break-inside")}} の値です。
 
-<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>
+- 考慮される 3 つの値の中の何れかに*区切りを強制する値* (`always`, `left`, `right`, `page`, `column`, `region` の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 `break-before` の値は `break-after` の値より優先し、それは更に `break-inside` よりも優先します)。
+- 考慮される 3 つの値の中に*区切りを防止する値* (`avoid`, `avoid-page`, `avoid-region`, `avoid-column` の何れか) が含まれていた場合は、その場所で区切りは適用されません。
 
-<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>
+強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 `avoid` に関する値に解決される要素の境界には追加されません。
 
-<p>{{cssinfo}}</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+`break-before` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
 
-<p><code>break-before</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+#### 一般の区切り値
 
-<h4 id="Generic_break_values" name="Generic_break_values">一般の区切り値</h4>
+- `auto`
+  - : 該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+- `avoid`
+  - : 該当するボックスの直前に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+- `always` {{experimental_inline}}
+  - : 該当するボックスの直前で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
+- `all` {{experimental_inline}}
+  - : 該当するボックスの直前で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。
 
-<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>
+- `avoid-page`
+  - : 該当するボックスの直前の改ページを禁止します。
+- `page`
+  - : 該当するボックスの直前で改ページを行います。
+- `left`
+  - : 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが左ページになるようにします。
+- `right`
+  - : 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが右ページになるようにします。
+- `recto` {{experimental_inline}}
+  - : 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
+- `verso` {{experimental_inline}}
+  - : 該当するボックスの直前で一つまたは二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)
 
-<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>
+- `avoid-column`
+  - : 該当するボックスの直前の段区切りを禁止します。
+- `column`
+  - : 該当するボックスの直前で段区切りを行います。
 
-<dl>
- <dt><code>avoid-column</code></dt>
- <dd>該当するボックスの直前の段区切りを禁止します。</dd>
- <dt><code>column</code></dt>
- <dd>該当するボックスの直前で段区切りを行います。</dd>
-</dl>
+#### 領域区切り値
 
-<h4 id="領域区切り値">領域区切り値</h4>
+- `avoid-region` {{experimental_inline}}
+  - : 該当するボックスの直前の領域区切りを禁止します。
+- `region` {{experimental_inline}}
+  - : 該当するボックスの直前で領域区切りを行います。
 
-<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>
+互換性のため、古い {{cssxref("page-break-before")}} はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
+
+| page-break-before | break-before |
+| ----------------- | ------------ |
+| `auto`            | `auto`       |
+| `left`            | `left`       |
+| `right`           | `right`      |
+| `avoid`           | `avoid`      |
+| `always`          | `page`       |
+
+> **Note:** ブラウザーにおいては `always` の値は `page-break-*` において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では `always` の値ではなく `page` の別名となっています。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<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>
-
-<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>
+## 例
+
+### きれいに段を分割
+
+次の例では、すべての段にまたがる `<h1>` (`column-span: all` を使用して実現) と、一連の `<h2>` と段落を `column-width: 200px` を使用して段組みレイアウトしたコンテナーを用意しています。
+
+既定では、小見出しと段落は、見出しの位置が統一されていないため、かなり乱雑にレイアウトされていました。しかし、 `break-before: column` を `<h2>` 要素に使うことで、それぞれの要素の後に強制的に改行するようにしたので、各段の先頭に `<h2>` がきちんと配置されます。
+
+#### HTML
+
+```html
+<article>
+  <h1>大見出し</h1>
+
+  <h2>小見出し</h2>
+
+  <p>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.</p>
+
+  <h2>小見出し</h2>
+
+  <p>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.</p>
+
+  <h2>小見出し</h2>
+
+  <p>Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis. Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat egestas tellus.
+
+  <h2>小見出し</h2>
+
+  <p>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.</p>
+</article>
+```
+
+#### CSS
+
+```css
+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;
+  break-before: column;
+}
+
+p {
+  line-height: 1.5;
+}
+
+article {
+  column-width: 200px;
+  gap: 20px;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Breaking_into_neat_columns', '100%', 600)}}
+
+## 仕様書
+
+{{Specifications("css.properties.break-before.multicol_context")}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)
diff --git a/files/ja/web/css/break-inside/index.md b/files/ja/web/css/break-inside/index.md
index 573f2aa905..5e48298091 100644
--- a/files/ja/web/css/break-inside/index.md
+++ b/files/ja/web/css/break-inside/index.md
@@ -3,19 +3,21 @@ title: break-inside
 slug: Web/CSS/break-inside
 tags:
   - CSS
-  - CSS Fragmentation
-  - CSS Multi-column Layout
-  - CSS Property
+  - CSS 断片化
+  - CSS 段組みレイアウト
+  - CSS プロパティ
   - NeedsExample
-  - Reference
-  - 'recipe:css-property'
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.break-inside
 translation_of: Web/CSS/break-inside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>break-inside</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、生成されたボックスの途中で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。</p>
+**`break-inside`** は [CSS](/ja/docs/Web/CSS) のプロパティで、生成されたボックスの途中で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 break-inside: auto;
 break-inside: avoid;
 break-inside: avoid-page;
@@ -25,98 +27,84 @@ break-inside: avoid-region;
 /* グローバル値 */
 break-inside: inherit;
 break-inside: initial;
+break-inside: revert;
 break-inside: unset;
-</pre>
+```
 
-<p>区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の <code>break-inside</code> の値です。</p>
+区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、3 つのプロパティに影響されます。前の要素の {{cssxref("break-after")}} の値、次の要素の {{cssxref("break-before")}} の値、包含要素の `break-inside` の値です。
 
-<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>
+1.  考慮される三つの値の中の何れかに*区切りを強制する値* (`always`, `left`, `right`, `page`, `column`, `region` の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 `break-before` の値は `break-after` の値より優先し、それは更に `break-inside` よりも優先します)。
+2.  考慮される三つの値の中に*区切りを防止する値* (`avoid`, `avoid-page`, `avoid-region`, `avoid-column` の何れか) が含まれていた場合は、その場所で区切りは適用されません。
 
-<p>強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 <code>avoid</code> に関する値に解決される要素の境界には追加されません。</p>
+強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 `avoid` に関する値に解決される要素の境界には追加されません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>break-inside</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p>
+`break-inside` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
 
-<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>
+- `auto`
+  - : 主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
+- `avoid`
+  - : 主ボックスの途中に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
+- `avoid-page`
+  - : 主ボックスの途中の改ページを禁止します。
+- `avoid-column`
+  - : 主ボックスの途中の段区切りを禁止します。
+- `avoid-region` {{experimental_inline}}
+  - : 主ボックスの途中の領域区切りを禁止します。
 
-<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>
+互換性のため、ブラウザーは古い {{cssxref("page-break-inside")}} を `break-inside` の別名として扱います。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
 
-<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>
+| page-break-inside | break-inside |
+| ----------------- | ------------ |
+| `auto`            | `auto`       |
+| `avoid`           | `avoid`      |
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<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>
+次の例では、すべての段にまたがる `<h1>` (`column-span: all` を使用して実現) と、 `column-width: 200px` を使用して複数の段に配置された一連の段落を含むコンテナーを用意しています。また、画像とキャプションを含む `<figure>` もあります。
 
-<p>既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 <code>break-inside: avoid</code> を <code>&lt;figure&gt;</code> に設定しています。</p>
+既定では、画像とキャプションの間に改行が入る可能性がありますが、これは私たちが望んでいるものではありません。これを避けるために、 `break-inside: avoid` を `<figure>` に設定しています。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;article&gt;
-  &lt;h1&gt;Main heading&lt;/h1&gt;
+```html
+<article>
+  <h1>大見出し</h1>
 
-  &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;
+  <p>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.</p>
 
-  &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;
+  <figure>
+    <img src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png">
+    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
+  </figure>
 
-  &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;
+  <p>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.</p>
 
-  &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>
+  <p>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.</p>
+</article>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">html {
+```css
+html {
   font-family: helvetica, arial, sans-serif;
 }
 
@@ -159,47 +147,22 @@ figcaption {
 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>
-
-<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>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Avoiding_breaking_inside_a_figure', '100%', 600)}}
+
+## 仕様書
+
+{{Specifications("css.properties.break-inside.multicol_context")}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)
diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html
index e3354ed01b..9a50ed13e4 100644
--- a/files/ja/web/css/css_columns/index.html
+++ b/files/ja/web/css/css_columns/index.html
@@ -3,7 +3,7 @@ title: CSS 段組みレイアウト
 slug: Web/CSS/CSS_Columns
 tags:
   - CSS
-  - CSS 分割
+  - CSS 断片化
   - CSS 段組みレイアウト
   - Reference
   - レイアウト
@@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Columns
 
 <h2 id="分割との関連">分割との関連</h2>
 
-<p>段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、<a href="/ja/docs/Web/CSS/CSS_Pages">ページ付きメディア</a>に密接に関連します。従って、 <a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a>仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。</p>
+<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>
 
@@ -44,7 +44,7 @@ translation_of: Web/CSS/CSS_Columns
 </ul>
 </div>
 
-<h3 id="Related_CSS_Fragmentation_Properties" name="Related_CSS_Fragmentation_Properties">関連する CSS 分割のプロパティ</h3>
+<h3 id="Related_CSS_Fragmentation_Properties" name="Related_CSS_Fragmentation_Properties">関連する CSS 断片化のプロパティ</h3>
 
 <div class="index">
 <ul>
diff --git a/files/ja/web/css/css_fragmentation/index.md b/files/ja/web/css/css_fragmentation/index.md
index be4cb944d8..b1d3e9906e 100644
--- a/files/ja/web/css/css_fragmentation/index.md
+++ b/files/ja/web/css/css_fragmentation/index.md
@@ -1,47 +1,33 @@
 ---
-title: CSS 分割
+title: CSS 断片化
 slug: Web/CSS/CSS_Fragmentation
 tags:
   - CSS
-  - CSS 分割
-  - Overview
+  - CSS 断片化
+  - ガイド
+  - NeedsCompatTable
+  - NeedsContent
+  - 概要
   - リファレンス
 translation_of: Web/CSS/CSS_Fragmentation
 ---
-<div>{{cssref}}</div>
+{{CSSRef}}
 
-<p><strong>CSS 分割</strong>は CSS のモジュールの一つで、コンテンツが<a href="/ja/docs/Web/CSS/Paged_Media">ページ</a>、領域、<a href="/ja/docs/Web/CSS/CSS_Columns">段</a>をまたがって分割された (断片化が発生した) ときにどのように表示するかを定義します。</p>
+**CSS 断片化**は CSS のモジュールの一つで、コンテンツが[ページ](/ja/docs/Web/CSS/Paged_Media)、領域、[段](/ja/docs/Web/CSS/CSS_Columns)をまたがって分割された (断片化された) ときにどのように表示するかを定義します。
 
-<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>
+- {{cssxref("box-decoration-break")}}
+- {{cssxref("break-after")}}
+- {{cssxref("break-before")}}
+- {{cssxref("break-inside")}}
+- {{cssxref("orphans")}}
+- {{cssxref("widows")}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<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>
+| 仕様書                             | 状態                            | 備考     |
+| ---------------------------------- | ------------------------------- | -------- |
+| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | 初回定義 |
diff --git a/files/ja/web/css/orphans/index.md b/files/ja/web/css/orphans/index.md
index 1621e1d75f..dab873603d 100644
--- a/files/ja/web/css/orphans/index.md
+++ b/files/ja/web/css/orphans/index.md
@@ -5,57 +5,61 @@ tags:
   - CSS
   - CSS プロパティ
   - CSS 断片化
-  - Reference
+  - リファレンス
   - Web
 translation_of: Web/CSS/orphans
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<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>
+**`orphans`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[ページ](/ja/docs/Web/CSS/Paged_Media)、領域、[段](/ja/docs/Web/CSS/CSS_Columns)の*最下部*に表示されるブロックコンテナーの最小行数を設定します。
 
-<pre class="brush:css no-line-numbers">/* &lt;integer&gt; 値 */
+```css
+/* <integer> 値 */
 orphans: 2;
 orphans: 3;
 
 /* Global values */
 orphans: inherit;
 orphans: initial;
+orphans: revert;
 orphans: unset;
-</pre>
+```
 
-<div class="note">
-<p>組版において、 <em>orphan</em> とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)</p>
-</div>
+組版において、オルファン (_orphan_) とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)
+
+## 構文
 
-<p>{{cssinfo}}</p>
+### 値
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- {{cssxref("&lt;integer&gt;")}}
+  - : 区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt>{{cssxref("&lt;integer&gt;")}}</dt>
- <dd>区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+### オルファンを 3 行の大きさに設定
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<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>
+```html
+<div>
+  <p>これは幾らかのテキストを含む最初の段落です。</p>
+  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは orphans がどの様に動作するのかを示すために用います。</p>
+  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css; highlight[5]">div {
+```css
+div {
   background-color: #8cffa0;
   height: 150px;
   columns: 3;
@@ -69,45 +73,21 @@ p {
 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>
-<p>{{Compat("css.properties.orphans")}}</p>
-</div>
+#### 結果
+
+{{EmbedLiveSample("Setting_a_minimum_orphan_size_of_three_lines", 380, 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
-<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>
+- {{cssxref("widows")}}
+- [ページ化メディア](/ja/docs/Web/CSS/Paged_Media)
diff --git a/files/ja/web/css/widows/index.md b/files/ja/web/css/widows/index.md
index 234be14e05..91526323d2 100644
--- a/files/ja/web/css/widows/index.md
+++ b/files/ja/web/css/widows/index.md
@@ -3,10 +3,10 @@ title: widows
 slug: Web/CSS/widows
 tags:
   - CSS
-  - CSS Fragmentation
-  - CSS Multi-column Layout
+  - CSS 断片化
+  - CSS 段組みレイアウト
   - CSS プロパティ
-  - Reference
+  - リファレンス
   - recipe:css-property
 browser-compat: css.properties.widows
 translation_of: Web/CSS/widows
@@ -48,15 +48,15 @@ widows: unset;
 
 ## 例
 
-<h3 id="Controlling_column_widows">段の widow の制御</h3>
+<h3 id="Controlling_column_widows">段のウィドウの制御</h3>
 
 #### HTML
 
 ```html
 <div>
-  <p>これは幾らかのテキストを含む最初の段落です。</p>
-  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。</p>
-  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
+  これは幾らかのテキストを含む最初の段落です。
+  これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。
+  これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。
 </div>
 ```