From 366a93a84df26a3bc08bfd85a7d87dc7c450e2cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 23:20:43 +0900 Subject: 入力擬似クラスの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_enabled/index.html | 99 ------------------------------ files/ja/web/css/_colon_enabled/index.md | 99 ++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 99 deletions(-) delete mode 100644 files/ja/web/css/_colon_enabled/index.html create mode 100644 files/ja/web/css/_colon_enabled/index.md (limited to 'files/ja/web/css/_colon_enabled') diff --git a/files/ja/web/css/_colon_enabled/index.html b/files/ja/web/css/_colon_enabled/index.html deleted file mode 100644 index cfdea7d649..0000000000 --- a/files/ja/web/css/_colon_enabled/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: ':enabled' -slug: 'Web/CSS/:enabled' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:enabled' ---- -
{{CSSRef}}
- -

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

- -
/* 有効な <input> を選択 */
-input:enabled {
-  color: blue;
-}
- -

構文

- -{{csssyntax}} - -

例

- -

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

- -

HTML

- -
<form action="url_of_form">
-  <label for="FirstField">First field (enabled):</label>
-  <input type="text" id="FirstField" value="Lorem"><br>
-
-  <label for="SecondField">Second field (disabled):</label>
-  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
-
-  <input type="button" value="Submit">
-</form>
- -

CSS

- -
input:enabled {
-  color: #2b2;
-}
-
-input:disabled {
-  color: #aaa;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 550, 95)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_enabled/index.md b/files/ja/web/css/_colon_enabled/index.md new file mode 100644 index 0000000000..cfdea7d649 --- /dev/null +++ b/files/ja/web/css/_colon_enabled/index.md @@ -0,0 +1,99 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

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

+ +
/* 有効な <input> を選択 */
+input:enabled {
+  color: blue;
+}
+ +

構文

+ +{{csssyntax}} + +

例

+ +

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 550, 95)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf