<ul><li>の見出しに画像を使う方法 4パターン

2021年2月18日

はじめに

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

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

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

  • htmlに直接記述する方法
  • list sytleに指定する方法
  • 疑似要素に指定する方法
  • 背景画像として表示させる方法

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で調整するか、あたりでしょうか。

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

  • いちばんめ
  • にばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめにばんめ
  • さんばんめ

それぞれ一長一短があるので、目的に応じて使い分けられれば良いと思います。

個人的には、設定は少し細かくなりますが、背景画像として表示させる方法が色々調整が効いて良いのではないかと考えています。