入力擬似クラスの文書を変換準備

1 files changed, 128 insertions, 0 deletions

diff --git a/files/ja/web/css/_colon_disabled/index.md b/files/ja/web/css/_colon_disabled/index.md
new file mode 100644
index 0000000000..a6874c05a9
--- /dev/null
+++ b/files/ja/web/css/_colon_disabled/index.md
@@ -0,0 +1,128 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:disabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 無効な &lt;input&gt; を選択 */
+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 {
+  background: #ccc;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
+document.addEventListener('DOMContentLoaded', function () {
+  // チェックボックスに 'change' イベントリスナーを追加
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // 請求先のテキストフィールドを選択
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // 請求先テキストフィールドを切り替え
+  for (var i = 0; i &lt; 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>