フォーカスとは？

Focus

別名：キーボードフォーカス

現在、キーボードなどで操作する対象になっている状態。

まず、短く答えると

フォーカスの意味

Tabキーなどでリンクや入力欄へ移動すると、その部品が操作対象になります。枠や色の変化で現在地を見えるようにします。マウスを重ねるホバーとは異なります。

どんな場面で使う？

Webサイトやアプリの見た目、情報の並び方、利用者の操作を考える場面で登場します。

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

身近な例

Tabキーでボタンへ移動したとき、周囲に枠が表示されるようにします。

覚え方のコツ

何を押さえればいい？

役割

現在、キーボードなどで操作する対象になっている状態。

理解の深さ

まずは「何をするものか」と具体例を結び付けて覚えれば十分です。

確認の視点

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

混同しないために

似た言葉・関連する言葉との違い

「フォーカス」は現在、キーボードなどで操作する対象になっている状態ものです。一方、「ホバー」はマウスポインターを要素の上に重ねた状態ものです。役割を分けて考えると、二つのつながりを理解しやすくなります。

使うとき・学ぶときの注意

きれいに見えることだけを目的にせず、読みやすさ、操作のしやすさ、さまざまな利用環境を一緒に考えることが大切です。

よくある疑問

フォーカスについてのQ&A

Qフォーカスをひと言でいうと？

A現在、キーボードなどで操作する対象になっている状態。

Qフォーカスはどの言葉と一緒に覚えるとよい？

A「ホバー」、「ボタン」、「アクセシビリティ」と一緒に覚えると、役割や使われる場面の違いが分かりやすくなります。

AIに相談してみる

このままコピーして使える指示文

［　］の部分を自分の状況に合わせて書き換えてください。

以下の画面をキーボードだけで操作する場合を確認してください。移動順・現在位置の見え方・開閉後の移動先を整理し、フォーカスを隠さない改善案とコード例を示してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。

操作の流れ・現在のHTML・CSS・JavaScript：
［ここに貼り付け］

秘密情報は入力しないでください

ほかの言葉も調べてみませんか？

用語一覧へ戻る