[ CSS ] リストのマークを画像にするサンプル

<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>&lt;ul&gt; のリストマークを画像にした物。微妙にずれる。</p>
<div id="s1">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
<p>&lt;ul&gt; のリストマークを画像にし、行間を設定した物。結構ずれる。</p>
<div id="s2">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
<p>&lt;li&gt; の背景画像にして、位置を調整した物。ばっちり。</p>
<div id="s3">
<ul>
<li>会社概要</li>
<li>納入実績</li>
<li>求人情報</li>
<li>更新情報</li>
<li>製品情報</li>
<li>お知らせ</li>
</ul>
</div>
</body>

実際の動作サンプル ———————————————————————-

– リストのマークを画像にするサンプル

コメントを残す