最終更新日 2021年6月22日

list-style-typeプロパティ

list-style-typeは、リストの先頭に表示するマーカーの種類を指定するプロパティです。

CSS3では、マーカーの種類として、@counter-styleで作成した独自のマーカーを指定することもできます。

list-style-imageが指定されている場合、その値は、list-style-typeの値よりも優先されます。

リスト関連のプロパティをまとめて指定する場合は、list-styleを使用します。

CSS3での変更点

・@counter-styleで作成した独自マーカーを指定できるようになりました。

初期値	適用先	継承
disc	「display: list-item;」を指定された要素	あり

値	説明
none	マーカーなし。マーカーの領域はそのまま確保され、インデントされた状態で表示されます。
disc	黒い丸（初期値）
circle	白い丸
square	黒い四角
decimal	数字
decimal-leading-zero	先頭に0をつけた数字
lower-roman	小文字のローマ数字
upper-roman	大文字のローマ数字
lower-greek	小文字のギリシャ文字
lower-latin	小文字のアルファベット
lower-alpha	小文字のアルファベット
upper-latin	大文字のアルファベット
upper-alpha	大文字のアルファベット
armenian	アルメニア数字
georgian	グルジア数字
hebrew	ヘブライ数字
cjk-ideographic	漢数字
hiragana	あいうえお順
katakana	アイウエオ順
hiragana-iroha	いろはにほへと順
katakana-iroha	イロハニホヘト順

サンプルコード

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;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: lower-alpha;
list-style-type: upper-latin;
list-style-type: upper-alpha;
list-style-type: armenian;
list-style-type: georgian;
list-style-type: hebrew;
list-style-type: cjk-ideographic;
list-style-type: hiragana;
list-style-type: katakana;
list-style-type: hiragana-iroha;
list-style-type: katakana-iroha;

参考文献：CSS Lists and Counters Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。