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

ブラウザーの互換性

BCD tables only load in the browser

関連情報