はじめに

リストタグul li に「・」や「■」ではなくてチェックマークみたいな画像を配置したい時に使っている方法を4パターン紹介します。

やり方によって画像サイズの変更ができたりできなかったりするので、変更できる物については画像サイズを小さくして表示させます。

今回使う画像：オリジナルサイズ32×32px

目次

htmlに直接記述する方法

cssで画像を指定せず、htmlに直接imgを記述する方法です。

画像サイズ変更可

HTML

<ul class="test">
　<li><img src="img/***.png" alt="">いちばんめ</li>
　<li><img src="img/***.png" alt="">にばんめ</li>
　<li><img src="img/***.png" alt="">さんばんめ</li>
</ul>

CSS

ul.test {
　list-style: none;
}
ul.test img {
　width: 20px;
　margin-right: 10px;
}

できあがったもの

画像サイズの変更は可能ですが、htmlのli内に都度imgを記述する必要があるため、画像のファイル名を変更する時等は非常に面倒です。

list sytleに指定する方法

cssのlist-style:に画像ファイルを指定する方法です。

画像サイズ変更不可

HTML

<ul class="test">
　<li>いちばんめ</li>
　<li>にばんめ</li>
　<li>さんばんめ</li>
</ul>

CSS

ul.test {
　list-style: url(../img/***.png);
　list-style-position: inside;
}

できあがったもの

html、cssともに非常にシンプルですが、オリジナルの画像サイズから変更ができません。また、cssにlist-style-posision:inside;を記述しないと画像が左にずれて表示されるので要注意です。

疑似要素に指定する方法

疑似要素:beforeに画像をして表示させる方法です。

ulで一旦list-style:none;としておいて、疑似要素で画像ファイルを指定します。

画像サイズ変更不可

HTML

<ul class="test">
　<li>いちばんめ</li>
　<li>にばんめ</li>
　<li>さんばんめ</li>
</ul>

CSS

ul.test {
　position: relative;
　list-style:none;
}
ul.test03 li:before {
　content: url(../img/***.png);
　margin-right: 10px;
}

できあがったもの

こちらもオリジナルの画像サイズから変更ができません。画像とテキスト間の空白はmargin-leftで開けたい値のみ入れれば良いので管理しやすいです。

背景画像として表示させる方法

liの背景画像として表示させる方法です。

画像サイズ変更可能

HTML

<ul class="test">
　<li>いちばんめ</li>
　<li>にばんめ</li>
　<li>さんばんめ</li>
</ul>

CSS

ul.test {
　list-style:none;
}
ul.test li {
　background-image: url(../img/***.png);
　background-position: top left;
　background-repeat: no-repeat;
　background-size:  auto 20px;
　padding-left: 30px;
　line-height:20px;
}

できあがったもの

画像サイズが変更できるので、レスポンシブ対応させやすいですしcssで画像を管理するので、ファイルの変更時にhtmlを編集する必要もありません。

一方、背景画像という扱いになるので、いくつか注意点もあります。

padding-leftのを「画像の横幅　＋　テキストまでの空間」で設定する必要があります（設定しないとテキストが画像に被る）。

また、行の高さlihe-heightを画像の高さ以上にしないと（背景画像なので）はみ出た画像が切れます。ただし、テキストが複数行の場合、lihe-heightの設定値が大きいと行間の開きが不自然になります。1行と複数行のリストが混在する場合は特に要注意です。

対策としては、line-heightは通常のサイズにして、paddingで上下に余白を作るか、heightで調整するか、あたりでしょうか。

参考

参考として、上記の「lihe-heightの設定値が大きいと行間の開きが不自然になる。」というのを再現しました。

imgをheight:40px;、line-height:40px;で表示させ、テキストサイズを小さくした場合を以下に作りました。

「にばんめ」の行間が離れすぎているのが分かると思います。