list-style-type | スタイルシートリファレンス

適用できる要素リスト項目
継承する
初期値disc

list-style-typeとは?

CSSのlist-style-typeは箇条書きのアイテムのマーカーの種類を指定するプロパティです。

マーカーの種類は円、文字、四角など様々な種類があります。

またマーカーに画像を設定するlist-style-imageプロパティを設定していてその画像が正常に読み込めている場合はlist-style-typeは効かないのでご注意下さい。

list-style-typeで指定できる値

list-style-typeの値にはマーカーの種類を表す文字列を設定します。
下記はlist-style-typeに設定できる値の一覧です。
(様々な言語での数字があり、ここでは一部を紹介)
 

説明
none マーカーなし
disc 黒丸(初期値)
circle 白丸
square 四角
decimal 数字
decimal-leading-zero ゼロ埋めされて表示される数字
lower-greek 小文字のギリシャ語
upper-latin 大文字のラテン文字(ASCII 文字)
lower-latin 小文字のラテン文字(ASCII 文字)
bengali ベンガル語の数字
hebrew ヘブライ数字
armenian アルメニア数字
georgian グルジア数字
cjk-ideographic 漢数字
hiragana ひらがな
katakana カタカナ
hiragana-iroha いろは
katakana-iroha イロハ
japanese-formal 日本語の公的な数値表記
korean-hangul-formal ハングルの数値表記
korean-hanja-formal 公的な朝鮮の数字表記
korean-hanja-informal 朝鮮の漢数字
<任意の文字列> 任意のの文字をマーカーに設定します

構文

/* 構文 */
list-style-type: マーカーの種類の値;

/* 黒丸(初期値) */
list-style-type: disc;

/* 白丸 */
list-style-type: circle;

/* 四角 */
list-style-type: square;

/* 数字 */
list-style-type: decimal;

/* なし */
list-style-type: none;

list-style-typeを使ったサンプルコード

list-style-typeは箇条書きの要素に対して設定し、値には箇条書きにマーカーの種類の文字列を設定するのが一般的な使い方です。

list-style-typeのブラウザ対応状況

list-style-typeはモダンなブラウザのほぼ全て対応しているプロパティです。list-style-typeのブラウザ毎の対応状況を知りたい方は下記を確認しましょう。

Can I use... Support tables for HTML5, CSS3, etc

list-style-typeの関連情報

list-style-typeの内側、外側の位置

list-style-typeの内側、外側の位置の調整はlist-style-positionで設定可能です。list-style-positionについては下記を参考にしましょう。

list-style-position
list-style-positionは箇条書きのマーカーの表示位置を内側か外側にするかを指定できるCSSのプロパティです。list-style-positionの使い方や構文をサンプルコード付きで解説します。

list-style-typeが効かない場合

CSSでlist-style-typeを設定したつもりでも効かないといったケースがあります。list-style-typeが効かない場合の対処法は下記を参考にしましょう。

list-style-typeが効かない場合の対処法を解説!のイメージ
list-style-typeが効かない場合の対処法を解説!
list-style-typeは箇条書きのマーカーを黒丸にするか非表示にするかなどマーカーの見た目を調整するプロパティです。list-style-typeが効かない場合の対処法を解説します。

マーカーの色の変更

list-style-typeで設定したマーカーの色だけ変更することが出来ます。

list-styleのマーカーの色を変更する方法を解説!のイメージ
list-styleのマーカーの色を変更する方法を解説!
箇条書きのli要素のマーカーに対して色を付ける方法をサンプルコード付きで解説します。デフォルトでは黒点の箇条書きのマーカーの色を変更していきます。

丸数字にしたい場合

list-style-typeでは丸数字(①②③など)を指定する値がありません。マーカーを丸数字にする方法は下記を参考にしましょう。

箇条書きのマーカーに丸数字を表示する方法を解説!のイメージ
箇条書きのマーカーに丸数字を表示する方法を解説!
箇条書きのマーカーを丸数字(①、②、③など)で表示する方法をサンプルコード付きで解説していきます。