<<PREV | TOP | NEXT>>

A 要素の見栄えの制御

  1. Anchor 要素 - ハイパーリンク
  2. 他ページへのリンク - 始点アンカー
  3. ページ内へのリンク - 終点アンカー
  4. メールアドレスへのリンク
  5. リンクの下線の表示と非表示 - CSS による見栄えの指定

last modified 10th/Oct. 2000

殆どのブラウザでは始点アンカー(href 属性を持つ A 要素)には下線が引かれ、訪問済みのリンクと未訪問のリンクの色を変化して区別できます。

これらは CSS によって調整できます;

CSS1

CSS1 での link 擬似クラスに付いて紹介します。ハイパーリンク(href 属性を持つ Anchor 要素)が訪問済みと未訪問で色が変化する「あれ」です。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>Link Pseudo-Element</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
A:link { color: navy; text-decoration: underline }
A:visited { color: maroon; text-decoration:none }
A:active { color: green }
-->
</style>
</head>
<body>
<p>
この文書中の始点アンカーは、未訪問の場合は紺色、訪問済みの場合は栗色、
アクティブな場合は深緑色で表示されます。
</p>
</body>
</html>
上の例で指定しているスタイル
a:link未訪問のリンク色は紺色で下線が引かれる
a:viisted訪問済みのリンク栗色で下線が引かれない
a:activeアクティブ状態のリンク緑色

或る要素に注目し、その状態によって区別するセレクタを「疑似クラス」と呼びます。 CSS1 では href 属性を持つ A 要素(リンク)に限り疑似クラスが定義されています。

リンク疑似クラス
:link未訪問のリンク
:visited訪問済みのリンク
:active作動中のリンク

例えば、 a:active の場合は、「 A 要素であり、且つ活動中でる状態」を取り出して、スタイルを適用します。

これらの疑似クラスは何れも相互に排他的で、例えば「 :link 且つ :active な要素」は有り得ません。

これらはリンク要素にしか適用できない疑似クラスなので、要素名は省略しても等価です。即ち、次の二行は全く同じ処理を指定しています;

A:link { color: navy }   /* :link 疑似クラスを持つ A 要素にマッチ */
:link { color: navy }    /* 上に同じ */

CSS2

動的な疑似クラス
:active活動中の状態
:hoverカーソルなどのポインタが上に乗っている状態
:focusテキスト入力、タブキー移動など、ユーザの操作対象になっている状態

CSS2 の疑似セレクタはどの要素にも適用でき、 p:hover とあれば、「 P 要素であり、且つカーソルが上に乗っている状態」を取り出して、宣言されているスタイルを適用します。

:link { color: navy }        /* a:link と同じ */
:visited { color: maroon }   /* a:visited と同じ */
:link, :visited { text-decoration: underline }
a:hover { color: purple; text-decoration: none }
a:active { color: green  }
a:focus { color: black; font-style: italic }
上の例で指定しているスタイル
:link未訪問のリンク色は紺色で下線が引かれる
:viisted訪問済みのリンク栗色で下線が引かれる
a:hoverカーソルが上に乗った状態のリンク紫色で下線が引かれない
a:activeアクティブ状態のリンク緑色
a:focusフォーカスされているリンク黒色でフォントが斜体

表示例;

未訪問のリンク(何処にもリンクしていません), 訪問済みのリンク

カーソルを上に載せる、 Tab キーでフォーカスする、クリックする(アクティブ状態にする)など、試して下さい。

CSS2 では、 CSS1 で既に定義されていた :active 疑似クラスが再定義された他、 :hover:focus が追加されました。殆どのブラウザは :focus 状態と :active 状態を区別せず、 :active に対するスタイルを適用します。

:hover, :focus, :active は何れも相互に相補的であり、排他的では有りません。従って、「:hover であり且つ :active な要素」が存在し得ます。従って、スタイルの継承が通常の規則通りに適用されますので、記述する順番が重要になります;

上の例で、 a:hovera:visited, a:link よりも前に記述されると、 a:hover のスタイルは上書きされてしまいます。また、 a:activea:hover よりも後ろに記述されている為、リンクにカーソルが乗っていてもスタイルは a:active のものが適用されます。

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO