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

こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り続けているチーフアーキテクトの私です。

CSSって、最初は「文字の色が変わる」「レイアウトが思い通りになる」だけで魔法のように楽しいですよね。でも、少しずつフォームを作ったり、JavaScriptを書こうとしたりする段階になると、なんだか急に難しく感じて手が止まってしまうこと、ありませんか？

「あぁ、またエラーが出た……」「なんでここが動かないんだろ……」

そんなふうに画面の前で頭を抱えているあなたへ。大丈夫ですよ、安心してください。みんな最初はそこを通ります。今日は、そんなCSSのちょっとマニアックだけど、知っているとフォーム作りが劇的に楽しくなる隠し味、`:in-range`（イン・レンジ）疑似クラスについて、おしゃべりするように優しく紐解いていきますね。

—

1. `:in-range` ってなんだろう？ お買い物の例えで考えてみよう

いきなり専門用語を並べ立てるのは、私の趣味ではありません。まずは身近なイメージから入りましょう。

想像してみてください。あなたは今、近所のスーパーでレジ打ちのアルバイトをしています。お客さんがカゴに入れて持ってきた「卵のパック」を想像してください。この卵のパック、売り場には「1パック 6個入りから12個入りまで」というルール（制限）があるとしましょう。

• カゴに入っている卵が 8個 だったら？ → 「OK！レジに通せますね」
• カゴに入っている卵が 15個 だったら？ → 「おっと、そんなに入らないよ！ルール違反だよ！」

Webのフォームにある数字を入力する欄（`` など）も、これとまったく同じなんです。
「最小値はここから、最大値はここまでね」という範囲（レンジ）をあらかじめ決めておいたとき、いま入力されている数字がちゃんとそのルールの中に収まっているかどうかを、こっそり見守ってくれている番人。それが、今日主役の `:in-range` 疑似クラス です。

つまり、ユーザーが「ルール通りの正しい数字」を入力しているまさにその瞬間、そっと背中を優しく撫でて「うんうん、その調子！」と緑色の光で褒めてあげるような演出ができるわけです。

—

2. 実際のコードを見てみよう！

言葉だけだとフワッとしてしまうので、実際に動くコードを見てみましょう。
エディタを開いて、以下のコードをコピペしてみてください。ブラウザでそのまま動きを確認できますよ。

コードのポイント解説

1. HTML側の準備 (`min` と `max`):
`` のように、HTML側で必ず「下限（min）」と「上限（max）」を設定しておいてください。ここが基準のモノサシになります。
2. CSS側の魔法 (`:in-range`):
`input[type=”number”]:in-range` と書くことで、「あ、いまユーザーがちゃんと1から5の範囲内の数字を入れてるな」とCSSが察知し、自動的にスタイルを切り替えてくれます。

—

3. つまずきやすいポイント・現場のリアルな注意点

さて、ここまで読んで「よし、明日から全部のフォームに入れたろ！」と思ったそこのあなた。ちょっと待ってください。ベテランの私から、実務でハマりがちな「お節介な注意点」をいくつかシェアしておきますね。

① 最初から空っぽ（未入力）のときはどうなるの？

これ、初心者の人が一番最初に「あれ？」ってなるポイントなんです。
例えば、ページを開いたばかりのとき、入力欄がまだ空っぽ（値が何もない状態）だとしますよね。このとき、`:in-range` は発動するでしょうか？

答えは……発動しません！

「えっ、範囲内じゃないの？」って思いますよね。でも考えてみてください。「まだ何も入力されていない状態」は、「範囲内」でも「範囲外」でもありません。ただの「無」です。そのため、初期状態の空っぽの欄にいきなり緑色の「OKサイン」が出たりすると、ユーザーは「え、まだ何も入れてないのに何がOKなの？」と混乱してしまいます。
`:in-range` は、あくまで「数字が入力されていて、かつその値が範囲内のとき」にだけ働く、奥ゆかしい性質を持っているんです。

② ペアで覚えたい「お姉さん」的存在：`:out-of-range`

`:in-range` を語る上で欠かせないのが、対になる存在である `:out-of-range`（アウト・オブ・レンジ） 疑似クラスです。
こちらは名前の通り、指定された範囲を飛び出してしまったとき（例：1〜5のところを「8」にしちゃったときなど）に発動します。

現場ではよく、こんな風にコンビで使われます。

/ 範囲内のときは優しく見守る緑 /
input[type=”number”]:in-range {
border-color: #2ecc71;
}

/ 範囲から飛び出したら「おっと危ない！」と赤く警告する /
input[type=”number”]:out-of-range {
border-color: #e74c3c;
background-color: #fdf3f2;
}

この「緑と赤」のフィードバックを視覚的にサラッと入れてあげるだけで、ユーザーは「あ、今エラーなんだな」「これで進んでいいんだな」と直感的にわかるようになり、フォームの使いやすさ（UX）が跳ね上がります。JavaScriptで複雑なバリデーションを書く前に、CSSだけでここまで直感的な案内ができるなんて、すごくスマートだと思いませんか？

—

4. おわりに

CSSの疑似クラスって、最初は名前も難しそうだし、覚えることがたくさんあって億劫になることもありますよね。でも、一つひとつの仕組みを「お店の店員さんとお客さんのやり取り」みたいに身近なストーリーに置き換えてみると、途端に可愛らしく、愛着が湧いてくるものです。

今日覚えた `:in-range` も、あなたのWebサイトを訪れたユーザーの入力をそっと、でも確実に手助けしてくれる小さくて頼もしい相棒になってくれます。

完璧に使いこなせなくても大丈夫。まずは自分のローカル環境でコードを書き換えて、「うわ、色が変わった！」という小さな感動をたくさん味わってくださいね。その積み重ねこそが、あなたを最高のフロントエンド・エンジニアにしてくれます。

それでは、また次のCSSの冒険でお会いしましょう！Happy Coding!