リスト（箇条書き）のアイコンを画像にする

リストのアイコンを画像にする

ul要素やol要素などのリストの左側につくアイコンは、任意の画像に設定することができます。

リストのアイコンを画像にするにはlist-style-imageプロパティを使う方法と、li要素の背景画像として指定する2つの方法があります。

list-style-imageプロパティでアイコンを画像にする

list-style-imageプロパティを使って、アイコンを画像にする方法を解説します。

list-style-imageプロパティの指定例

section ul {
  list-style-position: inside;
  list-style-image: url(images/icon_check.png);
}

HTML コード例

<section>
  <h2>リストのアイコンに画像を使う</h2>
  <ul>
    <li>リストのテスト1</li>
    <li>リストのテスト2</li>
    <li>リストのテスト3</li>
    <li>リストのテスト4</li>
  </ul>
</section>

画像の指定方法はbackground-imageプロパティと同様に、url(〜)を使ってパスを指定します。

list-styleプロパティを使って同じように指定することもできます。

list-styleプロパティの指定例

section ul {
  list-style: url(images/icon_check.png) inside;
}

HTML コード例

<section>
  <h2>リストのアイコンに画像を使う</h2>
  <ul>
    <li>リストのテスト1</li>
    <li>リストのテスト2</li>
    <li>リストのテスト3</li>
    <li>リストのテスト4</li>
  </ul>
</section>

こちらの方法は後述するli要素の背景画像として指定する方法よりもシンプルですが、画像サイズや表示位置を調整できないデメリットもあります。

アイコン画像をli要素の背景画像として指定する

アイコンの画像をbackground-imageプロパティで指定する方法です。

擬似要素::first-letterへのスタイル適用例

<style>
section ul {
  list-style: none;
}
section ul li {
  padding-left: 20px;
  line-height: 1.6em;
  background: url(images/star.svg) left 0px top 3px no-repeat;
  background-size: 15px auto;
}

HTML コード例

<section>
  <h2>リストのアイコンに画像を使う</h2>
  <ul>
    <li>リストのテスト1</li>
    <li>リストのテスト2</li>
    <li>リストのテスト3</li>
    <li>リストのテスト4</li>
  </ul>
</section>

上記の例では、list-styleプロパティで予めアイコン表示を無効にしているところがポイントになります。

backgroundプロパティで画像の指定、表示位置、繰り返し表示無効を指定しています。
その下のbackground-sizeプロパティで画像サイズを指定できるので、SVG形式の画像も扱うことができます。

ランキング形式のリストにアイコン画像を設定する

ランキングなど順位を表示する場合、アイコン画像も1つずつ変わる場合があります。
その時は、li要素に:nth-childセレクタを使って、1つずつアイコン画像を指定していきます。

:nth-childセレクタを使ったスタイル適用例

section ol {
  margin: 0;
  padding: 0;
  font-size: 86%;
  list-style: none;
}
section ol li {
  padding-left: 35px;
  line-height: 2.5em;
  background: left top no-repeat;
  background-size: 30px auto;
}
section ol li:nth-child(1) {
  background-image: url(images/icon_rank1.svg);
}
section ol li:nth-child(2) {
  background-image: url(images/icon_rank2.svg);
}
section ol li:nth-child(3) {
  background-image: url(images/icon_rank3.svg);
}
section ol li:nth-child(4) {
  background: url(images/icon_rank4.svg) left 5px top 6px no-repeat;
  background-size: 20px auto;
}
section ol li:nth-child(5) {
  background: url(images/icon_rank5.svg) left 5px top 6px no-repeat;
  background-size: 20px auto;
}

HTML コード例

<section>
  <h2>ランキング形式のリストにアイコン画像を設定</h2>
  <ol>
    <li>リストのテスト1</li>
    <li>リストのテスト2</li>
    <li>リストのテスト3</li>
    <li>リストのテスト4</li>
    <li>リストのテスト5</li>
  </ol>
</section>

リストの1つ目には「li:nth-child(1)」のスタイルが適用され、2つ目は「li:nth-child(2)」のスタイル、3つ目は「li:nth-child(3)」のスタイル...という形で、リストの項目それぞれに異なるアイコン画像を指定します。