こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。
Web制作を学び始めると、HTMLのフォーム（入力欄）を作る機会って必ずやってきますよね。「お名前」や「メールアドレス」を入力してもらうあの箱です。
で、必ずと言っていいほどぶつかる壁が「入力内容のチェック（バリデーション）」です。
「ちゃんとメールアドレスの形になっているかな？」
「必須のところに何か書かれているかな？」
昔はこれをチェックするのにJavaScriptをゴリゴリ書くのが当たり前でしたが、現代のCSSは実にスマートになりました。HTML5の標準機能とCSSを組み合わせるだけで、ブラウザが勝手に「おっ、この入力、バッチリOKだね！」と判断して、いい感じに見た目を変えてくれるんです。
その主役こそが、今回フォーカスする `:valid` 疑似クラス です。
難しく考えず、身近な例えからゆっくり紐解いていきましょう。大丈夫、あなたが躓きやすいポイントは私がぜんぶフォローしますからね！
—
1. `:valid` ってどんなやつ？ 身近な例えで考えてみよう
いきなり専門用語を並べ立てるのは野暮というものです。まずはイメージを掴みましょう。
イメージしてみてください。あなたは遊園地のアトラクションの入り口に立っている係員さんです。
お客さんが持っているチケットをチェックします。「有効なチケット（Validな状態）」を持っている人には、笑顔で「どうぞ！お入りください！」と青信号を出す。逆に、日付が違ったり破れていたりする人には「すみません、ここでは……」とちょっと止める。
CSSの `:valid` は、まさにこの「正しいチケットを持っている人（＝入力ルールをクリアした要素）」を見つけ出す魔法のセンサーなんです。
例えば、HTMLの入力欄（``）に `type=”email”` と書いたり、`required`（必須）というお墨付きを与えたりすると、ブラウザは心の中でこう思います。
「なるほど、ここはメールアドレスの形式じゃないとダメなんだな」
そして、ユーザーが実際にキーボードを叩いて、そのルール通りに正しく入力し終えた瞬間！
ブラウザはそっと、その入力欄に `:valid` という隠しタグ（状態）をペタッと貼り付けます。
私たちがCSSで `.input:valid { … }` と書いておけば、「お、ルールをクリアしたな」と察知して、入力欄をパッと緑色に変えたり、小さなチェックマークを出したりできるというわけです。
—
2. 実践！コードでその動きを確かめてみよう
百聞は一見に如かず。実際に手を動かしてみるのが一番の近道です。
以下のコードを、そのままあなたのエディタ（VS Codeなど）にコピーして、ブラウザで開いてみてください。
試してほしいこと
この画面を開いたら、まずは何も入力せずに画面を見てみてください。枠線はグレーのままでしょう？
次に、適当に文字を入力してみてください。「a」とか「abc」とか。まだ枠線はグレーのままのはずです。
そして最後に、`test@example.com` のように、ちゃんと「@」やドメインを含んだメールアドレスの形で入力しきってみてください。
……どうですか？
パッと入力欄の枠線が爽やかな緑色に変わり、背景もうっすらと色づいたはずです。
「おっ、正しく入力されたな！」とCSSが反応した瞬間ですね。これが `:valid` の実際の動きです。
—
3. 初学者が絶対にハマる「落とし穴」と、その優しい抜け出し方
さて、ここで現場のプロとして、初心者のあなたが必ずと言っていいほど直面する「大きな誤解」についてお話ししておきます。ここが一番大事なポイントですよ。
「ページを開いた瞬間、全部緑色になりませんか？」という疑問
コードを書いてブラウザでリロードしたとき、「まだ何も入力していないのに、なぜか最初から枠線が緑色になってしまう（あるいは赤くなる）」という現象にぶつかる人が後を絶ちません。
これ、実はバグではありません。
ブラウザの仕様（そして `:valid` の判定ルール）によるものです。
実は、HTMLの要素が何も入力されていない（空っぽの）状態のとき、`required`（必須）がついていない限り、ブラウザはこう解釈します。
「ふむ、まだ入力されていないけれど、ルール違反をしているわけでもない（＝矛盾はない）」
そのため、空っぽの要素も `:valid` の対象になってしまうことがあるのです。
どうやって解決するの？
「何も入力していない時は、緑色に光らせたくない！」ですよね。そんなときは、コンビネーション技を使います。
CSSには、入力欄が「まだ触られていない（フォーカスもされていない、空っぽの）」状態を区別するテクニックがあります。
例えば、以下のように `:placeholder-shown` という疑似クラスを組み合わせたり、あるいはユーザーが一度でも入力しようとした（あるいは送信ボタンを押した）後に判定させたりするアプローチが現場ではよく使われます。
/ 「プレースホルダーが表示されている（＝つまりまだ何も入力されていない）」状態のときは、:valid が発動していてもスタイルを上書きして無効化するテクニック /
input[type=”email”]:valid:not(:placeholder-shown) {
border-color: #2ecc71;
}
「うわ、なんだか急に難しそうな記号が出てきたぞ……」と思いましたか？
大丈夫です。最初は「何も入力していない状態だと、ブラウザは予想外の判定をすることがあるんだな」と頭の片隅に置いておくだけで100点満点です。つまずいたときは、このページにまた戻ってきてくださいね。
—
4. まとめ：CSSのバリデーションは「ユーザーへの小さなおもてなし」
今回は `:valid` 疑似クラスについて、基本のキから実務的なコツまでお話してきました。
- `:valid` とは？：入力内容がルール（メールアドレス形式など）を満たしたときに発動する、ブラウザの自動センサー。
- 何が嬉しいの？：JavaScriptを使わなくても、CSSだけで「正しく入力できているよ」というフィードバックをユーザーに返せる。
- 注意点：空っぽの初期状態との付き合い方に少しだけコツがいる。
フォームの入力って、ユーザーにとっては少しだけ「めんどくさい作業」です。
だからこそ、正しく入力できた瞬間にスッと色が変わったり、安心感を与えてくれたりするインタラクションがあると、Webサイト全体がグッと親切になり、触っていて気持ちの良いものになります。
完璧なコードを一発で書こうとしなくて大丈夫。まずは今日のコードをコピペして、文字を打ち変えながら「おっ、色が変わった！」という小さな感動を味わってみてください。その積み重ねが、気づいたときにはあなたを立派なフロントエンド・エンジニアに仕立て上げてくれますよ。
それでは、次のレッスンでお会いしましょう！
コメント