From 20b1a3262830009ebb540f6bb88ef905367a9a6a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 23:44:13 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_disabled/index.md | 166 ++++++++++++------------------ 1 file 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 --- -
{{CSSRef}}
+{{CSSRef}} -

:disabled は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

+**`:disabled`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。 -
/* 無効な <input> を選択 */
+```css
+/* 無効な  を選択 */
 input:disabled {
   background: #ccc;
-}
+} +``` -

構文

+## 構文 {{csssyntax}} -

例

- -

この例は基本的な送り先フォームを表示します。 JavaScript の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

- -

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

- -
input[type="text"]:disabled {
+## 例
+
+この例は基本的な送り先フォームを表示します。 [JavaScript](/ja/docs/Web/JavaScript) の {{domxref("HTMLElement/change_event", "change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。
+
+### HTML
+
+```html
+

+  

+    送り先
+    
+    
+    
+  

+  

+  

+    請求先
+    
+    
+    

+    
+    
+    
+  

+

+```
+
+### CSS
+
+```css
+input[type="text"]:disabled {
   background: #ccc;
 }
-
+``` -

JavaScript

+### JavaScript -
// ページの読み込みの終了を待つ
+```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;
   }
 }
-
- -

結果

- -

{{EmbedLiveSample('Examples', 300, 250)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義、但し意味の結びつけの定義はなし
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.disabled")}}

-
- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample('Examples', 300, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref(":enabled")}} -- cgit v1.2.3-54-g00ecf