目次
- 擬似クラスとは何か
- よく使われる擬似クラスの一覧
- :active クリックしている間の状態を設定する
- 使いどころ
- :focus キーボード操作でフォーカスされたとき
- 使いどころ
- :focus-visible キーボード操作時のみフォーカスを表示する
- 使いどころ
- :focus-within 子要素がフォーカスされたときに反応する
- 使いどころ
- :visited 訪問済みリンクの色を変える
- :checked チェックボックスやラジオボタンのON状態
- 使いどころ
- :disabled 操作不可の状態
- 疑似クラスを使った応用テクニック
- 入力エラー表示を簡単に作る
- アコーディオンをCSSだけで作る（:checked利用）
- 訪問済みリンクだけ淡くする
- 擬似クラスを使う際の注意点
- hoverに依存しすぎない
- クリック可能な要素はfocusも設定する
- visitedはセキュリティ制限がある
- まとめ
擬似クラスとは何か
- 擬似クラスとは、要素の特定の状態に対してスタイルを適用するためのCSSの仕組みです。
- hover は最もよく使われる擬似クラスですが、ほかにも入力中・クリック中・訪問済みなどの状態に応じて使える擬似クラスが多く存在します。
擬似クラスを理解することで、UIの表現力が大幅に向上し、ユーザーが操作しやすいサイト設計が可能になります。
よく使われる擬似クラスの一覧
特に使用頻度の高い擬似クラスは次のとおりです。
- :hover
- :active
- :focus
- :visited
- :checked
- :disabled
- :focus-visible
- :focus-within
- :first-child
- :last-child
- :nth-child()
この記事では特にUIに関係する擬似クラスを中心に解説します。
:active クリックしている間の状態を設定する
:active は、ユーザーがクリックしている「その瞬間」の状態に適用される擬似クラスです。
.button:active {
transform: translateY(3px);
box-shadow: none;
}使いどころ
ボタンを押し込むエフェクトを付ける際に必須の擬似クラスです。
:focus キーボード操作でフォーカスされたとき
:focus は、ユーザーがタブキーで移動したときやフォーム入力時に適用される擬似クラスです。
input:focus {
border-color: #4087bf;
outline: none;
box-shadow: 0 0 4px rgba(64,135,191,0.5);
}使いどころ
アクセシビリティ向上のためにも非常に重要で、hoverと同時に設定するのが望ましいです。
:focus-visible キーボード操作時のみフォーカスを表示する
:focusはマウスクリックでも反応しますが、:focus-visibleはキーボード操作時だけ視覚変化を与えます。
button:focus-visible {
outline: 3px solid #4087bf;
}使いどころ
キーボード操作ユーザーに配慮したUIが作れます。
:focus-within 子要素がフォーカスされたときに反応する
親要素が子のフォーカス状態に応じてスタイルを変えられます。
.form-group:focus-within {
border: 2px solid #4087bf;
}使いどころ
フォーム周辺のスタイル強調に使われます。
:visited 訪問済みリンクの色を変える
a:visited {
color: purple;
}訪問済みページであることをユーザーに伝えるために利用される擬似クラスです。
:checked チェックボックスやラジオボタンのON状態
input:checked + label {
background-color: #4087bf;
color: #fff;
}使いどころ
チェックボックス連動UIの実装が可能で、JavaScriptなしで高度なトグルUIが作れます。
:disabled 操作不可の状態
フォーム要素が無効化されている際に適用されます。
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}疑似クラスを使った応用テクニック
入力エラー表示を簡単に作る
input:focus-within,
input:focus {
border-color: #4087bf;
}
input:invalid {
border-color: red;
}アコーディオンをCSSだけで作る（:checked利用）
.ac-toggle:checked ~ .ac-content {
max-height: 500px;
opacity: 1;
}訪問済みリンクだけ淡くする
a:visited {
opacity: 0.6;
}擬似クラスを使う際の注意点
擬似クラスを使用する際は、次のポイントに気をつけると品質が向上します。
hoverに依存しすぎない
スマホではhoverが効かないため、activeやfocusも適切に追加する必要があります。
クリック可能な要素はfocusも設定する
アクセシビリティ対策として必須です。
visitedはセキュリティ制限がある
色変更以外のプロパティは適用されません。
まとめ
CSSの擬似クラスは、:hoverだけでなく多様な状態を表すための強力なツールです。
focusやactiveを適切に組み合わせることで、直感的で操作しやすいUIを実現できます。
さらに応用として、チェックボックスを利用したアニメーションやアコーディオンなど、JavaScriptなしで高度なUIも作ることができます。
擬似クラスの理解はCSS設計の基礎となるため、ぜひこの記事を参考に基礎と応用を身につけてみてください。