ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方【CSS】

ulやolで作成したリストはデフォルトでは黒丸や数字で表示されます。
今回はそのリストのマーカーの種類を変更するlist-style-typeプロパティについて解説していきます。

list-style-typeプロパティとは

list-style-typeプロパティとは、ulやolのリストのマーカーを指定するプロパティです。
いくつかマーカーの種類が用意されていますので、それらを解説していきます。

list-style-typeプロパティの基本的な書き方

list-style-typeプロパティは以下のように記述します。
ulやolでも指定方法は同じになります。

ul {
    list-style-type: disc;
}

上記のように、ulやolに対して記述します。例では、マーカーをdisc(黒丸)に指定しています。

マーカーを消す

リストのマーカーを表示しない場合は以下のコードを記述します。
ulやolでも指定方法は同じになります。

ul {
    list-style-type: none;
}

disc：黒丸

ulのデフォルトのマーカーになります。

ul {
    list-style-type: disc;
}

circle：白丸

ul {
    list-style-type: circle;
}

square：四角

ul {
    list-style-type: square;
}

decimal：数字

olのデフォルトのマーカーになります。

ol {
    list-style-type: decimal;
}

decimal-leading-zero：2桁数字

ol {
    list-style-type: decimal-leading-zero;
}

lower-latin：アルファベット(小文字)

ol {
    list-style-type: lower-latin;
}

upper-latin：アルファベット(大文字)

ol {
    list-style-type: upper-latin;
}

lower-roman：ローマ数字(小文字)

ol {
    list-style-type: lower-roman;
}

upper-roman：ローマ数字(大文字)

ol {
    list-style-type: upper-roman;
}

cjk-ideographic：漢数字

ol {
    list-style-type: cjk-ideographic;
}

hiragana：ひらがな

ol {
    list-style-type: hiragana;
}

katakana：カタカナ

ol {
    list-style-type: katakana;
}

さいごに

いかがでしたでしょうか。
今回は、ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方を解説しました。
あまり使い道は無いかもしれませんが、他にもいろいろと種類がありますので興味がある方は調べてみてください。