みなさん、Webサイトを見ていて「リンク」にマウスを乗せた時、ポインター（マウスの矢印）が”指の形”に変わるの、見たことありますよね。
実はあの「指マーク」、マウスを乗せたという“状態”に反応して、見た目が変わっているんです。
でも、HTMLのコードを見ても「指マークになるよ」なんて書いてありません。
じゃあ、どうして変わるの？
それは、CSSが「マウスが乗った状態」を見つけて、自動でデザインを変えているからです。
このように「ある状態の時だけ見た目を変えるCSSの機能」を擬似クラスといいます。
指マークになるだけ
ここに→マウスを乗せると指のマークになる！
上の文章はマウスを乗せると指マークになり、クリックすると、リンク先へ移動します。
＊この記事を読んでから学習すると理解が深まりますよ。
では、実際にコードを書いてみましょう！下の図と同じようにhtmlとCSSコードを書きます。
CSSの中の cursor : pointer ; これが指マークになるデザイン指定です
web表示させ、ボタンの上にカーソルを乗せると、指マークになります
もっと変化をつけたい！指マークになるだけではなく、色も変えたい！と欲張りたい時に使うのが、擬似クラスです！
擬似クラス ：hover
ボタンの上にカーソルが乗っている状態である、.btn :hover という擬似クラスを使ってCSSデザインを追加します
このように、マウスポインターが指になっただけではなく、色まで変わるという欲張りなデザインができました。
擬似クラス : focus
: focus は、フォームにカーソルが入ったときに発動する擬似クラスです。
コードはこちらです↓
CSSに前回学習した属性セレクタ [type=”text”] が使用してありますね。
＊属性セレクタの詳しい内容はこちら→属性セレクタとは、classなしでもデザインできる便利ワザ！
まとめ
hoverは「マウスが乗ったとき」
focusは「クリックやキーボードで選ばれたとき」に使う疑似クラスです。
どちらも、ユーザーに「今ここだよ！」と伝える大事なCSSのテクニックです。
次回は擬似クラスの続きで ：checked :disabled のふたつを学習します
コメント