【CSS】:activeとは？ ～クリックした時だけ効果を発揮させる方法～
【CSS】:activeの解説です。読み方は「アクティブ」
クリックした時だけ、効果を発揮させる方法を知りたい方はこちらで解決します💡
スポンサードサーチ
【CSS】:activeとは？ ～クリックした時だけ効果を発揮させる方法～
具体的に解説していきます。
【実例】:activeはこう打てば、こうなる
☝これは、黒い背景に白い文字を表示してある状態です。
例1）文字の色を変化させる
☝このように、文字を表示しているh1タグに、「:active」をつけてCSSをあてると、クリックした時に
☟このようになります。
例2）背景色を変化させる
☝このように、文字を表示しているグループである、「top」と名付けたdivタグに、「:active」をつけてCSSをあてると、クリックした時に
☟このようになります。
【特徴】:activeの持つ特徴
●他のCSSとは違い、指定した要素の中に打ち込むのではなく、指定した要素に対して打ち込むCSSです。
【注意】:activeを使う時に起こりやすいミスの事例
●画像の通りですが、;activeの前はスペース等が入らないので、注意。
:activeに似た効果を持つCSS
hover・・・カーソルが乗った時だけ効果を発揮する方法