最終更新日：2016年3月 8日 作成日：2008年7月20日
| コメント(5)
画像メニューをCSSで作る（CSSでマウスオーバー）
メニュー部分はCSSで制御するべき
webサイトを作る際、メニュー部分は画像になる場合がほとんどです。
画像の上にマウスオーバーすることで、色が変わったりなどデザインが多少代わるのが主流です。
Webが出てきた当時は、マウスオーバーの処理をjavascriptを用いて画像を切り替えているのが多かったです。この場合、はっきりいってソースも汚いし、いらない文章が多数はいり、ムダなソースにいれるべきではないと思います。
リスト構造でメニューを作りCSSで画像を表示し、マウスオーバーもCSSで行うのがベストです。
現在、全ての画像を1枚ずつ用意しCSSによって表示する画像を決める方法と、複数のメニューを1つの画像で行い座標を変えて表示する方法の2種類があります。
このページでは簡単にできる全ての画像を1枚ずつ用意しCSSによって表示する画像を決める方法を説明しています。
まず、下記のようにメニューで使用する画像を用意します。
ステップ1：HTMLにリスト構造でメニューを作成する
HTMLに、<ul>と<li>を使い、メニューを作成します。
HTMLで構造的になったので、次はCSSを設定していきます。
ステップ2：CSSでリストの中を画像に変更する
次にCSSを編集します。
リストの中に名前をつけているidを画像に差し替えるようにします。
重要なのは、以下4点です。
1.background：画像を指定します。
2.width：画像の横サイズを指定します。
3.height：画像の縦サイズを指定します。
4.横に並べるのでfloat:leftを指定します。
表示してみると、文字がそのままでていたり、画像の間に空白があったりします。
ステップ3ではこの辺りを治していきます。
（注意：backgroundでの画像場所は、設置されている画像にあわせてください。）
ステップ3：文字の削除と空白の削除
文字の削除はどうすれば？と思うかもしれませんが、とっても簡単です。
CSSにtext-indent:-9999px;をいれて、文字を強制的に移動さします。
文字の左に黒丸がつくのは、ulのCSSにlist-style-type:none;を追加することで出なくなります。
空白の削除は、<ul>と<li>の設定をします。
メニュー部分にマウスを移動しても、リンクがされていない常態です。
ステップ4ではメニュー部分にリンクがでるようにCSSを設定します。
ステップ4：リンクの設置
リンク部分をwidthとheightでサイズを指定してあげます。
指定しただけでは、リンクの中の文字だけにリンクがつくので、display:block;を指定して固定しよう。
#menu_sample1などでもwidthとheightが記載されており、ソースを短くしたい人は、削除してもOKです。
後はマウスオーバーです。
ステップ5でマウスオーバーの処理に入ります。
ステップ5：マウスオーバーで画像を変更
マウスオーバー時は、a:hoverをつけて実現させます。
これでマウスオーバー時に画像がかわるようになります。
そこまで難しくないので、イメージタグでしている人や、javascriptでマウスオーバーをしている人は実践してみてはいかがでしょうか。
この記事が参考になったらSNSにお願いします。
大変助かりました。ありがとうございました。
こちらのサイト様のおかげでメニューができました。
ありがとうございました。
今まで色々なサイトを回ってきたのですが、いまいちつかめなかったのですが、
こちらのサイト様は大変わかりやすく、おかげで無事オリジナルメニューができました！
ありがとうございました｡+ﾟ(*´∀｀*)｡+ﾟ
参考になりました。ありがとうございます。
とても参考になりました。ありがとうございます。
ただ、リストマークの黒丸が残ってしまいます。どうすれば消すことが出来ますか？教えてください。お願いします。