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を指定しています。

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>