list-style-image／list-style-position

■list-style-image:(値)
・リストマーカーとして画像を指定する。
(値)
　url(画像ファイルのパス) ･･･画像ファイルの絶対パス or 相対パスを指定
　nine ･･･画像を指定しない
　*list-style-image-属性と list-style-type-属性を同時に指定した場合，前者の
　　値が none でなければ，前者が優先される。もし，前者の値が none のとき，ま
　　たは，指定した画像が読めない場合は後者の指定が有効になる。

■list-style-position:(値)
・リストマーカーの表示位置を指定。
(値)
　outside ･･･(初期値）リストマーカーはリスト内容の枠外に表示される。
　　　　　　　　　　*(表示例)
　　　　　　　　　　　　　■これはlist-style-position:outsideの
　　　　　　　　　　　　　　サンプルです。
　inside ･･･リストマーカーはリスト内容の枠内に埋め込まれる。
　　　　　　　　　　*(表示例)
　　　　　　　　　　　　　■これはlist-style-position:insideの
　　　　　　　　　　　　　サンプルです。

Sample

outsideの例

test　1
test　2
test　3

insideの例

test　1
test　2
test　3

Sample Source......................................................................>>>

<style type="text/css">
　　　div.sample li {border:1px dotted navy}
　　　div.sample div {width:300px;border:1px solid navy}
</style>
</head>

<body>
<div class="sample">
　<div><p>outsideの例</p>
　　<ul style="list-style-position:outside">
  　　　<li style="list-style-type:square">test　1
  　　　<li style="list-style-image:url(../../images/icon/flg_plus1.gif);">test　2
  　　　<li style="list-style-image:url(../../images/anime/anistar.gif);">test　3
　　</ul>
　</div>

　<div><p class="kaisetu">insideの例</p>
　　<ul style="list-style-position:inside">
  　　　<li style="list-style-type:square">test　1
  　　　<li style="list-style-image:url(../../images/icon/flg_plus1.gif);">test　2
  　　　<li style="list-style-image:url(../../images/anime/anistar.gif);">test　3
　　</ul>
　</div>
</div>