CSSでマウスをクリックしている間だけイベントを発生させる方法/:active擬似クラスの使い方

CSSでは、JavaScriptを使わないでもマウスをクリックして「選択」している間だけイベントを発生させることが可能です。ここでは:active擬似クラスについて解説しています。

:active擬似クラスの使い方

まずは完成品です。

ボタンを押している間だけ文字が赤くなると思います。:active擬似クラスの使い方は簡単で、セレクタの後ろに「:active」と付けるだけです。:hoverとかと同じです。

上のコードで言えば、次のようになります（ここでは便宜的にinputタグ全てに適用していますが、ボタンを複数使う場合などはクラス名などで指定してください）。

/*CSS*/
input:active{
color:red;
}

という具合です。このへんの擬似クラスの何が素晴らしいって、CSSがわかった時点で覚えるだけでやれることの幅が大きく広がることですね。

あるいは画像に使ってみたり、

いろんな遊び方が考えられます。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27