にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

マウスが載ったときに装飾を変更する:hoverは、フォーカスを得たときに装飾する:focusと同時に使う [リンク,基本]

マウス操作でリンクを選択されても、キー操作でリンクを選択されても、同じような装飾を提供する方法。:hover疑似クラスと同時に:focus疑似クラスも使っておこう。

マウスが載ったときに装飾を変更する:hoverはよく使われているけども……

リンクなど特定の要素の上にマウスが載ったときに、その要素の装飾を変更するには :hover疑似クラスを使います。これはとてもメジャーな装飾変更方法なので、多くのウェブサイトで使われているでしょう。例えば、下記のようにスタイルシートを書いておけば、リンクの上にマウスポインタが載ると、文字色と太さが変化します。

a:hover {
   color: red;
   font-weight: bold;
}

とても簡単ですね。実際に表示してみると以下のようになります。リンクの上にマウスポインタを載せてみて下さい。文字の装飾が変化します。

リンク1 , リンク2 , リンク3

この「:hover疑似クラス」で対象になるのは、マウスなどのポインティングデバイスを使って「マウスポインタが要素の上に載ったとき」だけです。しかし、リンクを選択する手段は、マウス操作だけではありません。

リンクは「マウス操作」だけでなく「キー操作」でも選択・クリックができる

例えば「リンク」は、マウスでクリックする以外に、タブキーとエンターキーを使って、キー操作だけでクリックすることができます。

  • このページ上で、キーボード上の[TAB]キーを1回押すと、→このページ内に存在する「選択可能な要素」に対して順番にフォーカスが移動していきます。

例えば、以下のダミーボタンを1度クリックしてから、キーボードの[Tab]キーを押してみて下さい。(※ダミーボタンをクリックするのは、フォーカスを1度ボタンに移すため。)
すると、[Tab]キーを押すたびに、下に並んだリンクに対して順番にフォーカスが当たっていくはずです。


リンク1 , リンク2 , リンク3 , リンク4 , リンク5 , リンク6 , リンク7

キーボードから[Tab]キーを押すごとに、上記のリンクへのフォーカスが1つずつ移動していきます。リンクの上にフォーカスがある状態で、[Enter]キーを押せば、そのリンクをクリックできます。このように、ウェブページ上のリンクは、マウス操作だけでなく、キー操作でも選択できる仕様になっています。
※[Shift]+[Tab]キーを押せば、逆順にフォーカスが当たります(=戻る方向に移動します)。

たいていのブラウザでは、「今フォーカスがあるリンク」には点線などの細い枠が付加されて分かりやすくなっています。が、ここでは、フォーカスの対象を分かりやすくするため、フォーカスが当たっているリンクは緑色の太字になるように装飾を加えています。

このように、フォーカスを得た要素の装飾を変更するには、:focus疑似クラスを使って以下のように記述します。

a:focus {
   color: #00aa00;
   font-weight: bold;
}

ここでは、a要素(リンク)に限定して装飾を変更していますが、ボタンなど他の要素に対しても使えます。(フォーカスを得られるような要素であれば何でも)

マウスが載ったときに装飾を変更する:hoverは、フォーカスを得たときに装飾する:focusと同時に使う

これまでに2つのサンプルをご紹介しました。それぞれの動作は以下のようになっていたはずです。

  • 1番目のサンプルは、マウスポインタを載せると装飾が変化する。(TABキー操作で選択しても何も起きない)
  • 2番目のサンプルは、TABキー操作で選択すると装飾が変化する。(マウスポインタを載せても何も起きない)

これらの装飾は、「どちらか1つ」ではなく「両方同時に指定」しておくと、マウス操作の場合でもキー操作の場合でも同じ装飾効果が得られるようになります。
記述方法は簡単で、以下のように、「:hover」の場合と「:focus」の場合とを半角カンマ記号でつないで、目的のスタイルを記述するだけです。(半角カンマ記号がないと、意味が変わってしまいますので忘れないように注意して下さい。)

a:focus,
a:hover {
   color: #ff00cc;
   font-weight: bold;
}

表示例は以下の通りです。下記の7つのリンクは、マウスポインタを載せた場合でも、[Tab]キーによるフォーカスの移動時でも、同じ装飾効果が出ます。


リンク1 , リンク2 , リンク3 , リンク4 , リンク5 , リンク6 , リンク7

というわけで、マウス操作でリンクを選択されても、キー操作でリンクを選択されても、同じような装飾を提供する方法でした。


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---