やあ、こんにちは。CSSの世界へようこそ。
フロントエンドの深淵を覗き続けてきた私ですが、今日は少しだけ肩の力を抜いて、入力フォームの「ちょっとした気遣い」についてお話ししようと思います。
Webサイトを作っていると、必ずと言っていいほど出会うのが「数字の入力欄」です。例えば、お買い物の個数指定や、年齢の入力などですね。でも、ユーザーが「10個まで」と決まっているのに「100個」なんて入力してしまったらどうでしょう？
そんな時、CSSには「範囲内ですか？ それとも範囲外ですか？」を自動で判定して、見た目を変えてくれる魔法のような機能があるんです。それが `:in-range` と `:out-of-range` です。
—
そもそも「範囲」って何のこと？
Webの入力フォームには、HTMLで「ここまでならOKですよ」という境界線を引くことができます。それが `min`（最小値）と `max`（最大値）という属性です。
例えば、「1から10まで選んでね」という箱を用意するとしましょう。
この「1〜10」というルールのことを「範囲（range）」と呼びます。この範囲の中に数字があれば `:in-range`、範囲から外れていれば `:out-of-range` という状態が、ブラウザの中で勝手に切り替わる仕組みになっています。
直感的な「信号機」で教えてあげよう
この2つの疑似クラスを使うと、まるで信号機のようにユーザーを導くことができます。
- :in-range（青信号）: 「その数字でバッチリです！」と安心させるスタイル。
- :out-of-range（赤信号）: 「おっと、そこまでは選べませんよ」と優しく教えるスタイル。
これをCSSで書くと、こんなにシンプルになります。
/ 範囲内のときは、枠線を落ち着いた緑色に /
input:in-range {
border: 2px solid #2ecc71;
}
/ 範囲外のときは、枠線を注意を促す赤色に /
input:out-of-range {
border: 2px solid #e74c3c;
background-color: #fdeaea; / 背景をほんのり赤くして気づきやすく /
}
たったこれだけで、ユーザーは「あ、いけない。数字を直さなきゃ」と直感的に気づくことができます。エラーメッセージを出すのを待つまでもなく、入力した瞬間にフィードバックを返す。これが、プロの作り手の「おもてなし」です。
つまずきやすいポイント：焦らなくて大丈夫
初心者の頃、この機能を使おうとして「あれ？ なぜかスタイルが変わらないぞ？」と悩むことがあります。実は、この魔法が効くのは `type=”number”` や `type=”range”` など、数字を扱うものだけなんです。
文字を入力するテキストボックス（`type=”text”`）にいくら設定しても、ブラウザは「これは数字じゃないから範囲なんて分からないよ」と困ってしまいます。もし動かないなと思ったら、HTMLの `type` を一度確認してみてくださいね。
また、初期状態で何も入力されていない場合も、この判定は行われません。「数字が入った瞬間」から魔法が動き出す、と覚えておくと良いですよ。
実践的な一歩：ユーザーに寄り添うデザインへ
最後に、少しだけ実戦的なコードを紹介しますね。枠線を変えるだけでなく、メッセージを表示させるとさらに親切です。
/ 範囲外のときだけ、下に警告文を出す工夫 /
input:out-of-range + .error-message {
display: block;
color: #e74c3c;
font-size: 12px;
}
.error-message {
display: none; / 基本は隠しておく /
}
1から5の間で入力してくださいね！
このように、CSSで状態をコントロールしてあげると、ユーザーは迷子にならずに楽しく操作を続けられます。
—
CSSは、ただ見た目を飾るだけの道具ではありません。ユーザーとWebサイトとの「会話」を支える大切なツールなんです。`:in-range` や `:out-of-range` を使って、ぜひあなたの作るフォームを、もっと優しくて使いやすいものに育てていってくださいね。
もしうまくいかないことがあっても、大丈夫。私も最初はたくさん失敗しました。一つずつ、楽しみながらコードを書いていきましょう。応援していますよ。
コメント