タイトル画像
サイトタイトル画像

リンクの色を変更 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>

通常リンクに触れた時

リンク2

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

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

通常リンクに触れた時

リンク3

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

画像にリンクを張る場合

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

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

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

適用後      適用前

リンクに触れた時
スポンサードリンク

オススメ書籍

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

人気コンテンツ

    Copyright ©2015 .(since 2000/08/10)