~パンピーサラリーマンの為の人生逆転ブログ~

【CSS】:activeとは? ~クリックした時だけ効果を発揮させる方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】:activeとは? ~クリックした時だけ効果を発揮させる方法~

HTML&CSS

【CSS】:activeの解説です。読み方は「アクティブ」
クリックした時だけ、効果を発揮させる方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】:activeとは? ~クリックした時だけ効果を発揮させる方法~

具体的に解説していきます。

【実例】:activeはこう打てば、こうなる

☝これは、黒い背景に白い文字を表示してある状態です。

例1)文字の色を変化させる

☝このように、文字を表示しているh1タグに、「:active」をつけてCSSをあてると、クリックした時に
☟このようになります。

例2)背景色を変化させる

☝このように、文字を表示しているグループである、「top」と名付けたdivタグに、「:active」をつけてCSSをあてると、クリックした時に
☟このようになります。

【特徴】:activeの持つ特徴

●他のCSSとは違い、指定した要素の中に打ち込むのではなく、指定した要素に対して打ち込むCSSです。

【注意】:activeを使う時に起こりやすいミスの事例

●画像の通りですが、;activeの前はスペース等が入らないので、注意。

:activeに似た効果を持つCSS

hover・・・カーソルが乗った時だけ効果を発揮する方法