フォーカスエフェクト

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 9/43。

:focus 疑似クラスを使用すると、要素がフォーカスを得たとき（クリックしたときやキーボードでタブ移動したときなど）にスタイルを適用できます。操作している要素を強調するのに最適な方法です。例えば：

<input type="text">

フォーカスされたときに入力要素のスタイルを設定します：

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

ユーザーがこの入力フィールドをクリックするか、タブで移動すると、ボーダーの色が青に変わり、その周囲にわずかな青い影が表示されます。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

テキスト入力がフォーカスを受け取ったときに特別なスタイリングを適用するCSSルールを作成してください。

フォーカスされたとき、ボーダーをオレンジ色の "rgb(255, 152, 0)" に変更します
フォーカスされたとき、背景色に黄色の "rgb(255, 243, 224)" を追加します

チートシート

:focus 疑似クラスは、要素がフォーカスを受け取ったとき（クリックされたときやタブキーで移動したとき）にスタイルを適用します：

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

これは、入力要素がフォーカスされたときに枠線の色を変更し、シャドウを追加します。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。