CSSには:focus擬似クラスというものがあります。ちょっと前ですとフォーカスされているフォームコントロールの見栄えを指定するネタがにぎわったので覚えている方も多いことでしょう。例えばこんな感じです。「フォーカスのあるフォームの装飾を変化させる – スタイルシートTIPS ふぁくとりー」。

さて、:focus擬似クラスはinput要素だけに指定するためのものではないんですよね。ページを閲覧している方が、何かの要素にフォーカスを合わせている状態の装飾を行うことが可能です。例えば、a要素には必ず:hover擬似クラスを指定して、リンク項目にカーソルがあたったことを分かりやすくするようにしている、という方も多いでしょう。そんな方は、必ず:focus擬似クラスもセットで指定してみてはいかがでしょうか？

:hover擬似クラスと:focus擬似クラスをセットで指定することで、キーボードのみでページを閲覧している方なんかがいらっしゃった場合には、どこにフォーカスがあたっているのかが視覚的にも分かりやすくなります（ユーザーさんの環境にもよります）のでオススメです。

:hover擬似クラスや:focus擬似クラスは、指定する順序も重要なのですが、弊社の場合ですとおおむね以下のような感じで指定しています。

a {
	スタイル
	}
a:visited {
	スタイル
	}
a:hover,
a:active,
a:focus {
	スタイル
	}

ということで、今まであまり日の目を見ていない:focus擬似クラスがかわいそうですので、もっと積極的に利用していきましょう。