同ページ内のリンクに異なるCSSスタイルを適用する方法

Q: 同じページで違うリンクスタイルを設定するにはどうすればよいですか?
A: セレクターを利用することでページ内の特定エリアでのみアクティブなリンクスタイルを定義することができます。
aタグ毎に定義するよりも、リンクスタイルの効果をもたらしたいエリアとそうではないエリアを分離して定義させるのです。
例えば以下のとおり:

<html>
<head>
<style type="text/css">
    .body a:link {
    color: #ff6600; 
    text-decoration: none
}
.body a:visited {
    color: #0000ff; 
    text-decoration: none
}
.body a:active {
    color: #0000CC; 
    text-decoration: none
}
.body a:hover {
    color: #6699cc ; 
    text-decoration: underline; 
    color: red;
}
.body2 a:link {
    color: #0000CC; 
    text-decoration: underline overline
}
.body2 a:visited {
    color: #0000CC; 
    text-decoration: underline overline
}
.body2 a:active {
    color: #0000CC; 
    text-decoration: underline overline
}
.body2 a:hover {
    color: #0000CC; 
    text-decoration: underline; 
    color: green;
}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br/>
<span class="body">
<a href="http://www.yahoo.com">YAHOO</a>
<br/>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br/>
<br/>
ANOTHER TYPE OF LINKS
<br/>
<span class=”body2″>
<a href="http://www.yahoo.com">YAHOO</a>
<br/>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>

状況に応じて<span>をどのように使用するかに注意してください。
エリアを分離して定義することは以下2つの理由に表されるように効果的です。

  • 単一のリンクスタイルを使用することに限定されるものではなく、同じページ内で違うリンクスタイルを使用することを可能にしています。
  • 特定のリンクスタイルを該当エリア全体に定義することができます。したがって、そのエリア内の各リンクにスタイル定義を設定する必要はありません。

Comments are closed.