User action pseudo-classes

概要

ユーザーアクション擬似クラスはインタラクションの各段階に応じたスタイルを適用します。:hover はマウスオーバー時、:active はクリック中、:focus はフォーカス取得時に適用されます。これらを適切に使用することで、直感的でアクセシブルなインタラクティブUIを構築できます。

対応ブラウザ

基本構文

button:hover { background-color: #eee; }
button:active { transform: scale(0.98); }
button:focus { outline: 2px solid blue; }

実務での使いどころ

• ボタンの操作フィードバック

  ホバー、クリック、フォーカスの各状態で異なるスタイルを適用し、ユーザーに視覚的なフィードバックを提供します。

注意点

アクセシビリティ

• :focus スタイルは必ず視認可能に保ち、outline: none で非表示にしないでください。キーボードユーザーにとって不可欠です。

参考リンク

• MDN Web Docs — User action pseudo-classes