Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

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

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

構文

形式文法: <uri> | none
list-style-image: none
list-style-image: url(http://www.example.com/images/list.png)

list-style-image: inherit

<uri>
マーカーとして使う画像の場所
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")
}

Result

仕様

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

関連情報

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

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