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

1 files changed, 68 insertions, 98 deletions

diff --git a/files/ja/web/css/_colon_disabled/index.md b/files/ja/web/css/_colon_disabled/index.md
index a6874c05a9..7905d99f62 100644
--- a/files/ja/web/css/_colon_disabled/index.md
+++ b/files/ja/web/css/_colon_disabled/index.md
@@ -1,64 +1,70 @@
 ---
 title: ':disabled'
-slug: 'Web/CSS/:disabled'
+slug: Web/CSS/:disabled
 tags:
   - CSS
-  - Layout
-  - Pseudo-class
-  - Reference
-  - Selector
-  - Web
-translation_of: 'Web/CSS/:disabled'
+  - レイアウト
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+  - ウェブ
+browser-compat: css.selectors.disabled
+translation_of: Web/CSS/:disabled
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>:disabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。</p>
+**`:disabled`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。
 
-<pre class="brush: css no-line-numbers notranslate">/* 無効な &lt;input&gt; を選択 */
+```css
+/* 無効な <input> を選択 */
 input:disabled {
   background: #ccc;
-}</pre>
+}
+```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>この例は基本的な送り先フォームを表示します。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;form action="#"&gt;
-  &lt;fieldset id="shipping"&gt;
-    &lt;legend&gt;送り先&lt;/legend&gt;
-    &lt;input type="text" placeholder="名前"&gt;
-    &lt;input type="text" placeholder="住所"&gt;
-    &lt;input type="text" placeholder="郵便番号"&gt;
-  &lt;/fieldset&gt;
-  &lt;br&gt;
-  &lt;fieldset id="billing"&gt;
-    &lt;legend&gt;請求先&lt;/legend&gt;
-    &lt;label for="billing_is_shipping"&gt;送り先と同じ:&lt;/label&gt;
-    &lt;input type="checkbox" id="billing-checkbox" checked&gt;
-    &lt;br&gt;
-    &lt;input type="text" placeholder="名前" disabled&gt;
-    &lt;input type="text" placeholder="住所" disabled&gt;
-    &lt;input type="text" placeholder="郵便番号" disabled&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">input[type="text"]:disabled {
+## 例
+
+この例は基本的な送り先フォームを表示します。 [JavaScript](/ja/docs/Web/JavaScript) の {{domxref("HTMLElement/change_event", "change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。
+
+### HTML
+
+```html
+<form action="#">
+  <fieldset id="shipping">
+    <legend>送り先</legend>
+    <input type="text" placeholder="名前">
+    <input type="text" placeholder="住所">
+    <input type="text" placeholder="郵便番号">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>請求先</legend>
+    <label for="billing_is_shipping">送り先と同じ:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="名前" disabled>
+    <input type="text" placeholder="住所" disabled>
+    <input type="text" placeholder="郵便番号" disabled>
+  </fieldset>
+</form>
+```
+
+### CSS
+
+```css
+input[type="text"]:disabled {
   background: #ccc;
 }
-</pre>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
+```js
+// ページの読み込みの終了を待つ
 document.addEventListener('DOMContentLoaded', function () {
   // チェックボックスに 'change' イベントリスナーを追加
   document.getElementById('billing-checkbox').onchange = toggleBilling;
@@ -69,60 +75,24 @@ function toggleBilling() {
   var billingItems = document.querySelectorAll('#billing input[type="text"]');
 
   // 請求先テキストフィールドを切り替え
-  for (var i = 0; i &lt; billingItems.length; i++) {
+  for (var i = 0; i < billingItems.length; i++) {
     billingItems[i].disabled = !billingItems[i].disabled;
   }
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Examples', 300, 250)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>HTML に関する意味を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.disabled")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>
-  <p>{{Cssxref(":enabled")}}</p>
- </li>
-</ul>
+```
+
+### 結果
+
+{{EmbedLiveSample('Examples', 300, 250)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Cssxref(":enabled")}}