CSS講座

擬似要素・擬似クラス

:link, :visited, :hover, :active - 擬似クラス

:link, :visited, :hover, :active ・・・これらは、簡単に言ってしまえば、リンクの状態ごとにスタイルを適用する場合に使います。

:link
未クリックのリンク
:visited
クリックをしたリンク
:active
クリック中のリンク
:hover
カーソルを乗せているときのリンク

a要素によって作成されるリンクは、上の４つの状態に分けられています。まずは、擬似クラスの指定方法から。

a:visited { color: #666; }

のように使います。classやidに指定する場合は、

a.～～～:hover { text-decoration: underline; }
a#～～～:link { color: #00f; }

のようにします。（波線部は、class名やid名を表しています。）こうすることで、特定のリンクにのみ、擬似クラスによる指定を行うこともできます。

では、サンプルを。次のCSSのサンプルソースを見てください。

a:link { color: #00f; text-decoration: none; }
a:visited { color: #800080; text-decoration: none; }
a:hover { position: relative; top: 1px; left: 1px; }
a:active { text-decoration: underline; }

これは、以下のような指定をしていることになります。

未クリック
色：青色
下線：無し
クリック後
色：紫色
下線：無し
クリック中
下線を表示
マウスカーソルを乗せている時
色：指定無し
下線：無し
右下に移動

表示結果は、以下のようになります。クリックしたりしてみてください。

Google

ここで、いくつか注意があります。それは、リンクの状態がはっきり分かるように、それぞれを指定するということです。

特に、未クリックとクリック後は、はっきりと区別ができるようにすることです。多くのブラウザのデフォルト表示では、未クリックは青色に、クリック後は紫色になります。ほとんどのユーザーは、青であればまだ見ていないページ、紫であればもう見てしまったページと判断するでしょう。

しかし、ページの配色・デザインなどで、青と紫はちょっと・・・という場合もあるでしょう。この場合は、未クリックを濃い色・クリック後は薄い色、そして下線を付けることでユーザーは文字列がリンクになっていると分かり、どちらが見ていないページかも容易に判断できるでしょう。下にサンプルを示します。どうでしょうか？（サンプルはリンクになっていませんけどね。）

WEB作成の豆知識
WEB作成の豆知識

もし、逆の配色で、下線が無い場合はどうでしょう・・・あなたはリンクだと思いますか？どちらがまだ見ていないページか判断できますか？

これらについては、ユーザビリティ・アクセシビリティのページにも書かれています。

また、現在のInternet Explorer 6では対応していませんが、本来、:hover, :activeの２つの擬似クラスはa要素だけではなく、他の全ての要素に対し指定可能です。Firefox, Operaなどでは対応していますので、p要素などに指定して試してみてください。

:first-letter - 最初の一文字

要素の最初の一文字のみにスタイルを適用する場合に使います。

これは、結構便利だと思います。例えば・・・

p:first-letter { font-size: 200%; }

のように指定すると、

first-letterを使用すると、要素の最初の一文字に・・・

p要素の最初の一文字のみに、スタイルを適用することができます。

フォントの大きさだけではなく、背景や、文字の色なんかを変えてみたり、floatなんかを使ってみるのも良いかと思います。

:first-line - 最初の一行

要素の最初の一行のみにスタイルを適用する場合に使います。

:first-letterが最初の一文字だったのに対し、こちらは最初の一行です。・・・多分、first-letterの方が使えるかな・・・でも、一応紹介しておきます。

p:first-line { font-size: 200%; }

first-lineを使用すると、
要素の最初の一行のみにスタイルを適用する・・・そんなことができるようになります。

効果的な使用法を探してみてはどうでしょうか？