目的
- HTMLファイルの要素をクリックした時だけ見た目が変化したりする設定方法をまとめる。
押さえるポイント
- クリックしたときに変化させたい要素やクラスをCSSファイルで指定する際に「要素名かクラス名:active」と指定する。
- 必要な情報は①「クリックされた時に変化させたい要素かクラス名」と②「クリックした時どのように変化させたいか(文字の色を変えたい、背景色を変えたいなど)」
書き方の例
- 下記にCSSファイルの内容を記載する。
要素の名前かクラス名:active {
クリックされた時の要素をどのように変化させたいかの設定
}
より具体的な例
- button要素がクリックされた時に背景色をredに設定する。
- 下記にHTMLファイルの内容を記載する。
<button>新規登録</button>
- 下記にCSSファイルの内容を記載する。
button:active {
background-color: red;
}