:focus shows which element you’re currently interacting with. Learn simple, safe ways—mainly with outline—to make the focus ring clear for keyboard and mouse users.
CSSの:focusは、HTML要素がフォーカスされたときに適用される擬似クラスです。フォーカスされた要素は、ユーザーがタブキーを使用してフォーカスを移動するとき、または要素がクリックされたときに設定されます。例えば、ユーザーがフォーム内のテキストボックスにフォーカスを移動すると、そのテキストボックスに :focusが適用されます。
:focusの主な目的は、アクセシビリティとユーザビリティを向上させることです。フォーカスを受けた要素には、視覚的なフィードバックが提供されます。これは、ユーザーが現在どの要素にフォーカスしているのかを明確にするために役立ちます。また、フォーム内で Enterキーを押すと、通常はフォーム全体が送信されます。「フォーカス中の入力だけが送信」されるわけではありません。
:focusは、CSSで他の擬似クラスと同様に使用されます。
HTML
<input type="text">CSS
input:focus {
outline: 2px solid blue;
}:focusは、HTML要素に適用される擬似クラスの1つであり、アクセシビリティとユーザビリティを向上させるために使用されます。この擬似クラスを使用することで、フォーカスを受けた要素に対して視覚的なフィードバックを提供することができます。また、:focusは、他の擬似クラスと同様に、CSSで使用することができます。
:focusは、単一の HTML要素に対してのみ適用されます。また、:focusを使用する際には、アクセシビリティの問題に注意する必要があります。一部のユーザーは、マウスを使用できないため、タブキーを使用してウェブページをナビゲートすることがあります。:focusが適切に設定されていない場合、これらのユーザーはウェブページを十分に使用できない可能性があります。
:focusを使用する際には、いくつかの注意点があります。
outlineプロパティを使用して、フォーカスを受けた要素の輪郭を明確にすることができます。ただし、多くのブラウザーは、デフォルトでフォーカス時に輪郭を表示するため、明示的に outlineプロパティを指定する必要はありません。:focusは、他の擬似クラスと同様に、クラス、ID、属性などのセレクターと組み合わせて使用することができます。たとえば、フォーム内の必須フィールドに :focusを適用する場合、次のようにすることができます。CSS
input.required:focus {
outline: 2px solid red;
}:focusは、ウェブページをよりアクセシブルにし、ユーザーフレンドリーにするために使用できる強力な CSS機能の１つです。正しく使用することで、ユーザーがページ上で何を行っているかを明確にすることができます。
:focusを使用する場合、いくつかの具体的な例を挙げることができます。
:focusを適用することで、ユーザーがどのリンクにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。CSS
nav a:focus {
color: red;
background-color: yellow;
}:focusを適用することで、ユーザーがどのフィールドにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。CSS
input:focus {
outline: 2px solid blue;
}:focusを適用することで、ユーザーがどのボタンにフォーカスしているかを明確にすることができます。例えば、次のようにCSSを適用することができます。
CSS
button:focus {
box-shadow: 0 0 5px yellow;
}:focusを適用することで、ユーザーがどのリストアイテムにフォーカスしているかを明確にすることができます。例えば、次のように CSSを適用することができます。
CSS
li[tabindex="0"]:focus-visible {
background-color: lightgray;
}以上のように、:focusを使用することで、ユーザーがページ上で何を行っているかを明確にすることができます。ただし、:focusを使用する際には、アクセシビリティに配慮し、適切なアウトラインを指定するなどの配慮が必要です。
「:focus が効かない」「フォーカスが見えない」ときは、次のチェックリストを上から順に見ていくと解決が早いです。
div や li は、デフォルトではフォーカスできません。a なら href を付ける、ボタン動作なら <button> を使うのが最短です。どうしても要素自体にフォーカスを当てたい場合のみ tabindex="0" を付けます（乱用はNG）。
HTML
<!-- よくない例（フォーカスできない） -->
<li>項目</li>
<!-- よい例（a を使う） -->
<li><a href="/page">項目</a></li>
<!-- li 自体をフォーカスさせたい特別な事情がある場合のみ -->
<li tabindex="0">項目</li>a は href があるときだけフォーカス可能です。動作が「クリックして何かする」なら、無理に a を使わず button を使いましょう。
HTML
<!-- フォーカス不可 -->
<a>Link</a>
<!-- フォーカス可（本物のリンク） -->
<a href="/somewhere">Link</a>
<!-- “押す”動作ならこちらが適切 -->
<button type="button">Action</button>outline: none; で輪郭を消すと、「効かない」ように見えます。代わりに :focus-visible を使って、キーボード操作のときだけクッキリ出すのがコツです。
CSS
:focus {
outline: none;
}
:focus-visible {
outline: 3px solid #0b5fff;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(11,95,255,0.2);
}枠線を border で太くすると要素サイズが変わります。ズレを避けたいなら outline を使いましょう（レイアウトに影響しません）。
tabindex="0" は「通常のタブ順」に加える、tabindex="-1" は「タブ移動はしないが focus() できる」。tabindex の正負を入れ替えないだけでも混乱を防げます（tabindex の正の値は原則非推奨）。
:hover はポインタが乗ったとき、:active は押している最中、:focus は選択状態（キーボード移動後やクリック後）です。見せたいタイミングに合わせて使い分けます。
フォーム内で Enter を押すと、フォーム送信（submit）が起きる場合が多いです。「フォーカス中の要素だけ送信」ではありません。挙動はフォーム構造や既定ボタンの有無で変わります。
タッチ端末ではフォーカスの表示が分かりにくいことがあります。:focus-visible の太めアウトラインや背景色の補助で「気づける見た目」を用意しましょう。
Shadow DOM 内や iframe など、別のフォーカスコンテキストが絡むと「同時に1つ」の原則が見えづらくなります。範囲が分かれることだけ覚えておけば十分です。
ここまで試して直らなければ、「要素が本当にフォーカス可能か」「outlineを消していないか」の2点から再チェックしましょう。
:focusのアクセシビリティに関して、以下のポイントに注意することが重要です。
フォーカスが当たった要素にはアウトラインが表示されます。しかし、ブラウザによってはアウトラインがデフォルトで非常に細く、見えにくい場合があります。そのため、明確にフォーカスしている要素がわかるように、明示的にアウトラインを指定することが推奨されています。
例えば、次のようにアウトラインを指定することができます。
CSS
:focus {
outline: 2px solid blue;
}また、キーボード操作をするユーザーにとっては、フォーカスがどこに当たっているかを明確にすることが非常に重要です。そのため、フォーカスされた要素にアウトラインを明示的に指定することが必要不可欠です。
ただし、デザイン上の問題がある場合や、アウトラインを指定することで見栄えが悪化する場合には、適切な代替方法を使用することも考える必要があります。
:focusを使用する際には、キーボードで操作できることを保証することが重要です。特に、マウスやタッチパッドが使えないユーザーや、タブキーを使って素早く要素間を移動するユーザーなどにとってキーボードでの操作は重要です。
例えば、以下のように、タブキーを使用してフォーカスを移動できるようにすることができます。
HTML
<a href="#" tabindex="0">Link</a>このように、tabindex属性を使用して、キーボードでの操作を可能にすることができます。
また、フォーカス可能な要素には、フォーカス時に何が起こるかを理解できるようにする必要があります。例えば、フォームの入力フィールドでは、フォーカス時にカーソルが入力フィールドに移動するようにする必要があります。
フォーカスされた要素のアウトラインや背景色には、コントラスト比が十分に高いものを使用する必要があります。これによって、視覚障害を持つユーザーや、見えにくい環境下でもフォーカスされた要素が明確に認識できるようにすることができます。
:focus-within は「自分自身または子孫のどれかがフォーカス中ならマッチする」疑似クラスです。 親に枠線を出したり背景色を変えたりといった「囲い全体の強調」に向いています。子要素すべてがフォーカス扱いになるわけではありません。
CSS
/* 子の input にフォーカスが入ったら、親 .field を強調 */
.field:focus-within {
outline: 3px solid #0b5fff;
outline-offset: 4px;
}フォーカスは、キーボード操作によってのみ発生するわけではありません。タブレットやスマートフォンのタッチ操作によっても、フォーカスが当たることがあります。そのため、クリック以外のフォーカスについても考慮することが重要です。
例えば、以下のように、タッチ操作によってフォーカスが当たった場合にもアウトラインが表示されるようにすることができます。
CSS
:focus, :active {
outline: 2px solid blue;
}このように、クリック以外のフォーカスにも対応することで、アクセシビリティを向上させることができます。
フォーカス可能な要素を制限することも、アクセシビリティの向上につながります。特に、モーダルウィンドウなどのように、フォーカスが限定的であるべき場合には、フォーカス可能な要素を制限することが重要です。
例えば、以下のように、モーダルウィンドウが開かれた際に、モーダルウィンドウ内の要素にのみフォーカスが当たるように指定することができます。
CSS
.modal:focus-within *:not(.modal) {
pointer-events: none;
}このように、フォーカス可能な要素を制限することで、モーダルウィンドウ内の操作性を向上させることができます。
:focus-visible は “ユーザーにとって必要なときだけ” フォーカス表示を出すための疑似クラスです。 代表例はキーボード操作時で、マウス/タッチ操作では不要と判断して非表示になることがあります。
例えば、以下のように、:focus-visibleを使用することで、キーボード操作によるフォーカスとタッチ操作によるフォーカスで異なるスタイルを適用することができます。
CSS
/* マウス操作時の不要なリングを消し、キーボード時だけくっきり表示 */
:focus {
outline: none;
}
:focus-visible {
outline: 3px solid #0b5fff;
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(11,95,255,0.2);
}このように、:focus-visibleを使用することで、アクセシビリティを向上させることができます。
:focusを使用した場合のアクセシビリティについては、必ずテストを実施することが重要です。特に、スタイルの指定によって、アウトラインや背景色、文字色などのコントラスト比が確保されているかどうか、キーボードでの操作が可能かどうかなどを確認することが重要です。
さまざまなユーザーにとって、操作性や視認性が向上するように、十分なアクセシビリティのテストを実施しましょう。
:focusを使用する際には、アクセシビリティのベストプラクティスを参照することが重要です。W3CのWeb Content Accessibility Guidelines（WCAG）は、Webコンテンツのアクセシビリティに関する国際的な標準であり、:focusに関するベストプラクティスも提供されています。
具体的には、以下のような指針があります。
これらの指針に従い、:focusを使用する際には、アクセシビリティの観点から十分に検討し、最良の方法を選択するようにしましょう。