CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:focusセレクタでフォーカスされた要素にスタイルを適用する方法

フォームの入力欄など、ユーザーがクリックやタブキー操作によって選択中（フォーカス中）の要素だけにスタイルを適用したい場合は、CSSの :focus 疑似クラスを使用します。

:focus セレクタは、テキストボックスに入力しようとしている瞬間や、ボタンがキーボード操作で選択されたときなど、要素がアクティブな状態になったタイミングでスタイルが反映されます。フォームのユーザビリティ向上やアクセシビリティ対策としても非常に有用なセレクタです。

:focusセレクタの基本構文

セレクタ:focus {
  プロパティ: 値;
}

実装例

以下のコードでは、テキスト入力欄がフォーカスされると背景色が緑色に変わるように設定しています。実際にブラウザで表示し、入力欄をクリックして動作を確認してみてください。

<!DOCTYPE html>
<html>
<head>
<style>
  input:focus {
    background-color: green;
  }
</style>
</head>
<body>
<form action="">
  科目: <input type="text" name="subject"><br>
  生徒名: <input type="text" name="student"><br>
  年齢: <input type="number" name="age"><br>
  <input type="submit" value="送信">
</form>
</body>
</html>

実行結果のポイント

  • 「科目」や「生徒名」などの入力欄をクリックすると、その入力力欄の背景色が緑色に変化します。
  • 別の入力欄へ移動すると、元の入力欄からはフォーカスが外れ、背景色は元に戻ります。
  • Tabキーで入力欄を移動した場合にも、同様に :focus のスタイルが適用されます。

応用：フォーカス時の枠線をカスタマイズする

背景色だけでなく、枠線（border）や影（box-shadow）を組み合わせると、より視認性の高いデザインにできます。

input:focus {
  border: 2px solid #4caf50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
  outline: none;
}

このように :focus セレクタを使いこなすことで、ユーザーが現在どの項目を入力しているのかを直感的に把握できる、使いやすいフォームを作成できます。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-