【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える

list-style-typeとは？

1. 箇条書きのマーカーや数字を消す

• これは例文です
• これは例文です
• これは例文です

番号やマーカーを消したいときはlist-style-type: noneを指定します。これはolでもulでも同じです。

CSSでの指定の仕方

ul {list-style-type: none;}
ul {list-style-type: none;}

2. list-style-typeで「ul」のマーカーを変える

2-1. disc（黒ポチ）

• これは例文です
• これは例文です
• これは例文です

ulとliの箇条書きではこの黒丸のポチが初期値です。何も指定しなければこの黒ポチになっていますが、他の値になっていて戻したい場合は以下のように書きます。

ul {list-style-type: disc;}

ちなみに、黒ポチと呼んでいますが、ポチの色は基本的に文字色と同じになります。

2-2. circle（白丸）

• これは例文です
• これは例文です
• これは例文です

中が塗られていない白丸にしたいときにはcircleを指定します。

ul {list-style-type: circle;}

2-3. square（四角）

• これは例文です
• これは例文です
• これは例文です

squareを指定すると、四角いマーカーになります。色は文字色と同じになります。

ul {list-style-type: square;}

3. list-style-typeで「ol」の数字表記を変える

3-1. decimal（普通の数字）

1. これは例文です
2. これは例文です
3. これは例文です

olの箇条書きの初期値はこれです。指定したいときには以下のように書きます。

ol {list-style-type: decimal;}

3-2. decimal-leading-zero（二桁の数字に）

1. これは例文です
2. これは例文です
3. これは例文です

二桁の数字の連番にすることができます。01、02、…10、11というように表示されます。

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

3-3. lower-roman（小文字のローマ数字）

1. これは例文です
2. これは例文です
3. これは例文です

olに対してlower-romanを指定するとローマ数字でⅰ、ⅱ、ⅲ、ⅳ…と表示させることができます。

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

3-4. upper-roman（大文字のローマ数字）

1. これは例文です
2. これは例文です
3. これは例文です

もし大文字のローマ数字にしたいときはupper-romanと指定します。

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

3-5. cjk-ideographic（漢数字）

1. これは例文です
2. これは例文です
3. これは例文です

一、二、三、四…と漢数字の連番にするなんてこともできます。

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

3-6. lower-latin（小文字のアルファベット）

1. これは例文です
2. これは例文です
3. これは例文です

数字ではなくa、b、c、d、e…というようにアルファベットをマーカーとして使いたいときはlower-latinを指定します。

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

3-7. upper-latin（大文字のアルファベット）

1. これは例文です
2. これは例文です
3. これは例文です

A、B、C、D、E…というように大文字のアルファベットにしたいときはupper-latinを指定します。

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

3-8. hiragana（あいうえお…）

1. これは例文です
2. これは例文です
3. これは例文です

ひらがなのあいうえお順で表示させるという便利なこともできます。これはけっこう使えそうですね。

ol {list-style-type: hiragana;}

3-9. katakana（アイウエオ…）

1. これは例文です
2. これは例文です
3. これは例文です

カタカナを使うこともできます。list-style-type名はkatakanaとそのままなので覚えやすいですね。

ol {list-style-type: katakana;}

3-10. hiragana-iroha（いろはにほへと…）

1. これは例文です
2. これは例文です
3. これは例文です

ひらがなで「いろはにほへと」を使うこともできます。

ol {list-style-type: hiragana-iroha;}

3-11. katakana-iroha（イロハニホヘト…）

1. これは例文です
2. これは例文です
3. これは例文です

カタカナバージョンもあります。

ol {list-style-type: katakana-iroha;}

3-12. lower-greek（ギリシャ文字）

1. これは例文です
2. これは例文です
3. これは例文です

少しマニアックですがギリシャ文字をマーカーにする指定もあります。

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

4. マーカーのフォントや色について

上で紹介してきたolの数字やアルファベット、漢数字などのフォントはol・liのフォント種類と同じになります。そのため以下のように少しオシャレに数字を表示することもできます。 ちなみに色も同じになります。

4-1. 数字やアルファベットをオシャレに

たとえば、下の例はfont-family: Quicksand;を指定した場合です（Google Fontのウェブフォントです）。

1. Example
2. Example
3. Example

さらにol{color: skyblue}を指定すると以下のようになります。

1. Example
2. Example
3. Example

4-2. 漢字やひらがなのマーカーを変える

同様に「漢数字」や「ひらがなのあいうえお…」のマーカーもolのフォントと合わせて変わります。

1. 明朝体の例
2. これは例文です
3. これは例文です

1. 明朝体の例
2. これは例文です
3. これは例文です

シブくなりましたね。