list-style-image

CSSlist-style-image プロパティは、リスト項目のマーカーとして使われる画像を設定します。

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

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

構文

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

/* <url> 値 */
list-style-image: url('starsolid.gif');

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

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

公式定義

初期値none
適用対象 リスト項目
継承あり
計算値none または画像の絶対的 URI
アニメーションの種類個別

形式文法

<url> | none

リスト項目の画像の設定

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}

結果

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
list-style-image の定義
草案 すべての <image> データ型をサポートするように拡張
CSS Level 2 (Revision 1)
list-style-image の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
list-style-imageChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報