リンクを目立たせる

リンクしている文字にマウスが触れると、文字の色が派手に変化する方法は「スタイルシート」を用いています。

「スタイルシート」の概要については、ここでは触れません。ただし、意図せずに利用している人が多いため、方法は紹介します。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「body要素の属性」は廃止予定です。


廃止予定 
background/text/link/vlink/alink 


これらの要素・属性はスタイルシートで代価することが推奨されています。

body 要素の属性でリンクしている文字の色を変更

body 要素内に、link 属性・alink 属性・vlink 属性を加える事で、リンクしている文字の色を変えることができます。
ファイル名：link.html

<html>
<head>
<title>リンクの色を変える</title>
</head>
<body link="blue" alink="red">

<a href="./index.html">リンクに触ると色が変わる</a>

</body>
</html>

この方法により、リンクを強調したり、隠したりすることができ、一歩進んだレイアウトが可能となります。

通常リンクに触れた時

body 要素のリンクしている文字の色を設定する属性は、次のようなものがあります。

属性名	説明
link	未訪問のリンクを示す文字の色を設定
vlink	既訪問のリンクを示す文字の色を設定
alink	選択中のリンクを示す文字の色を設定

スタイルシートを利用する

スタイルシートについての説明は「スタイルシートを使ってみよう」にありますので、ここでは説明はしません。

<head>～<head>部分に次のように記述してみましょう。ここで「#」の後の数字を変えれば、好きな色に変化します。
ファイル名：link2.html

<html>
<head>
<title>リンクの色を変える</title>
<style type="text/css">
<!--
  a:link    { text-decoration:     none; color:#2040EF; }
  a:visited { text-decoration:     none; color:#2040EF; }
  a:active  { text-decoration:     none; color:#2111EF; }
  a:hover   { text-decoration:underline; color:#ca0000; }
-->
</style>
</head>
<body>

<a href="./index.html">リンクに触ると色が変わる</a>

</body>
</html>

通常リンクに触れた時

また、次のようにスタイルシートの定義を変更すれば、さらにカラフルにリンクを目立たせることができます。

<style type="text/css">
<!--
  a:active  { background-color:fuchsia; color:white;
              text-decoration:    none; }
  a:hover   { background-color: orange; }
-->
</style>

通常リンクに触れた時

このように、ブラウザ表示の装飾には「スタイルシート」が利用されます。

画像にリンクを張る場合

丸い画像などにリンクを張る場合、テキストとは反対に色が変わるのは違和感を感じます。

このような場合、img要素に「 border="0" 」を加えることで、リンクで指定した色を無視できます。

<a href="./index.html"><img src="○○○.gif" border="0"></a>

適用後　　　　　　適用前

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る