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; }
これは、以下のような指定をしていることになります。
- 未クリック
- 色：青色
- 下線：無し
- クリック後
- 色：紫色
- 下線：無し
- クリック中
- 下線を表示
- マウスカーソルを乗せている時
- 色：指定無し
- 下線：無し
- 右下に移動
表示結果は、以下のようになります。クリックしたりしてみてください。
ここで、いくつか注意があります。それは、リンクの状態がはっきり分かるように、それぞれを指定するということです。
特に、未クリックとクリック後は、はっきりと区別ができるようにすることです。多くのブラウザのデフォルト表示では、未クリックは青色に、クリック後は紫色になります。ほとんどのユーザーは、青であればまだ見ていないページ、紫であればもう見てしまったページと判断するでしょう。
しかし、ページの配色・デザインなどで、青と紫はちょっと・・・という場合もあるでしょう。この場合は、未クリックを濃い色・クリック後は薄い色、そして下線を付けることでユーザーは文字列がリンクになっていると分かり、どちらが見ていないページかも容易に判断できるでしょう。下にサンプルを示します。どうでしょうか？（サンプルはリンクになっていませんけどね。）
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を使用すると、
要素の最初の一行のみにスタイルを適用する・・・そんなことができるようになります。
効果的な使用法を探してみてはどうでしょうか？
