liの前に画像を使う方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

リスト(<li>)の黒い点(・)の代わりに、チェックマークやオリジナルのアイコン画像を使いたい場面はよくあります。デザインのアクセントとして地味に効果的なポイントです。

目次非表示

list-style-imageで画像に置き換える
実務でおすすめ: ::beforeで自由に配置する
まとめ

list-style-imageで画像に置き換える

一番手軽なのはlist-style-imageプロパティです。

ul {
  list-style-image: url("check-icon.png");
}

1行で済むのがメリットですが、画像の表示サイズやマーカーの位置(縦位置)を細かく調整できないという弱点があります。ブラウザによって微妙に表示位置がズレることもあり、デザインをきっちり揃えたい場合には不向きです。

実務でおすすめ: ::beforeで自由に配置する

細かい調整をしたい場合は、標準のマーカーを消してから::beforeでアイコンを配置する方法の方が、実務ではよく使われます。

ul {
  list-style: none;
  padding-left: 0;
}

li {
  position: relative;
  padding-left: 28px;
}

li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-image: url("check-icon.png");
  background-size: contain;
}

画像のサイズ(width・height)、位置(top・left)をそれぞれ独立して調整できるため、テキストとアイコンの縦位置をぴったり揃えるといった細かい仕上げがしやすくなります。

💡 単色のシンプルなアイコンならSVGでも代用できる

チェックマークのような単純な形であれば、画像ファイルを用意しなくてもborderを組み合わせたCSSだけのチェックマークで代用することもできます。画像の読み込みが1つ減る分、表示速度の面ではわずかに有利です。ただし複雑なアイコンの場合は、素直に画像(またはSVG)を使う方が管理しやすいです。