CSS ページメディアに関する文書を更新

- 2021/10/11 時点の英語版に同期

9 files changed, 419 insertions, 677 deletions

diff --git a/files/ja/web/css/@page/index.md b/files/ja/web/css/@page/index.md
index dd260bbb99..efa6049af7 100644
--- a/files/ja/web/css/@page/index.md
+++ b/files/ja/web/css/@page/index.md
@@ -5,104 +5,66 @@ tags:
   - '@page'
   - At-rule
   - CSS
-  - Layout
+  - レイアウト
   - Reference
   - Web
+browser-compat: css.at-rules.page
 translation_of: Web/CSS/@page
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>@page</code></strong> は CSS のアット規則で、文書を印刷するときに一部の CSS プロパティを変更するために使用します。</p>
+**`@page`** は CSS のアットルールで、文書を印刷するときに一部の CSS プロパティを変更するために使用します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css no-line-numbers notranslate">@page {
+```css
+@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>
+- [`size`](/ja/docs/Web/CSS/@page/size)
+  - : 対象となるページボックスの包含ブロックの寸法と向きを指定します。一般的な場合、1つのページボックスが1枚の用紙に印刷され、対象となる用紙の寸法を示します。
 
-<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>
+`@page` ですべての CSS プロパティを変更できるわけではありません。変更できるのは、マージン、orphans、widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。
 
-<h2 id="Description" name="Description">解説</h2>
+`@page` アットルールには、 CSS オブジェクトモデルインターフェイスの {{domxref("CSSPageRule")}} からアクセスできます。
 
-<p><code>@page</code> ですべての CSS プロパティを変更できるわけではありません。変更できるのは、 margin, orphans, widows と、文書のページ区切りだけです。これ以外の CSS プロパティを変えようとしても、無視されます。</p>
+> **Note:** W3C は、ビューポートに関する {{cssxref("&lt;length&gt;")}} の単位、`vh`、`vw`、`vmin`、`vmax` の取り扱い方について議論中です。差し当たっては、これらを `@page` アットルールの中で使わないでください。
 
-<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>
+{{csssyntax}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 例
 
-{{csssyntax}}
+### @page 擬似クラスの例
+
+さまざまな `@page` の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)のページにある例を参照してください。
+
+- {{Cssxref(":blank")}}
+- {{Cssxref(":first")}}
+- {{Cssxref(":left")}}
+- {{Cssxref(":right")}}
+- {{Cssxref(":recto")}} {{experimental_inline}}
+- {{Cssxref(":verso")}} {{experimental_inline}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-<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>
-
-<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>
+- この件 (ページベースのカウンターなど) に関する進捗の追跡は、 Bugzilla のチケット [\[META\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) を参照してください。
diff --git a/files/ja/web/css/_colon_blank/index.md b/files/ja/web/css/_colon_blank/index.md
index be50e8b238..758c0b5193 100644
--- a/files/ja/web/css/_colon_blank/index.md
+++ b/files/ja/web/css/_colon_blank/index.md
@@ -1,76 +1,63 @@
 ---
 title: ':blank'
-slug: 'Web/CSS/:blank'
+slug: Web/CSS/:blank
 tags:
   - ':blank'
   - CSS
-  - CSS Selectors
+  - CSS セレクター
   - Draft
   - Experimental
   - NeedsContent
   - NeedsExample
-  - Pseudo-class
-translation_of: 'Web/CSS/:blank'
+  - 擬似クラス
+  - セレクター
+browser-compat: css.selectors.blank
+translation_of: Web/CSS/:blank
 ---
-<p>{{CSSRef}}{{SeeCompatTable}}</p>
+{{CSSRef}}{{SeeCompatTable}}
 
-<div class="blockIndicator note">
-<p><strong>注:</strong> <code>:blank</code> セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。</p>
+> **Note:** セレクターは、CSSWG が変更を続けているため、使用するリスクを考慮する必要があります。
+>
+> [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967) を参照してください。
 
-<p><a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a> を参照してください。</p>
-</div>
+**`:blank`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、空のユーザー入力要素 (例えば {{HTMLElement("input")}} や {{HTMLElement("textarea")}}) を選択します。
 
-<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>
+## 構文
 
 {{CSSSyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Simple_blank_example" name="Simple_blank_example">単純な :blank の例</h3>
+<h3 id="Simple_blank_example">単純な :blank の例</h3>
 
-<p>最終的に対応しているブラウザーでは、 <code>:blank</code> 疑似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。</p>
+最終的に対応しているブラウザーでは、 `:blank` 擬似クラスを使用することで、開発者は、必須ではないが、まだ何も記入されていない入力コントロールを、何らかの方法で強調表示することができるようになります。
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;textarea&gt;&lt;/textarea&gt;</pre>
+```html
+<textarea></textarea>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">textarea:blank {
+```css
+textarea:blank {
   border: 3px solid red;
-}</pre>
+}
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}</p>
+{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.selectors.blank")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{CSSxRef(":empty")}}</li>
-</ul>
+- {{CSSxRef(":empty")}}
diff --git a/files/ja/web/css/_colon_first/index.md b/files/ja/web/css/_colon_first/index.md
index fd5162848a..3e320393c3 100644
--- a/files/ja/web/css/_colon_first/index.md
+++ b/files/ja/web/css/_colon_first/index.md
@@ -1,47 +1,49 @@
 ---
 title: ':first'
-slug: 'Web/CSS/:first'
+slug: Web/CSS/:first
 tags:
   - '@page'
   - CSS
-  - CSS ページ化メディア
-  - Layout
-  - Pseudo-class
+  - レイアウト
+  - 擬似クラス
   - Reference
-  - Selector
+  - セレクター
   - Web
-translation_of: 'Web/CSS/:first'
+browser-compat: css.selectors.first
+translation_of: Web/CSS/:first
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<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>
+**`:first`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使用され、印刷文書の最初のページを表します。 (一般的なノードの最初の要素については {{cssxref(":first-child")}} を参照してください。)
 
-<pre class="brush: css no-line-numbers notranslate">/* 印刷時に最初のページを選択 */
+```css
+/* 印刷時に最初のページを選択 */
 @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>
+> **Note:** この擬似クラスを使用してすべての CSS プロパティを変更できるわけではありません。変更できるのは文書のマージン、 {{cssxref("orphans")}}、{{cssxref("widows")}}、ページ区切りのみです。さらに、マージンを定義するときには[絶対的な長さ](/ja/docs/Web/CSS/length#absolute_length_units)の単位のみしか使用できません。他のすべてのプロパティは無視されます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<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>
+```html
+<p>最初のページです。</p>
+<p>2 枚目のページです。</p>
+<button>印刷</button>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css notranslate">@page :first {
+```css
+@page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
@@ -49,52 +51,31 @@ translation_of: 'Web/CSS/:first'
 p {
   page-break-after: always;
 }
-</pre>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () =&gt; {
+```js
+document.querySelector("button").addEventListener('click', () => {
   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>
-
-<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>
+```
+
+### 結果
+
+［印刷］ボタンを押すと、例を印刷します。最初のページの言葉は中央付近に印刷されますが、他のページのコンテンツは既定の位置に印刷されます。
+
+{{ EmbedLiveSample('Examples', '80%', '150px') }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Cssxref("@page")}}
+- ページに関する他の擬似クラス: {{Cssxref(":left")}}, {{Cssxref(":right")}}
diff --git a/files/ja/web/css/_colon_left/index.md b/files/ja/web/css/_colon_left/index.md
index 2ecfb6ece0..aa09f80d22 100644
--- a/files/ja/web/css/_colon_left/index.md
+++ b/files/ja/web/css/_colon_left/index.md
@@ -1,75 +1,55 @@
 ---
 title: ':left'
-slug: 'Web/CSS/:left'
+slug: Web/CSS/:left
 tags:
   - '@page'
   - CSS
-  - CSS ページ化メディア
-  - Layout
-  - Pseudo-class
+  - レイアウト
+  - 擬似クラス
   - Reference
+  - セレクター
   - Web
-  - ウェブ
-  - 疑似クラス
-translation_of: 'Web/CSS/:left'
+browser-compat: css.selectors.left
+translation_of: Web/CSS/:left
 ---
-<div>{{ CSSRef() }}</div>
+{{ CSSRef() }}
 
-<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>
+**`:left`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の左側のページすべてを表します。
 
-<pre class="brush: css no-line-numbers">/* 印刷時に左側のページを選択 */
+```css
+/* 印刷時に左側のページを選択 */
 @page :left {
   margin: 2in 3in;
-}</pre>
+}
+```
 
-<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば <code>:left</code> ページになります。</p>
+そのページが左側か右側かは、文書の主な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば {{Cssxref(":right")}} ページになります。書字方向が右から左であれば `:left` ページになります。
 
-<div class="note">
-<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p>
-</div>
+> **Note:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+### 左側のページのマージンを設定
 
-<pre class="brush: css">@page :left {
+```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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.selectors.left")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{ Cssxref("@page") }}</li>
- <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li>
-</ul>
+- {{ Cssxref("@page") }}
+- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}
diff --git a/files/ja/web/css/_colon_right/index.md b/files/ja/web/css/_colon_right/index.md
index 04c7711263..072500296d 100644
--- a/files/ja/web/css/_colon_right/index.md
+++ b/files/ja/web/css/_colon_right/index.md
@@ -1,75 +1,55 @@
 ---
 title: ':right'
-slug: 'Web/CSS/:right'
+slug: Web/CSS/:right
 tags:
   - '@page'
   - CSS
-  - CSS ページ化メディア
-  - Layout
-  - Pseudo-class
+  - レイアウト
+  - 擬似クラス
   - Reference
+  - セレクター
   - Web
-  - ウェブ
-  - 疑似クラス
-translation_of: 'Web/CSS/:right'
+browser-compat: css.selectors.right
+translation_of: Web/CSS/:right
 ---
-<div>{{ CSSRef() }}</div>
+{{ CSSRef() }}
 
-<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>
+**`:right`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、{{cssxref("@page")}} [アットルール](/ja/docs/Web/CSS/At-rule)で使われ、印刷文書の右側のページすべてを表します。
 
-<pre class="brush: css no-line-numbers">/* 印刷時に右側のページを選択 */
+```css
+/* 印刷時に右側のページを選択 */
 @page :right {
   margin: 2in 3in;
-}</pre>
+}
+```
 
-<p>そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば <code>:right</code> ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。</p>
+そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば {{Cssxref(":left")}} ページになります。
 
-<div class="note">
-<p><strong>メモ:</strong> この疑似クラスは、<em>ページボックス</em>の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。</p>
-</div>
+> **Note:** この擬似クラスは、*ページボックス*の {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("background") }} の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+### 右側のページにマージンを設定
 
-<pre class="brush: css">@page :right {
+```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>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.selectors.right")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{ Cssxref("@page") }}</li>
- <li>ページに関する他の疑似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li>
-</ul>
+- {{ Cssxref("@page") }}
+- ページに関する他の擬似クラス: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}
diff --git a/files/ja/web/css/css_pages/index.md b/files/ja/web/css/css_pages/index.md
index 59b983eca7..49cea7c091 100644
--- a/files/ja/web/css/css_pages/index.md
+++ b/files/ja/web/css/css_pages/index.md
@@ -1,75 +1,41 @@
 ---
-title: CSS ページ化メディア
+title: CSS ページメディア
 slug: Web/CSS/CSS_Pages
 tags:
   - CSS
-  - CSS ページ付きメディア
-  - CSS ページ化メディア
-  - Reference
+  - CSS ページメディア
+  - ガイド
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Pages
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><ruby><strong>CSS ページ化メディア</strong><rp> (</rp><rt>CSS Paged Media</rt><rp>) </rp></ruby>は、ページ切り替えを扱う方法を定義する CSS のモジュールです。</p>
+**CSS ページメディア**は CSS のモジュールの一つで、ページ切り替えをどのように扱うかを定義します。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3>
+### CSS プロパティ
 
-<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>
+- {{cssxref("page-break-after")}}
+- {{cssxref("page-break-before")}}
+- {{cssxref("page-break-inside")}}
 
-<h3 id="At-rules" name="At-rules">@-規則</h3>
+### アットルール
 
-<div class="index">
-<ul>
- <li>{{cssxref('@page')}}</li>
-</ul>
-</div>
+- {{cssxref('@page')}}
 
-<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>
+- {{cssxref(':blank')}}
+- {{cssxref(':first')}}
+- {{cssxref(':left')}}
+- {{cssxref(':right')}}
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
 
-<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>
+| 仕様書                             | 状態                            | 備考    |
+| ---------------------------------- | ------------------------------- | ------- |
+| {{SpecName('CSS3 Paged Media')}}   | {{Spec2('CSS3 Paged Media')}}   |         |
+| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} |         |
+| {{SpecName('CSS2.1')}}             | {{Spec2('CSS2.1')}}             |         |
diff --git a/files/ja/web/css/page-break-after/index.md b/files/ja/web/css/page-break-after/index.md
index 7661dba34e..0a55d07ff8 100644
--- a/files/ja/web/css/page-break-after/index.md
+++ b/files/ja/web/css/page-break-after/index.md
@@ -3,18 +3,21 @@ title: page-break-after
 slug: Web/CSS/page-break-after
 tags:
   - CSS
-  - CSS Property
-  - Page Breaks
+  - CSS プロパティ
+  - ページ区切り
   - Reference
+  - recipe:css-property
+browser-compat: css.properties.page-break-after
 translation_of: Web/CSS/page-break-after
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="blockIndicator warning">このプロパティは {{cssxref("break-after")}} プロパティによって置き換えられました。</div>
+> **Warning:** このプロパティは {{cssxref("break-after")}} プロパティで置き換えられました。
 
-<p><strong><code>page-break-after</code></strong> CSS プロパティは、現在の要素の<em>後で</em>改ページが行われるように調整します。</p>
+**`page-break-after`** は CSS のプロパティで、現在の要素の*後で*改ページが行われるように調整します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-after: auto;
 page-break-after: always;
 page-break-after: avoid;
@@ -26,120 +29,74 @@ page-break-after: verso;
 /* グローバル値 */
 page-break-after: inherit;
 page-break-after: initial;
+page-break-after: revert;
 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>
+```
+
+このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。
+
+## 構文
+
+### 値
+
+- `auto`
+  - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+- `always`
+  - : 要素の後で必ず改ページが行われるように強制します。
+- `avoid`
+  - : 要素の後で改ページされないようにします。
+- `left`
+  - : 要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。
+- `right`
+  - : 要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。
+- `recto` {{experimental_inline}}
+  - : 左から右に進むページにおいて `right` と同じ動作をします。右から左に進むページであれば `left` と同じ働きをします。
+- `verso` {{experimental_inline}}
+  - : 左から右に進むページにおいて `left` と同じ動作をします。右から左に進むページであれば `right` と同じ働きをします。
+
+## 改ページの別名
+
+`page-break-after` プロパティは古いプロパティとなり、 {{cssxref("break-after")}} で置き換えられました。
+
+互換性のため、 `page-break-after` はブラウザーでは `break-after` の別名として扱われます。これにより、 `page-break-after` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
+
+| page-break-after | break-after |
+| ---------------- | ----------- |
+| `auto`           | `auto`      |
+| `left`           | `left`      |
+| `right`          | `right`     |
+| `avoid`          | `avoid`     |
+| `always`         | `page`      |
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### 脚注の後にページ区切りを設定
 
-<pre class="brush: css">/* footnotes の後で新しいページに移ります */
+```css
+/* 脚注の後で新しいページに移ります */
 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>
-
-<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>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
+- {{cssxref("page-break-before")}}, {{cssxref("page-break-inside")}}
+- {{cssxref("orphans")}}, {{cssxref("widows")}}
diff --git a/files/ja/web/css/page-break-before/index.md b/files/ja/web/css/page-break-before/index.md
index 50665b213f..67bf591de1 100644
--- a/files/ja/web/css/page-break-before/index.md
+++ b/files/ja/web/css/page-break-before/index.md
@@ -4,20 +4,22 @@ slug: Web/CSS/page-break-before
 tags:
   - CSS
   - CSS プロパティ
-  - CSS ページ付きメディア
-  - Reference
   - 改ページ
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.page-break-before
 translation_of: Web/CSS/page-break-before
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="blockIndicator warning">このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。</div>
+> **Warning:** このプロパティは {{cssxref("break-before")}} プロパティによって置き換えられました。
 
-<p><strong><code>page-break-before</code></strong> CSS プロパティは、現在の要素の<em>前で</em>改ページが行われるように調整します。</p>
+**`page-break-before`** CSS プロパティは、現在の要素の*前で*改ページが行われるように調整します。
 
-<p>このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{HTMLElement("div")}} には適用されません。</p>
+このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の {{ HTMLElement("div") }} には適用されません。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-before: auto;
 page-break-before: always;
 page-break-before: avoid;
@@ -29,118 +31,72 @@ page-break-before: verso;
 /* グローバル値 */
 page-break-before: inherit;
 page-break-before: initial;
+page-break-before: revert;
 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>
+```
+
+## 構文
+
+### 値
+
+- `auto`
+  - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+- `always`
+  - : 要素の前で必ず改ページが行われるように強制します。
+- `avoid`
+  - : 要素の前で改ページされないようにします。
+- `left`
+  - : 要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
+- `right`
+  - : 要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
+- `recto` {{experimental_inline}}
+  - : 左から右に読むページにおいて `right` と同じ動作をします。右から左に読むページであれば `left` と同じ働きをします。
+- `verso` {{experimental_inline}}
+  - : 左から右に読むページにおいて `left` と同じ動作をします。右から左に読むページであれば `right` と同じ働きをします。
+
+## 改ページの別名
+
+`page-break-before` プロパティは古いプロパティとなり、 {{cssxref("break-before")}} によって置き換えられました。
+
+互換性のため、 `page-break-before` はブラウザーから `break-before` の別名として扱われます。これにより、 `page-break-before` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
+
+| page-break-before | break-before |
+| ----------------- | ------------ |
+| `auto`            | `auto`       |
+| `left`            | `left`       |
+| `right`           | `right`      |
+| `avoid`           | `avoid`      |
+| `always`          | `page`       |
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### ある要素の前で改ページを防ぐ
 
-<pre class="brush: css">/* div の前で改ページされないようにします */
+```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>
-
-<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>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
+- {{cssxref("page-break-after")}}, {{cssxref("page-break-inside")}}
+- {{cssxref("orphans")}}, {{cssxref("widows")}}
diff --git a/files/ja/web/css/page-break-inside/index.md b/files/ja/web/css/page-break-inside/index.md
index 7856f39482..91d9959071 100644
--- a/files/ja/web/css/page-break-inside/index.md
+++ b/files/ja/web/css/page-break-inside/index.md
@@ -4,94 +4,88 @@ slug: Web/CSS/page-break-inside
 tags:
   - CSS
   - CSS プロパティ
-  - CSS ページ付きメディア
-  - Reference
   - 改ページ
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.page-break-inside
 translation_of: Web/CSS/page-break-inside
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div>
+> **Warning:** このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。
 
-<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p>
+CSS の **`page-break-inside`** プロパティは、現在の要素の*内側の* 改ページを調整します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 page-break-inside: auto;
 page-break-inside: avoid;
 
 /* グローバル値 */
 page-break-inside: inherit;
 page-break-inside: initial;
+page-break-inside: revert;
 page-break-inside: unset;
-</pre>
+```
+
+## 構文
 
-<p>{{cssinfo}}</p>
+### 値
 
-<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
+- `auto`
+  - : 初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
+- `avoid`
+  - : 要素の内側で改ページされないようにします。
 
-<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>
+`page-break-inside` プロパティは古いプロパティとなり、 {{cssxref("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` の別名として扱われます。これにより、 `page-break-inside` を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+| page-break-inside | break-inside |
+| ----------------- | ------------ |
+| `auto`            | `auto`       |
+| `avoid`           | `avoid`      |
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd>
- <dt><code>avoid</code></dt>
- <dd>要素の内側で改ページされないようにします。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
 {{csssyntax}}
 
-<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 {
+## 例
+
+<h3 id="Avoiding_page_breaks_inside_elements">要素の途中の改ページを防ぐ</h3>
+
+#### HTML
+
+```html
+<div class="page">
+  <p>これは最初の段落です。</p>
+  <section class="list">
+    <span>リスト</span>
+    <ol>
+      <li>one</li>
+<!--       <li>two</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>one</li>
+<!--     <li>two</li> -->
+  </ul>
+  <p>Tこれは第二段落です。</p>
+  <p>これは第三段落です。文章の量が多くなっています。</p>
+  <p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p>
+</div>
+```
+
+#### CSS
+
+```css
+.page {
   background-color: #8cffa0;
   height: 90px;
   width: 200px;
@@ -115,44 +109,23 @@ ol, ul, .list {
 
 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>
-
-<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>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Avoiding_page_breaks_inside_elements", 400, 160)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}
+- {{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}
+- {{cssxref("orphans")}}, {{cssxref("widows")}}