【CSS】疑似クラスの「:active」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの疑似クラスの「:active」の使い方について解説します。

疑似クラスの「:active」って何？？

このような方が対象です。

また、下の動画でも疑似クラスの「:active」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

そもそもCSSの「セレクター」とは何か？

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指します。

ふむふむ。

そもそも「疑似クラス」とは何か？（pseudo-class）

「疑似クラス」とは「要素の状態」の指定をすることができるセレクターです。

「:」コロンから始まるキーワードによって指定します。

また、「疑似クラス」は英語で「pseudo class」です。

「どの要素を選択するか」だけじゃなくて「どんな状態の要素を選択するか」の指定ができることで、指定の幅が広がります。

「疑似クラス」の基本的な使い方について詳しくは下記の記事でまとめています！

「:active」とは何か？

「:active」とはCSSの「疑似クラス」の１つです。

「:active」を使うと何ができる？

div {
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

div:active {
    background-color: pink;
}

「:active」を使うと「ユーザーによってアクティブ化されている状態」を指し示すことができます。

PCなどでマウスが使える場合は「その要素の上でマウスのボタンを押し下げてる状態」がアクティブ化された状態です。

スマホなどの指でタップするデバイスの場合は「その要素に指が触れている状態」がアクティブ化された状態になります。

おお！これはイイね！

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#the-active-pseudo

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:active

あわせて読みたい記事。

まとめ

CSSの「セレクター」とは「どの要素にスタイルを当てるか？」を指定する箇所のことを指す。

「疑似クラス」とは「要素の状態」の指定をすることができるセレクター。

「:」コロンから始まるキーワードによって指定する。

「:active」とはCSSの「疑似クラス」の１つ。

「:active」を使うと「ユーザーによってアクティブ化されている状態」を指し示すことができる。

PCなどでマウスが使える場合は「その要素の上でマウスのボタンを押し下げてる状態」がアクティブ化された状態。

スマホなどの指でタップするデバイスの場合は、「その要素に指が触れている状態」がアクティブ化された状態。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも疑似クラスの「:active」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！