CSSリファレンス

実践向けCSSリファレンス

リストのマーカー画像を指定する list-style-image

概要

CSSプロパティ「list-style-image」は、リストの先頭に対して、中点などのマーカーに画像を指定することができます。また、既存のマーカーを指定したい場合は list-style-type を利用します。

<p>好きな動物リストです</p>
<ul>
  <li>ネコ</li>
  <li>犬</li>
  <li>ウサギ</li>
</ul>
<style>
li {
 list-style: url('http://www-creators.com/wp-content/uploads/2017/10/icon_sample_-crown.png') inside;
 }
</style>

取りうる値

値に表示させたい画像のurlを指定します。注意したいのは、指定した画像はサイズの変更ができません。もし変更したい場合などは背景に画像を指定するCSSプロパティ background-image などを利用します。

{ list-style-type: 画像url;}

list-styleに関連のプロパティ一覧

プロパティ名説明
list-styleマーカーに関する指定をまとめて行うショートハンド
list-style-imageマーカーに画像を指定する
list-style-typeマーカー文字の種類を指定する
list-style-positionマーカー文字の位置を指定する
marker-offsetマーカーとの間隔を指定する

使用例

リストマーカーをアイコン画像にしてみた例です。

<p>好きな動物リストです</p>
<ul>
  <li class="anim1">ペンギン</li>
  <li class="anim2">オオカミ</li>
  <li class="anim3">ニワトリ</li>
</ul>
<style>
  ul {
    background-color: #ddd;
    border: 1px solid #222;
    border-radius: 2px;
  }
  li {
    margin: 5px;
  }
.anim1 { list-style-image: url('http://www-creators.com/wp-content/uploads/2017/12/css_list_icon1.png');}
.anim2 { list-style-image: url('http://www-creators.com/wp-content/uploads/2017/12/css_list_icon2.png');}
.anim3 { list-style-image: url('http://www-creators.com/wp-content/uploads/2017/12/css_list_icon3.png');}
</style>

仕様書

関連CSSプロパティ

閉じる