こんにちは！Web制作の世界へようこそ。フロントエンドの現場を長年歩んできたチーフアーキテクトの私ですが、今回はCSSのちょっとマニアックだけど実はとっても優しい子、`:optional`（オプショナル）疑似クラスについてお話しさせてください。

CSSのセレクタって、最初は覚えることが多くてめまいがしますよね。「`.class`？ `#id`？え、なになに、疑似クラスってなにそれ美味しいの？」なんて思っていませんか？大丈夫ですよ、一歩ずつ紐解けば、CSSはあなたの最高の相棒になってくれます。

今回は、フォーム（お問合せ入力欄など）でよく見かける「必須（required）」の影に隠れがちだけど、知っているとデザインの幅がグッと広がる`:optional`の秘密を、一緒に覗いてみましょう！

—

1. そもそも `:optional` ってどんな子？

お買い物をしている場面をちょっと想像してみてください。
ネット通販の会員登録フォームなどで、入力欄の脇に小さく赤字で「※必須」と書かれているものがあれば、反対に、何も書いていない、あるいは薄く「（任意）」と書かれている項目もありますよね。

Webの裏側（HTML）の世界でも同じです。
「ここは絶対に書いてもらわないと困る！」という場所には `required` という属性をつけて、「ここは書いても書かなくても、どっちでもいいよ〜」という場所には、この `required` をつけません。

この「required（必須）がついていない、お気楽な自由入力欄たち」を、CSS側から一網打尽に指名してスタイルを当ててくれる魔法の合言葉、それが `:optional` 疑似クラスなんです。

言葉のイメージとしては、

`:required` ＝「絶対にこっち見て！」と主張するアピールっ子
`:optional` ＝「まあ、気が向いたときでいいよ〜」とのんびり屋のマイペースっ子

こんな感じです。愛おしくなってきませんか？

—

2. なぜ `:optional` を使うの？（実務でのリアルな話）

「必須じゃないなら、わざわざCSSで指定しなくても、デフォルトのままでいいじゃん」って思いますよね。その通り、何もしなくてもフォームは動きます。

でも、現場のプロがなぜこの `:optional` をわざわざ使うのか？
それは、「ユーザーに優しく、今どこを入力しているのかが一目でわかる親切なUI（ユーザーインターフェース）を作るため」です。

たとえば、次のようなデザインをしたくなったとします。

必須の項目には、ちょっと引き締まったデザインを適用する。
任意の（optionalな）項目には、「ここは書いても書かなくてもいいんだな」とユーザーがひと目で安心できるように、優しい色味の枠線にしておく。

これを一つひとつクラス名（`class=”any-input”` など）をつけて管理しようとすると、HTMLを書く人がうっかりクラスを付け忘れたりして、後々バグの温床になります。
しかし、HTMLの構造（属性）をCSSが直接読み取ってくれる `:optional` を使えば、「HTMLに余計なクラス名をゴチャゴチャ書かなくても、CSSだけで自動的にスタイリングを振り分けてくれる」という、メンテナンス性の高い美しいコードが実現できるんです。これぞプロの技！

—

3. 実際にコードを書いてみましょう

百聞は一見にしかず。実際に手を動かしてみましょう。
以下のコードを、あなたのエディタ（VS Codeなど）にそのまま貼り付けて、ブラウザで開いてみてください。

:optional 疑似クラスの優しい世界

お問合せフォーム（テスト）

`:optional` がどのように動くか見てみましょう。

コードの解説とポイント

ブラウザで確認できましたか？
「お名前」の欄には `required` がついているため、`:optional` のルールは適用されません。
一方で、「ニックネーム」や「ご意見・ご感想」の欄には `required` がついていないため、`:optional` がこっそり適用され、スチールブルーの優しい枠線が引かれています。

ここで、「あれ？必須のほうはどうやってスタイリングするの？」と気になった方はセンス抜群です！
必須のほうをスタイリングしたいときは、おなじみの兄弟である `:required` 疑似クラス を使ってあげればバッチリですよ。

/ 必須の項目は少し強調したい場合 /
input:required {
border-color: #ffb6c1; / 淡いピンクの枠線にするなど /
}

—

4. 初学者がつまずきやすいポイントと「大丈夫だよ」のフォロー

CSSを学び始めたばかりの頃は、こういうセレクタを見ると「覚えるのが大変だ……」と身構えてしまいますよね。でも、安心してください。全部を一度に暗記する必要なんて1ミリもありません。

ここで、よくある「あ、やっちゃった！」を防ぐための注意点をいくつかシェアしておきますね。

1. 「何も書いていない＝optional」というルールを忘れてしまう
HTMLを書くときに、`required` 属性を書き忘れただけで、その入力欄は勝手に `:optional` 扱いになってしまいます。「あれ？なんでこの入力欄、勝手にデザインが変わっちゃうんだろう？」と思ったときは、HTML側に `required` が抜けていないか、逆に余計な属性がついていないかを疑ってみてください。
2. ブラウザのデフォルトスタイルに負けちゃうときがある
SafariやChromeなどのブラウザは、デフォルトでフォームに独自の可愛い（あるいは邪魔な）影や線をつけたりします。もし「`:optional` を書いたのに見た目が変わらない！」というときは、`border` や `background-color` を明示的にリセット（上書き）してあげると、素直に言うことを聞いてくれるようになりますよ。

—

おわりに：小さな積み重ねが、あなたをプロにする

今回は、ちょっと地味だけど実はすごく気が利く `:optional` 疑似クラスについて解説しました。

Web制作やフロントエンドの世界は、こうした「小さな便利機能」の積み重ねでできています。
「こういう細かいところまで綺麗にコントロールできるんだ！」という発見を楽しみながら、少しずつあなたの引き出しを増やしていってくださいね。

今日書いたコードをベースに、色を変えてみたり、パディングをいじってみたり、自由に遊んでみてください。
あなたのコーディングライフが、もっと楽しく、もっとワクワクするものでありますように！チーフアーキテクトの私から、心いっぱいのエールを送ります。それではまた！

【入門編】 :optional 疑似クラス – CSS実践ガイド