こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り抜けてきたチーフアーキテクトの私です。
Webサイトを作っていると、避けて通れないのが「お問合せフォーム」や「会員登録画面」ですよね。ユーザーに名前やメールアドレスを入れてもらうあれです。
そのとき、こんな風に思ったことはありませんか？
「ちゃんと正しい形式で入力してほしいのに、適当な文字を入れてそのまま送信ボタンを押されちゃう……」
「どこが間違っているのか、ユーザーにもっと優しく教えてあげたい！」
そんなとき、CSSだけで魔法のように「あ、ここ間違ってますよ」と教えてくれる頼もしい相棒がいるんです。それが今回ご紹介する `:invalid`（インバレッド）疑似クラス です。
難しい専門用語はなるべく抜きにして、身近な例えを交えながら一緒に紐解いていきましょう。大丈夫、一歩ずつ見ていけば絶対に怖くありませんよ！
—
1. `:invalid` ってどんな仕組み？（お買い物のレジに例えてみよう）
スーパーでお買い物をしている自分を想像してみてください。
レジに並んで、セルフレジの画面にバーコードを読み込ませたり、専用の用紙に必要事項を書いたりする場面です。
もし、郵便番号を書く欄に「あいうえお」と文字が入っていたらどうでしょう？ 機械はピッと赤く光って「ここ、数字しかダメですよ！」と教えてくれますよね。あれと全く同じことが、Webブラウザの中でも起きています。
`:invalid` を日本語に訳すと、「無効な」「ルール違反の」という意味です。
HTML側で「ここはメールアドレスしか受け付けませんよ」「ここは3文字以上書いてくださいね」とルール（バリデーション）を設定しておきますよね。そのルールに今の入力内容が違反してしまっている状態のとき、この `:invalid` というCSSの合言葉が発動する仕組みになっています。
—
2. 初学者が一番やりがちな「落とし穴」
ここで、CSSを勉強し始めたばかりの方が必ずといっていいほどハマる「大きな罠」についてお話しさせてください。
「よし、`:invalid` を使って、間違っている入力欄を赤くしてみよう！」と思って、こんなCSSを書いたとします。
/ やりがちなコード /
input:invalid {
border: 2px solid red; / 間違ってたら赤枠にする /
}
これをブラウザで開いてみると……ページを読み込んだ瞬間、まだ何も入力していない最初の状態なのに、すべての入力欄が真っ赤に染まってしまいます。
「ひえっ！ まだ何も打ってないのに怒られた！？」と、ここでそっとエディタを閉じたくなる気持ち、痛いほどよく分かります。私も昔、全く同じ罠にハマって頭を抱えましたから。
なぜ最初から赤くなってしまうのか？
HTMLのルール上、ページを開いた直後の空っぽの状態も、実は「まだルールを満たしていない（＝invalid）」と判定されてしまうからなんです。これではユーザーが入力する前から「ダメ！」と怒られているようで、お世辞にも親切なデザインとは言えませんよね。
ここで現場のプロの技（チーフの知恵）をこっそり伝授しましょう。
「ユーザーが一度その入力欄に触れて、何かを入力しようとした（または入力し終わった）」という行動の気配を検知してあげるのが、実務では定番のテクニックです。
—
3. 実践！優しいエラー表示を作ってみよう
それでは、実際にエディタに貼り付けて試せるサンプルコードを見てみましょう。
HTMLとCSSを組み合わせて、ユーザーが「おっ、ここ直さなきゃいけないんだな」と自然に気づける、優しいフォームを作ります。
HTMLコード
正しいメールアドレスの形式で入力してくださいね。
CSSコード
/ フォーム全体の基本のデザイン /
.form-group {
margin-bottom: 24px;
font-family: sans-serif;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: border-color 0.3s; / 枠線の色が変わる動きをなめらかに /
}
/
【ここがポイント！】
:user-invalid という疑似クラスを使います。
これは「ユーザーが実際に操作したあとで、かつルール違反のとき」だけ発動する、
先ほどの「最初から赤くなっちゃう問題」をスマートに解決してくれる超優秀な現代のCSSです！
/
input:user-invalid {
border-color: #ff4d4f; / 枠線をやさしい赤色に /
background-color: #fff1f0; / 背景もほんのり薄い赤にすると分かりやすいです /
}
/ 普段はエラーメッセージを隠しておきます /
.error-message {
display: none;
color: #ff4d4f;
font-size: 14px;
margin-top: 6px;
}
/
ユーザーが操作した結果、エラー状態（:user-invalid）になった入力欄の
すぐ後ろにあるエラーメッセージだけを表示させます！
/
input:user-invalid + .error-message {
display: block;
}
> 💡 チーフからの補足メモ
> サンプルコードで使っている `:user-invalid`（ユザー・インバレッド）は、現代のモダンブラウザで広くサポートされている非常に便利な疑似クラスです。「まだ入力していない状態ではエラーを出さない」という、ユーザービリティ（使いやすさ）に配慮した設計がCSS単体で簡単に実現できます。もし古いブラウザも完全にサポートしたい現場であれば、JavaScriptと組み合わせる手法をとることもありますが、まずはこの書き方を覚えておけば間違いありません！
—
4. まとめ：CSSはユーザーに寄り添うための道具
いかがでしたでしょうか？ `:invalid` という名前を聞くと、なんだか冷たくエラーを弾く拒絶の言葉のように感じるかもしれませんが、使いこなせるようになると「ユーザーが迷わないように、そっと手を差し伸べてあげるガイド役」になってくれます。
Web制作やプログラミングの学習は、最初は覚えることが多くてつまずくこともたくさんあります。「あれ、なんで動かないんだろう？」と悩んだときは、今日のこの記事を思い出してみてくださいね。
焦らず、一歩ずつ、あなたのペースでコードを書いていきましょう。応援しています！
コメント