• HOME > 
  • CSS > 
  • CSSの疑似クラス「:focus」の使い方【focus-wi...

CSSの疑似クラス「:focus」の使い方【focus-withinとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

フォーカスとは?

フォーカスとは入力ボックスなどがクリックされて入力できる状態になっていることを指します。その後、別の場所をクリックしたり、他の入力ボックスにカーソルを移すことをフォーカスが外れると言います。

CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。

なお、ほとんどのブラウザではデフォルトCSSによりフォーカス時のスタイルが設定されています。

リンク先のサムネイル
CSSの疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる(基準となる)要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには...【もっと読む】

フォーカスされた時や外れた時に入力チェックしたり、テキストを表示させたりといった処理を行いたい時はJavascript(jQuery)を用います。

リンク先のサムネイル
jQueryのblur()でフォーカスが外れた時の処理を行う方法【入力チェックなど】

jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。入力チェックなどに利用され、...【もっと読む】

疑似クラス「:focus」の使い方

疑似クラス「:focus」はCSSのセレクターに利用することで、要素がフォーカスされた時のスタイルを設定することができます。

次のように記述します。

疑似クラスfocusの使い方

下の例では、テキストボックスがフォーカスされている時のみ文字色を変更するように指定しています。

HTML

<input type="text" id="testA" placeholder="入力欄A">

CSS

input[type="text"]#testA:focus{
    color:#d40000;
}

プレビュー

テキストボックスの枠線はoutlineプロパティで設定する

input[type='text']によるテキストボックスの枠線は一見するとborderプロパティのように思われますが、outlineプロパティによって表示されています。

設定の仕方はborderプロパティと同じで、線の種類・太さ・色を指定することができます。

下の例では、フォーカスされた時に枠線を赤く表示させています。

HTML

<input type="text" id="testB" placeholder="入力欄B">

CSS

input[type="text"]#testB:focus{
    outline:solid 2px #d40000;
}

プレビュー

「:focus-within」との違い

フォーカス時のスタイルを設定できる疑似クラスとして「:focus-within」があります。

「:focus」が要素自体がフォーカスされた時のスタイルであるのに対し、「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態に有効になる疑似クラスです。

親要素の「:focus-within」に設定したスタイルは、子要素のテキストボックスのどれかがフォーカスされた時に適用されます。

下記の例ではいずれかのテキストボックスにフォーカスすると、親要素の「:focus-within」のスタイルが有効になり背景色が変更されます。

HTML

<div class="sample_form">
    <input type="text" placeholder="入力欄A">
    <input type="text" placeholder="入力欄B">
    <input type="text" placeholder="入力欄C">
    <input type="text" placeholder="入力欄D">
</div>

CSS

.sample_form{
    background:#f9f9f9;
    padding:10px;
}
.sample_form:focus-within{
    background:#ff4d5f;
}

プレビュー

まとめ

以上がCSSの疑似クラス「:focus」の使い方です。

フォーカスされている部分をわかりやすく装飾できれば、入力フォームなどでのユーザビリティを高める効果が期待できます。focus-withinも合わせて使えばより効果的です。

広告
広告

関連する記事

サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。