さて、前回リストのCSSのブラウザ間の違いについて述べてみました。
リストのCSS ブラウザ間の違い
リストのCSS ブラウザ間の違い2
今回は、悩ましい！リストのマーカー（箇条書きの頭につく黒い点などのこと）の画像の位置調整についてまとめてみます。
まず、画像をリストのマーカーに画像を指定してみます。
list-style-image:url(画像へのリンク)
でマーカーに画像が指定できます。
やってみましょう。
<style type="text/css">
<!--
ul {
padding-left: 10px;
margin-left: 10px;
list-style-image:url(images/yaji_red.gif)
}
-->
</style>
</head>
<body>
リストだよー。
<table><tr>
<td style="width:70px; background-color:#FFCC33">
<ul class="test1">
<li>ナルト
<ul>
<li>ナルト連弾</li>
<li>ナルトキック</li>
</ul>
</li>
<li>さすけ</li>
<li>さくら</li>
</ul>
</td>
</tr></table>
</body>
</html>
Firefoxのスクリーンショットです。（IE6でもほぼ同じ）
ネストされているリスト（子供のリスト：ナルト連弾やナルトキックの部分）のマーカーを、できれば文章の縦位置の真ん中に持ってきたいとします。
残念ながら、これを指定する方法はないようです。![[sad]](https://i1.wp.com/oc-technote.com/wp-content/themes/oc/assets/images/face/sad.png?w=525&ssl=1)
divで背景に画像を設定して、padding や背景位置の指定でなんとかするようにはいかないのです。
listタグのマーカーの位置を変更するために設けられているプロパティはlist-style-position にて、outsideかinsideを指定するしかありません。
参考：リストのCSS ブラウザ間の違い2
heightやvertical-alignを仕込んでみても、縦に長い画像をマーカーに仕込んでみても無駄です。
縦に長い画像を仕込んだ場合、マーカーの画像が終わったところからリストのコンテンツが始まります。
横方向に動かすことは、小細工でできます。
何かというと、たとえばタグなどを仕込み、そのタグの配置を指定します。
ただし、縦方向には効きません。
縦方向にマーカーを動かすことはどうやらできないようです。
コンテンツの場所を変更しても、マーカーが一緒にくっついてくるからです。
横方向に、マーカーとコンテンツを離すことができるだけです。
<style type="text/css">
<!--
ul {
padding-left: 10px;
margin-left: 10px;
list-style-image:url(images/yaji_red.gif)
}
a{
display:block;
padding-top:20px;
margin-top:20px;
paddhing-bottom:20px;
margin-bottom:20px;
padding-left:20px;
}
-->
</style>
</head>
<body>
リストだよー。
<table><tr>
<td style="width:70px; background-color:#FFCC33">
<ul class="test1">
<li>ナルト
<ul>
<li><a>ナルト連弾</a></li>
<li>ナルトキック</li>
</ul>
</li>
<li>さすけ</li>
<li>さくら</li>
</ul>
</td>
</tr></table>
</body>
</html>
上記HTMLでナルト連弾とかいてあるところにタグを仕込み、タグに上下・左のマージンやパディングを指定したところ。
マーカーは縦方向にコンテンツをずらしてもくっついてきます。
横方向にだけ、マーカーからコンテンツを離すことができます。