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

灰色背景がサンプルソース


サンプルソース

HTMLソース

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

CSSソース

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

サンプル表示

→リストのメニュー左側に画像を表示する(list-image版)(サンプル)


解説

考え方

メニュー左側に画像がついたものをリストで表現したい時は、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を指定しています。