疑似クラス「:focus」を使ってフォームの入力欄をフォーカスしてみよう

「:focus」はユーザーの操作で要素がフォーカスされた時にCSSを設定する事ができる疑似クラスです。
フォーカスって何?と思われると思います。フォーカスとは「その部分に合わせる」という意味で、webサイトで解りやすいのは「フォーム」が一番理解しやすいかと思います。名前を入力する欄にフォーカスする事で、入力欄に名前を打ち込む事が出来ます。
今回はフォームの入力欄にフォーカスした時に色を変える方法をご紹介します。

フォームにフォーカスした時に色を変えてみよう

入力フォームがフォーカスされた時に見た目を変化させる設定をしてみましょう。

HTML

CSS

結果


フォーム欄をクリックすると、背景がグレー、テキストを入力すると赤色になります。
クリックした状態がフォーカスになり、フォーカスを外す(どこか別の所をクリック)すると白に戻ります。

複数のフォームに別々のクラスを設定してみよう

HTML

CSS

結果




「red-text」(フォーム上)はグレーの背景に赤字、「blue-text」(フォーム下)はグレーの背景に青時を設定しました。

まとめ

フォームがフォーカスされた時に見た目を変えるのは、ユーザビリティ的(ユーザーの使いやすさ)にも見やすいですね。
別々のスタイル設定はあまりする機会は無いかもしれませんが覚えておいて損は無いですね。

CSSコーディングのオススメ本

CSS辞典 第5版 [CSS2/3/4対応]

本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!