STEP.4 マウスが載ったときの装飾
各項目の上にマウスが載ったときの装飾を記述します。マウスが載ったときの装飾は、hover疑似クラスに対して記述します。
ul.pagelinks li a:hover {
background-color: blue; /* 背景色 */
color: yellow; /* 文字色 */
}
background-color: blue; /* 背景色 */
color: yellow; /* 文字色 */
}
これまでのソースをすべて使って表示すると、以下のように見えます。（各項目の上にマウスを載せてみて下さい。）
これで、各項目の上にマウスを載せると、項目の色が変化するようになりました。
※「3」は現在位置なので未装飾です。後で装飾します。
ここで使用しているプロパティは、背景色を指定する「background-color」プロパティと、文字色を指定する「color」プロパティの2つだけです。 ここでは、背景を青色(blue)、文字を黄色(yellow)にしていますが、もちろん好みの色を何でも指定して構いません。
次に、「現在位置」を示す項目の装飾を行いましょう。
STEP.5 現在位置を示す項目の装飾
現在位置を示す項目（li要素）には、あらかじめclass属性を使って「here」というクラス名を付加しています。 ですから、hereクラスに対して装飾を記述します。
/* 現在位置項目の装飾 */
ul.pagelinks li.here {
background-color: green; /* 背景色 */
color: #ffff80; /* 文字色 */
border-color: green; /* 枠線色 */
}
ul.pagelinks li.here {
background-color: green; /* 背景色 */
color: #ffff80; /* 文字色 */
border-color: green; /* 枠線色 */
}
これまでのソースをすべて使って表示すると、以下のように見えます。
ここで使用しているプロパティは、背景色・文字色と、枠線色を指定する「border-color」プロパティの3つです。 ここでは、背景と枠線色を緑色(green)、文字を薄い黄色(#ffff80)にしていますが、好みの色を指定しています。
これで必要な装飾はすべて記述しました。
次のページで、すべてのソースをまとめて掲載しておきます。
