10月 132011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<ol id=”imgmenu”>
<li>掲示板</li>
<li>リンク</li>
</ol>
<li>掲示板</li>
<li>リンク</li>
</ol>
CSSソース
#imgmenu {
list-style-image:url(menuimg.gif);
margin-left:10px;
}
list-style-image:url(menuimg.gif);
margin-left:10px;
}
サンプル表示
(黒い四角の組み合わせで作られた矢印が画像です)
解説
考え方
メニュー左側に画像がついたものをリストで表現したい時は、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を指定しています。