メインメニューのスタイリング★リンク部分に背景画像を指定するリンク部分に背景画像を指定しましょう。マウスが乗る前の背景画像とマウスが乗った際に表示する背景画像の2枚の画像を用意します。ファイル名は何でもよいのですが、bg_menu1.pngとbg_menu2.pngにしました。この2枚の画像ファイルをimagesフォルダの中に保存します。画像ファイル:bg_menu1.png画像ファイル:bg_menu2.pngこちらのページより、サンプルサイトのファイルをダウンロードすることができます。コピーして、imagesフォルダの中に入れてください。画像ファイルの準備ができたら、base.cssに以下の記述を追加してください。/*リンクにマウスが乗ったら背景画像を変更する*/}保存をしたらブラウザで表示してみましょう。メニュー部分に背景画像が表示されるようになれば成功です。変更前を確認する各リンクの上にマウスカーソルが乗ると、背景画像が変化するはずです。背景色だけの時よりも、ほんの少しですが高級感が出せたと思います。背景色と背景画像を同時に指定?サンプルサイトでは、リンク部分に背景色を指定しているのに、同時に背景画像も指定しています。背景画像を指定するなら、わざわざ背景色を指定する必要はないのでは?と思われた方がいらっしゃるかもしれません。ユーザーの閲覧環境によっては、画像を表示することができない、または、通信速度の関係などであえて画像を表示させない設定にしている場合があります。画像が表示されない環境でウェブページが表示された場合、背景色を指定していなければ白い背景に白いリンクテキストが表示されて、どこにリンクがあるのか分からなくなってしまう恐れがあります。背景色と背景画像を同時に指定するのは、画像が表示されない閲覧環境のユーザーにも、ウェブサイトを問題なく利用してもらえるようにという狙いがあります。背景画像を指定する場合には、できるだけその背景画像の色に近い背景色を同時に指定しておくほうが良いでしょう。ここまでの制作段階で、サンプルサイトは以下の状態となっています。