最終更新日: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ソース

<ul>
<li id="menu1"><a href="/about/" title="ぞえぞえねっとについて">ぞえぞえねっとについて</a></li>
<li id="menu2"><a href="/photo/" title="写真・作品">写真・作品</a></li>
<li id="menu3"><a href="/web/" title="web・ホームページ制作">web・ホームページ制作</a></li>
</ul>

表示

HTMLで構造的になったので、次はCSSを設定していきます。

ステップ2:CSSでリストの中を画像に変更する

次にCSSを編集します。
リストの中に名前をつけているidを画像に差し替えるようにします。

重要なのは、以下4点です。
1.background:画像を指定します。
2.width:画像の横サイズを指定します。
3.height:画像の縦サイズを指定します。
4.横に並べるのでfloat:leftを指定します。

HTMLソース(ステップ1と同じ)

<ul>
<li id="menu1"><a href="/about/" title="ぞえぞえねっとについて">ぞえぞえねっとについて</a></li>
<li id="menu2"><a href="/photo/" title="写真・作品">写真・作品</a></li>
<li id="menu3"><a href="/web/" title="web・ホームページ制作">web・ホームページ制作</a></li>
</ul>

CSSソース

<style type="text/css" media="all"><!--
#menu1{
float:left;
width:152px;
height:44px;
background: url(/img/menu_about.gif) no-repeat;
}
#menu2{
float:left;
width:152px;
height:44px;
background: url(/img/menu_photo.gif) no-repeat;
}
#menu3{
float:left;
width:152px;
height:44px;
background: url(/img/menu_web.gif) no-repeat;
}
--></style>

表示

表示してみると、文字がそのままでていたり、画像の間に空白があったりします。
ステップ3ではこの辺りを治していきます。
(注意:backgroundでの画像場所は、設置されている画像にあわせてください。)

ステップ3:文字の削除と空白の削除

文字の削除はどうすれば?と思うかもしれませんが、とっても簡単です。
CSSにtext-indent:-9999px;をいれて、文字を強制的に移動さします。
文字の左に黒丸がつくのは、ulのCSSにlist-style-type:none;を追加することで出なくなります。
空白の削除は、<ul>と<li>の設定をします。

HTMLソース(ステップ1と同じ)

<ul>
<li id="menu1"><a href="/about/" title="ぞえぞえねっとについて">ぞえぞえねっとについて</a></li>
<li id="menu2"><a href="/photo/" title="写真・作品">写真・作品</a></li>
<li id="menu3"><a href="/web/" title="web・ホームページ制作">web・ホームページ制作</a></li>
</ul>

CSSソース(追加した箇所は赤文字)

<style type="text/css" media="all"><!--
ul{
list-style-type:none;
}
li{
margin:0;
padding:0;
}

#menu1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_about.gif) no-repeat;
}
#menu2{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_photo.gif) no-repeat;
}
#menu3{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_web.gif) no-repeat;
}
--></style>

表示

メニュー部分にマウスを移動しても、リンクがされていない常態です。
ステップ4ではメニュー部分にリンクがでるようにCSSを設定します。

ステップ4:リンクの設置

リンク部分をwidthとheightでサイズを指定してあげます。
指定しただけでは、リンクの中の文字だけにリンクがつくので、display:block;を指定して固定しよう。
#menu_sample1などでもwidthとheightが記載されており、ソースを短くしたい人は、削除してもOKです。

HTMLソース(ステップ1と同じ)

<ul>
<li id="menu1"><a href="/about/" title="ぞえぞえねっとについて">ぞえぞえねっとについて</a></li>
<li id="menu2"><a href="/photo/" title="写真・作品">写真・作品</a></li>
<li id="menu3"><a href="/web/" title="web・ホームページ制作">web・ホームページ制作</a></li>
</ul>

CSSソース(追加した箇所は赤文字)

<style type="text/css" media="all"><!--
ul{
list-style-type:none;
}
li{
margin:0;
padding:0;
}
#menu_sample1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_about.gif) no-repeat;
}
#menu_sample1 a{
width:152px;
height:44px;
display:block;
}

#menu_sample2{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_photo.gif) no-repeat;
}
#menu_sample2 a{
width:152px;
height:44px;
display:block;
}

#menu_sample3{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_web.gif) no-repeat;
}
#menu_sample3 a{
width:152px;
height:44px;
display:block;
}

--></style>

表示

後はマウスオーバーです。
ステップ5でマウスオーバーの処理に入ります。

ステップ5:マウスオーバーで画像を変更

マウスオーバー時は、a:hoverをつけて実現させます。

HTMLソース(ステップ1と同じ)

<ul>
<li id="menu1"><a href="/about/" title="ぞえぞえねっとについて">ぞえぞえねっとについて</a></li>
<li id="menu2"><a href="/photo/" title="写真・作品">写真・作品</a></li>
<li id="menu3"><a href="/web/" title="web・ホームページ制作">web・ホームページ制作</a></li>
</ul>

CSSソース(追加した箇所は赤文字)

<style type="text/css" media="all"><!--
ul{
list-style-type:none;
}
li{
margin:0;
padding:0;
}
#menu_sample1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_about.gif) no-repeat;
}
#menu_sample1 a{
width:152px;
height:44px;
display:block;
}
#menu_sample1 a:hover{
background: url(/img/menu_about_on.gif) no-repeat;
}

#menu_sample2{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_photo.gif) no-repeat;
}
#menu_sample2 a{
width:152px;
height:44px;
display:block;
}
#menu_sample2 a:hover{
background: url(/img/menu_photo_on.gif) no-repeat;
}

#menu_sample34{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(/img/menu_web.gif) no-repeat;
}
#menu_sample3 a{
width:152px;
height:44px;
display:block;
}
#menu_sample3 a:hover{
background: url(/img/menu_web_on.gif) no-repeat;
}

--></style>

表示

これでマウスオーバー時に画像がかわるようになります。
そこまで難しくないので、イメージタグでしている人や、javascriptでマウスオーバーをしている人は実践してみてはいかがでしょうか。

この記事が参考になったらSNSにお願いします。

コメント(5)

大変助かりました。ありがとうございました。

こちらのサイト様のおかげでメニューができました。
ありがとうございました。

今まで色々なサイトを回ってきたのですが、いまいちつかめなかったのですが、
こちらのサイト様は大変わかりやすく、おかげで無事オリジナルメニューができました!
ありがとうございました。+゚(*´∀`*)。+゚

参考になりました。ありがとうございます。

とても参考になりました。ありがとうございます。

ただ、リストマークの黒丸が残ってしまいます。どうすれば消すことが出来ますか?教えてください。お願いします。

コメントする


Copyright ぞえぞえねっと All rights reserved