適用できる要素 | リスト項目 |
---|---|
継承 | する |
初期値 | disc |
CSSのlist-style-typeは箇条書きのアイテムのマーカーの種類を指定するプロパティです。
マーカーの種類は円、文字、四角など様々な種類があります。
またマーカーに画像を設定するlist-style-imageプロパティを設定していてその画像が正常に読み込めている場合は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-position
で設定可能です。list-style-position
については下記を参考にしましょう。
CSSでlist-style-type
を設定したつもりでも効かないといったケースがあります。list-style-type
が効かない場合の対処法は下記を参考にしましょう。
list-style-type
で設定したマーカーの色だけ変更することが出来ます。
list-style-type
では丸数字(①②③など)を指定する値がありません。マーカーを丸数字にする方法は下記を参考にしましょう。