擬似クラスとは？hoverやfocusで変化するCSSの基礎

擬似クラスとは何か

擬似クラスは、要素の状態や位置に応じてスタイルを当てるための仕組みです。HTMLにクラスを書き足さなくても、「カーソルが乗っているとき」「選択されているとき」といった状況を条件にできます。

セレクタの後ろにコロンと状態名を付けて書きます。利用者の操作に反応する動きを、JavaScriptを使わずCSSだけで表現できるのが特徴です。

よく使う擬似クラス

代表格がhoverです。マウスカーソルが要素の上にあるときにスタイルが適用され、ボタンやリンクの反応を作るのに使われます。

focusは入力欄などが選ばれているとき、activeはクリックされている瞬間に当たります。これらを組み合わせると、操作の手応えが伝わる自然なインターフェースになります。

実務ではどこで関係する？

擬似クラスは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

擬似クラスについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

アクセシビリティとfocus

focusはマウス操作だけでなく、キーボードでの操作にも深く関わります。Tabキーで項目を移動する利用者にとって、今どこを選んでいるかが分かることはとても重要です。

見た目を整えるためにfocusの枠線を消してしまうと、キーボード利用者が現在地を見失います。デザインと操作のしやすさの両立を意識して、状態が分かる表示を残すことが大切です。

擬似クラスを使う手順

ボタンにカーソルを乗せたときの変化を付ける基本的な流れを示します。

1. スタイルを変えたい要素にまず通常時のスタイルを当てる
2. 同じセレクタにコロンとhoverを付けた指定を追加する
3. hover時に変えたい色や背景などを書く
4. 必要に応じてfocusやactiveの状態も同様に追加する
5. マウスとキーボードの両方で動きを確認する

やりすぎに注意

状態に応じた変化は操作感を高めますが、変化が大きすぎたり多すぎたりすると、かえって読みづらく落ち着かない印象になります。色や影をほんの少し変える程度でも十分に手応えは伝わります。

また、スマホなどタッチ操作の端末ではhoverが効きにくい点にも注意が必要です。hoverだけに頼らず、見て分かる表示と組み合わせて設計するとよいでしょう。

操作感を実機で確認したいとき

hoverやfocusの動きは、コードを眺めるだけでは伝わりません。実際にマウスを乗せ、キーボードで操作して初めて感触が分かります。関係者にも触って確かめてもらいたい場面です。

ギガサイト便はHTMLやCSSを含むZIPをドロップすると共有URLを発行でき、URLを開けばその場で操作を試せます。同じURLのまま中身を差し替えられるので、調整した版をすぐ共有し、動きの感触をフィードバックしてもらえます。