diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-03 23:39:06 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-11 11:50:21 +0900 |
commit | 12aefe25ef3ffacccc4b9dac6046c4e82de0ad3c (patch) | |
tree | 4b4b0b677a35fb97f54289fc01e7cad72007b04e /files/ja/web/css | |
parent | 5a7fe91e6431e51251e1c9e059f7bc54ac361fc8 (diff) | |
download | translated-content-12aefe25ef3ffacccc4b9dac6046c4e82de0ad3c.tar.gz translated-content-12aefe25ef3ffacccc4b9dac6046c4e82de0ad3c.tar.bz2 translated-content-12aefe25ef3ffacccc4b9dac6046c4e82de0ad3c.zip |
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/_colon_enabled/index.md | 120 |
1 files changed, 47 insertions, 73 deletions
diff --git a/files/ja/web/css/_colon_enabled/index.md b/files/ja/web/css/_colon_enabled/index.md index cfdea7d649..775c038da7 100644 --- a/files/ja/web/css/_colon_enabled/index.md +++ b/files/ja/web/css/_colon_enabled/index.md @@ -1,99 +1,73 @@ --- title: ':enabled' -slug: 'Web/CSS/:enabled' +slug: Web/CSS/:enabled tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:enabled' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.enabled +translation_of: Web/CSS/:enabled --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>:enabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。</p> +**`:enabled`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。 -<pre class="brush: css no-line-numbers notranslate">/* 有効な <input> を選択 */ +```css +/* 有効な <input> を選択 */ input:enabled { color: blue; -}</pre> +} +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。</p> +以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush:html notranslate"><form action="url_of_form"> - <label for="FirstField">First field (enabled):</label> - <input type="text" id="FirstField" value="Lorem"><br> +```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> + <label for="SecondField">Second field (disabled):</label> + <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br> - <input type="button" value="Submit"> -</form></pre> + <input type="button" value="Submit"> +</form> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush:css; notranslate">input:enabled { +```css +input:enabled { color: #2b2; } input:disabled { color: #aaa; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", 550, 95)}}</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-enabled', ':enabled')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>HTML に関する意味を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>擬似クラスを定義。ただし意味の結びつけの定義はなし。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.enabled")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{Cssxref(":disabled")}}</li> -</ul> +``` + +### 結果 + +{{EmbedLiveSample("Examples", 550, 95)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref(":disabled")}} |