initial commit

1 files changed, 142 insertions, 0 deletions

diff --git a/files/ja/web/css/_colon_indeterminate/index.html b/files/ja/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..6a444e188a
--- /dev/null
+++ b/files/ja/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,142 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - ':indeterminate'
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+  - checkbox
+  - progress
+  - radio button
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある &lt;input&gt; をすべて選択 */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>このセレクターが対象とする要素は以下の通りです。</p>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</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">&lt;input type="radio"&gt;</a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li>
+ <li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3>
+
+<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;背景が緑色になるはずです&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;背景が緑色になるはずです&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;progress&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+</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>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</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">&lt;input type="checkbox"&gt;</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>