list-style-type

list-style-typeは、リストマーカーの種類を指定するスタイルです。

解説

リストの先頭のマークの種類を指定します。
使用するブラウザにより見た目は多少変化します。

構文

構文は以下になります。

値

list-style-typeには以下の値が指定できます。

太字の値は初期値です。

表示サンプル

お使いのブラウザにより見た目は変わります。

none：なし

disc：黒丸

circle：白丸

square：四角

decimal：数値

decimal-leading-zero：ゼロ埋め数値

lower-alpha：英字小文字

upper-alpha：英字大文字

cjk-ideographic：漢数字

hiragana：ひらがな（あいうえお順）

katakana：カタカナ（アイウエオ順）

hiragana-iroha：ひらがな（いろは順）

katakana-iroha：カタカナ（イロハ順）

lower-roman：数値（小文字ローマ数値）

upper-roman：数値（大文字ローマ数値）

lower-greek：小文字ギリシャ文字

ソースサンプル

リストマーカーをcircle（白丸にする）

.sample01 {
  list-style-type:circle;
}

<ul class="sample01">
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

備考

• 定義されていない値を指定すると、黒丸（disc）が表示されます
• 大文字のギリシャ文字はありません。

関連項目

• list-style：リストマーカーのスタイルを一括して指定する
• list-style-image：リストマーカーの画像を指定する
• list-style-position：リストマーカーの位置を指定する
• list-style-type：リストマーカーの種類を指定する

Tweet