こんにちは！フロントエンドの現場で長年CSSと格闘してきた、ただの「CSSオタク」です。
今日は、フォームのデザインで誰もが一度は「どうやるのが一番スマートなんだろう？」と悩む、「必須項目（required）」と「任意項目（optional）」の装飾についてお話しします。
初心者の頃、僕も「必須項目にはアスタリスク（＊）を付けなきゃ…」と、わざわざHTMLに一つずつ手書きで `` を追加して、管理が地獄になった経験があります。でも、大丈夫。CSSには、そんな苦労を吹き飛ばす魔法のような機能が備わっているんです。
—
フォームは「お店のアンケート用紙」だと思ってください
想像してみてください。あなたは今、カフェでアンケート用紙を渡されました。
- 「お名前」は書いてほしい（必須）。
- 「ご意見・ご要望」は、気が向いた人だけ書いてくれればいい（任意）。
このとき、もし「お名前」の横に赤いアスタリスクがポツンとついていたら、「あ、これは書かなきゃいけないんだな」と直感的にわかりますよね。この「直感」をWebブラウザに教えてあげるのが、 `:required` と `:optional` という疑似クラスです。
これらは、HTMLの `` という記述を、ブラウザが「あ、これ必須項目だね」と読み取って、自動的にCSSに伝えてくれる合図のようなものです。
—
基本の書き方：魔法の「擬似要素」と組み合わせる
CSSで装飾する際、一番便利なのが `::after`（要素の直後に何かを付け加える機能）との組み合わせです。これを使えば、HTMLを汚さずに「必須マーク」を自動生成できます。
/ 必須項目のラベルのうしろに、赤いアスタリスクを自動で付ける /
.field-label:has(+ input:required)::after {
content: ” “;
color: #ff4d4d;
}
/ 任意項目のラベルのうしろに、「任意」という文字をグレーで付ける /
.field-label:has(+ input:optional)::after {
content: ” (任意)”;
color: #999;
font-size: 0.8em;
}
※ `:has()` セレクタを使うと、ラベルの隣にある入力欄の状態を見て「お、これ必須だな」と判断してくれます。最近のモダンなブラウザならバッチリ動く、今の現場のスタンダードです。
—
なぜこの方法が良いのか？
初心者のうちは、つい「HTMLに直接クラスを付けよう」と考えがちです。例えば、`` とかですね。
でも、考えてみてください。もし後から「必須項目のマーク、全部『必須』っていう文字に変えて！」と言われたらどうでしょう？ 全ページ、全箇所のHTMLを修正するのは気が遠くなりますよね。
でも、このCSSの書き方なら、CSSファイルを1行書き換えるだけで、サイト全体のフォームが一瞬で切り替わります。これが「設計する」というプロの視点です。
—
つまずきやすいポイントへのフォロー
「コードを書いたのに、なぜか反応しない！」と焦ることもあるかもしれません。そんな時は、ここをチェックしてみてください。
1. HTMLに `required` 属性はついていますか？
CSSはあくまで「HTMLの属性」を見て判断します。`` だけ書いても、ブラウザはそれが必須か任意か判断できません。必ず `` と書いてあげてくださいね。
2. セレクタの親子関係は合っていますか？
`:has()` セレクタは、「親が子を覗き込む」ような書き方です。もしうまくいかない時は、HTMLの構造（ラベルと入力欄が兄弟関係にあるか）を見直すと、意外とすんなり解決したりします。
—
最後に：CSSは「あなたの代わりに働いてくれる相棒」
CSSを書くときは、「自分が手作業で修正しなくて済む方法はないかな？」と常に考えてみてください。
`:required` や `:optional` を使ってフォームを制御するのは、単に見た目を整えるだけではありません。「ユーザーがどこを入力すべきか迷わないようにする」という、思いやりのあるデザインを作るための第一歩です。
難しく考えすぎなくて大丈夫。まずは今日のコードをエディタにコピペして、手元のブラウザで動かしてみてください。「おっ、自動でついた！」という小さな感動が、あなたのスキルを確実に引き上げてくれます。
何か行き詰まったら、またいつでも聞きに来てくださいね。応援しています！
コメント