【list-style-type】番号付きと箇条書き以外のCSSを紹介

お疲れさまです。 hanawaです。

以前、プライバシーポリシーや利用規約をWordPressで編集していたのですが、番号付きリストしかなく見にくいと言うことで変更を依頼していただきました。
本日はその際に使用したlist-style-typeの種類を紹介します。
今後のコーディングの際にお役に立てれば嬉しいです！

ulでマーカー表記を変更

1. disc（黒点）※これはulの初期値です
   • 黒点
   • 黒点
   • 黒点
2. circle（白点）
   • 白点
   • 白点
   • 白点
3. square（四角）
   • 四角
   • 四角
   • 四角

olで数字表記を変更

1. decimal（普通の数字）※これはolの初期値です
   1. 普通の数字
   2. 普通の数字
   3. 普通の数字
2. decimal-leading-zero（2桁の数字）
   1. 2桁の数字
   2. 2桁の数字
   3. 2桁の数字
3. lower-roman（小文字のローマ数字）
   1. 小文字のローマ数字
   2. 小文字のローマ数字
   3. 小文字のローマ数字
4. upper-roman（大文字のローマ数字）
   1. 大文字のローマ数字
   2. 大文字のローマ数字
   3. 大文字のローマ数字
5. cjk-ideographic（漢数字）
   1. 漢数字
   2. 漢数字
   3. 漢数字
6. lower-latin（小文字のアルファベット）
   1. 小文字のアルファベット
   2. 小文字のアルファベット
   3. 小文字のアルファベット
7. upper-latin（大文字のアルファベット）
   1. 大文字のアルファベット
   2. 大文字のアルファベット
   3. 大文字のアルファベット
8. hiragana（あいうえお順）
   1. あいうえお順
   2. あいうえお順
   3. あいうえお順
9. katakana（アイウエオ順）
   1. アイウエオ順
   2. アイウエオ順
   3. アイウエオ順
10. hiragana-iroha（いろは順）
    1. いろは順
    2. いろは順
    3. いろは順
11. katakana-iroha（イロハ順）
    1. イロハ順
    2. イロハ順
    3. イロハ順
12. lower-greek（ギリシャ文字）
    1. ギリシャ文字
    2. ギリシャ文字
    3. ギリシャ文字

いかがでしょうか。こんなにたくさんの種類で区別することができます。
また、サイトの印象によって使い分けてもいいでしょう。
ぜひ今後のコーディングの参考にしてみてください。

今日もお疲れさまでした♪