【CSS Modules】:active疑似クラスの使い方
:active疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:activeクラスは、ユーザーがウェブページの要素を「アクティブ化」している状態を表すクラスです。このアクティブ化とは、主にマウスボタンのクリックや、タッチデバイスでのタップなど、要素を操作するために押下している間の瞬間を指します。
例えば、ボタンやリンク、フォームの入力欄などのインタラクティブな要素に対して、ユーザーがクリックしたりタップしたりしている最中にこのクラスが適用されます。これにより、要素が操作されていることを視覚的にフィードバックするためのスタイル（背景色の変更、文字色の変化、境界線の調整など）を定義できます。ユーザーがマウスボタンを離すか、指を画面から離すと、アクティブ状態は解除され、:activeによるスタイルは元の状態に戻ります。
このクラスは、要素が押されている間という一時的な状態を表現するため、ユーザーインターフェースの使いやすさを向上させる上で非常に重要です。クリックやタップの反応を明確に伝えることで、ユーザーは自分の操作が正しく認識されていることを理解しやすくなります。ただし、ブラウザやデバイスによっては、マウスボタンの押下から解放までのごく短い時間だけ適用されるため、その効果が瞬間的であることに留意してください。
公式リファレンス: :active
構文(syntax)
1セレクタ:active { 2 /* スタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません