list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

list-style-imageCSS のプロパティで、リストアイテムのマーカーとして使われる画像を設定します。

ふつうは一括指定の list-style を使ったほうが便利です。

試してみましょう

メモ: このプロパティはリストアイテム、つまり、display: list-item; が指定された要素に対して適用されます。既定では<li> 要素を含みます。このプロパティは継承されるので、親要素 (通常は <ol><ul>) に設定することで、すべてのリストアイテムに適用することができます。

構文

css
/* キーワード値 */
list-style-image: none;

/* <url>  値 */
list-style-image: url("star-solid.gif");

/* 有効な画像値 */
list-style-image: linear-gradient(to left bottom, red, blue);

/* グローバル値 */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

<image>

マーカーとして使う画像の場所です。

none

画像をマーカーとして使用しないことを指定します。この値が設定された場合、代わりに list-style-type で定義されたマーカーが使われます。これは、 list-style の既定値です。

公式定義

初期値none
適用対象 リスト項目
継承あり
計算値The keyword none or the computed <image>
アニメーションの種類離散値

形式文法

list-style-image = 
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

url 値の使用

この例ではマーカーとして星印を使用しており、これは <url> 画像関数を使用して入れたものです。

HTML

html
<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
</ul>

CSS

css
ul {
  list-style-image: url("star-solid.gif");
}

結果

グラデーションの使用

この例では CSS グラデーションをマーカーとして使用しており、 linear-gradient() 画像関数を用いて作成しています。

HTML

html
<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
</ul>

CSS

css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}

結果

仕様書

Specification
CSS Lists and Counters Module Level 3
# image-markers

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-image
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報