<ul> のマークを画像にする時、
ul { list-style-image: url(bullet.gif); }
などとやってしまうと、マーク縦位置の調整ができなくなります。そんな時は、<li> の背景画像にして位置を調整するとうまくいきます。
サンプルコード ———————————————————————-
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>リストのマークを画像にする</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#s1 ul {
list-style-image: url(bullet.gif);
}
#s1 li {
font-size: 12px;
}
#s2 ul {
list-style-image: url(bullet.gif);
}
#s2 li {
font-size: 12px;
line-height: 18px;
}
#s3 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#s3 li {
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 3px;
padding-left: 18px;
font-size: 12px;
line-height: 18px;
}
-->
</style>
</head>
<body>
<h1 id="i-0">リストのマークを画像にする</h1>
<p><ul> のリストマークを画像にした物。微妙にずれる。</p>
<div id="s1">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
<p><ul> のリストマークを画像にし、行間を設定した物。結構ずれる。</p>
<div id="s2">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
<p><li> の背景画像にして、位置を調整した物。ばっちり。</p>
<div id="s3">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
</body>
実際の動作サンプル ———————————————————————-