list-style-imageを使わずにリストマーカーに画像を使う

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは、maiです。

今回は初心に返って、ごく簡単で使いどころが多い「リストマーカーを画像にする」について。

リストマークを画像にする場合、
list-style-imageというプロパティが既にありますが、
これを使うとちょっとズレたりしちゃうのでデザインとしてちょっと…ということがあります。
そういうズレを防ぐためにも、リストマークを画像にする時は
backgroundで入れてしまいましょう。

具体的にはこんな感じ↓

◆list-style-imageを使った場合

 cssの記述自体は簡単ですが、テキストに対して上ズレしちゃってます。

li { list-style-image: url(../list-mark.png); }

◆backgroundを使った場合

cssはlist-style-imageに比べてちょっと記述が増えますが、位置をバッチリ調整できます。
天地の位置をcenterに指定することで、細かく指定しなくてもほぼ中央に配置することができます。
左のpaddingは画像の幅+余白の3pxを取り、上下のpaddingは今回はlist-style-imageを使った場合の余白にあわせて調整しました。

li {
    padding: 1px 0 2px 23px;
    background: transparent url(../list-mark.png) no-repeat left center;
}

◇リストのテキストが長くなってしまうとき

上記の記述だと、テキストが長くなったときにリストマークの位置がliの高さに対して中央になってしまうので
テキストが２行以上になりそうな時は、単位em（1em＝1文字分の長さ）を使って調整します。

li {
    padding-left: 23px;
    background: transparent url(../list-mark.png) no-repeat left 0.1em;
}

emを使うことで，フォントサイズを変更する必要が出たときに
画像の位置を調整し直す手間を減らすことができます。