diff options
| -rw-r--r-- | files/ja/web/css/_colon_checked/index.md | 202 |
1 files changed, 86 insertions, 116 deletions
diff --git a/files/ja/web/css/_colon_checked/index.md b/files/ja/web/css/_colon_checked/index.md index 9132885a57..d0585ef00d 100644 --- a/files/ja/web/css/_colon_checked/index.md +++ b/files/ja/web/css/_colon_checked/index.md @@ -1,71 +1,72 @@ --- title: ':checked' -slug: 'Web/CSS/:checked' +slug: Web/CSS/:checked tags: - ':checked' - CSS - Checked - - Layout - - Pseudo-class - - Reference - - Selector + - レイアウト + - 擬似クラス + - リファレンス + - セレクター - Toggled - - Web + - ウェブ - button - checkbox - radio -translation_of: 'Web/CSS/:checked' +translation_of: Web/CSS/:checked --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>:checked</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>セレクターで、<strong>ラジオボタン</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>)、 <strong>チェックボックス</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>)、 <strong>オプションボタン</strong> ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり <code>on</code> の状態にあったりすることを表します。</p> +**`:checked`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)セレクターで、**ラジオボタン** ([`<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio))、 **チェックボックス** ([`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox))、 **オプションボタン** ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり `on` の状態にあったりすることを表します。 -<pre class="brush: css no-line-numbers notranslate">/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */ +```css +/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */ :checked { margin-left: 25px; border: 1px solid blue; } -</pre> +``` -<p>ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。</p> +ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。 -<div class="note"> -<p><strong>メモ:</strong> ブラウザ―は <code><option></code> を<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>として扱うことが多いので、 <code>:checked</code> 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。</p> -</div> +> **Note:** ブラウザーは `<option>` を[置換要素](/ja/docs/Web/CSS/Replaced_element)として扱うことが多いので、 `:checked` 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +### 基本的な例 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <input type="radio" name="my-input" id="yes"> - <label for="yes">Yes</label> +```html +<div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Yes</label> - <input type="radio" name="my-input" id="no"> - <label for="no">No</label> -</div> + <input type="radio" name="my-input" id="no"> + <label for="no">No</label> +</div> -<div> - <input type="checkbox" name="my-checkbox" id="opt-in"> - <label for="opt-in">Check me!</label> -</div> +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Check me!</label> +</div> -<select name="my-select" id="fruit"> - <option value="opt1">Apples</option> - <option value="opt2">Grapes</option> - <option value="opt3">Pears</option> -</select> -</pre> +<select name="my-select" id="fruit"> + <option value="opt1">Apples</option> + <option value="opt2">Grapes</option> + <option value="opt3">Pears</option> +</select> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div, +```css +div, select { margin: 8px; } @@ -90,39 +91,41 @@ option:checked { box-shadow: 0 0 0 3px lime; color: red; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Basic_example")}}</p> +{{EmbedLiveSample("Basic_example")}} -<h3 id="Toggling_elements_with_a_hidden_checkbox" name="Toggling_elements_with_a_hidden_checkbox">非表示のチェックボックスの要素を切り替え</h3> +### 非表示のチェックボックスの要素を切り替え -<p>この例では、 <code>:checked</code> 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> はまったく使っていません。</p> +この例では、 `:checked` 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 [JavaScript](/ja/docs/Web/JavaScript) はまったく使っていません。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><input type="checkbox" id="expand-toggle" /> +```html +<input type="checkbox" id="expand-toggle" /> -<table> - <thead> - <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> - </thead> - <tbody> - <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> - <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> - <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> - <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> - <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> - </tbody> -</table> +<table> + <thead> + <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + </tbody> +</table> -<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> -</pre> +<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">/* トグルチェックボックスを隠す */ +```css +/* トグルチェックボックスを隠す */ #expand-toggle { display: none; } @@ -151,63 +154,30 @@ option:checked { /* チェックボックスがチェックされていたらボタンにスタイルを適用 */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p> - -<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3> - -<p><code>:checked</code> 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>を参照してください。</p> - -<div class="note"><strong>メモ:</strong> 似たような効果で、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> 擬似クラスを使用して隠しラジオボタンを使わないものについては、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover">:hover</a> のリファレンスページからの<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</div> - -<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-checked', ':checked') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> - <td>{{ Spec2('HTML5 W3C') }}</td> - <td>HTML に関する意味を定義。</td> - </tr> - <tr> - <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> - <td>{{ Spec2('CSS4 Selectors') }}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> - <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td> - </tr> - </tbody> -</table> +} +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +#### 結果 -<div> -<p>{{Compat("css.selectors.checked")}}</p> +{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}} -<h2 id="See_also" name="See_also">関連情報</h2> +### 画像ギャラリー -<ul> - <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li> - <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li> - <li>関連する HTML 要素: <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{HTMLElement("select")}}, {{HTMLElement("option")}}</li> - <li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li> -</ul> -</div> +`:checked` 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには[このデモ](/@api/deki/files/6268/=css-checked-gallery.zip "css-checked-gallery.zip")を参照してください。 + +> **Note:** 似たような効果で、 [`:hover`](/ja/docs/Web/CSS/:hover) 擬似クラスを使用して隠しラジオボタンを使わないものについては、 [`:hover`](/ja/docs/Web/CSS/:hover) のリファレンスページからの[このデモ](/@api/deki/files/6247/=css-gallery.zip "css-gallery.zip")を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブフォーム — ユーザーデータでの作業](/ja/docs/Learn/Forms) +- [ウェブフォームの整形](/ja/docs/Learn/Forms/Styling_web_forms) +- 関連する HTML 要素: [`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox), [`<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio), {{HTMLElement("select")}}, {{HTMLElement("option")}} +- [置換要素](/ja/docs/Web/CSS/Replaced_element) |