【入門編】妥当状態擬似クラス :valid – CSS実践ガイド

こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り抜けてきたチーフアーキテクトの私です。

CSSの世界へようこそ！
日々、画面を彩るコードを書いていると、「おっ、これ気持ちいい！」と思える瞬間に出会えますよね。今日お話しするのは、そんな小さな感動をそっと味あわせてくれる、ちょっと便利で優しい擬似クラス――その名も `:valid`（バリッド） です。

「なんだか英語だし、名前からして難しそう……」なんて身構えなくて大丈夫ですよ。
今日はこの `:valid` が持つポテンシャルを、身近なお買い物の例えを交えながら、一緒に紐解いていきましょう！

—

突然ですが、みなさんはスーパーやコンビニでセルフレジを使ったことはありますか？
あのレジって、バーコードをピッと読み込ませたときに、正しく読み取れると「ピピッ！」と軽快な音が鳴って、画面に緑色のチェックマークが出たりしますよね。逆に、読み取りに失敗すると「ピーッ」と赤くエラーが出たり。

あの「よし、バッチリOK！」と合格点をもらえた状態、あれがまさに CSS の世界における `:valid` なんです。

もう少し専門的に言うと、`:valid` は「フォームの入力内容が、設定されたルール（バリデーション）にちゃんと合格している入力欄」をこっそり見つけて、「よし、この子をスタイリングしちゃおう！」と選んでくれる魔法の合言葉（擬似クラス）なんですよ。

—

百聞は一見にしかず。まずは実際に動かせるコードを書いてみましょう。
HTMLとCSSを組み合わせるだけで、ブラウザが勝手に「おっ、正しい入力だね」と判断してデザインを変えてくれる、その仕組みを覗いてみてください。

:valid の優しい世界

これをあなたのパソコンのエディタ（VS Codeなど）に貼り付けて、ブラウザで開いてみてください。
お名前の欄に文字を入力した瞬間、ボーダーがすっと優しいグリーンに変わるのがわかるはずです。「おっ、ちゃんと入力できたね！」とブラウザが褒めてくれるみたいで、ちょっと嬉しくなりませんか？

—

さあ、ここで実務を歩み始めたばかりの方が、よーくハマる「あるあるな落とし穴」についてお話しさせてください。

「あれ？ページを開いた瞬間から、まだ何も入力していないのに緑色になっちゃうんだけど……？」

もしあなたがそう気づいたなら、それはとっても鋭い観察眼をしています！素晴らしいです。

実は、HTMLの標準ルールでは、「何も入力されていない空っぽの状態（かつ `required` がついていない要素など）」であっても、ブラウザによっては `:valid` と判定してしまうことがあるんです。
「えっ、まだ何も書いてないのに合格なの？」って思いますよね。

この「最初から緑になっちゃう問題」をスマートに解決するために、実務の現場では `:placeholder-shown` や `:user-valid` といった他の仲間たちとチームを組ませることがよくあります。

例えば、最新のブラウザで広く使われるようになってきた `:user-valid` という擬似クラス。これは、「ユーザーが実際にその入力欄を触って、文字を打ち込んだ後」にしか反応してくれない、さらに空気を読んでくれる優しいお兄さん（擬似クラス）です。

もし現場で「入力が終わるまで色を変えたくない！」というときは、以下のように書いてあげると安心ですよ。

/ ユーザーが実際に操作して、かつ正しく入力されたときだけ適用する /
input:user-valid {
border-color: #2ecc71;
}

—

CSSの擬似クラスと聞くと、なんだか機械的で冷たいルールのように感じるかもしれませんが、`:valid` はユーザーの「できたよ！」というアクションにそっと寄り添い、視覚的なフィードバックを返してくれる温かい仕組みです。

この2つのポイントさえ心に留めておけば、もう `:valid` で迷うことはありません。

Web制作の楽しさは、自分が書いたコードが画面の向こうのユーザーと「対話」してくれるところティップスにあります。ぜひ、あなたの作るフォームにもこの優しい `:valid` を取り入れて、触っていて心地よいWebサイトを作ってみてくださいね。

それでは、また次の現場でお会いしましょう！応援しています！