【CSS】:focus-withinで自身か子要素のいずれかがフォーカスを持っている場合にスタイルを適用する方法

ウェブデザインやフロントエンド開発において、ユーザーインターフェイスをより使いやすくするために、フォーカス状態を強調することは非常に重要です。この記事では、CSSの擬似クラス:focus-withinを使って、フォームや他の要素のフォーカス状態をスタイリングする方法を紹介します。

:focus-withinとは？
基本的な使用例
詳細な説明
応用例
よくある質問（FAQ）
まとめ

:focus-withinとは？

:focus-withinはCSSの擬似クラスで、要素自身がフォーカスを持つか、その子要素のいずれかがフォーカスを持っている場合に適用されます。これにより、フォーカスがある状態を親要素にも伝播させることができます。

基本的な使用例

ここでは、フォーム入力フィールドがフォーカスされたときに、その親要素のスタイルが変更される基本的な例を紹介します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :focus-within Example</title>
<style>
    .form-group {
        border: 2px solid #ccc;
        padding: 10px;
        margin: 10px 0;
    }
    .form-group:focus-within {
        border-color: #007BFF;
        background-color: #f0f8ff;
    }
    .form-group input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        margin-top: 5px;
    }
</style>
</head>
<body>
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </div>
</body>
</html>

CSS

.form-group {
    border: 2px solid #ccc;
    padding: 10px;
    margin: 10px 0;
}
.form-group:focus-within {
    border-color: #007BFF;
    background-color: #f0f8ff;
}
.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

サンプル

Name:

Email:

詳細な説明

.form-group: フォームフィールドのグループを表し、デフォルトでは薄い灰色の境界線を持っています。
.form-group:focus-within: .form-group内のいずれかの要素がフォーカスを持っている場合、境界線の色が青色（#007BFF）に変わり、背景色が淡い青色（#f0f8ff）に変わります。
.form-group input: 各入力フィールドのスタイルを設定しています。

応用例

:focus-withinはフォームのスタイリングだけでなく、ナビゲーションメニューのハイライトや他のインターフェイス要素にも応用できます。例えば、ナビゲーションメニュー内のリンクがフォーカスされたときに、親メニュー項目を強調表示することも可能です。

よくある質問（FAQ）

Q. CSS :focus-withinとは何ですか？

A. 子孫要素のいずれかにフォーカスが当たっているときに親要素にスタイルを適用できる擬似クラスです。フォーム入力時にフォームグループ全体を強調するUIに便利です。

Q. :focus-withinを使ったフォームのデザインの例は？

A. .form-group:focus-within { border-color: #0070f3; box-shadow: 0 0 0 3px rgba(0,112,243,0.1); }で入力中のグループを強調できます。

Q. :focus-withinのブラウザ対応状況は？

A. 主要モダンブラウザで広くサポートされています。IE11は非対応です。ポリフィルも存在しますが、IE11対応が必要な場合はJavaScriptによるclassの付け替えが代替手段です。

まとめ

:focus-withinを使うことで、フォーカス状態のスタイリングがより直感的かつ効果的に行えます。フォームのユーザーエクスペリエンスを向上させたい場合や、フォーカスを持つ要素を強調したい場合にぜひ活用してみてください。