【CSS Modules】:focus-visible疑似クラスの使い方
:focus-visible疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:focus-visibleクラスは、ユーザーエージェント（Webブラウザなど）がその要素にフォーカスを示すべきだと判断したときに、その要素にスタイルを適用するための疑似クラスです。
Webページ上のボタンや入力欄、リンクといった対話型要素は、ユーザーがキーボードのタブキーやマウスなどで操作対象を選択すると「フォーカス」が当たった状態になります。この状態は通常、アウトラインなどの視覚的なインジケーターによって示されます。
従来の:focus疑似クラスは、要素がフォーカスを受け取ったすべてのケースでスタイルを適用するため、マウスで要素をクリックした際にも不要なフォーカスリングが表示されることがあり、デザイン上の意図と異なる場合があります。
これに対し、:focus-visibleは、キーボード操作など、ユーザーが現在の操作位置を視覚的に把握する必要がある場合にのみフォーカススタイルを適用します。例えば、マウスでクリックした際にはフォーカスリングを表示せず、キーボードのタブキーで要素間を移動している際にはフォーカスリングを表示するといった、状況に応じた賢い挙動を実現します。
この疑似クラスを使用することで、ウェブサイトやアプリケーションの見た目を損なうことなく、キーボード利用者など、特定の入力デバイスを使用するユーザーにとってのアクセシビリティとユーザビリティを大幅に向上させることができます。開発者は、より柔軟かつ効果的なフォーカススタイルの制御が可能になります。
公式リファレンス: :focus-visible
構文(syntax)
1/* 要素がキーボードなどの操作によってフォーカスされ、 2 そのフォーカスが視覚的に表示されるべき場合にスタイルを適用します */ 3selector:focus-visible { 4 /* ここにスタイルを記述 */ 5 outline: 2px solid blue; 6 outline-offset: 2px; 7}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません