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

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

:focus-withinとは？
基本的な使用例
詳細な説明
応用例
まとめ

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

まとめ

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