【入門編】 indeterminate疑似クラス – CSS実践ガイド

こんにちは！CSSの世界へようこそ。チーフアーキテクトの私です。

日々のコーディング、お疲れ様です。「CSSって、レイアウトを整えるだけじゃなくて、なんだか細かい状態まで色々指定できて奥が深いなぁ……」なんて感じている頃でしょうか。

今回は、そんなCSSの引き出しの中でも、少しだけ「通（つう）」な雰囲気を醸し出しつつ、知っていると「おっ、やるな！」と周りに思わせられる隠れた名優――`:indeterminate`（インデターミネイト）疑似クラスについてお話しします。

「名前が呪文みたいで難しそう……」なんて身構えなくて大丈夫ですよ。ゆっくり、身近なたとえ話を交えながら解きほぐしていきますので、コーヒーでも飲みながらリラックスして読んでいってくださいね。

—

そもそも「インデターミネイト」ってなに？

さて、いきなりカタカナの長い名前が出てきましたが、意味はシンプルです。日本語に訳すと「未決定（みたいてい）」「中間状態」という意味になります。

私たちの身の回りで考えてみましょう。例えば、ネットショッピングで複数のオプション（ラッピングや熨斗（のし）など）を選ぶとき。
「全部まとめて選ぶ」という親チェックボックスがあって、その下に「個別の子チェックボックス」がいくつか並んでいるUIを見たことがありませんか？

あの親チェックボックスの状態を思い浮かべてみてください。

• 子が「全部チェックされている」ときは、親もオン（✔）。
• 子が「一つもチェックされていない」ときは、親もオフ（空っぽ）。

では、「子が3つあって、そのうちの1つだけチェックされている」ときはどうでしょう？
親は「全部」でも「ゼロ」でもない、なんとも中途半端な状態ですよね。あの、マイナス記号（➖）が表示されている、フワフワした宙ぶらりんな状態。あれこそが、まさに「中間状態（indeterminate）」なんです。

この「どっちつかずの状態」を、CSSの力でスタイリングしてあげようというのが今回のテーマです。

—

なぜこの疑似クラスが必要なの？

初学者の頃って、「チェックボックスって、チェックが入ってるか、入ってないかの2択でしょ？」って思いますよね。私も昔はそう思っていました。

でも、実際のWebアプリや複雑なフォーム画面を作っていると、「一部だけ選択されている」という3つ目の状態を表現したくなるシーンが必ずやってきます。JavaScriptを使って「いま中間状態だよ！」というフラグを管理することはできるのですが、それを見た目（デザイン）に反映させるためのスイッチ役として、この`:indeterminate`疑似クラスが用意されているんです。

実はこの疑似クラス、HTMLの仕様上、マウスのクリックで直接この「中間状態」にすることはできません（JavaScriptから `indeterminate = true` という命令を出してあげる必要があります）。
だからこそ、「CSS単体で完結するお化粧」というよりは、「JavaScriptとCSSが手を取り合って表現する、ちょっとリッチなUI」の要（かなめ）になるんです。

—

実際にコードを書いて動かしてみよう

百聞は一見にしかず。実際にどんな風に動くのか、コピペですぐ試せるサンプルコードを見てみましょう。

今回は、おなじみの「すべて選択」チェックボックスを例にします。親が中間状態になったときに、背景色が変わったり、少し特別な見た目になるようなコードです。

コードのここがポイント！

1. `input[type=”checkbox”]:indeterminate` の指定
これが今回の魔法の呪文です。チェックボックスにJavaScriptから `indeterminate = true` が設定された瞬間、このCSSセレクタがピタッと反応します。
2. `accent-color` との組み合わせが最高に相性良し
最近のモダンブラウザでは、`accent-color: #ff6b6b;` のようなプロパティを使うだけで、チェックボックス自体の色を簡単にカスタマイズできます。`:indeterminate` と組み合わせることで、マイナス記号のバーの色も綺麗に染まってくれます。

—

つまずきやすいポイントと、優しく寄り添うアドバイス

初学者の頃、私がこの `:indeterminate` を触って最初に「あれ？」と躓いたポイントをシェアしますね。もし同じところで悩んでも、どうぞ安心してください。

つまずきポイント1：「CSSだけでこの状態を作ろうとして泥沼にハマる」

> アドバイス：
> 最初にお伝えした通り、`:indeterminate` は「ユーザーがマウスでカチカチっとクリックして直接出せる状態」ではありません。HTMLの仕様として、ユーザーの直接操作ではON/OFFの2択しか行き来できないようになっています。
> だから、「あれ？ CSSを書いたのに、画面上でいくらクリックしてもあのマイナス記号が出ないぞ……？」と悩んだら、それはあなたのコードミスではなく仕様です。必ずJavaScriptのお手伝い（`element.indeterminate = true`）が必要になるので、「JSとペアで動くんだな」と心に留めておいてくださいね。

つまずきポイント2：「見た目がブラウザごとにバラバラな気がする」

> アドバイス：
> チェックボックスなどのフォーム部品は、OSやブラウザ（Chrome, Safari, Firefox, Edgeなど）によってデフォルトのデザインが少しずつ異なります。
> 「完全にピクセル単位で自分の思い通りのカスタムデザインにしたい！」という場合は、デフォルトのチェックボックスを `appearance: none;` で完全に透明にして消し去り、まわりの `label` タグや擬似要素（`::before` / `::after`）を使って自前でチェックボックスの見た目をゼロから作り込む、というテクニック（カスタムチェックボックス実装）がよく使われます。
> もし標準の見た目から大きく変えたい場合は、そのアプローチも視野に入れてみてくださいね。

—

チーフアーキテクトからのまとめ

今回は `:indeterminate` 疑似クラスについて、基本の「き」から実用的なイメージまでお話ししました。

• `:indeterminate` は「どっちつかずの、中間状態（未決定状態）」をキャッチする疑似クラス。
• 主に、すべて選択の親チェックボックスなどで、一部の子だけが選ばれているときに活躍する。
• 動かすにはJavaScriptとの連携（コンビネーション）が必要不可欠！

「フォームの細かい状態なんて、動けばなんでもいいや」と思われがちですが、こういった細部（ディテール）にまで気を配って、ユーザーが「おっ、いま一部だけ選ばれてるんだな」と直感的にわかるUIを作れるエンジニアは、現場でも本当に重宝されます。

最初から完璧に使いこなせなくても大丈夫です。「こんなお洒落な仕組みがあるんだな」と心の引き出しにそっとしまっておいて、いざというときに思い出していただけたら、私としてもこれ以上ない喜びです。

あなたのフロントエンドの旅が、これからも楽しく、ワクワクするものでありますように。それでは、また別の現場でお会いしましょう！