バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[CSS]:focus 疑似クラス

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

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

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

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

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

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

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

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

:focus

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

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

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

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

サンプル

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

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というアプリケーションを使った実践編もご用意しております。

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

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

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

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

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ