こんにちは！Web制作やCSSの学習に一歩を踏み出したあなたへ。
毎日コツコツとコードを書いていると、「あれ？思った通りに動かないな……」なんて壁にぶつかること、ありますよね。大丈夫ですよ、それは誰もが通るすごく大切な成長のステップです。
さて、今回はWebサイトのフォーム作りでめちゃくちゃ頼りになる、ちょっと魔法のようなCSSの機能についてお話しします。その名も`:valid`（バリッド）と`:invalid`（インバリッド）！
名前だけ聞くと「うっ、難しそう……」と身構えてしまうかもしれませんが、身近な例えを交えながら優しくほどいていきますので、気楽な気持ちでついてきてくださいね。
—
1. 身近な例え：お買い物の「レジでのチェック」を思い出して
想像してみてください。あなたは今、スーパーでお買い物をしています。
カゴの中の商品をレジに持っていき、店員さんがバーコードを「ピッ！」と読み取りますよね。
ここで、もしお財布の中身が足りなかったり、バーコードが読み取れなかったりしたらどうなりますか？ レジの画面が「ピピッ！エラーです（赤色）」と光って、私たちに教えてくれますよね。逆に、すべてがスムーズにいけば「お会計OKです（緑色）」と気持ちよく進めます。
Webサイトの入力フォームも、これと全く同じなんです。
- `:invalid`（エラー・不正） ＝ 「おっと、ルール通りに入力されていないよ！」と赤く光るレジ
- `:valid`（正常・合格） ＝ 「バッチリOK！次へ進めるよ！」と安心感をくれる緑のサイン
これまでは、こうした「入力が正しいか間違っているか」のチェックをJavaScriptという少し難しいプログラミング言語で一生懸命書く必要がありました。でも、今のCSSは優秀なので、「ちゃんとルール通りに入力できたらこの色にしてね」とCSSだけでお願いできちゃうんです。すごい時代になりましたよね！
—
2. `:valid` と `:invalid` って、具体的にどう動くの？
言葉だけだとイメージしにくいので、ルールを整理してみましょう。
- `:invalid` セレクタ
ユーザーが入力した内容が、HTML側で決めたルール（「ここはメールアドレスにしてね」「最低でも5文字以上書いてね」など）に違反している時に発動します。
- `:valid` セレクタ
反対に、そのルールをクリアしている（正しい状態の）時に発動します。
ここで一つ、初学者の人が一番最初に「あれ？」とハマりがちな重要なポイントをこっそり教えますね。
> 【注意！】ページを開いた直後はどうなるの？
> まだユーザーが何も文字を打っていない「空っぽの状態」のとき、ブラウザはこれをどう判断するでしょうか？
> 実は、多くのブラウザでは「まだ入力していない＝ルール違反（:invalid）」と判定してしまうことが多いんです。ページを開いた瞬間からフォームが真っ赤になっていたら、ちょっとドキッとしちゃいますよね。
> だから実務では、「実際にユーザーが文字を入力し始めてから（またはフォーカスが外れてから）」スタイイルを適用する工夫をするのがプロの技なんです。今回は分かりやすく基本から見ていきましょう！
—
3. 実際にコードを書いて動かしてみよう！
百聞は一見にしかず。実際に、名前（テキスト）とメールアドレスを入力する簡単なフォームを作ってみましょう。
以下のコードをコピーして、ご自身のHTMLファイルに貼り付けてブラウザで開いてみてください。
お問合せフォーム
コードの解説と、ちょっとした工夫
HTML側で `required`（必須だよ！）や、`type=”email”`（メールの形をしていないとダメだよ！）というルールを設定しています。
- 何も入力していない状態では、赤色の枠線（`:invalid`）になります。
- 文字を入力し始めて、メールアドレスの形（＠マークなど）が整うと、パッと緑色の枠線（`:valid`）に切り替わります。
この「色がシュッと変わる」感覚、なんだか使っていて気持ちがいいし、ユーザーにとっても「あ、ちゃんと正しく入力できてるんだな」という安心感につながりますよね。
—
4. 現場のプロからのアドバイス：もっと優しくするために
さて、先ほどチラッとお話した「ページを開いた瞬間から赤くなっちゃう問題」、気になりませんでしたか？
実務の現場では、ユーザーがまだ何も書いていない状態から真っ赤なエラーを出してしまうと、「怒られているみたいで怖い」「使いにくいサイトだな」と思われて離脱されてしまいます。
そのため、実務では以下のように「ユーザーが一度その入力欄から離れた後（`:placeholder-shown` などを組み合わせるなど）」にエラーを光らせるテクニックがよく使われます。
/
発展テクニック：
「文字が入力されていて、かつ、ルールを満たしていない時だけ」赤くする
（※プレースホルダーが表示されていない ＝ 何かしらの文字が打たれた状態）
/
input:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
background-color: #fdf3f2;
}
※ `:not()` や `:placeholder-shown` は少し背伸びしたセレクタですが、「こんな風により優しくカスタマイズできるんだな」と頭の片隅に入れておくだけで、将来ものすごく役に立ちますよ！
—
おわりに
いかがでしたでしょうか？
`:valid` と `:invalid` は、ほんの少しのCSSを書くだけで、フォームの使いやすさ（UX）をグッと引き上げてくれる心強い味方です。
最初は思い通りにいかなくて手が止まることもあるかもしれませんが、一つひとつ試しながら「おっ、色が変わった！」という小さな感動を積み重ねていけば、CSSを書くのがどんどん楽しくなっていきますよ。
あなたのWeb制作の学習を、心から応援しています！今日も一緒に楽しくコードを書いていきましょうね。
コメント