CSSlist-style-image プロパティは、リスト項目のマーカーとして使われる画像を設定します。なお、簡略化プロパティ list-style を使うほうが便利なことが多いです。

 

 

注: このプロパティはリストアイテムに適用されます。すなわち、display: list-item; の要素、デフォルトでは <li> 要素を含みます。このプロパティは継承されるため、親要素(通常は <ol> あるいは <ul>)に指定してすべてのリストアイテムに適用することができます。

構文

/* Keyword values */
list-style-image: none;

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

/* Global values */
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 の定義
勧告 最初の定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1121471
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり12461 あり

関連情報

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

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