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