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 で定義されたマーカーが使われます。

形式文法

<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 の定義
勧告 初回定義

初期値none
適用対象 リスト項目
継承あり
メディア視覚
計算値none または画像の絶対的 URI
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, sii, momdo, wizAmit, teoli, SphinxKnight, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,