このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

list-style-image”プロパティ:画像のリスト・マーカー

記事Jan. 23rd,2022
リスト・マーカーとして使用する画像を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 list-style-image: none;
適用対象 リスト・アイテム
継承 Yes
パーセント値 パーセント値は指定できません
計算値 none”もしくは算出された<image>”値
アニメーション 離散

list-style-image”プロパティはリスト・アイテムに付与されるリスト・マーカーとして使用される画像を指定します。

リスト・マーカー

list-style-image”プロパティで指定されたリスト・マーカーcontent”プロパティの値が“normal”である場合に有効になります。

画像を指定しない場合や指定された画像が使用できない場合にはlist-style-type”プロパティで指定されたリスト・マーカーが代わりに表示されます。

サンプルコード

ol { list-style-image: url(sample.png);}

説明
<image> url()”関数を使用した画像ファイルなどでリスト・マーカー用の画像を指定 (指定された<image>”値が無効な場合は“none”と同じです。)
none リスト・マーカー用の画像を指定しない
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 作業草稿(WD)
list-style-image
定義あり

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 作業草稿(WD)
<image>
定義あり

定義あり

定義あり
none
定義あり

定義あり

定義あり

使用例

リスト・マーカー用の画像を指定する

ol { list-style-image: url(sample.png);}
  1. 東京スカイツリー
  2. 対馬オメガ局送信用鉄塔
  3. 硫黄島ロランC主局(初代)
  4. 硫黄島ロランC主局(2代)
  5. 南鳥島ロランC局(初代)
  6. 東京タワー
  7. NHK川口送信局
  8. あべのハルカス
  9. 明石海峡大橋
  10. 横浜ランドマークタワー
  11. 虎ノ門ヒルズ森タワー
  12. りんくうゲートタワービル
  13. 大阪府咲洲庁舎
  14. おおたかどや山標準電波送信所
  15. 依佐美送信所

リスト・マーカー用の画像を指定しない

ol { list-style-image: none;}
  1. 東京スカイツリー
  2. 対馬オメガ局送信用鉄塔
  3. 硫黄島ロランC主局(初代)
  4. 硫黄島ロランC主局(2代)
  5. 南鳥島ロランC局(初代)
  6. 東京タワー
  7. NHK川口送信局
  8. あべのハルカス
  9. 明石海峡大橋
  10. 横浜ランドマークタワー
  11. 虎ノ門ヒルズ森タワー
  12. りんくうゲートタワービル
  13. 大阪府咲洲庁舎
  14. おおたかどや山標準電波送信所
  15. 依佐美送信所
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク