ウェブランサー

list-style-type - マーカー文字の種類を指定する

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

list-style-typeプロパティは、リストマーカーの種類を指定する際に使用します。表示の仕方はブラウザに依存するので、確認が必要です。

list-style-typeに与えられる値

list-style-type: none;
何も付かない状態です。これが初期値です。
list-style-type: disc;
黒い丸が付きます。
list-style-type: circle;
白抜きの丸が付きます。
list-style-type: square;
黒い四角が付きます。
list-style-type: decimal;
数字が付きます。
list-style-type: decimal-leading-zero;
先頭に0の付いた数字が付きます。
list-style-type: lower-roman;
小文字のローマ数字が付きます。
list-style-type: upper-roman;
大文字のローマ数字が付きます。
list-style-type: lower-greek;
小文字のギリシャ数字が付きます。
list-style-type: upper-alpha;
大文字のギリシャ数字が付きます。
list-style-type: lower-latin;
小文字のラテン文字が付きます。
list-style-type: upper-latin;
大文字のラテン文字が付きます。
list-style-type: lower-alpha;
小文字のアルファベットが付きます。
list-style-type: upper-alpha;
大文字のアルファベットが付きます。
list-style-type: cjk-ideographic;
漢数字が付きます。
list-style-type: hiragana;
『あいうえお』が付きます。
list-style-type: katakana;
『アイウエオ』が付きます。
list-style-type: hiragana-iroha;
『いろはにほへと』が付きます。
list-style-type: katakana-iroha;
『イロハニホヘト』が付きます。
list-style-type: hebrew;
ヘブライ数字が付きます。
list-style-type: armenian;
アルメニア数字が付きます。
list-style-type: georgian;
グルジア数字が付きます。

list-style-typeの使用サンプル

CSS
.sample01 {
 list-style-type: disc;
 list-style-position: outside;
 margin: 0px 0px 10px 30px;
}
.sample02 {
 list-style-type: decimal;
 list-style-position: outside;
 margin: 0px 0px 10px 30px;
}
.sample02 {
 list-style-type: upper-alpha;
 list-style-position: outside;
 margin: 0px 0px 10px 30px;
}
XHTML
<ul class="sample01">
<li>リストサンプル</li>
<li>リストサンプル</li>
<li>リストサンプル</li>
</ul>

<ul class="sample02">
<li>リストサンプル</li>
<li>リストサンプル</li>
<li>リストサンプル</li>
</ul>

<ul class="sample03">
<li>リストサンプル</li>
<li>リストサンプル</li>
<li>リストサンプル</li>
</ul>
表示確認
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル
  • リストサンプル

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

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