【入門編】不正状態擬似クラス :invalid – CSS実践ガイド

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

Webサイトを作っていて、避けて通れないのが「お問合せフォーム」や「会員登録画面」ですよね。ユーザーが名前やメールアドレスを打ち込むあの場所です。
さて、ここで初心者の多くが、こんな壁にぶつかります。

「ユーザーが変なデータを入力したときに、赤枠で『ここおかしいよ！』って教えたいんだけど、JavaScriptをガリガリ書かないとダメ……？」

大丈夫ですよ！安心してください。今のCSSはとっても優秀で、そんなブラウザの「お節介（バリデーション機能）」と手を取り合って、CSSの1行や2行でスマートにエラー表現をやってのけちゃうんです。

その主役こそが、今回ご紹介する `:invalid`（インバリッド）擬似クラス です。

今回は、この `:invalid` がどんな仕組みで動くのか、身近な例えを交えながら、優しく紐解いていきましょう！

—

1. `:invalid` ってなに？（身近な例えでお話します）

いきなり英語の専門用語が出てくると身構えちゃいますよね。でも大丈夫。`:invalid` は日本語に訳すと「無効な」「正しくない」という意味です。

これを、身近なものに例えてみましょう。そうだなあ……銀行の「振込用紙の記入コーナー」を想像してみてください。

用紙の欄外に「ここは数字4桁」「ここは@マークが必須」というルール（バリデーション）が書いてありますよね。あなたがそこに、ルール無視の文字を書き殴ったとします。すると、窓口の厳しい（でも親切な）お姉さんが、サッと飛んできて、「お客さま、ここ、書き方が間違ってますよ！」と赤色のペンでチェックを入れる――そんなイメージです。

CSSの `:invalid` は、まさにその「窓口のお姉さん」の代わりをしてくれます。
ブラウザが「おいおい、この入力内容、ルール違反だぞ」と判断した瞬間、この擬似クラスが発動し、CSSで指定したデザイン（赤枠にする、アイコンを出すなど）をパッと適用してくれるんです。

—

2. なぜエラーが起きるの？（ルールを知ろう）

`:invalid` がカッコよくCSSを適用するためには、前提として「ブラウザに正しいルール（バリデーションルール）を教えておく」必要があります。

HTMLの `` タグには、いくつかの「お約束（属性）」をつけることができます。

`required`：「ここ、絶対空っぽにしちゃダメだからね！」という必須マーク。
`type=”email”`：「@マークが入ったメールアドレスの形をしてちょうだいね！」というルール。
`type=”number”`：「数字しか受け付けないからね！」という制限。

これらが設定されているとき、ユーザーがルールに違反した文字を入れたり、空っぽのままにしたりすると、ブラウザが裏側で「おや、これは `:invalid` だぞ」と認定するわけです。

—

3. 実践！コードで見てみよう

百聞は一見にしかず。実際に動くコードを見てみましょう。
そのままコピペして、お手元のブラウザで試せるように丁寧なコメントを入れておきました。

HTMLコード

CSSコード

/ フォームの基本デザイン /
.form-group {
margin: 20px;
font-family: sans-serif;
}

input {
display: block;
width: 100%;
max-width: 400px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc; / 通常時は普通のグレーの枠線 /
border-radius: 4px;
outline: none;
transition: border-color 0.3s;
}

/ エラーメッセージは、普段は隠しておきます /
.error-message {
display: none;
color: #ff3366;
font-size: 14px;
margin-top: 5px;
}

/ ——————————————
ここが今回の主役！ :invalid の出番です
—————————————— /
input:invalid {
border-color: #ff3366; / ルール違反のときは、枠線を可愛いピンク（赤系）に！ /
background-color: #fff0f5; / 背景色もうっすら赤みがかると分かりやすいですね /
}

/
おまけのテクニック：
「ルール違反かつ、ユーザーが一度でも入力欄を触ったあと（または入力中）」に
エラーメッセージをフワッと表示させると、親切なUIになります。
/
input:invalid:not(:placeholder-shown) + .error-message {
display: block;
}

—

4. ここで初心者がハマりやすい「落とし穴」と優しいフォロー

現場で後輩から「先輩！ `:invalid` を使ったんですけど、ページを開いた瞬間から全部の入力欄が真っ赤になっちゃうんです！これバグですか！？」と泣きついてこられることがよくあります。

……これ、CSSあるあるなんです。実は、ページを開いた直後の「空っぽの状態」も、`required` がついている入力欄にとってはルール違反（invalid）扱いになってしまうんです。

何もしないうちから画面中が赤だらけになったら、ユーザーは「えっ、私まだ何も入力してないのに怒られてる？」と悲しくなってサイトを閉じちゃいますよね。

だからこそ、先ほどのコードで使った `:not(:placeholder-shown)` などの「ちょっとした魔法」を組み合わせて、「ユーザーが実際に文字を入力し始めた（あるいは入力し終わった）ときだけ、ジャッジを下す」ようにしてあげるのが、心優しいフロントエンド・エンジニアの腕の見せ所です。

—

5. まとめ

いかがでしたでしょうか？
`:invalid` は、ブラウザの持つバリデーション機能とCSSを繋ぐ、とってもシンプルでパワフルな仕組みです。

「正しくない入力」を自動で見つけてくれる。
JavaScriptを複雑に書かなくても、CSSだけで直感的なエラー表現（赤枠など）ができる。
ただし、初期表示の「空っぽ状態」が赤くならないように、ちょっとした気遣い（疑似クラスの組み合わせ）を忘れないであげること。

最初は難しく感じるかもしれませんが、実際にコードを書いてブラウザで「文字を消したり入れたり」してみると、「おっ、ちゃんと反応した！」という小さな感動があってすごく楽しいですよ。

焦らず、一歩ずつ、あなたのペースで進めていきましょう。応援しています！