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

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

リンクの状態によって装飾(配色)を変化させる書き方まとめ [リンク,]

スタイルシートを使えば、リンクの状態に応じてリンクの装飾(配色など)を変化させられます。「まだ訪れたことのないリンク」の配色、「既に訪れたことのあるリンク」の配色、「リンクの上にマウスポインタが載った場合」の配色、「選択状態にあるリンク」の配色、「ページ内リンクのターゲットになったリンク」の配色などを自由に決められます。

スタイルシートを使えば、リンクの状態に応じてリンクの装飾(配色など)を変化させられます。例えば、

  • 「まだ訪れたことのないリンク」は文字色を青色に、
  • 「既に訪れたことのあるリンク」は文字色を紫色に、
  • 「リンクの上にマウスポインタが載った場合」は文字色を黄色・背景色を青色・下線をナシに、
  • 「選択状態にあるリンク」は文字色を緑色・背景色を黄色に、
  • 「ページ内リンクのターゲットになったリンク」は背景色を赤色に

……のような感じです。

リンクの装飾は定番中の定番なスタイルシートですね。簡単に装飾できる上に、(特にリンクの上にマウスポインタが載った際に配色を変化させる装飾は)視覚的に分かりやすくなって便利なので、多くのウェブサイトで使われています。

上記のような「リンクの状態に応じた装飾」は、以下のようにCSSの疑似クラスを使うことで指定できます。

CSSソース

/* ▼まだ訪れたことのないリンク */
a:link {
   color: blue;
}
/* ▼既に訪れたことのあるリンク */
a:visited {
   color: purple;
}
/* ▼リンクの上にマウスポインタが載った場合 */
a:hover {
   color: yellow;
   background-color: blue;
   text-decoration: none; /* 下線を消す */
}
/* ▼選択状態にあるリンク */
a:active {
   color: green;
   background-color: yellow;
}
 /* ▼ページ内リンクのターゲットになったリンク */
a:target {
   color: white;
   background-color: red;
}

特に最初の3つ「:link」・「:visited」・「:hover」は、リンクの装飾としては頻出でしょうね。後の2つ「:active」と「:target」は指定されないことも多いでしょうけども。
上記に掲載した5つの疑似クラスの意味は以下の通りです。

  • link疑似クラス:未訪問リンク
  • visited疑似クラス:既訪問リンク
  • hover疑似クラス:マウスが載った際(※リンクに限らず使えます)
  • active疑似クラス:選択状態(※リンクに限らず使えます)
  • target疑似クラス:ターゲットになった際(※リンクに限らず使えます)

上記のサンプルでは、主に文字色(color)と背景色(background-color)を変化させていますが、他にも文字サイズや書体・枠線など何でも変化させられます。

link疑似クラス(未訪問リンク)の装飾は、できるだけ(代表的なブラウザの標準色である)青色に合わせておく方が望ましいと思います。あまりにも標準装飾から離れすぎると、閲覧者に「リンク」だと認識されなくなってしまうかも知れませんし。(^_^;)
また、代表的なブラウザでは標準でリンクに下線を引きます。これも上記と同じ理由で、できれば消さない方が良いと思います。

マウスポインタが載った際の装飾を指定できるhover疑似クラスは、リンク(=a要素)以外に対しても使用可能です。
例えば、p要素の上にマウスポインタが載った際に、枠線の色を変化させたい場合は、以下のような感じで記述できます。

CSSソース

p {
   border: 1px solid gray;
}
p:hover {
   border-color: red;
}

上記の場合は、普段は「灰色」で1ピクセルの実線が引かれていますが、マウスポインタが載ったときにだけ線色が「赤色」に変わります。

active疑似クラスが適用されるのは、リンクをマウスでクリックした瞬間や、[TAB]キーなどを押してリンクにフォーカスを移した(選択した)場合です。リンク(a要素)やボタン(button要素など)で使われるケースが多いでしょう。

target疑似クラスが適用されるのは、ページ内の特定箇所へ直接リンクされた場合の「リンク先」になったときです。これも、リンク(a要素)以外でも使えます。……というか、むしろリンク以外で使われるケースの方が多そうな気もしますが。

以下のようなHTMLソースでリンクが作られているときに、

HTMLソース

<a href="xxx" id="sampleTarget">リンクですよ</a>

URLの末尾に「#sampleTarget」を加えて、 http://example.com/page.html#sampleTarget のような感じでアクセスされた場合、リンクの装飾としてtarget疑似クラスで指定した装飾が適用されます。

というわけで、リンクの装飾を状況に応じて変化させる書き方のまとめでした。


()

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

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

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

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

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

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