順不同リストのリストマーカーの種類・位置・画像を一括指定

順不同リスト（ul）のリストマーカーの種類・位置・画像を、スタイルシート（CSS）で、まとめて指定する方法。

順不同リストとは、下記のようなリストタグのこと。

リストマーカーの種類・位置・画像を、まとめて指定するには、list-style プロパティを使う。

概要

list-style: 種類 位置 画像;
指定する順番に、決まりはない。種類と画像を同時に指定した場合、画像を優先する。
list-style は、CSS 1 で定義されたプロパティ。

種類

値は、list-style-type プロパティと同様、disc、circle、square、none のいずれかを入れる。
初期設定値:disc

位置

値は、list-style-position プロパティと同様、inside、outside のいずれかを入れる。
初期設定値:outside
inside、outside ともに、CSS 1 で定義された値。

画像

値は、list-style-image プロパティと同様、url(画像のURL)、none のいずれかを入れる。
初期設定値:none

基本例

circle inside

種類 : circle
位置 : inside

inside url(画像のURL)

位置 : inside
画像 : url(画像のURL)

応用例

リストマーカーを画像にし、リストボックス領域の内側に表示、左側のマージンをなくす。