[CSS]:focus 疑似クラス

2012年9月20日(木曜日)

あれ？と思っている間に、夏が終わっちゃいました。
秋が一番好きな季節なので、だんだんワクワクしているスタッフ「ほ」です。

さて、今回のネタは「CSS」。

授業でご紹介している疑似クラスの補足情報です。

講習では、以下の疑似クラスをご紹介しています。

a:link … 未訪問のリンク部分の装飾を指定する
a:visited … 訪問済みリンクの装飾を指定する
a:hover … リンク部分にマウスポインタが重なった時の装飾を指定
a:active … リンク部分をクリックした瞬間の装飾を指定

上記の４指定を行うことで、リンク部分に効果的な装飾を施すことが可能です。

で、実はこの４つ以外にもいくつかの疑似クラスがあるんです！

その中から今日は次の疑似クラスをご紹介します。

:focus

先述の「:link」「:visited」「:hover」「:active」はリンクのa要素と絡めて使用することが多いですが、「:focus」は、別の部分で利用することが多いです。

よく利用されるのが、フォームでの入力です。

この疑似クラスは、ユーザーがページ内のある場所をフォーカスした場合（例えばフォームの入力欄にカーソルを立てた時など）に発生する装飾を指定するものです。

１つサンプルのページを作成しました。

サンプル

上記サンプルページを開いていただき、それぞれの入力欄にカーソルを立ててみてください。

focusの指定をした入力欄は、カーソルを立てた際に背景色が変化するのがわかると思います。

ソースは以下の通りです。

【html】↓


<form>
<p>フォーカスなし：
<input type="text" name="focus_off" />
</p>
<p id="sample">フォーカスあり：
<input type="text" name="focus_on" />
</p>
</form>

【css】↓


#sample input:focus {
     background-color:#6FC;
}

入力欄を作成するinput要素に:focusの疑似クラスをくっつけて利用しています。
これで「入力欄がフォーカスされたら…」という指定を作ることができるんですね。

結構お手軽に使える装飾ですので、チャンスがあったらぜひ試してみてください。

「HTMLやCSSを基本から学びたい！」という方は、バンフートレーニングスクールの講座にてお待ちしております。

バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎！ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

この記事を書いた人
最新の記事

スタッフ「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験認定インストラクター

スタッフブログ