: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は、要素がフォーカスを受け取ったときに適用される擬似クラスです。主に、フォーム部品やリンク、ボタンなどのフォーカス可能な要素を Tab キーで選択したとき、またはクリック・タップで操作対象になったときにマッチします。例えば、ユーザーがフォーム内のテキストボックスにフォーカスを移動すると、そのテキストボックスに :focus が適用されます。
:focusの主な目的は、アクセシビリティとユーザビリティを向上させることです。フォーカスを受けた要素には、視覚的なフィードバックが提供されます。これは、ユーザーが現在どの要素にフォーカスしているのかを明確にするために役立ちます。また、フォーム内で Enterキーを押すと、通常はフォーム全体が送信されます。「フォーカス中の入力だけが送信」されるわけではありません。
:focusは、CSSで他の擬似クラスと同様に使用されます。
HTML
<input type="text">CSS
input:focus {
outline: 2px solid blue;
}:focusは、HTML要素に適用される擬似クラスの1つであり、アクセシビリティとユーザビリティを向上させるために使用されます。この擬似クラスを使用することで、フォーカスを受けた要素に対して視覚的なフィードバックを提供することができます。また、:focusは、他の擬似クラスと同様に、CSSで使用することができます。
:focusは、通常、その時点でフォーカスを持っている要素にマッチします。セレクターとしては複数の要素に指定できますが、実際にスタイルが当たるのは現在フォーカスされている要素です。また、:focusを使用する際には、アクセシビリティの問題に注意する必要があります。一部のユーザーは、マウスを使用できないため、Tab キーを使用してウェブページをナビゲートすることがあります。: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;
}tabindex="0" を付けたうえで、:focus-visible でキーボード操作時の見た目を指定できます。ただし、通常は li 自体ではなく、中の a や button をフォーカス対象にします。
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リセットの影響によっては細すぎたり見えにくかったりする場合があります。そのため、現在どの要素にフォーカスしているかが明確に分かるように、必要に応じて outline などでフォーカス表示を指定します。
例えば、次のようにアウトラインを指定することができます。
CSS
:focus {
outline: 2px solid blue;
}また、キーボード操作をするユーザーにとっては、フォーカスがどこに当たっているかを明確にすることが非常に重要です。標準のフォーカス表示が見えにくい場合や、独自デザインで標準表示を上書きする場合は、代わりになるフォーカス表示を必ず用意します。
ただし、デザイン上の問題がある場合や、アウトラインを指定することで見栄えが悪化する場合には、適切な代替方法を使用することも考える必要があります。
:focusを使用する際には、キーボードで操作できることを保証することが重要です。特に、マウスやタッチパッドが使えないユーザーや、タブキーを使って素早く要素間を移動するユーザーなどにとってキーボードでの操作は重要です。
例えば、以下のように、リンクは href を指定し、ボタン動作は button を使うことで、自然なキーボード操作に対応できます。
HTML
<!-- リンクは href があれば通常のタブ順に入る -->
<a href="/about/">About</a>
<!-- ボタン動作なら button を使う -->
<button type="button">Action</button>tabindex="0" は、通常フォーカスできない要素をどうしてもタブ順に入れる必要がある場合にだけ使います。リンクやボタンなど、もともと操作できる要素には原則として追加しません。
また、フォーカス可能な要素には、フォーカス時に何が起こるかを理解できるようにする必要があります。例えば、フォームの入力フィールドでは、フォーカス時にカーソルが入力フィールドに移動するようにする必要があります。
フォーカスされた要素のアウトラインや背景色には、コントラスト比が十分に高いものを使用する必要があります。これによって、視覚障害を持つユーザーや、見えにくい環境下でもフォーカスされた要素が明確に認識できるようにすることができます。
:focus-within は「自分自身または子孫のどれかがフォーカス中ならマッチする」疑似クラスです。 親に枠線を出したり背景色を変えたりといった「囲い全体の強調」に向いています。子要素すべてがフォーカス扱いになるわけではありません。
CSS
/* 子の input にフォーカスが入ったら、親 .field を強調 */
.field:focus-within {
outline: 3px solid #0b5fff;
outline-offset: 4px;
}フォーカスは、キーボード操作によってのみ発生するわけではありません。タブレットやスマートフォンのタッチ操作によっても、フォーカスが当たることがあります。そのため、クリック以外のフォーカスについても考慮することが重要です。
例えば、以下のように、フォーカスされた要素には操作方法に関係なくアウトラインを表示できます。
CSS
:focus {
outline: 2px solid blue;
outline-offset: 2px;
}:active は押している最中の状態で、:focus とは別です。フォーカス位置を示す目的では、まず :focus または :focus-visible を使います。
モーダルを開いている間は、背景側へフォーカスが移動しないようにする必要があります。ただし、これは :focus や :focus-within だけでは実現できません。実務では <dialog>、inert、JavaScript によるフォーカス管理を組み合わせます。
HTML
<dialog class="modal">
<form method="dialog">
<p>確認メッセージ</p>
<button>閉じる</button>
</form>
</dialog>:focus-within は「親を強調する」用途には向いていますが、「フォーカスを閉じ込める」用途には使えません。
: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);
}outline: none; を使う場合は、必ず代わりのフォーカス表示を用意します。フォーカス表示を完全に消すと、キーボード利用者が現在位置を見失います。
このように、:focus-visibleを使用することで、アクセシビリティを向上させることができます。
:focusを使用した場合のアクセシビリティについては、必ずテストを実施することが重要です。特に、スタイルの指定によって、アウトラインや背景色、文字色などのコントラスト比が確保されているかどうか、キーボードでの操作が可能かどうかなどを確認することが重要です。
さまざまなユーザーにとって、操作性や視認性が向上するように、十分なアクセシビリティのテストを実施しましょう。
:focusを使用する際には、アクセシビリティの基準も意識することが重要です。W3CのWeb Content Accessibility Guidelines（WCAG）は、Webコンテンツのアクセシビリティに関する国際的な標準であり、キーボード操作やフォーカス表示に関係する基準も含まれています。
具体的には、以下のような指針があります。
これらの指針に従い、:focusを使用する際には、アクセシビリティの観点から十分に検討し、最良の方法を選択するようにしましょう。