【CSS】擬似クラスとは？:focusや:hoverで覚えよう！

みなさん、Webサイトを見ていて「リンク」にマウスを乗せた時、ポインター（マウスの矢印）が”指の形”に変わるの、見たことありますよね。
実はあの「指マーク」、マウスを乗せたという“状態”に反応して、見た目が変わっているんです。
でも、HTMLのコードを見ても「指マークになるよ」なんて書いてありません。
じゃあ、どうして変わるの？
それは、CSSが「マウスが乗った状態」を見つけて、自動でデザインを変えているからです。
このように「ある状態の時だけ見た目を変えるCSSの機能」を擬似クラスといいます。

疑似クラスとは

MDN Web Docsには下記のように記載があります。

CSS の擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば、擬似クラス :hover を使用すると、ユーザーのポインターがボタンの上に乗ったときにボタンを選択し、この選択されたボタンをスタイル設定することができます。

/* ユーザーのポインターが乗っているすべてのボタン */
button:hover {
  color: blue;
}

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

要するに、疑似クラスとは要素の状態に基づいてスタイルを適用するためのセレクタとなります。
これは指定した要素の状態によってCSSを適用できるということになります。

指マークになるだけのコード

ここに→マウスを乗せると指のマークになる！
上の文章はマウスを乗せると指マークになり、クリックすると、リンク先へ移動します。
＊この記事を読んでから学習すると理解が深まりますよ。

では、実際にコードを書いてみましょう！下の図と同じようにhtmlとCSSコードを書きます。

See the Pen Untitled by 須山博由 (@gpgysenm-the-builder) on CodePen.

CSSの中の　cursor : pointer ; これが指マークになるデザイン指定です

web表示させ、ボタンの上にカーソルを乗せると、指マークになります

もっと変化をつけたい！指マークになるだけではなく、色も変えたい！と欲張りたい時に使うのが、擬似クラスです！

疑似クラス:hoverと:focusの使用例

擬似クラス　：hover

ボタンの上にカーソルが乗っている状態である、.btn :hover という擬似クラスを使ってCSSデザインを追加します

See the Pen Untitled by 須山博由 (@gpgysenm-the-builder) on CodePen.

このように、マウスポインターが指になっただけではなく、色まで変わるという欲張りなデザインができました。

擬似クラス　: focus

: focus は、フォームにカーソルが入ったときに発動する擬似クラスです。

コードはこちらです↓

See the Pen focus by 須山博由 (@gpgysenm-the-builder) on CodePen.

CSSに前回学習した属性セレクタ [type=”text”] が使用してありますね。
＊属性セレクタの詳しい内容はこちら→属性セレクタとは、classなしでもデザインできる便利ワザ！

まとめ

hoverは「マウスが乗ったとき」
focusは「クリックやキーボードで選ばれたとき」に使う疑似クラスです。
どちらも、ユーザーに「今ここだよ！」と伝える大事なCSSのテクニックです。

次回は擬似クラスの続きで　：checked :disabled のふたつを学習します