CSSのvalidとinvalidの使い方を完全ガイド！バリデーション状態を表現する方法

:valid・:invalidでバリデーション状態を表現する方法

先生と生徒の会話形式で理解しよう

生徒

「メールアドレスを入力したときに、形式が正しいと緑色になって、間違っていると赤くなるような仕組みって作れますか？」

先生

「はい、CSSのvalidとinvalidという機能を使えば、入力内容が正しいかどうかをリアルタイムで見た目に反映できますよ。」

生徒

「プログラミングが必要だと思っていました！CSSだけでもできるんですね。」

先生

「その通りです。バリデーションと呼ばれる入力チェックの状態を、初心者の方でも簡単にデザインする方法を解説しますね！」

1. 入力チェックを表現するバリデーションとは？

ウェブサイトでお問い合わせフォームや会員登録フォームに文字を入力するとき、内容が正しいかどうかをコンピュータが判定することをバリデーション（入力検証）と呼びます。例えば、「メールアドレスなのにアットマークがない」といった間違いを教えてくれる機能のことです。

パソコンを初めて触る方にとって、自分が正しく入力できているかどうか不安になるものです。そこで、CSSのvalid（バリッド：有効・正しい）とinvalid（インバリッド：無効・正しくない）という疑似クラスを使うと、見た目で「正解」か「不正解」を伝えることができます。これにより、ユーザーにとって優しいホームページを作成することが可能になります。

2. validセレクタで正しい入力を知らせる仕組み

validは、入力欄に書かれた内容が、あらかじめ決められたルールに合格しているときに適用されるスタイルです。例えば、「必須項目に文字が入っている」「メールアドレスの形式として正しい」といった条件を満たしたときに反応します。

ルールに合格したときに枠線を緑色にしたり、チェックマークを表示させたりすることで、ユーザーは「これで大丈夫だ」と安心して送信ボタンを押すことができます。このように、ユーザーを安心させる設計は、サイトの信頼性を高める上で非常に重要です。


<style>
    /* 入力内容が正しい（valid）ときのスタイル */
    .input-check:valid {
        border: 2px solid #28a745;
        background-color: #f1f8f1;
    }
</style>

<div class="p-3">
    <label>お名前（必須）：</label>
    <input type="text" class="input-check" required placeholder="文字を入力してください">
</div>

ブラウザ表示

お名前（必須）：

3. invalidセレクタで間違いをリアルタイムに指摘する

対してinvalidは、入力内容がルールに違反しているときに適用されます。メールアドレスの形式が間違っていたり、必須項目が空のままだったりする場合に反応します。このとき、枠線を赤くしたり、背景に薄い赤色を敷いたりすることで、直感的に「修正が必要な場所」をユーザーに伝えることができます。

プログラミング未経験の方でも、「間違っている＝赤色」という共通の認識を利用することで、操作に迷わないデザインを作ることができます。ただし、最初から真っ赤だとユーザーが威圧感を感じてしまうこともあるため、使い所を考えるのもプロの技の一つです。


<style>
    /* 入力内容が間違っている（invalid）ときのスタイル */
    .mail-check:invalid {
        border: 2px solid #dc3545;
        background-color: #fff5f5;
    }
</style>

<div class="p-3">
    <label>メールアドレス：</label>
    <input type="email" class="mail-check" value="invalid-email" placeholder="example@mail.com">
    <p class="small text-muted">アットマークがないのでエラーになります。</p>
</div>

ブラウザ表示

メールアドレス：

4. 電話番号や数字の桁数をチェックする応用設定

バリデーションは、特定の形式だけでなく、「文字数」や「数字の範囲」をチェックすることも可能です。HTML側でminlength（最小文字数）やpattern（特定の形式）を設定しておけば、それに連動してCSSがvalidかinvalidかを判断してくれます。

例えば、電話番号の入力欄で「10文字以上でないとエラー」といった設定をした場合、入力が足りない間は赤く表示され、規定の文字数を超えた瞬間に緑色に変わるような動きが作れます。こうしたリアルタイムな反応は、ユーザーにとって非常に使いやすく、入力の手間を減らすことに繋がります。


<style>
    /* 8文字以上12文字以下のルールに合わない場合 */
    .tel-input:invalid {
        border: 2px solid #ffa500;
    }
    /* ルールに合格した場合 */
    .tel-input:valid {
        border: 2px solid #28a745;
    }
</style>

<div class="p-3">
    <label>電話番号（ハイフンなし）：</label>
    <input type="tel" class="tel-input" pattern="[0-9]{10,11}" placeholder="09012345678">
    <p class="small">10桁から11桁の数字を入力してください。</p>
</div>

ブラウザ表示

電話番号（ハイフンなし）：

5. プレースホルダー表示中にはスタイルを当てないコツ

必須項目（required）を設定すると、ページを開いた直後の何も入力していない状態でも、いきなり「invalid（未入力エラー）」と判断されて赤くなってしまうことがあります。これでは、ユーザーをいきなり怒っているようで不親切です。

これを回避するために、placeholder-shown（プレースホルダー・ショーン）という機能を併用することがよくあります。これは「まだ何も書かれていないとき」を指す状態で、これを利用することで「入力を始めた後に、間違いがあれば赤くする」といったスマートな挙動を実現できます。こうした細かい調整が、プロのデザインと初心者のデザインの分かれ目になります。

6. アイコンを自動で切り替える視覚的おもてなし

色を変えるだけでなく、CSSの疑似要素（::afterなど）を使ってアイコンを表示させると、さらに効果的です。合格したら「OK」のマーク、不合格なら「×」のマークを表示させることで、視覚的に訴えかける力が強まります。

アクセシビリティ（どんな人でも使いやすいこと）の観点からも、色だけに頼らずに「形」や「マーク」で情報を伝えることは非常に大切です。色の見え方が異なる方や、小さな画面で見ている方にとっても、マークによる判定は大きな助けとなります。SEO対策においても、このような使いやすさ（UX）の向上は非常にポジティブな要素として働きます。


<style>
    /* 成功時に緑色の影をつける */
    .status-check:valid {
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
    }
    /* 失敗時に赤色の影をつける */
    .status-check:invalid {
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
    }
    .status-check {
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }
</style>

<div class="p-3">
    <label>ユーザーID（英数字5文字以上）：</label>
    <input type="text" class="status-check" pattern="[A-Za-z0-9]{5,}" required>
</div>

ブラウザ表示

ユーザーID（英数字5文字以上）：

7. 送信ボタンと連動させて操作性を向上させる

バリデーションの状態は、入力欄だけでなく他の要素と組み合わせることもできます。例えば、フォーム全体が「valid（すべて正しく入力された）」状態になるまで、送信ボタンをクリックできないようにしたり、色を変えて目立たなくさせたりすることが可能です。

これは、以前は複雑なプログラミングが必要だった動作ですが、最新のCSSでは簡単な記述で実現できるようになってきています。不完全な内容で送信ボタンを押してしまうミスを物理的に防ぐことができるため、システムへの不要な負担を減らし、ユーザーの手間も省けるという一石二鳥の効果があります。

8. 入力チェックが効かない時の確認ポイント

設定したはずのバリデーションが動かないときは、HTML側の設定をまず確認しましょう。特にtype="email"やtype="tel"のように、入力の種類を正しく指定しているかが重要です。ただのtype="text"にしていると、メールアドレスの形式チェックなどは働かないからです。

また、requiredという単語を書き忘れていないかもチェックしましょう。これは「必須」という意味の言葉で、これがついていないと、空欄の状態は「ルール違反ではない」と判断され、valid扱いになってしまいます。一つひとつの単語の意味を理解しながら、丁寧にコードを書いていきましょう。

9. 今後のサイト制作に活かせるバリデーションの重要性

今回学んだvalidとinvalidは、ただ色を変えるだけの機能ではありません。サイトを訪れるユーザーとの「対話」を助ける大切なツールです。正しい入力には称賛の意を込めて明るい色を、間違いには優しく注意を促す落ち着いた赤色を。こうした配慮ができるようになると、あなたの作るサイトは格段に魅力的になります。

検索エンジンのGoogleも、「ユーザーが使いやすいサイト」を非常に高く評価します。バリデーションを適切に設定し、入力ミスを最小限に抑える工夫をすることは、結果としてSEO対策を強化することにも繋がるのです。初心者の方も、まずは自分の作ったフォームを触ってみて、色が切り替わる楽しさを実感しながら学習を進めてみてくださいね！

2026年最新スキルアップ・実践セミナー