リストのメニュー左側に画像を表示する(background-image版)

Tweet

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

サンプルソース

HTMLソース

CSSソース

サンプル表示

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

解説

考え方

メニュー左側に画像がついたものをリストで表現したい時は、リストの背景に画像を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つさえあればそれらは無くてもかまいません。
ですが、あった方がメニューっぽくなるので、そのまま使うことをお勧めします＾＾