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

CSSの:focus疑似クラス完全ガイド！使い方と実例を初心者向けに解説

CSSの:focus疑似クラスは、フォーカス状態にある要素を選択するためのセレクターです。ユーザーが要素をクリックしたとき、あるいはTabキーで選択したときに、その要素は「フォーカス状態」になります。:focusは、選択したい要素名の後ろに記述します。

Webページ上の要素に対して、フォーカスされているときだけスタイルを適用したいケースはよくあります。たとえば、ユーザーがフォームの入力欄をクリックした際に、枠線を表示したいといった場合です。

そんなときに役立つのが:focus疑似クラスです。:focusを使うと、ユーザーがクリックまたはTabキーで要素を選択したタイミングで、指定したスタイルを適用できます。

この記事では、サンプルコードとともに:focus疑似クラスの基本と実際の使い方を解説します。読み終える頃には、:focusを使いこなして、フォーカス状態の要素に自由にスタイルを適用できるようになっているでしょう。

CSS疑似クラスとは

疑似クラス（pseudo-class）とは、CSSセレクターに追加するキーワードのことです。疑似クラスを指定することで、「どの状態の要素にスタイルを適用するか」を定義できます。疑似クラスは、セレクターの後ろに付けて記述します。

疑似クラスを使えば、特定の状態にある要素にのみルールを設定できます。たとえば「要素にフォーカスが当たっている状態」などが該当します。この記事では、数ある疑似クラスの中でも、特に:focusに絞って詳しく見ていきましょう。

CSS :focus疑似クラスの基本

:focus疑似クラスは、Webページ上で要素がフォーカスを受け取ったときにスタイルを適用します。ユーザーが要素をクリックした場合や、Tabキーで要素を選択した場合には、その要素がフォーカス状態になります。

:focus疑似クラスの基本的な構文は次のとおりです。

textarea:focus {
	border: 1px solid blue;
}

このコードでは、ページ内のすべての<textarea>要素に対して、幅1ピクセルの青色の実線ボーダーを設定しています。ただし、このルールが適用されるのは、<textarea>要素がフォーカス状態にあるときだけです。

ご覧のとおり、:focusは適用対象の要素の後ろに記述します。また、セレクターをカンマ区切りで複数並べる場合は、:focusを適用したい要素ごとに個別に指定する必要がある点に注意しましょう。

次の構文を見てください。

input, textarea:focus {
	border: 1px solid blue;
}

このCSSルールは、すべての<input>要素と、フォーカスされた<textarea>要素に適用されます。つまり、フォーカスされた<input>要素には、このルールは適用されません。

:focusセレクターがよく使われる場面のひとつが、Webフォームのスタイリングです。たとえば、ユーザーがフォームの入力欄をクリックしたときに背景色を変えたり、ボーダーの色を変更したりするようなケースが挙げられます。

:focusの実装例

ここで、ユーザーの名（ファーストネーム）を入力するWebフォームの入力欄をデザインするとしましょう。要件は以下のとおりです。

  • 入力欄がフォーカス状態になったら、オレンジ色のボーダーを表示する
  • あわせて、入力欄の背景色を薄いグレーに変更する

この入力欄は、次のようなコードで実装できます。

<html>

<input class="textField" placeholder="First Name">

<style>

.textField:focus {
	background-color: lightgray;
	border: 2px solid orange;
}

CSSの:focus疑似クラス完全ガイド！使い方と実例を初心者向けに解説 上のコードエディタでボタンを押すと、HTML/CSSの実行結果を確認できます。

このコードでは、クラス名textFieldを持つHTMLの<input>フィールドを定義しています。この入力欄には、プレースホルダーテキストとしてFirst Nameが表示されます。

ユーザーが入力欄をフォーカスすると、.textField:focusルールに記述したCSSプロパティが適用されます。これにより、薄いグレー（lightgray）の背景色が設定され、2ピクセル幅のオレンジ色の実線ボーダーが入力欄の周囲に表示されます。

逆に、ユーザーが入力欄からフォーカスを外すと、これらのスタイルは自動的に解除されます。

まとめ

:focus疑似クラスは、Webページ上の要素がフォーカスされたときにスタイルを適用します。特にフォームの入力欄に対して、フォーカス時だけ有効になるスタイルを定義する目的で広く使われています。

:focusは、:hoverなどと同じくCSSの疑似クラスのひとつです。疑似クラスを使う方法はシンプルで、CSSセレクターの後ろに疑似クラス名を指定するだけです。

CSSについてさらに学びたい方は、ぜひ関連の学習ガイドもチェックしてみてください。実践的な学習のコツや、おすすめの学習リソースを多数紹介しており、CSSマスターへの一歩をサポートしてくれます。

  1. JavaScriptで配列をソートする方法：sort()とreverse()の使い方徹底解説

    JavaScriptでは、sort()メソッドを使って配列を並べ替えることができます。sort()メソッドは配列の要素を昇順にソートします。ソートは「その場（in place）」で行われるため、元の配列自体が変更され、新しい配列は作成されません。 たとえば、名前のリストをユーザーにアルファベット順で表示したい場合など、配列を特定の順序で並べ替えたい場面はよくあります。目的に応じて、sort()関数でアルファベット順にソートしたり、reverse()関数で逆順にしたり、比較関数を組み合わせて独自のカスタムソートを実現したりできます。 この記事では、JavaScriptでsort()とreve

  2. CSSで背景画像を設定する方法：初心者向けステップバイステップガイド

    CSSのbackground-imageプロパティを使うと、Webサイトの背景を画像に変更できます。背景画像はbackground-image: url(画像のURL)という形式で設定します。また、このプロパティでは、重ねて表示する複数の背景画像を指定することも可能です。背景画像は、モダンなWebサイトでおなじみの機能であり、美しく快適なユーザー体験を作り出すために欠かせません。Webデザイナーは、あらかじめ決めたテーマに合わせて、CSSのbackground-imageプロパティを使ってこの機能を自由にカスタマイズします。本記事では、チュートリアルとサンプルコードを通じて、このCSSプロパテ