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

最終更新日:

公開日:2024-11-15

ページ内に広告が含まれています。
ulやolのマーカーの種類を変更するlist-style-typeプロパティの使い方【CSS】

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

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

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

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

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

ul {
    list-style-type: disc;
}

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

マーカーを消す

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

ul {
    list-style-type: none;
}

disc:黒丸

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

ul {
    list-style-type: disc;
}
  • リスト1
  • リスト2
  • リスト3

circle:白丸

ul {
    list-style-type: circle;
}
  • リスト1
  • リスト2
  • リスト3

square:四角

ul {
    list-style-type: square;
}
  • リスト1
  • リスト2
  • リスト3

decimal:数字

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

ol {
    list-style-type: decimal;
}
  1. リスト1
  2. リスト2
  3. リスト3

decimal-leading-zero:2桁数字

ol {
    list-style-type: decimal-leading-zero;
}
  1. リスト1
  2. リスト2
  3. リスト3

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

ol {
    list-style-type: lower-latin;
}
  1. リスト1
  2. リスト2
  3. リスト3

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

ol {
    list-style-type: upper-latin;
}
  1. リスト1
  2. リスト2
  3. リスト3

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

ol {
    list-style-type: lower-roman;
}
  1. リスト1
  2. リスト2
  3. リスト3

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

ol {
    list-style-type: upper-roman;
}
  1. リスト1
  2. リスト2
  3. リスト3

cjk-ideographic:漢数字

ol {
    list-style-type: cjk-ideographic;
}
  1. リスト1
  2. リスト2
  3. リスト3

hiragana:ひらがな

ol {
    list-style-type: hiragana;
}
  1. リスト1
  2. リスト2
  3. リスト3

katakana:カタカナ

ol {
    list-style-type: katakana;
}
  1. リスト1
  2. リスト2
  3. リスト3

さいごに

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

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。プロフィールはこちら

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼

各SNSのフォローはこちらから

PAGE TOP