CSSの:focusでフォーカスされた要素にスタイルを適用する方法をわかりやすく解説

2024.09.13
スポンサーリンク

:focus は、要素がフォーカスを受けた際にスタイルを適用するための擬似クラスです。主にフォームの入力要素やリンクなど、ユーザーの入力や操作が可能な要素に対して使用されます。ユーザーがキーボード操作で入力フィールドやボタンにアクセスした際に、視覚的なフィードバックを提供することができます。

スポンサーリンク

:focus の値とその効果の一覧

  • :focus – 要素がフォーカスを受けた際にスタイルを適用します。

注意点や関連情報

:focus は、キーボード操作やマウスクリックなどで要素がフォーカスされたときに適用されます。視覚的なフィードバックを提供することで、ユーザーがどの要素にフォーカスしているかをわかりやすく表示できます。また、outline プロパティの設定を忘れずに行うことで、フォーカス時の視覚的な表示をカスタマイズできます。

:focusが効かない理由として考えられること

要素がフォーカス可能でない

:focusは、通常<input>や<textarea>, <select>, <button>, <a>などのフォーカス可能な要素に適用されますが、フォーカス可能でない要素に対しては機能しません。
対策：フォーカス可能でない要素に対してtabindex属性を追加し、要素をフォーカス可能にします。例えば、<div tabindex="0">と設定することで、<div>がフォーカス可能になります。

要素がdisabledになっている

フォーム要素にdisabled属性が付与されている場合、その要素はフォーカスを受け取ることができないため、:focusが適用されません。
対策：disabledが必要ない場合、それを削除してフォーカス可能な状態にします。

共通するCSSコード

.css-sample-container {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
.css-sample-box {
    padding: 10px;
    border: 2px solid #333;
    background-color: #f0f0f0;
}
.css-sample-input:focus {
    border-color: blue;
    outline: none;
    background-color: #e0f7fa;
}
.css-sample-input {
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    width: 100%;
}

表示例

CSS :focus

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box">
        <label for="input1">名前</label>
        <input type="text" id="input1" class="css-sample-input">
    </div>
</div>

CSSコード

.css-sample-input:focus {
    border-color: blue;
    outline: none;
    background-color: #e0f7fa;
}

表示結果

入力フィールドにフォーカスが移ったとき、ボーダーの色が青に変わり、背景色も変わります。フォーカスが外れると、元のスタイルに戻ります。

まとめ

  • :focus は、フォーカスされた要素にスタイルを適用します。
  • 主にフォームやリンクなどのインタラクティブな要素に使用されます。
  • ユーザーがどの要素にフォーカスしているかを視覚的に示すことで、操作性を向上させます。
  • outline プロパティを使って、フォーカス時の視覚的効果をカスタマイズできます。
スポンサーリンク