diff options
| -rw-r--r-- | files/ja/web/css/_colon_indeterminate/index.md | 200 |
1 files changed, 102 insertions, 98 deletions
diff --git a/files/ja/web/css/_colon_indeterminate/index.md b/files/ja/web/css/_colon_indeterminate/index.md index e2721b89a7..d90d4e90be 100644 --- a/files/ja/web/css/_colon_indeterminate/index.md +++ b/files/ja/web/css/_colon_indeterminate/index.md @@ -1,140 +1,144 @@ --- title: ':indeterminate' -slug: 'Web/CSS/:indeterminate' +slug: Web/CSS/:indeterminate tags: - ':indeterminate' - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ - checkbox - progress - - radio button -translation_of: 'Web/CSS/:indeterminate' + - ラジオボタン +browser-compat: css.selectors.indeterminate +translation_of: Web/CSS/:indeterminate --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>:indeterminate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性が <code>true</code> に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。</span></p> +**`:indeterminate`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の [`indeterminate`](/ja/docs/Web/HTML/Element/input/checkbox#indeterminate) 属性が `true` に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。 -<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある <input> をすべて選択 */ +```css +/* 未確定の状態にある <input> をすべて選択 */ input:indeterminate { background: lime; -}</pre> +} +``` -<p>このセレクターが対象とする要素は以下の通りです。</p> +このセレクターが対象とする要素は以下の通りです。 -<ul> - <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素で、<a href="/ja/docs/Web/JavaScript">JavaScript</a> によって <code>indeterminate</code> プロパティが <code>true</code> に設定されている場合</li> - <li><code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li> - <li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li> -</ul> +- [`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox) 要素で、[JavaScript](/ja/docs/Web/JavaScript) によって `indeterminate` プロパティが `true` に設定されている場合 +- [`<input type="radio">`](/ja/docs/Web/HTML/Element/input/radio) 要素で、フォーム内の同じ `name` の値を持つすべてのラジオボタンが未選択である場合 +- {{HTMLElement("progress")}} 要素で、中間の状態の場合 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +### チェックボックスとラジオボタン -<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3> +この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。 -<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p> +#### HTML -<h4 id="HTML">HTML</h4> +```html +<fieldset> + <legend>Checkbox</legend> + <div> + <input type="checkbox" id="checkbox"> + <label for="checkbox">This checkbox label starts out lime.</label> + </div> +</fieldset> -<pre class="brush: html notranslate"><div> - <input type="checkbox" id="checkbox"> - <label for="checkbox">背景が緑色になるはずです</label> -</div> -<div> - <input type="radio" id="radio"> - <label for="radio">背景が緑色になるはずです</label> -</div></pre> +<fieldset> + <legend>Radio</legend> + <div> + <input type="radio" id="radio1" name="radioButton"> + <label for="radio1">First radio label starts out lime.</label> + </div> + <div> + <input type="radio" id="radio2" name="radioButton"> + <label for="radio2">Second radio label also starts out lime.</label> + </div> +</fieldset> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label { +```css +input:indeterminate + label { background: lime; } -</pre> +``` -<h4 id="JavaScript">JavaScript</h4> +```css hidden +fieldset { + padding: 1em 0.75em; +} -<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input"); +fieldset:first-of-type { + margin-bottom: 1.5rem; +} -for (var i = 0; i < inputs.length; i++) { +fieldset:not(:first-of-type) > div:not(:last-child) { + margin-bottom: 0.5rem; +} +``` + +#### JavaScript + +```js +const inputs = document.getElementsByTagName("input"); + +for (let i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } -</pre> +``` + +#### 結果 -<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p> +{{EmbedLiveSample('Checkbox_radio_button', 'auto', 230)}} -<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3> +### プログレスバー -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><progress> -</pre> +```html +<progress></progress> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css; hightlight[5] notranslate">progress { +```css +progress { margin: 4px; } progress:indeterminate { - opacity: 0.5; - background-color: lightgray; - box-shadow: 0 0 2px 1px red; + width:80vw; + height:20px; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</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-indeterminate', ':indeterminate')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>HTML における意味論と制約検証の定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>変更なし。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.selectors.indeterminate")}}</p> - -<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><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性</li> - <li>{{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス</li> - <li>{{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます</li> -</ul> -</div> +``` + +#### 結果 + +{{EmbedLiveSample('Progress_bar', 'auto', 30)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブフォーム — ユーザーデータでの作業](/ja/docs/Learn/Forms) +- [ウェブフォームの整形](/ja/docs/Learn/Forms/Styling_web_forms) +- [`<input type="checkbox">`](/ja/docs/Web/HTML/Element/input/checkbox) 要素の [`indeterminate`](/ja/docs/Web/HTML/Element/input/checkbox#indeterminate) 属性 +- {{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス +- {{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます |