こんにちは！フロントエンド・チーフアーキテクトの私です。
日々、数々のCSSコードと格闘していますが、今回はWeb制作の入り口で誰もが一度はつまずく（そして「おっ、これ便利だな！」と感動する）CSSの魔法、`:required` 疑似クラスについてお話ししますね。
CSSを学び始めると、`color`を変えたり、背景をかっこよくしたりすることに夢中になりますよね。でも、いざお問い合わせフォームや会員登録画面を作ろうとしたとき、「あれ、必須項目のところだけ色を変えたいんだけど、どうすればいいの……？」と手が止まってしまうことはありませんか？
大丈夫ですよ、安心してください。そんなあなたの救世主となるのが、今回ご紹介する `:required` 疑似クラスです。複雑なJavaScriptなんて使わなくても、CSSの力だけで「ここ、絶対に書いてね！」という場所を優しく、あるいはちょっとピリッと教えてあげられるんです。
一緒に、身近な例から紐解いていきましょう！
—
1. カフェの注文票で考えてみよう
想像してみてください。街のちょっとおしゃれなカフェに入って、オーダーシート（注文票）に記入するとします。
そこには、「お名前（任意）」と書かれた欄もあれば、ドリンクの種類を選ぶ「※（必須）」と書かれた赤字の欄もありますよね。お店側としては、「名前は書いてなくてもいいけど、何の飲み物を頼むかは絶対カフェラテなのか紅茶なのか書いてくれないと困る！」わけです。
Webサイトのフォームもこれと全く同じです。
「この項目は絶対に埋めてほしい！」というお約束がHTML側についているとき、CSSくんはそれをどうやって見分ければいいのでしょうか？
そこで登場するのが、HTMLの `required` という属性です。「このお部屋には必ず何か入れてね」という合図ですね。
そして、その合図がついている要素（inputやtextareaなど）を、CSSが「おっ、君は必須だな！」とピンポイントで見つけ出すためのセンサーが、今回主役の `:required` 疑似クラス なんです。
—
2. `:required` ってどうやって書くの？
使い方は拍子抜けするほどシンプルです。
基本の形はこうです。
/ 必須マークがついている入力欄にスタイルを適用する /
input:required {
/ ここにスタイルを書きます /
}
「これだけ？」って思いました？そう、これだけなんです。
でも、これだけだと「ただの枠線」になってしまうので、もう少し実務で使える実践的なコードを見てみましょう。
実践！優しくエスコートする入力フォームのコード
実際にコピーして、ご自身のブラウザやCodePenなどで試せるコードを用意しました。HTMLとCSSをセットで見てみましょう。
【HTML】
【CSS】
/ フォーム全体の基本の見た目 /
.form-group {
margin-bottom: 20px;
font-family: sans-serif;
}
label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border: 2px solid #ccc; / 普段の枠線は落ち着いたグレー /
border-radius: 4px;
font-size: 16px;
}
/ ==========================================
ここからが本領発揮！ :required の出番です
================================———- /
input:required {
/ 必須の入力欄だよとわかるように、ちょっとだけ左側の線を太くしたり色を変えたりするテクニック /
border-left: 6px solid #ff6b6b; / 優しく注意を促すコーラルピンク /
background-color: #fff9f9; / 背景もほんのり薄いピンクにして優しさを演出 /
}
このコードをブラウザで覗いてみてください。「メールアドレス」のほうだけ、ふんわりとピンク色の背景になり、左側に可愛い目印の線がつきます。
「あ、ここ打たなきゃいけないんだな」って一目でわかりますよね。ユーザーへの最高の思いやりです。
—
3. 初学者がよくつまずく「落とし穴」と、プロの優しさ
ここで、CSSを学び始めたばかりの方がよくハマる「あるあるな罠」についてお話ししておきますね。
罠：「ページを開いた瞬間、全部の必須項目が真っ赤になって怒られたんですけど……！」
実は、`:required` をそのまま使うと、ユーザーがまだ何も入力していない（ページを開いたばかりの）状態でも、容赦なくスタイルが適用されてしまいます。
まだキーボードに指も触れていないのに、いきなり「ここ書いてないよ！」と真っ赤なエラーカラーで怒られているような見た目になると、ユーザーはちょっとビクッとしてしまいますよね。これでは優しくありません。
解決策： `:user-invalid` や `:invalid` と組み合わせる、あるいは偽りのないアプローチ
もちろん、`:invalid` などを組み合わせて「何か入力されたけれど、間違っている or 空欄のとき」を狙う高度なテクニックもありますが、初学者のうちはこう考えてみてください。
> 「`:required` は、『ここは必須項目です』という目印（教えてあげるサイン）として使おう。エラーの色（赤色など）で怒るのではなく、『ここに入力してね』と案内する優しい色（例えば薄いブルーや、控えめなアイコン的な装飾）にするのがコツだよ」
最初から「怒る」デザインにするのではなく、「エスコートする」デザインにする。これが、現場のプロがこっそり意識しているユーザー体験（UX）の秘訣です。
—
4. まとめ
いかがでしたでしょうか？
`:required` 疑似クラスは、HTMLの `required` というバトンを受け取り、CSSの世界で「この項目をユーザーに優しく教えてあげよう」と手助けしてくれる、とっても頼もしい相棒です。
- HTMLに `required` を書く：ここが必須だよとブラウザとCSSに教える。
- CSSに `:required` を書く：必須の場所だけに、特別なメイク（デザイン）をしてあげる。
この2つが揃うだけで、あなたの作るWebサイトは、ただの「情報の塊」から「ユーザーに優しい思いやりのある空間」へと一気に生まれ変わります。
最初は難しく感じるかもしれませんが、手を動かしてブラウザの画面が変わった瞬間を見るのは、フロントエンド開発の何よりの醍醐味です。
焦らず、あなたのペースで、楽しんでコードを書いていってくださいね。応援しています！
コメント