Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mildleaf/www/c/wp-content/themes/suffusion/functions/media.php on line 666

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mildleaf/www/c/wp-content/themes/suffusion/functions/media.php on line 671

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mildleaf/www/c/wp-content/themes/suffusion/functions/media.php on line 684

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mildleaf/www/c/wp-content/themes/suffusion/functions/media.php on line 689

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/mildleaf/www/c/wp-content/themes/suffusion/functions/media.php on line 694
リストのメニュー左側に画像を表示する(list-image版) – コピペで出来る!簡単ホームページ作成入門
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>