【CSS】擬似クラスの「:focus」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:focus」の使い方について解説します。

擬似クラスの「:focus」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:focus」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:focus」を使うと何ができる？

input:focus {
    background-color: aquamarine;
}

擬似クラスの「:focus」を使うと「フォーカス状態」にある要素にスタイルを当てることができます。

なるほどね！

「フォーカス」とは何か？

Webにおける「フォーカス」とは、ユーザーが「特定の要素に焦点を当てている状態」を指します。

例えば、「入力欄」に「テキストを入力することができる状態」などです。

入力欄を「クリック」や「タップ」することで「フォーカス」することができます。「Tabキー」でもフォーカスすることができますね。

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#focus-pseudo

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:focus

あわせて読みたい記事。

まとめ

擬似クラスの「:focus」を使うと「フォーカス状態」にある要素にスタイルを当てることができる。

Webにおける「フォーカス」とは、ユーザーが「要素に焦点を当てている状態」を指す。

例えば、「入力欄」に「テキストを入力することができる状態」など。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:focus」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！