10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<ul id=”cbgmenu”>
<li><a href=”http://www.yahoo.co.jp”>Yahoo!JAPAN</a></li>
<li><a href=”http://www.google.co.jp”>Google</a></li>
</ul>

CSSソース

#cbgmenu a:hover {background-image:url(/img/sample/menubg.gi);}

背景画像として使用した画像

リンクの背景画像

サンプル表示

解説

HTMLソース

メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ol id=”cbgmenu”>としています。

CSSソース

#cbgmenu a:hover {background-image:画像へのパス;}を指定します。
これは、メニュー(id=”cbgmenu”)内にあるリンク(a)の上にマウスカーソルが乗った時(hover)に、background-imageで指定した画像にリンクの背景画像が変わるという意味です。
上のサンプルでは、カーソルが乗った時に「薄いピンク色の市松模様」に変える為に、CSSの#cbgmenu a:hover {background-image:url(menubg.gif);}を指定しています。
ちなみに、背景画像はmenubg.gif部分を他の画像へのパスに変えればOKです。

[参考]相対パスと絶対パス(パスの説明)

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<ul id=”menu”>
<li><a href=”bbs.html”>掲示板</a></li>
<li><a href=”link.html”>リンク</a></li>
</ul>

CSSソース

#menu {margin:0px;list-style:none;}
#menu li {float:left; margin:1px 3px;}

サンプル表示

解説

考え方

リストというと縦並びなイメージですが、実は横に並べることも出来ます。
float:left;というものがあるのですが、これは左側から横に書いた順番に並べるという意味の指定です。
つまり、リストの各項目を左から右へと順番に並べて表示するという意味になります。

HTMLソース

メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ul id=”menu”>としています。

CSSソース

色々と書いてありますが、肝になる部分は1つのみ。
float:left;
ここだけです。

上でも説明しましたが、float:left;には左から右へと順番に並べて表示するという意味があります。なので、リストの各項目が横並びに表示されます。
表示される順番は、HTMLソースの一番上に書いたものが一番左で、その後は上から下へという流れで左から右へと表示されていきます。

なお、float:right;というのもあり、これは右から左へ順番に表示するというものです。
表示される順番は、HTMLソースの一番上に書いたものが一番右で、その後は上から下へという流れで右から左へと表示されていきます。

なおここでは、横並びにすると隣との境界が分かりにくかったので、margin:1px 3px;で上下1pxずつ左右3pxずつ隙間をあけています。
borderを使用して境界線を書いたり、background-colorで背景色を変えたりすることでも各項目を分かり易く分けることが出来ますのでお好みに応じてどうぞ。

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<ol id=”bgimgmenu”>
<li>掲示板</li>
<li>リンク</li>
</ol>

CSSソース

#bgimgmenu {margin-left:0px; list-style:none;}
#bgimgmenu li {background-image:url(menuimg.gif); margin:0px; padding-left:20px; background-repeat:no-repeat;}

サンプル表示

  1. 掲示板
  2. リンク

(黒い四角の組み合わせで作られた矢印が画像です)

解説

考え方

メニュー左側に画像がついたものをリストで表現したい時は、リストの背景に画像を1個だけ表示し、左側を画像の幅分だけスペースを空ければOKです。
つまり、背景画像が表示されている部分はスペースが開いているから、あたかもそこに画像があるように見えるというわけです。

HTMLソース

メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ol id=”bgimgmenu”>としています。

CSSソース

色々と書いてありますが、肝になる部分は4つ。
(1)list-style:none;
これは、各リスト項目の左側にマークや数字を表示しないという意味です。
今回は画像を表示させたいので、普段表示される■や○、1等のマーク・数字は表示しないようにしなければいけません。
その為、この記述が必要になります。

(2)background-image:url(menuimg.gif);
これは、各リスト項目の背景にmenuimg.gifという画像を表示するということです。リストの左側に表示したい画像を指定しましょう。

(3)padding-left:20px;
これは、リストの内側に20ピクセルのスペースを空けるということです。ここでは、menuimg.gifの画像の横幅が12ピクセルなのでちょっと余裕を持たせて20ピクセルあけました。
実際に使うときには、自分で用意した画像より少し多いくらいのスペースを空けて、実際にどう表示されるかを見ながらちょうど良い感じに表示されるよう数値を調整しましょう。

(4)background-repeat:no-repeat;
これは、背景画像は1回しか表示しないという意味です。
普通背景画像は、背景を表示したい全エリアに対して背景用画像が小さい場合に背景用画像を繰り返し表示してしまいます。
ただ、今回の場合にそれをやってしまうとメニューが見にくくてしょうがありません。なので、必要な1回だけ表示させて終わりということを指定してあげます。

他にもいくつか指定はありますが、上の4つさえあればそれらは無くてもかまいません。
ですが、あった方がメニューっぽくなるので、そのまま使うことをお勧めします^^

10月 132011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<ol id=”imgmenu”>
<li>掲示板</li>
<li>リンク</li>
</ol>

CSSソース

#imgmenu {
list-style-image:url(menuimg.gif);
margin-left:10px;
}

サンプル表示

  1. 掲示板
  2. リンク

(黒い四角の組み合わせで作られた矢印が画像です)

解説

考え方

メニュー左側に画像がついたものをリストで表現したい時は、CSSのlist-style-imageを使います。
これは、リスト左のマークの代わりにURLで指定した画像を表示するというものです。

HTMLソース

メニューに使うリストにのみ適用させる為、リストにidを指定します。
ここでは、<ol id=”imgmenu”>としています。

CSSソース

(1)list-style-image:url(menuimg.gif);
これは、各リスト項目の左側に、url部分で指定した画像を表示するということです。
urlの後の()内が画像へのパスとなります。
このサンプルでは、menuimg.gifという画像を表示します。

(2)margin-left:10px;
これは、各リスト項目の左側に10pxの空白をあけるという意味です。
何も指定しないとリスト自体がかなり右側に表示されてしまい、あまりメニューっぽくなりません。
その為、適切な位置に表示する為にmargin-leftを指定しています。