箱形のページ移動リンクを作る(5ページ目)

STEP.3 リンクに対する装飾

リンク文字の下線を消したり、箱内のどこでもクリックできるように装飾します。文字色や背景色の装飾は、リンク先が未訪問の場合と既訪問（＝過去に訪問済み）の場合とに分けて指定します。

これまでのソースをすべて使って表示すると、以下のように見えます。

これで、箱内のどこでもクリック可能になりました。（数字の上だけでなく余白部分もクリック可能になっています。）リンクの下線も消えて見やすくなっています。
ページ番号「3」は、「現在位置」ということになっているのでリンクにはなっていません。この部分の装飾は後で行います。 また、まだ項目の上にマウスを載せても装飾は変化しません。この装飾も後で行います。

スタイルシートソースの各記述の意味を順に説明しておきます。

■display: block;
ブロックレベル要素のように表示させます。この指定によって、箱内のどこでもクリック可能になります。

■text-decoration: none;
リンク文字に標準で描かれる下線を消しています。

■width: 1.2em;
リンクの横幅です。箱の横幅と同じ値を指定しておきます。本来は不要ですが、IEでも余白部分をクリック可能にするために必要です。

■未訪問リンクと既訪問リンク
リンク先が未訪問か既訪問かによって装飾を分けるには、前者に「link疑似クラス」・後者に「visited疑似クラス」を使います。 具体的には、以下のような記述になります。

■background-color: white;
背景色です。ここでは白色(white)を指定していますが、好みの色を指定して下さい。 （未訪問リンク先と既訪問リンク先で色を分けることもできます。ここでは両方とも白色(white)を指定しています。）

■color: blue;
文字色です。ここでは未訪問の場合に青色(blue)を、既訪問の場合に紫色(purple)を指定しています。 リンクであることが分かりやすいように、青系の色を指定しておくことをお勧めいたします。 （この記述を省略すれば、そのページでの標準の「リンク色」が使われます。）

次に、各項目の上にマウスが載ったときの装飾を記述します。

マウスが載ったときの装飾方法へ >>