ウェブランサー

list-style - マーカーに関する指定をまとめて行う

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 li要素 (display: list-item; が指定された要素)
継承 する

list-styleプロパティは、リストマーカーに関する指定をまとめて行う際に使用します。list-style-typelist-style-imagelist-style-positionのうち、指定する値をスペースで区切って記述します。

list-styleに与えられる値

list-style: [style-type値] [style-image値] [style-position値];
それぞれのプロパティの値について、指定方法は各ページを参照してください。

list-styleの使用サンプル

CSS
.sample01 {
 list-style: disc url(images/sample_list_marker.png) outside;
 margin: 0px 0px 0px 30px;
}
XHTML
<ul class="sample01">
<li>リストサンプル01</li>
<li>リストサンプル02</li>
<li>リストサンプル03</li>
</ul>
表示確認
  • リストサンプル01
  • リストサンプル02
  • リストサンプル03

list-styleに関連するCSSプロパティ

リスト(list)関連
list-style リストマーカーに関する指定をまとめて行う
list-style-image リストマーカーに画像を指定する
list-style-position リストマーカーの表示位置を指定する
list-style-type リストマーカーの種類を指定する
marker-offset リストマーカーとの間隔を指定する