こんにちは！Web制作やCSSの勉強、毎日お疲れ様です。
画面いっぱいにコードを書いて、「よし動いた！」と思った矢先、なぜかデザインが崩れたり、思い通りにスタイリングできなかったり……。CSSって、最初は本当に奥が深くて、心が折れそうになりますよね。
「これであってるのかな？」と不安になることもあるかもしれませんが、大丈夫です。今日お話しする内容をマスターすれば、フォームのデザインが一気にプロっぽくなり、あなたの引き出しが確実に一つ増えますからね。
今回は、Webフォームを作るうえで絶対に避けて通れない、「必須項目」と「任意項目」をCSSだけでスマートに色分けする魔法の機能についてお話しします。
—
そもそも、なんで「必須」と「任意」を色分けするの？
ネットでお買い物をしたり、会員登録をしたりするときによく見かける「お名前」や「メールアドレス」の入力欄。あそこに「※必須」とか「（任意）」って書いてありますよね。
あれ、ユーザーの立場になって考えてみてください。
パッと見て「どこを絶対に入力しなきゃいけないのか」が分からないフォームって、入力していて地味にストレスになりませんか？「うわ、全部書かないとダメなやつ？ めんどくさ……」って途中でページを閉じちゃった経験、あなたにもありませんか？
だからこそ、「ここだけは絶対書いてね（必須）」と「書かなくてもいいけど、教えてくれたら嬉しいな（任意）」を、視覚的にパッと分かりやすくしてあげるのが、優しいWebデザインの第一歩なんです。
昔は、これをするためにHTMLにわざわざ `class=”required”` なんてクラス名をいちいち書いて、JavaScriptでゴリゴリ制御したりしていました。……ぶっちゃけ、面倒くさかったですよね。
でも、安心してください。現代のCSSには、HTML側を汚さなくてもブラウザが勝手に判断してスタイリングしてくれる、すごい擬似クラス（条件を指定する仕組み）が用意されているんです。
それが、今回主役の `:required` と `:optional` です！
—
`:required` と `:optional` って、ぶっちゃけどんなやつ？
イメージしやすいように、身近な例えでお話ししますね。
- `:required`（リクワイアード）
- これは、学校の「提出必須の宿題」みたいなものです。出さないと先生に怒られるやつ（笑）。
- HTMLのinputタグに `required` という属性がついている要素（＝必須項目）を、CSSが「お、これだな！」と自動で見つけてくれます。
- `:optional`（オプショナル）
- こちらは、夏休みの「自由研究」みたいなもの。出しても出さなくても、あなたの自由です！
- HTMLに `required` がついていない要素（＝任意項目）を、CSSが「こっちは任意だね」とこっそり見つけてくれます。
つまり、あなたがHTMLに「これは必須！」とマークアップしておけば、CSSが勝手にその看板を見つけて「じゃあ、この子にはこういうお化粧をしてあげよう」と動いてくれるわけです。最高に賢いアシスタントだと思いませんか？
—
実際にコードを書いて、動きを見てみよう！
百聞は一見にしかず。実際に手を動かして、どんな風に動くのか確認してみましょう。
以下のコードをコピーして、ご自身の環境（CodePenやメモ帳など）で試してみてくださいね。
HTMLのコード
CSSのコード
/ フォーム全体のちょっとしたお化粧 /
body {
font-family: sans-serif;
padding: 40px;
background-color: #f7f9fa;
}
.form-group {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc; / 普段の枠線は普通の灰色 /
border-radius: 4px;
}
/ ——————————————
ここからが本番！ :required と :optional の出番
—————————————— /
/ 1. 必須項目（required）のときのスタイル /
input:required {
border-color: #ff6b6b; / パッと目を引く赤っぽいピンクの枠線に！ /
background-color: #fff5f5; / 背景もうっすら赤くして「ここ大事！」をアピール /
}
/ 2. 任意項目（optional）のときのスタイル /
input:optional {
border-color: #4dabf7; / 優しい青空色の枠線に！ /
background-color: #f8f9fa; / 背景は落ち着いた薄いグレー /
}
どうでしょう？
HTML側には特別なクラス名なんて一切書いていないのに、`required` があるかないかだけで、CSSが自動的に色を塗り分けてくれましたよね。
「あれ、でもこれだと、ページを開いた瞬間から全部の色が変わっちゃうから、まだ何も入力してないのに赤くてちょっとドキドキしない……？」
そう思ったあなたは非常に鋭い！実務の現場でも、「最初から真っ赤っかだとユーザーがプレッシャーを感じちゃう」という理由で、少し工夫を加えることがよくあります。
—
現場でよく使う！ちょっと実践的なテクニック
「まだ何も入力していない（あるいは入力中）」の段階ではなく、「ユーザーが実際に入力したあとの状態（バリデーション結果）」と連動させたいときは、擬似クラスを組み合わせるのがプロの技です。
例えば、「あ、ちゃんと入力できたね（Valid）」や「うわ、未入力なのに次に行こうとしちゃった（Invalid）」という状態をCSSでキャッチできます。
/ 必須項目だけど、まだ何も入力されてなくて、かつ送信ボタンを押されたりしてエラーのとき /
input:required:invalid {
border-color: #d9534f;
/ ここにエラー時のスタイルを書くよ /
}
/ 必須項目で、ちゃんと正しい形式で入力されたとき！ /
input:required:valid {
border-color: #5cb85c; / 安心の緑色！ /
}
このように、CSSはただ見た目を飾るだけでなく、ユーザーの「今、どういう状態か」というストーリーに寄り添うことができるんです。
—
つまずきやすいポイントと、そっと伝えたいアドバイス
初心者の頃、私もここでよくハマりました。
「あれ？ CSSを書いたのに、全然色が反映されないよ……？」というときは、大体以下の原因のどれかです。
1. HTMLの書き忘れ
- `:required` を効かせたいのに、inputタグに `required` 属性を書き忘れていませんか？（「`requried`」みたいにスペルミスしていることもよくあります！気を付けて！）
2. 詳細度（ルールの強さ）の負け
- 他のCSS（例えば `#app input` みたいなIDを使った強い指定）に上書きされてしまっている可能性があります。そんなときは少しセレクタを強くしてあげたり、順番を見直してみましょう。
もし思い通りにいかなくても、焦る必要は全くありません。「あ、ブラウザくんが今どっちの状態として認識してるかな？」と、検証ツール（デベロッパーツール）でHTML要素を覗いてみてください。答えは必ずそこにありますからね。
—
おわりに
CSSの `:required` と `:optional`、いかがでしたか？
「HTMLの属性と連動して、CSSが勝手に判断してくれる」という仕組みが分かると、フォームのデザインを組むのが急に楽しくなってきませんか？
Web制作の世界は、こうした「ちょっとした気遣い」の積み重ねです。あなたが書いたたった数行のCSSが、サイトを使う誰かの「入力しやすいな、優しいな」という心地よさに繋がっています。
今日からあなたの作るフォームにも、ぜひこの魔法を取り入れてみてくださいね。
それでは、また次のCSSの冒険でお会いしましょう！あなたのコーディングライフを、心から応援しています。
コメント