Merge branch 'main' into 20210818-Glossary/Type

author: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-09-04 00:46:12 +0900
committer: Masahiro FUJIMOTO <mfujimot@gmail.com> 2021-09-04 00:46:12 +0900
commit: fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch)
tree: 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ja/web/html
parent: 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff)
parent: eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff)
download: translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz
translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2
translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip
9 files changed, 312 insertions, 380 deletions
diff --git a/files/ja/web/html/element/bdo/index.html b/files/ja/web/html/element/bdo/index.html
index a2c417ef5f..5a1daa585b 100644
--- a/files/ja/web/html/element/bdo/index.html
+++ b/files/ja/web/html/element/bdo/index.html
@@ -3,41 +3,42 @@ title: '<bdo>: 双方向文字列上書き要素'
 slug: Web/HTML/Element/bdo
 tags:
   - BiDi
+  - 双方向テキスト
+  - 要素
   - HTML
   - HTML 文字レベルの意味付け
   - 'HTML:フローコンテンツ'
   - 'HTML:知覚可能コンテンツ'
   - 'HTML:記述コンテンツ'
-  - Reference
-  - Web
-  - ltr
-  - rtl
+  - 左書き
+  - リファレンス
   - テキスト
   - 右書き
-  - 左書き
   - 書字方向
-  - 要素
+  - テキスト描画
+  - Web
+  - ltr
+  - rtl
+browser-compat: html.elements.bdo
 translation_of: Web/HTML/Element/bdo
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary"><strong>HTML の双方向文字列上書き要素</strong> (<code>&lt;bdo&gt;</code>) は、現在の文字列の方向を上書きし、中の文字列が異なる方向に描画されるようにします。</span></p>
+<p><strong><code>&lt;bdo&gt;</code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。</span></p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
-<p>文字列の文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p>
+<p>テキストの文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p>
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/ja/docs/HTML/Content_categories">コンテンツカテゴリ</a></th>
-   <td><a href="/ja/docs/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
+   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td>
   </tr>
   <tr>
    <th scope="row">許可されている内容</th>
-   <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td>
   </tr>
   <tr>
    <th scope="row">タグの省略</th>
@@ -45,7 +46,7 @@ translation_of: Web/HTML/Element/bdo
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
   </tr>
   <tr>
    <th scope="row">暗黙の ARIA ロール</th>
@@ -62,21 +63,21 @@ translation_of: Web/HTML/Element/bdo
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
-<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
+<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>
 
 <dl>
  <dt>{{htmlattrdef("dir")}}</dt>
- <dd>この要素の書字方向。以下の値を指定可能です。
+ <dd>この要素の内容において、テキストが描画される方向です。以下の値が指定可能です。
  <ul>
-  <li><code>ltr</code>: テキストを左から右へ (Left to Right) 向かわせることを意味する指定。</li>
-  <li><code>rtl</code>: テキストを右から左へ (Right to Left) 向かわせることを意味する指定。</li>
+  <li><code>ltr</code>: テキストを左から右へ (left-to-right) 向かわせることを意味する指定。</li>
+  <li><code>rtl</code>: テキストを右から左へ (right-to-left) 向かわせることを意味する指定。</li>
  </ul>
  </dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <pre class="brush: html">&lt;!-- 書字方向を切り替える --&gt;
 &lt;p&gt;This text will go left to right.&lt;/p&gt;
@@ -84,43 +85,24 @@ translation_of: Web/HTML/Element/bdo
 to left.&lt;/bdo&gt;&lt;/p&gt;
 </pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h3 id="Result">結果</h3>
 
 <p>{{EmbedLiveSample('Examples')}}</p>
 
-<h2 id="Notes" name="Notes">メモ</h2>
+<h2 id="Notes">メモ</h2>
 
 <p>HTML 4 の仕様では、この要素にイベントが指定されていません。イベントは XHTML で追加されました。これは、恐らく見落としでしょう。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="See_also">関連情報</h2>
 
-<p>{{Compat("html.elements.bdo")}}</p>
+<ul>
+ <li>関連する HTML 要素: {{HTMLElement("bdi")}}</li>
+</ul>
diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html
index c9ba8346b0..1ba58f6167 100644
--- a/files/ja/web/html/element/input/range/index.html
+++ b/files/ja/web/html/element/input/range/index.html
@@ -17,22 +17,21 @@ tags:
   - フォーム
   - 要素
 translation_of: Web/HTML/Element/input/range
+browser-compat: html.elements.input.input-range
 ---
 <div>{{HTMLRef("Input_types")}}</div>
 
-<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p>
+<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに特定の値より小さくなく、別な特定の値より大きくない数値を指定させるために使用します。しかし、厳密な値が重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの正確な値が重要でない限り、通常は使用するべきではありません。</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
 <p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p>
 
 <table class="properties">
  <tbody>
   <tr>
    <td><strong>{{anch("Value", "値")}}</strong></td>
-   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td>
+   <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。数値として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用してください。</td>
   </tr>
   <tr>
    <td><strong>イベント</strong></td>
@@ -53,7 +52,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h3 id="Validation" name="Validation">検証</h3>
+<h3 id="Validation">検証</h3>
 
 <p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p>
 
@@ -64,16 +63,16 @@ translation_of: Web/HTML/Element/input/range
  <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li>
 </ul>
 
-<h3 id="Value" name="Value">値</h3>
+<h3 id="Value">値</h3>
 
 <p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p>
 
-<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
                : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
 
 <p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p>
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+<h2 id="Additional_attributes">追加の属性</h2>
 
 <p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p>
 
@@ -104,29 +103,29 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+<p id="attr-list">{{page("/ja/docs/Web/HTML/Element/input/text", "attr-list", 0, 1, 2)}}</p>
 
-<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p>
+<p>対応しているブラウザーで、範囲のオプションがどのように表示されるかの例としては、以下の<a href="#a_range_control_with_hash_marks">ハッシュマーク付き範囲コントロール</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+<h3 id="attr-max"><code id="max">max</code></h3>
 
-<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
+<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+<h3 id="attr-min"><code id="min">min</code></h3>
 
-<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
+<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p>
 
 <p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p>
 
-<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+<h3 id="attr-step"><code id="step">step</code></h3>
 
 <p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p>
 
-<p><code>range</code> 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
+<p><code>range</code> 入力欄の既定の刻み値は 1 であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p>
 
-<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3>
+<h3 id="Non_Standard_Attributes">標準外の属性</h3>
 
 <table class="standard-table">
  <thead>
@@ -143,16 +142,15 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<dl>
- <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
- <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd>
-</dl>
+<h3 id="attr-orient"><code id="orient">orient</code> {{non-standard_inline}}</h3>
+
+<p id="orient-include">CSS の標準外の -moz-orient non-standard プロパティと同様に {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響を与える <code>orient</code> 属性は、範囲スライダーの向きを定義する定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</p>
 
-<div class="blockIndicator note">
-<p>注: 以下の input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p>
+<div class="notecard note">
+<p>メモ: input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p>
 </div>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
 <p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p>
 
@@ -167,22 +165,22 @@ translation_of: Web/HTML/Element/input/range
 
 <p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p>
 
-<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
+<h3 id="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3>
 
 <p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p>
 
-<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p>
+<p>例えば、ユーザーに -10 から 10 までの値を尋ねるのであれば、次のようにすることができます。</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
 
 <p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
 
-<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3>
+<h3 id="Setting_the_values_granularity">値の精度の設定</h3>
 
 <p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p>
 
 <div id="Granularity_sample1">
-<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
 </div>
@@ -190,22 +188,22 @@ translation_of: Web/HTML/Element/input/range
 <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p>
 
 <div id="Granularity_sample2">
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
 
 <p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
 
 <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p>
 </div>
 
-<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
+<h3 id="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3>
 
 <p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p>
 
-<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4>
+<h4 id="Range_control_mockups">範囲コントロールのモックアップ</h4>
 
 <p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p>
 
-<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5>
+<h5 id="An_unadorned_range_control">簡素な範囲コントロール</h5>
 
 <p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p>
 
@@ -217,13 +215,13 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range"&gt;</pre>
    </td>
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-plain.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -234,7 +232,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5>
 
 <p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p>
 
@@ -246,7 +244,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -267,7 +265,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-ticks.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -278,7 +276,7 @@ translation_of: Web/HTML/Element/input/range
  </tbody>
 </table>
 
-<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
+<h5 id="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5>
 
 <p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p>
 
@@ -290,7 +288,7 @@ translation_of: Web/HTML/Element/input/range
   </tr>
   <tr>
    <td rowspan="4">
-    <pre class="brush: html notranslate">
+    <pre class="brush: html">
 &lt;input type="range" list="tickmarks"&gt;
 
 &lt;datalist id="tickmarks"&gt;
@@ -311,7 +309,7 @@ translation_of: Web/HTML/Element/input/range
    <th>Screenshot</th>
   </tr>
   <tr>
-   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="macslider-labels.png"></td>
   </tr>
   <tr>
    <th>Live</th>
@@ -326,22 +324,23 @@ translation_of: Web/HTML/Element/input/range
 <p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p>
 </div>
 
-<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3>
+<h3 id="Change_the_orientation">方向の変更</h3>
 
 <div class="xhidden">
-<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
+<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p>
 
-<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
+<p>In the meantime, we can make the range vertical by rotating it using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p>
 
 <p>Consider this range control:</p>
 
 <div id="Orientation_sample1">
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 </div>
 
-<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "orientation_sample1.png")}}</p>
 
-<p>This control is horizontal (at least on most if not all major browers; others might vary).</p>
+<p>This control is horizontal (at least on most if not all major browsers; others might vary).</p>
+</div>
 
 <h3 id="Standards">Standards</h3>
 
@@ -350,19 +349,18 @@ translation_of: Web/HTML/Element/input/range
 <div id="Orientation_sample2">
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush: css notranslate">#volume {
+<pre class="brush: css">#volume {
   height: 150px;
   width: 50px;
 }</pre>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush: html notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
-<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
-</div>
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "orientation_sample2.png")}}</p>
 </div>
 
 <p>Unfortunately, no major browsers currently support vertical range controls directly.</p>
@@ -375,7 +373,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p>
 
-<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
   &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 &lt;/div&gt;</pre>
 
@@ -383,7 +381,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p>
 
-<pre class="brush: css notranslate">.slider-wrapper {
+<pre class="brush: css">.slider-wrapper {
   display: inline-block;
   width: 20px;
   height: 150px;
@@ -393,7 +391,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Then comes the style information for the <code>&lt;input&gt;</code> element within the reserved space:</p>
 
-<pre class="brush: css notranslate">.slider-wrapper input {
+<pre class="brush: css">.slider-wrapper input {
   width: 150px;
   height: 20px;
   margin: 0;
@@ -403,7 +401,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p>
 
-<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "orientation_sample3.png")}}</p>
 
 <h3 id="appearance_property">appearance property</h3>
 
@@ -413,14 +411,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_3">CSS</h4>
 
 <p>We target just the inputs with a type of range:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   -webkit-appearance: slider-vertical;
 }</pre>
 
@@ -434,7 +432,7 @@ translation_of: Web/HTML/Element/input/range
 
 <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
@@ -447,14 +445,14 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We use the same HTML as in the previous examples:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
 </pre>
 
 <h4 id="CSS_4">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   writing-mode: bt-lr;
 }</pre>
 
@@ -468,52 +466,32 @@ translation_of: Web/HTML/Element/input/range
 
 <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p>
 
-<pre class="brush: html notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+<pre class="brush: html">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
 </pre>
 
 <h4 id="CSS_5">CSS</h4>
 
 <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p>
 
-<pre class="brush: css notranslate">input[type="range"] {
+<pre class="brush: css">input[type="range"] {
   writing-mode: bt-lr;
   -webkit-appearance: slider-vertical;
 }</pre>
 
 <p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.input.input-range")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
  <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
  <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li>
diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html
index 80763b2040..50d1029a08 100644
--- a/files/ja/web/html/element/input/text/index.html
+++ b/files/ja/web/html/element/input/text/index.html
@@ -12,6 +12,7 @@ tags:
   - Text
   - text entry
   - text input
+browser-compat: html.elements.input.input-text
 translation_of: Web/HTML/Element/input/text
 ---
 <div>{{HTMLRef("Input_types")}}</div>
@@ -20,8 +21,6 @@ translation_of: Web/HTML/Element/input/text
 
 <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
-
 <table class="properties">
  <tbody>
   <tr>
@@ -47,16 +46,16 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h2 id="Value" name="Value">値</h2>
+<h2 id="Value">値</h2>
 
-<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value", "value")}} プロパティを使ってこれを受け取ることができます。</p>
+<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを使ってこれを受け取ることができます。</p>
 
-<pre class="brush: js notranslate">let theText = myTextInput.value;
+<pre class="brush: js">let theText = myTextInput.value;
 </pre>
 
 <p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p>
 
-<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>
+<h2 id="Additional_attributes">追加の属性</h2>
 
 <p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p>
 
@@ -103,26 +102,26 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h3 id="htmlattrdeflist">{{htmlattrdef("list")}}</h3>
+<h3 id="attr-list"><code id="list">list</code></h3>
 
 <p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p>
 
-<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+<h3 id="attr-maxlength"><code id="maxlength">maxlength</code></h3>
 
 <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p>
 
-<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
 
-<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+<h3 id="attr-minlength"><code id="minlength">minlength</code></h3>
 
 <p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p>
 
-<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
+<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p>
 
-<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+<h3 id="attr-pattern"><code id="pattern">pattern</code></h3>
 
 <div id="pattern-include">
-<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p>
+<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p>
 
 <p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p>
 
@@ -133,7 +132,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p>
 
-<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3>
+<h3 id="attr-placeholder"><code id="placeholder">placeholder</code></h3>
 
 <p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p>
 
@@ -143,21 +142,21 @@ translation_of: Web/HTML/Element/input/text
 <p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p>
 </div>
 
-<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3>
+<h3 id="attr-readonly"><code id="readonly">readonly</code></h3>
 
-<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p>
+<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の <code>value</code>  プロパティを設定することで変更することができます。</p>
 
 <div class="note">
 <p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p>
 </div>
 
-<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3>
+<h3 id="attr-size"><code id="size">size</code></h3>
 
 <p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p>
 
 <p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p>
 
-<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+<h3 id="attr-spellcheck"><code id="spellcheck">spellcheck</code></h3>
 
 <p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p>
 
@@ -174,7 +173,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p>
 
-<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2>
+<h2 id="Non-standard_attributes">標準外の属性</h2>
 
 <p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p>
 
@@ -197,7 +196,7 @@ translation_of: Web/HTML/Element/input/text
  </tbody>
 </table>
 
-<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+<h3 id="attr-autocorrect"><code id="autocorrect">autocorrect</code> {{non-standard_inline}}</h3>
 
 <div id="autocorrect-include">
 <p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p>
@@ -210,7 +209,7 @@ translation_of: Web/HTML/Element/input/text
 </dl>
 </div>
 
-<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+<h3 id="attr-mozactionhint"><code id="mozactionhint">mozactionhint</code> {{non-standard_inline}}</h3>
 
 <div id="mozactionhint-include">
 <p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p>
@@ -222,13 +221,13 @@ translation_of: Web/HTML/Element/input/text
 <p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p>
 </div>
 
-<h2 id="Using_text_inputs" name="Using_text_inputs">テキスト入力欄の使用</h2>
+<h2 id="Using_text_inputs">テキスト入力欄の使用</h2>
 
 <p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p>
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name"&gt;
@@ -242,16 +241,16 @@ translation_of: Web/HTML/Element/input/text
 
 <p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p>
 
-<p>送信されると、サーバーに送信される名前と値の組のデータは <code>uname=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p>
+<p>送信されると、サーバーに送信される名前と値の組のデータは <code>name=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p>
 
-<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3>
+<h3 id="Setting_placeholders">プレイスホルダーの設定</h3>
 
 <p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name"
+    &lt;input type="text" id="uname"
            placeholder="Lower case, all one word"&gt;
   &lt;/div&gt;
   &lt;div&gt;
@@ -265,11 +264,11 @@ translation_of: Web/HTML/Element/input/text
 
 <p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p>
 
-<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3>
+<h3 id="Physical_input_element_size">物理的な入力要素の寸法</h3>
 
 <p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name"
@@ -283,7 +282,7 @@ translation_of: Web/HTML/Element/input/text
 
 <p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p>
 
-<h2 id="Validation" name="Validation">検証</h2>
+<h2 id="Validation">検証</h2>
 
 <p><code>text</code> 型の <code>&lt;input&gt;</code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p>
 
@@ -291,11 +290,11 @@ translation_of: Web/HTML/Element/input/text
 <p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p>
 </div>
 
-<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3>
+<h3 id="A_note_on_styling">スタイルにおけるメモ</h3>
 
 <p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p>
 
-<pre class="brush: css notranslate">div {
+<pre class="brush: css">div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -317,11 +316,11 @@ input:valid+span:after {
 
 <p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p>
 
-<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3>
+<h3 id="Making_input_required">入力を必須にする</h3>
 
 <p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name" required&gt;
@@ -333,7 +332,7 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
 </div>
 
 <p>次のように表示されます。</p>
@@ -342,13 +341,13 @@ input:valid+span:after {
 
 <p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p>
 
-<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3>
+<h3 id="Input_value_length">入力値の長さ</h3>
 
 <p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p>
 
 <p>以下の例では、入力値が4～8文字の長さであることが求められます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
     &lt;input type="text" id="uname" name="name" required size="10"
@@ -362,29 +361,29 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
 </div>
 
 <p>以下のように表示されます。</p>
 
 <p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p>
 
-<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p>
+<p>4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。</p>
 
 <div class="note">
-<p><strong>Note:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p>
+<p><strong>メモ:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p>
 </div>
 
-<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3>
+<h3 id="Specifying_a_pattern">パターンの指定</h3>
 
-<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
+<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p>
 
 <p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p>
 
-<pre class="brush: html notranslate">&lt;form&gt;
+<pre class="brush: html">&lt;form&gt;
   &lt;div&gt;
     &lt;label for="uname"&gt;Choose a username: &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required size="45"
+    &lt;input type="text" id="uname"
            pattern="[a-z]{4,8}"&gt;
     &lt;span class="validity"&gt;&lt;/span&gt;
     &lt;p&gt;Usernames must be lowercase and 4-8 characters in length.&lt;/p&gt;
@@ -395,7 +394,7 @@ input:valid+span:after {
 &lt;/form&gt;</pre>
 
 <div class="hidden">
-<pre class="brush: css notranslate">div {
+<pre class="brush: css">div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -426,42 +425,22 @@ input:valid+span:after {
 
 <p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<p> <a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p>
+<p> <a href="/ja/docs/Learn/Forms/Your_first_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.input.input-text")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
  <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li>
  <li><code><a href="/ja/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
  <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li>
diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.html
index 0986662e6d..898b88c7bb 100644
--- a/files/ja/web/html/element/meta/name/index.html
+++ b/files/ja/web/html/element/meta/name/index.html
@@ -7,13 +7,14 @@ tags:
   - HTML document metadata
   - Reference
   - metadata
+browser-compat: html.elements.meta.name
 translation_of: Web/HTML/Element/meta/name
 ---
 <div>{{HTMLRef}}</div>
 
-<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。</span></p>
+<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用すると、文書のメタデータを名前と値の組み合わせで提供することができます。 {{htmlattrxref("name", "meta")}} 属性でメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性で値を指定します。</span></p>
 
-<h3 id="Standard_metadata_names_defined_in_the_HTML_specification" name="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3>
+<h3 id="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3>
 
 <p>HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。</p>
 
@@ -21,7 +22,7 @@ translation_of: Web/HTML/Element/meta/name
  <li>
   <p><code>application-name</code>: ウェブページで動作しているアプリケーションの名前です。</p>
 
-  <div class="note"><strong>注:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
    <li>ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。</li>
@@ -72,198 +73,193 @@ translation_of: Web/HTML/Element/meta/name
    </tbody>
   </table>
 
-  <div class="note"><strong>注:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
-   <li>Dynamically inserting <code>&lt;meta name="referrer"&gt;</code> (with {{domxref("Document.write", "document.write()")}} or {{domxref("Node.appendChild", "appendChild()")}}) makes the referrer behaviour unpredictable.</li>
-   <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li>
+   <li><code>&lt;meta name="referrer"&gt;</code> を ({{domxref("Document.write", "document.write()")}} または {{domxref("Node.appendChild", "appendChild()")}} で) 動的に挿入すると、リファラーの動作が予測不能になります。</li>
+   <li>相反する複数のポリシーが定義されている場合は、 <code>no-referrer</code> ポリシーが適用されます。</li>
   </ul>
   </div>
  </li>
- <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS {{cssxref("&lt;color&gt;")}}.</li>
-</ul>
-
-<h3 id="Standard_metadata_names_defined_in_other_specifications" name="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ名</h3>
-
-<p>The CSS Color Adjustment specification defines the following metadata name:</p>
-
-<ul>
+ <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: ユーザーエージェントがページの表示や周辺のユーザーインターフェースをカスタマイズするために使用すべき推奨色を示します。 <code>content</code> 属性には、有効な CSS の {{cssxref("&lt;color&gt;")}} が含まれます。</li>
  <li>
-  <p><code>color-scheme</code>: specifies one or more color schemes with which the document is compatible.</p>
+  <p><code>color-scheme</code>: 文書と互換性のある 1 つ以上の複数のカラースキームを指定します。</p>
 
-  <p>The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <code>&lt;meta name="color-scheme"&gt;</code> is to indicate compatibility with—and order of preference for—light and dark color modes.</p>
+  <p>ブラウザーは、この情報をユーザーのブラウザーや端末の設定と合わせて使用し、背景や前景、フォームコントロールやスクロールバーなど、あらゆるものに使用する色を決定します。 <code>&lt;meta name="color-scheme"&gt;</code> の主な用途は、ライトモードとダークモードの互換性と優先順位を示すことです。</p>
 
-  <p>The value of the {{htmlattrxref("content", "meta")}} property for <code>color-scheme</code> may be one of the following:</p>
+  <p><code>color-scheme</code> の {{htmlattrxref("content", "meta")}} プロパティは次のうちの一つになります。</p>
 
   <dl>
    <dt><code>normal</code></dt>
-   <dd>The document is unaware of color schemes and should simply be rendered using the default color palette.</dd>
+   <dd>この文書は配色を意識していないので、既定のカラーパレットを使って描画する必要があります。</dd>
    <dt>[<code>light</code> | <code>dark</code>]+</dt>
-   <dd>One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.</dd>
+   <dd>この文書で対応している 1 つ以上の配色。同じ配色を 2 回以上指定しても、 1 回だけ指定した場合と同じ効果が得られる。複数の配色を指定すると、この文書では最初の配色が優先されるが、ユーザーが好む場合は 2 番目に指定された配色でもよいことを示す。</dd>
    <dt><code>only light</code></dt>
-   <dd>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.</dd>
+   <dd>この文書がライトモード<em>のみ</em>に対応していることを示します。背景色が明るく、前景色が暗い色です。仕様書によれば、 <code>only dark</code> は有効ではありません。ダークモードに対応していない文書を強制的にダークモードで描画すると、コンテンツが読めなくなる可能性があるからです。主要なブラウザーは、特に設定されていなければ既定でライトモードになります。</dd>
   </dl>
 
-  <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p>
+  <p>例えば、この文書はダークモードを推奨するが、ライトモードでも機能的にはレンダリングできることを示すためには、次のようにします。</p>
 
-  <pre class="brush: html notranslate">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
+  <pre class="brush: html">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
 
-  <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p>
+  <p>これは、CSS の {{cssxref("color-scheme")}} プロパティで個々の要素が好みの配色と受け入れられる配色を指定できるのと同じように、文書レベルで機能します。スタイルは、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} という CSS メディア機能を使って、現在の配色に合わせることができます。</p>
  </li>
 </ul>
 
-<p>The CSS Device Adaptation specification defines the following metadata name:</p>
+<h3 id="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ</h3>
+
+<p>CSS Device Adaptation 仕様書は、以下のメタデータ名を定義しています。</p>
 
 <ul>
  <li>
-  <p><code>viewport</code>: gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only.</p>
+  <p><code>viewport</code>: この{{glossary("viewport", "ビューポート")}}の初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。</p>
 
   <table class="fullwidth-table">
-   <caption>Values for the content of <code>&lt;meta name="viewport"&gt;</code></caption>
+   <caption><code>&lt;meta name="viewport"&gt;</code> の content の値</caption>
    <thead>
     <tr>
      <th scope="col">値</th>
-     <th scope="col">Possible subvalues</th>
+     <th scope="col">使用可能なサブ値</th>
      <th scope="col">解説</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><code>width</code></td>
-     <td>A positive integer number, or the text <code>device-width</code></td>
-     <td>Defines the pixel width of the viewport that you want the web site to be rendered at.</td>
+     <td>正の整数値、または <code>device-width</code> のテキスト</td>
+     <td>ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。</td>
     </tr>
     <tr>
      <td><code>height</code></td>
-     <td>A positive integer, or the text <code>device-height</code></td>
-     <td>Defines the height of the viewport. Not used by any browser.</td>
+     <td>正の整数値、または <code>device-height</code> のテキスト</td>
+     <td>ビューポートの高さを定義します。どのブラウザーでも使用されていません。</td>
     </tr>
     <tr>
      <td><code>initial-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>端末の幅 (縦長画面で <code>device-width</code>、横長画面で <code>device-height</code>) とビューポートの寸法の比率を定義します。</td>
     </tr>
     <tr>
      <td><code>maximum-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>拡大縮小インする最大値を定義します。 <code>minimum-scale</code> 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>minimum-scale</code></td>
-     <td>A positive number between <code>0.0</code> and <code>10.0</code></td>
-     <td>Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td>
+     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
+     <td>拡大縮小レベルの最小値を定義します。 <code>maximum-scale</code> 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>user-scalable</code></td>
-     <td><code>yes</code> or <code>no</code></td>
-     <td>If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default.</td>
+     <td><code>yes</code> または <code>no</code></td>
+     <td><code>no</code> に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は <code>yes</code> です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
     </tr>
     <tr>
      <td><code>viewport-fit</code></td>
-     <td><code>auto</code>, <code>contain</code> or <code>cover</code></td>
+     <td><code>auto</code>, <code>contain</code>, <code>cover</code></td>
      <td>
-      <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p>
+      <p><code>auto</code> の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。</p>
 
-      <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p>
+      <p><code>contain</code> の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。</p>
 
-      <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/ja/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p>
+      <p><code>cover</code> の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 <a href="/ja/docs/Web/CSS/env">safe-area-inset-*</a> 変数を使用することを強くお勧めします。</p>
      </td>
     </tr>
    </tbody>
   </table>
 
-  <div class="note"><strong>Notes:</strong>
+  <div class="note"><strong>メモ:</strong>
 
   <ul>
-   <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li>
-   <li>The default values may vary between devices and browsers.</li>
-   <li>To learn about this declaration in Firefox for Mobile, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li>
+   <li>この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。</li>
+   <li>既定値は、端末やブラウザーによって異なる場合があります。</li>
+   <li>Firefox for Mobile でのこの宣言については、<a href="/ja/docs/Mobile/Viewport_meta_tag">こちらの記事</a>を参照してください。</li>
   </ul>
   </div>
 
-  <h5 id="Accessibility_concerns_with_viewport_scaling" name="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5>
+  <h5 id="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5>
 
-  <div>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</div>
+  <div><code>user-scalable</code> を <code>no</code> に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。</div>
 
   <ul>
-   <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+   <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG を理解する、ガイドライン 1.4 の説明</a></li>
    <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
   </ul>
 
-  <h5 id="See_also" name="See_also">関連情報</h5>
+  <h5 id="See_also">関連情報</h5>
 
-  <p>The <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS at-rule.</p>
+  <p>CSS の <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> アット規則</p>
  </li>
 </ul>
 
-<h3 id="Other_metadata_names" name="Other_metadata_names">その他のメタデータ名</h3>
+<h3 id="Other_metadata_names">その他のメタデータ名</h3>
 
-<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p>
+<p><a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki の MetaExtensions のページ</a>には、まだ正式に受け入れられていない標準外のメタデータの名前が多数掲載されています。しかし、ここに掲載されている名前の中には、以下のように、すでに実際によく使われているものもあります。</p>
 
 <ul>
- <li><code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several {{HTMLElement("meta")}} elements should be used.</li>
- <li><code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li>
- <li><code>publisher</code>: the name of the document's publisher.</li>
- <li><code>robots</code>: the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:
+ <li><code>creator</code>: この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の {{HTMLElement("meta")}} 要素を使用する必要があります。</li>
+ <li><code>googlebot</code>: <code>robots</code> と同様ですが、Googlebot (Google のインデックス作成用クローラー) のみが従います。</li>
+ <li><code>publisher</code>: この文書の発行者の名前です。</li>
+ <li><code>robots</code>: 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。以下の値をカンマで区切ったリストです。
   <table class="standard-table">
    <caption>Values for the content of <code>&lt;meta name="robots"&gt;</code></caption>
    <thead>
     <tr>
      <th scope="col">値</th>
      <th scope="col">解説</th>
-     <th scope="col">Used by</th>
+     <th scope="col">使用者</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><code>index</code></td>
-     <td>Allows the robot to index the page (default).</td>
-     <td>All</td>
+     <td>ロボットがこのページをインデックスすることを許可します (既定値)。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>noindex</code></td>
-     <td>Requests the robot to not index the page.</td>
-     <td>All</td>
+     <td>ロボットにこのページをインデックスしないよう要求します。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>follow</code></td>
-     <td>Allows the robot to follow the links on the page (default).</td>
-     <td>All</td>
+     <td>ロボットがこのページ上のリンクをたどることを許可します (既定値)。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>nofollow</code></td>
-     <td>Requests the robot to not follow the links on the page.</td>
-     <td>All</td>
+     <td>ロボットにこのページ上のリンクをたどらないよう要求します。</td>
+     <td>すべて</td>
     </tr>
     <tr>
      <td><code>all</code></td>
-     <td>Equivalent to <code>index, follow</code></td>
-     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     <td><code>index, follow</code> と同等です。</td>
+     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
     </tr>
     <tr>
      <td><code>none</code></td>
-     <td>Equivalent to <code>noindex, nofollow</code></td>
-     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     <td><code>noindex, nofollow</code> と同等です。</td>
+     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
     </tr>
     <tr>
      <td><code>noarchive</code></td>
-     <td>Requests the search engine not to cache the page content.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td>検索エンジンにこのページの内容をキャッシュしないよう要求します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
     <tr>
      <td><code>nosnippet</code></td>
-     <td>Prevents displaying any description of the page in search engine results.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td>検索エンジンの結果でこのページの説明の表示を抑制します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
     <tr>
      <td><code>noimageindex</code></td>
-     <td>Requests this page not to appear as the referring page of an indexed image.</td>
-     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
+     <td>このページをインデックスされた画像の参照ページとして表示しないよう要求します。</td>
+     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
     </tr>
     <tr>
      <td><code>nocache</code></td>
-     <td>Synonym of <code>noarchive</code>.</td>
-     <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+     <td><code>noarchive</code> と同等です。</td>
+     <td><a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
     </tr>
    </tbody>
   </table>
@@ -271,40 +267,21 @@ translation_of: Web/HTML/Element/meta/name
   <div class="note"><strong>Notes:</strong>
 
   <ul>
-   <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.</li>
-   <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em>{{Glossary("robots.txt")}}</em> file.</li>
-   <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li>
-   <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behaviour is undefined and may vary between them.</li>
-   <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li>
+   <li>協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。</li>
+   <li>ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li>
+   <li>ページを削除したい場合、 <code>noindex</code> で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 <code>robots.txt</code> ファイルが再訪問を妨害していないことを確認してください。</li>
+   <li>値によっては互いに排他的なものがあります。例えば <code>index</code> と <code>noindex</code>、 <code>follow</code> と <code>nofollow</code> などです。このような場合、ロボットの動作は未定義であり、ロボット間で異なる可能性があります。</li>
+   <li>Google、Yahoo、Bing など一部のクローラーロボットでは、 HTTP ヘッダーの X-Robots-Tag で提供された同じ値に対応しているものがあります。これにより、画像などの HTML 以外の文書でもこれらの規則を使用することができます。</li>
   </ul>
   </div>
  </li>
 </ul>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("html.elements.meta.name")}}</p>
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
diff --git a/files/ja/web/html/element/meta/name/theme-color/index.html b/files/ja/web/html/element/meta/name/theme-color/index.html
new file mode 100644
index 0000000000..46c4b3562d
--- /dev/null
+++ b/files/ja/web/html/element/meta/name/theme-color/index.html
@@ -0,0 +1,38 @@
+---
+title: theme-color
+slug: Web/HTML/Element/meta/name/theme-color
+tags:
+  - Attribute
+  - HTML
+  - HTML document metadata
+  - Reference
+  - metadata
+browser-compat: html.elements.meta.name.theme-color
+translation_of: Web/HTML/Element/meta/name/theme-color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>theme-color</code></strong> の値は {{htmlelement("meta")}} 要素の {{htmlattrxref("name", "meta")}} 属性において、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 {{htmlattrxref("content", "meta")}} 属性には有効な CSS の {{cssxref("&lt;color&gt;")}} が含まれていなければなりません。</span></p>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush: html">&lt;meta name="theme-color" content="#4285f4"&gt;</pre>
+
+<p>次の画像は、上記の {{htmlelement("meta")}} 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。</p>
+
+<figure><img alt="theme-color を使用した影響を表す図" src="theme-color.png">
+<figcaption><small>画像の出典: <a href="https://developers.google.com/web/fundamentals/design-and-ux/browser-customization">Icons &amp; Browser Colors</a> より、<a href="https://developers.google.com/readme/policies">Google</a> が作成・共有し <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons 4.0 Attribution License</a> に記載された条件に従って使用されています。</small></figcaption>
+</figure>
+
+<p>{{htmlattrxref("media", "meta")}} 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。</p>
+
+<pre class="brush: html">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="white"&gt;
+&lt;meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"&gt;</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/html/element/meta/name/theme-color/theme-color.png b/files/ja/web/html/element/meta/name/theme-color/theme-color.png
new file mode 100644
index 0000000000..ef9ea7378e
--- /dev/null
+++ b/files/ja/web/html/element/meta/name/theme-color/theme-color.png
diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html
index 54cc767dbe..e8b8ffd1d1 100644
--- a/files/ja/web/html/element/pre/index.html
+++ b/files/ja/web/html/element/pre/index.html
@@ -4,30 +4,29 @@ slug: Web/HTML/Element/pre
 tags:
   - HTML
   - HTML コンテンツグループ化
-  - 'HTML:フローコンテンツ'
-  - 'HTML:知覚可能コンテンツ'
+  - HTML:フローコンテンツ
+  - HTML:知覚可能コンテンツ
   - ウェブ
   - リファレンス
   - 要素
+browser-compat: html.elements.pre
 translation_of: Web/HTML/Element/pre
 ---
 <div>{{HTMLRef}}</div>
 
-<p><strong>HTML <code>&lt;pre&gt;</code> 要素</strong>は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("<a href="/ja/docs/XUL/Style/monospace">monospace</a>") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p>
+<p><strong><code>&lt;pre&gt;</code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して<a href="https://ja.wikipedia.org/wiki/等幅フォント">等幅フォント</a>で表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
 
-<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td>
+   <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td>
   </tr>
   <tr>
    <th scope="row">許可されている内容</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#phrasing_content">記述コンテンツ</a></td>
   </tr>
   <tr>
    <th scope="row">タグの省略</th>
@@ -35,7 +34,11 @@ translation_of: Web/HTML/Element/pre
   </tr>
   <tr>
    <th scope="row">許可されている親要素</th>
-   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+   <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
+  </tr>
+  <tr>
+   <th scope="row">暗黙の ARIA ロール</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
   </tr>
   <tr>
    <th scope="row">許可されている ARIA ロール</th>
@@ -48,45 +51,44 @@ translation_of: Web/HTML/Element/pre
  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">属性</h2>
+<h2 id="Attributes">属性</h2>
 
 <p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p>
 
 <dl>
- <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
  <dd>1行あたりの<em>望ましい</em>文字数を示します。これは {{htmlattrxref("width", "pre")}} の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd>
- <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
  <dd>1行あたりの<em>望ましい</em>文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd>
  <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
  <dd>テキストがはみ出た場合の処理に関する<em>ヒント</em>を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。</dd>
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
 
 <pre class="brush: html">&lt;!-- CSS コードを表示する例 --&gt;
 &lt;pre&gt;
 body {
-  color:red;
+  color: red;
 }
 &lt;/pre&gt;
 </pre>
 
-<h3 id="Result" name="Result">結果</h3>
+<h3 id="Result">結果</h3>
 
-<pre>body {
-  color:red;
-}
-</pre>
+<p>{{EmbedLiveSample("Example")}}</p>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
 
 <p>整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。</p>
 
 <p>弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。</p>
 
-<p>{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> 及び <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p>
+<p>{{HTMLElement("figure")}} および {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} および <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> および <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p>
 
-<h3 id="Example" name="Example">例</h3>
+<h3 id="Example_2">例</h3>
 
 <pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
   &lt;pre&gt;
@@ -106,45 +108,21 @@ body {
 </pre>
 
 <ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
  <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
 </ul>
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="Specifications">仕様書</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>{{SpecName("HTML5 W3C")}} から重大な変更はない</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>{{SpecName("HTML4.01")}} から重大な変更はない</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td><code>cols</code> 属性を非推奨に変更</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("html.elements.pre")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
+ <li>関連する要素: {{HTMLElement("code")}}</li>
 </ul>
diff --git a/files/ja/web/html/element/xmp/index.html b/files/ja/web/html/element/xmp/index.html
index 639da9a3c8..a2e858eb0f 100644
--- a/files/ja/web/html/element/xmp/index.html
+++ b/files/ja/web/html/element/xmp/index.html
@@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/xmp
 
 <h2 id="Attributes" name="Attributes">属性</h2>
 
-<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal" title="ja/docs/HTML/global attributes">グローバル属性</a> 以外の属性を持ちません。</p>
+<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal">グローバル属性</a> 以外の属性を持ちません。</p>
 
 <h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2>
 
diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.html
index cb1100ea03..6d4ba241e0 100644
--- a/files/ja/web/html/inline_elements/index.html
+++ b/files/ja/web/html/inline_elements/index.html
@@ -161,7 +161,7 @@ the block-level element's influence.&lt;/div&gt;</pre>
 <h2 id="See_also" name="See_also">関連情報</h2>
 
 <ul>
- <li><a href="/ja/HTML/Block-level_elements" title="ja/HTML/Block-level_elements">ブロックレベル要素</a></li>
+ <li><a href="/ja/HTML/Block-level_elements">ブロックレベル要素</a></li>
  <li><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></li>
  <li>{{cssxref("display")}}</li>
  <li><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></li>
author	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-09-04 00:46:12 +0900
committer	Masahiro FUJIMOTO <mfujimot@gmail.com>	2021-09-04 00:46:12 +0900
commit	fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch)
tree	51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ja/web/html
parent	04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff)
parent	eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff)
download	translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip