STEP.3 リンクに対する装飾
リンク文字の下線を消したり、箱内のどこでもクリックできるように装飾します。文字色や背景色の装飾は、リンク先が未訪問の場合と既訪問（＝過去に訪問済み）の場合とに分けて指定します。
ul.pagelinks li a {
display: block; /* ブロック化 */
text-decoration: none; /* 下線を消す */
width: 1.2em; /* 横幅(IE) */
}
/* 未訪問リンクの色 */
ul.pagelinks li a:link {
background-color: white; /* 背景色 */
color: blue; /* 文字色 */
}
/* 既訪問リンクの色 */
ul.pagelinks li a:visited {
background-color: white; /* 背景色 */
color: purple; /* 文字色 */
}
これまでのソースをすべて使って表示すると、以下のように見えます。
これで、箱内のどこでもクリック可能になりました。（数字の上だけでなく余白部分もクリック可能になっています。）リンクの下線も消えて見やすくなっています。
ページ番号「3」は、「現在位置」ということになっているのでリンクにはなっていません。この部分の装飾は後で行います。 また、まだ項目の上にマウスを載せても装飾は変化しません。この装飾も後で行います。
スタイルシートソースの各記述の意味を順に説明しておきます。
■display: block;
ブロックレベル要素のように表示させます。この指定によって、箱内のどこでもクリック可能になります。
■text-decoration: none;
リンク文字に標準で描かれる下線を消しています。
■width: 1.2em;
リンクの横幅です。箱の横幅と同じ値を指定しておきます。本来は不要ですが、IEでも余白部分をクリック可能にするために必要です。
■未訪問リンクと既訪問リンク
リンク先が未訪問か既訪問かによって装飾を分けるには、前者に「link疑似クラス」・後者に「visited疑似クラス」を使います。 具体的には、以下のような記述になります。
a:visited { ～既訪問の場合の装飾～ }
■background-color: white;
背景色です。ここでは白色(white)を指定していますが、好みの色を指定して下さい。 （未訪問リンク先と既訪問リンク先で色を分けることもできます。ここでは両方とも白色(white)を指定しています。）
■color: blue;
文字色です。ここでは未訪問の場合に青色(blue)を、既訪問の場合に紫色(purple)を指定しています。 リンクであることが分かりやすいように、青系の色を指定しておくことをお勧めいたします。 （この記述を省略すれば、そのページでの標準の「リンク色」が使われます。）
次に、各項目の上にマウスが載ったときの装飾を記述します。
