:focus

フォーカス（セレクタ）

意味要素がフォーカスされた状態

:focusとは？

:focus疑似クラスは、ユーザーが要素にキーボード（Tabキーなど）やマウスでフォーカスを当てた時に、その要素に特定のスタイルを適用するために使用します。これは、フォームの入力フィールドやリンクなどで視覚的なフィードバックを提供するのに役立ちます。

:focusの具体的な使い方

フォーカス擬似クラスの使用例

<style>
    input:focus {
        background-color: lightyellow;
    }
</style>
<input type='text' placeholder='テキスト入力欄'>

ユーザーがフォーム内のinput要素にフォーカスを当てた時、その要素の背景色を薄い黄色に変更します。

:focusに関するよくある質問

Q. :focusはどんな時に使いますか？

A. :focusは主にフォーム要素やリンクなど、ユーザーが操作可能な要素に視覚的なフィードバックを提供するために使います。例えば、入力フィールドがアクティブであることを示すためによく使用されます。

Q. キーボードでもフォーカスできますか？

A. はい、:focusはマウスクリックだけでなく、Tabキーなどのキーボード操作でフォーカスを移動した場合にも適用されます。これはアクセシビリティの観点から重要です。

Q. :focus-visibleとの違いは？

A. :focus-visibleは:focusの進化版で、キーボード操作時のみスタイルを適用します。マウスクリックではスタイルが適用されないため、より洗練されたユーザー体験を提供できます。

:focusが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:focusや[attr|=value]、:not()、::selection、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。