diff options
| -rw-r--r-- | files/ja/web/css/_colon_disabled/index.md | 166 |
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">/* 無効な <input> を選択 */ +```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"><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> -</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 < 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")}} |