ホーム > web・PC > web制作 > 画像メニューをCSSで作る（CSSでマウスオーバー）

画像メニューをCSSで作る（CSSでマウスオーバー）

2008年7月20日 10:16 | 個別ページ | コメント(3) | トラックバック(0)

webサイトを作る際、メニュー部分は画像のことがほとんどです。
そしてマウスオーバーで色が変わるというのが多いです。
マウスオーバーはjavascriptで画像を切り替えているのが多かったですが、はっきりいってソースも汚いし、いらない文章をソースにいれるべきではないと思います。
リスト構造でメニューを作りCSSで画像を表示し、マウスオーバーも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>と<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"><!--
li{
margin:0;
padding:0;
}
#menu1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_about.gif) no-repeat;
}
#menu2{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_photo.gif) no-repeat;
}
#menu3{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_web.gif) no-repeat;
}
--></style>

表示

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

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

リンク部分をwidthとheightでサイズを指定してあげます。
指定しただけでは、リンクの中の文字だけにつくので、display:block;を指定して固定しよう。

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"><!--
li{
margin:0;
padding:0;
}
#menu_sample1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/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(http://www.zoezoe.net/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(http://www.zoezoe.net/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"><!--
li{
margin:0;
padding:0;
}
#menu_sample1{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_about.gif) no-repeat;
}
#menu_sample1 a{
width:152px;
height:44px;
display:block;
}
#menu_sample1 a:hover{
background: url(http://www.zoezoe.net/img/menu_about_on.gif) no-repeat;
}
#menu_sample2{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_photo.gif) no-repeat;
}
#menu_sample2 a{
width:152px;
height:44px;
display:block;
}
#menu_sample2 a:hover{
background: url(http://www.zoezoe.net/img/menu_photo_on.gif) no-repeat;
}
#menu_sample34{
float:left;
width:152px;
height:44px;
text-indent:-9999px;
background: url(http://www.zoezoe.net/img/menu_web.gif) no-repeat;
}
#menu_sample3 a{
width:152px;
height:44px;
display:block;
}
#menu_sample3 a:hover{
background: url(http://www.zoezoe.net/img/menu_web_on.gif) no-repeat;
}
--></style>

表示

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

関連ページ 1件

この記事に関連している、 web制作 で他の記事も見ることができます。

ブログランキングに参加しています。記事がよかったと思ったらクリックお願いします。
（他のいいブログも探すこともできます。）
ブログランキング・にほんブログ村へ 人気ブログランキングへ

↑このページのトップに戻る

トラックバック(0)

このブログ記事を参照しているブログ一覧: 画像メニューをCSSで作る（CSSでマウスオーバー）

このブログ記事に対するトラックバックURL: http://www.zoezoe.net/manager/mt-tb.cgi/635

コメント(3)

jyutarow :

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

2009年5月30日 21:54
Endeavor :

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

2009年7月25日 13:09
ハルタ :

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

2010年8月 2日 22:07

コメントする


↑このページのトップに戻る
文字サイズ変更： 大 小
826533 hit