CSSには、ユーザーの操作（マウスホバー、クリック、フォーカスなど）に応じてスタイルを変更できる”疑似クラス”というものがあります。この記事では、特にユーザーアクションに関連する疑似クラスについて詳しく解説していきます！
Contents
:hover（マウスホバー時）
hoverは、要素にマウスカーソルが乗ったときに適用される疑似クラスです。
使用例
button:hover {
background-color: red;
color: white;
}ポイント：
:hoverはボタンやリンクなどの要素によく使われる。transitionを併用すると、滑らかなホバーアニメーションが作れる。
応用例（フェードイン）
.button {
background-color: blue;
color: white;
transition: background-color 0.3s ease-in-out;
}
.button:hover {
background-color: darkblue;
}実際にコードを入力して動きを見てみてください
:focus（要素がフォーカスされたとき）
focusは、入力フィールドやボタンがクリックされたり、Tabキーで選択されたときに適用されます。
使用例
input:focus {
border: 2px solid blue;
outline: none;
}ポイント：
outline: none;でデフォルトの枠線を消すことができるが、アクセシビリティのためにfocus-visibleを使うのもオススメ。
:focus-visible（キーボード操作時のみフォーカス適用）
focus-visible は、マウスクリックでは適用されず、キーボード操作（Tabキーなど）でフォーカスされた場合にのみ適用されます。
使用例
button:focus-visible {
outline: 2px solid orange;
}ポイント：
- マウス操作とキーボード操作を区別してスタイルを変えたいときに便利。
- ChromeやFirefoxではサポートされているが、IEや一部の古いブラウザでは未対応。
:focus-within（内部の要素がフォーカスされたとき）
focus-within は、親要素の内部にフォーカスされた要素がある場合に適用されます。
使用例
div:focus-within {
background-color: lightgray;
border: 2px solid darkgray;
}ポイント：
- 入力フォームのフォーカス時に、親要素のデザインを変更したいときに便利。
:active（要素がクリックされたとき）
active は、要素がクリックされている間だけ適用されます。
使用例
a:active {
color: green;
}ポイント：
- ボタンやリンクの「押した瞬間」のデザインを変えるのに適している。
:visited（訪問済みのリンク）
visited は、すでに訪問済みのリンクに対して適用されます。
使用例
a:visited {
color: purple;
}ポイント：
:visitedで設定できるスタイルはcolorなど一部のプロパティのみ。background-colorやborderなどの変更はできない。
まとめ
| 疑似クラス | 説明 | 使用例 |
|---|---|---|
:hover | マウスホバー時に適用 | button:hover { background: red; } |
:focus | 要素がフォーカスされたとき | input:focus { border: 2px solid blue; } |
:focus-visible | キーボード操作時にフォーカス適用 | button:focus-visible { outline: 2px solid orange; } |
:focus-within | 内部の要素がフォーカスされたとき | div:focus-within { background: lightgray; } |
:active | 要素がクリックされたとき | a:active { color: green; } |
:visited | 訪問済みのリンクに適用 | a:visited { color: purple; } |
これらの疑似クラスを使うことで、よりインタラクティブなWebデザインを作ることができます。適切に組み合わせて、より洗練されたスタイルを実装してみてください！
コメント