こんにちは！ あますた(@amaguristar)です。

• 「HTMLの<ol>タグのスタイルを[1、2、3 → 01、02、03 or a,b,c]などに変更したいけどやり方が分からない」

って事を最近聞かれるのでメモ。

　

cssのlist-styleプロパティを設定

具体的に何ができるかと言うと、

<ol>
<li>てすと1</li>
<li>てすと2</li>
<li>てすと3</li>
</ol>

というリストの表示は通常

1. てすと1
2. てすと2
3. てすと3

ですが、これを

1. てすと1
2. てすと2
3. てすと3

の様に「01」表示にしたりする事が可能。

※ その他の表示(あ、い、う or a,b,c or i,ii, or い、ろ、は)等は最後に一覧にしてあります。

cssの設定

具体的な設定はcssでコードを書き込み。

.sample-list {
    list-style: decimal-leading-zero;
}

HTMLで下記のように記入。

<ol class="sample-list">
<li>てすと1</li>
<li>てすと2</li>
<li>てすと3</li>
</ol>

これだけで「01」表示のリストが作成可能。

list-styleプロパティを設定すれば色々な表示が可能。

※ list-styleプロパティは本来list-style-type・list-style-image・list-style-positionの3つをまとめて設定する際に使用しますが、今回はlist-style-typeのみの説明です。

まとめ

上記「cssの設定」で説明したコードを流用して下記に一覧を作成。

list-style: lower-roman

1. てすと1
2. てすと2
3. てすと3

list-style: upper-roman

1. てすと1
2. てすと2
3. てすと3

list-style: lower-greek

1. てすと1
2. てすと2
3. てすと3

list-style: decimal

1. てすと1
2. てすと2
3. てすと3

list-style: decimal-leading-zero

1. てすと1
2. てすと2
3. てすと3

list-style: lower-alpha

1. てすと1
2. てすと2
3. てすと3

list-style: upper-alpha

1. てすと1
2. てすと2
3. てすと3

list-style: cjk-ideographic

1. てすと1
2. てすと2
3. てすと3

list-style: hiragana

1. てすと1
2. てすと2
3. てすと3

list-style: katakana

1. てすと1
2. てすと2
3. てすと3

list-style: hiragana-iroha

1. てすと1
2. てすと2
3. てすと3

list-style: katakana-iroha

1. てすと1
2. てすと2
3. てすと3