リンクの文字色

リンクの文字色は特別

ページの背景色を変えたときに、リンクが目立たなくなってしまうことがあります。こんな時にはリンクの文字の色を変えたくなります。リンクの色を頼りにリンクボタンを探す人もいますから、リンクの色を変えるときにはわかりやすいことを第一に考えてください。

a タグに色指定できるが…

a タグにスタイルシートで色指定をすればリンクの文字色を変えることができます。

a { color:#ffff00;}

しかし、これではどんな場合も #ffff00(つまり黄色)になってしまいます。

リンクには区別がある

a タグ内の文字色は特殊で、まだ見ていないページへのリンクは青、そして訪れたことのあるページへのリンクは紫色と区別しています。この区別も容易にわかるようにした方がいいでしょう。そのためにはスタイルシートに次のようにします。

a:link    { color:#99ccff;}
a:visited { color:#ff66ff;}
a:active  { color:#ffffcc;}
a:hover   { color:#ffffcc;}

このリンクは次のような色合いになります。

ａ の後ろについているのは class に似ていますが、読者がそこに行ったかどうかの状況で決まるクラスで、ページを書く方が決めるクラスでないので、擬似クラスと呼ばれ、記号もピリオドでなく、コロンです。a タグ内には class= で記述する必要はありません。次のような意味です。

link

まだ訪れていない場所

visited

すでに訪れた場所

active

クリックしてそこに移動中

hover

マウスがボタン上にある

特に、hover は通常では設定されていませんから、うまく使えば効果的です。

慎重に

リンクの色を変えるときには慎重にテストをして見やすいかどうかを確認してください。

a:link    { color:#ffff00;}
a:visited { color:#00ff00;}
a:active  { color:#66ffff;}
a:hover   { color:#66ffff;}

このリンクは次のような色合いになります。

注意する点を大切な順に並べてみます

1. 一番大切なのは、背景色から目立つ色であるかどうかです。色の違いだけでなく、明るさの違いがあるようにします。白黒のディスプレイや、色覚に障害のある人のことも考えます。緑と赤を区別するのが難しい人もいます。
2. 次に大切なのは、リンクとわかるかどうかです。ただ目立つだけでクリックすれば別のページにいけると思わなければ役に立ちません。
3. 次は訪れたかどうかがわかるようにすることです。この２つの色をただ変えただけではどちらが訪れたことがあるかが判断できません。多くの場合まだ訪れていない方をより目立つようにします。まだ訪れていない方も見てほしいからです。

次にいくつかの方針を上げました。上にあるやり方が無難です。下に行くほどきちんと考える必要があります。

1. まだ見ていないページへのリンクは青系の色。訪れたことのあるページへのリンクは紫系の色というように、一般的な色と同じ系統の色にする。背景が暗い時には同じ青系でも明るい色にするなどして目立つようにする。
2. まだいったことのないところだけは一般的な色と同じ青系統の色にする。しかし、訪れたことのあるページのリンクは色が大きく変わっても一度訪れているのだから大丈夫だろうから、紫系にとらわれないで思い切って変える。
3. ページの構成上色が変わってもリンクであることをはっきり示せる場合は思い切って色を大きく変える。
4. ページの構成上、訪れたことの有無がわからなくなっても問題ない場合は、共通な色またはほんのちょっとだけ異なる色にする。

課題

kuro.html 暗い背景のページを作り、「もどる」リンクを適切な色でもうけなさい。ページの内容はなくてもかまわない。もちろん、index.html に kuro.html へのリンクをつくります。