CSSの魔法でフォームを「賢く」しよう！`:valid` と `:invalid` でエラー表示を自動化する話
こんにちは！Webの世界へようこそ。CSSを学び始めると、「デザインって楽しい！」と感じる反面、「JavaScriptを使わないと、入力フォームのエラー表示なんてできないんじゃないの？」と不安になることはありませんか？
実は、そんなことはありません。CSSには、入力された内容が「正しいか、間違いか」を瞬時に判断して、勝手に見た目を変えてくれる頼もしい魔法があるんです。それが、今回紹介する `:valid`（ヴァリッド）と `:invalid`（インヴァリッド）という疑似クラスです。
難しい言葉に聞こえますが、大丈夫。一緒に紐解いていきましょう！
—
1. そもそも `:valid` と `:invalid` って何者？
想像してみてください。あなたは今、スーパーのレジでお会計をしています。
店員さんがバーコードを「ピッ」と読み取ったとき、
- 「ピッ！」と軽快な音が鳴る（＝OK！）
- 「ブーッ！」と警告音が鳴る（＝NG！）
この瞬時の判断、実はWebサイトの入力フォームでも同じことが起きているんです。
- :valid：入力された内容がルール通り（メールアドレスの形式など）で、「OK！」な状態。
- :invalid：ルールから外れていて、「これじゃ困るよ！」というエラーの状態。
この状態をブラウザが自動的に判断してくれるので、私たちはCSSで「OKのときは緑っぽく」「NGのときは赤っぽく」と指示を出すだけで、親切なフォームが完成するのです。
—
2. さっそく書いてみよう！魔法のコード
まずは、一番わかりやすい「メールアドレス入力」を例に見てみましょう。HTMLで `type=”email”` と指定するだけで、ブラウザは「ああ、これはメールアドレスの形じゃないとダメだな」と理解してくれます。
そして、CSSで魔法をかけます。
/ 1. 基本の状態（ちょっと控えめに） /
input {
border: 2px solid #ccc; / 灰色の枠線 /
padding: 10px;
}
/ 2. 「OK！」な時のスタイル（緑色で安心感を） /
input:valid {
border-color: #2ecc71; / 鮮やかな緑色 /
background-color: #eafaf1; / 薄い緑の背景 /
}
/ 3. 「NG！」な時のスタイル（赤色で注意を促す） /
input:invalid {
border-color: #e74c3c; / 警告の赤色 /
background-color: #fdedec; / 薄い赤の背景 /
}
ここでちょっとした「つまずきポイント」をフォロー！
これ、実際に動かしてみると「あれ？最初から赤色になっちゃった！」と驚くかもしれません。
実は、ページを開いた瞬間の「空っぽ」の入力欄も、ルール（メールアドレス形式）を満たしていないので `:invalid` と判断されてしまうんです。
そんなときは、こう書き換えてみてください。
/ 「入力したことがある」かつ「間違っている」ときだけ赤くする /
input:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
}
`:not(:placeholder-shown)` は、「まだ何も入力されていない状態（空っぽ）は除外してね」という意味です。これで、ユーザーが入力し始めた瞬間にだけ赤くなる、とてもスマートな動きになりますよ！
—
3. なぜCSSだけでやるのが良いの？
「JavaScriptでゴリゴリ書くのと何が違うの？」と思うかもしれません。もちろん、高度なバリデーションにはJavaScriptが不可欠ですが、CSSで制御することには素晴らしいメリットがあります。
1. とにかく軽い！：余計なプログラムを動かさないので、サイトがサクサク動きます。
2. 保守が楽！：CSSのファイルを1行直すだけで、サイト全体の入力欄のデザインを統一できます。
3. ユーザーに優しい！：画面を動かした瞬間に反応するので、ユーザーは「あ、ここ間違えてるのか」とすぐ気づくことができます。
—
最後に：完璧を目指さなくて大丈夫
Web制作を始めたばかりの頃は、「エラーメッセージを吹き出しで出したい」「送信ボタンを無効化したい」と、あれもこれもやりたくなってしまうものです。
でも、まずは今日紹介したこのCSSだけで十分です。「入力欄の色が変わるだけで、ユーザーは驚くほど迷わなくなる」。これこそが、ユーザー体験（UX）の第一歩です。
うまくいかない時があっても、それはあなたが新しい技術に挑戦している証拠です。少しずつ、自分のペースで「心地よいフォーム」を作っていきましょうね。
あなたのコードが、誰かの役に立つことを心から応援しています！
コメント