リンクの色を変更 a:link
リンクを目立たせる
リンクしている文字にマウスが触れると、文字の色が派手に変化する方法は「スタイルシート」を用いています。
「スタイルシート」の概要については、ここでは触れません。ただし、意図せずに利用している人が多いため、方法は紹介します。
【注意】
「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等の学習に役立つ書籍を紹介します。
