こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSの仕様書って、時々すごく冷たく感じませんか？「〇〇を選択する擬似クラス」なんて一言で片付けられてしまうと、初心者さんは「で、それの何が嬉しいの？ どこで使うの？」って途方に暮れてしまいますよね。
大丈夫ですよ、安心してください。今日は、CSSのちょっとマイナーだけど知っているとすごくスマートになれる仲間、`:optional`（オプショナル）擬似クラスについて、一緒にゆっくり紐解いていきましょう。難しいことは抜きにして、私たちの身近なお買い物や書類書きのイメージから優しくお話ししますね。
—
1. そもそも `:optional` ってどんな子？
Webサイトを作っていると、お名前やメールアドレスを入力してもらう「お問い合わせフォーム」によく出会いますよね。その中には、「ここは絶対に書いてね！（必須項目）」というものと、「気が向いたら教えてね（任意項目）」というものがあります。
HTMLを書くとき、必須の入力欄には `required` という魔法の言葉を仕込みます。
では、逆に「任意（書いても書かなくてもいいよ）」の入力欄はどうでしょう？
実は、HTMLには「これは任意です」とわざわざ書くための `optional` という属性は存在しません。HTMLの世界では、「`required` がついていない入力欄」は、自動的に「任意のもの」として扱われるルールになっているんです。
じゃあ、CSSで「必須の入力欄と、任意の入力欄でデザインを変えたいな」と思ったとき、どうすればいいでしょう？
「`required` がついていないやつを選びたい……」そんなわがままをそっと叶えてくれるのが、今回主役の `:optional` 擬似クラス なんです！
イメージとしては、カフェのアンケート用紙みたいなものです。
「 お名前（任意）」と書いてある欄には、ペンがスッと置かれていても、空白のままでも怒られませんよね。あの「いつでも自分のペースで書いていいよ」という自由な空気感を、CSSでパッと視覚的に表現してあげられるのが `:optional` なんです。
—
2. 具体的にどうやって使うの？
百聞は一見に如かず。実際にコードを見てみましょう。
今回は、とってもシンプルな「お名前（必須）」と「ご意見（任意）」のフォームを用意しました。
ここに、ちょっとしたお化粧（CSS）を施してみましょう。
/ 必須の入力欄は、キリッとした青色の枠線にする /
input:required,
textarea:required {
border: 2px solid #3182ce;
background-color: #ebf8ff;
}
/ 任意の入力欄は、優しいグレーの枠線で「どっちでもいいよ」感を出す /
input:optional,
textarea:optional {
border: 2px solid #e2e8f0;
background-color: #f7fafc;
}
これだけで、必須の欄は「しっかり書いてね！」という青いオーラをまとい、任意の欄は「無理しないでリラックスして書いてね」という優しいグレーの佇まいになります。
—
3. 実務で役立つちょっとしたコツ（つまずきポイントのフォロー）
ここで、CSSを触り始めたばかりの人が「あれ？」とつまずきやすいポイントをこっそりシェアしておきますね。
つまずきポイント：「何も属性をつけていないのに、 `:optional` が反応しちゃった！」
例えば、こういう普通のテキストボックスを作ったとします。
これ、実は `required` 属性がついていませんよね。ということは、ブラウザからは「あ、これ任意（`:optional`）の入力欄ね」と自動判定されます。
そのため、「まだ何もデザインを指定してないつもりなのに、勝手に `:optional` のスタイルが当たって枠線が変わっちゃった！」と慌ててしまうことがあります。
【解決のコツ】
焦らなくて大丈夫ですよ。もし「特定の入力欄だけにスタイルを当てたい」ときは、クラス名（`class=”optional-input”` など）を一緒に組み合わせてあげると、狙った子だけを正確にスタイリングできるようになります。
/ クラス名と組み合わせることで、意図しない誤爆を防げます /
input.my-custom-box:optional {
background-color: #fff;
}
—
4. まとめ：おもてなしの心をCSSに込めて
`:optional` は、派手なアニメーションをさせたりする機能ではありません。でも、Webサイトを訪れたユーザーに対して、「ここは無理に書かなくても大丈夫なところですよ」という優しい目印をそっと教えてあげるための、とても思いやりのあるセレクタです。
フォームの入力って、ユーザーにとっては少しだけエネルギーを使う作業です。「どこが必須で、どこが任意なのか」がパッと見て一瞬で伝わるデザインにしてあげるだけで、そのサイトの使い心地（UX）は何段階もグッと良くなります。
今日からあなたの作るWebページにも、この `:optional` を取り入れて、ユーザーに優しい「おもてなし空間」を作ってみませんか？
それでは、また次の現場でお会いしましょう！チーフアーキテクトの私でした。あなたのコーディングライフを応援しています！
コメント