リンクボタンの色を切り替わるようにする

前回はcssを使ってナビゲーションメニューのデザインを作りました。今回はナビゲーションメニューの最後の仕上げとして、
リンクボタンにマウスを合わせる（マウスオーバーする）と、ボタンの色が切り替わるように設定します。
こうする事でメニューのそれぞれのボタンの色が切り替わるようになるので、ナビゲーションメニューっぽい見栄えになります。
あと色が切り替わる速さの調整などもできるので、その辺も紹介していきますね！

疑似クラスでマウスが乗った時のスタイルを設定

リンクボタンにマウスが乗った際に、背景色（ボタンの色）や文字の色を切り替えるには、疑似クラスを使います。
疑似クラスとは、要素が特定の状態の時のみに適用されるセレクターの事です。
例えばリンクのアンカーテキスト（文字の部分）にマウスを乗せたり、クリックしたりするとその文字の色が変わりますよね。
こういったものは大体疑似クラスが使われています。

ではa要素（リンク部分）にマウスを重ねた場合と、クリックした場合に対応する疑似クラスを使って、リンクボタンの背景色を各タイミングで切り替わるようにしてみましょう。

「#menu a:hover」では、 id名「menu」が付いた要素の中にあるa要素にマウスが重なった時に、 {}に記述したスタイルが適用されます。
background-colorでは、背景色の設定をしています。
「#menu a:active」では、 id名「menu」が付いた要素の中にあるa要素がクリックされた時に、 {}に記述したスタイルが適用されます。

hoverは単純にマウスが重なった（乗った）時の状態ですが、 activeでは「マウスが重なってクリック」のように、同時に複数の状態が発生しています。
なのでcssには先にhoverの設定を記述し、次にactiveの設定を記述する必要があります。
この記述する順番を逆にすると、マウスの動きに正しく反応しない事があるので注意して下さいね。

色が切り替わるスピードを調整する

0.3sで「0.3秒かけて色を変化させる」という意味になります。なので、色をゆっくり変えたい場合は「0.5s」「0.8s」というように、数値を上げてみて下さいね。
あとa:hoverでなくaに対して設定していますが、これでa（リンク部分）にマウスが重なった時にゆっくり色が変わるようになります。逆にa:hoverに対して設定してしまうと、ちょっと違う動きになるので「a」に対して設定するようにして下さい。
それと同じようなのを複数記述してますよね。これはベンダープレフィクス（-moz-・・・など）を加えているだけです。簡単にいうと、とりあえず「このままコピペしてね」ってことですｗ
ベンダープレフィックスについては、長くなるので省略させてもらいますが、ベンダープレフィックスの部分はなくても大丈夫です。なのでわかんなかったら、とりあえずコピペして使って見て下さい(^^)/ 数値変えるだけで、色の変化の速度を調整できるので是非やってみて下さいね！！
次回は、ページ全体をセンタリングする方法を紹介していきます！