今回はul/ol/liで作った箇条書きのマーカー種類をlist-style-typeにより変える方法をまとめます。

list-style-typeとは？

list-style-typeとは？

箇条書きの先頭についている「ポチ」や「連番」の見た目を変えるCSSのプロパティです。

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

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

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

CSSでの指定の仕方

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

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

2-1. disc（黒ポチ）

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

CSSのlist-style-typeの初期値はdiscです。ただし、実際のulの表示はブラウザーの標準スタイルや入れ子の深さ、ページのCSSに左右されます。黒丸に指定し直したい場合は以下のように書きます。

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. これは例文です

最低二桁になるよう先頭に0を付けます。01、02、...10、11というように表示され、100以上の数を二桁に切り詰めるものではありません。

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

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

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

olに対してlower-romanを指定するとローマ数字でi、ii、iii、iv…と表示させることができます。

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

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

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

大文字のローマ数字I、II、III、IV…にしたいときはupper-romanと指定します。

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

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

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

一、二、三、四…と漢数字で表示できます。cjk-ideographicはtrad-chinese-informalの別名で、日本語専用の番号表記ではありません。

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. マーカーのフォントや色について

マーカーのフォントや色は、通常はliの文字の指定を引き継ぎます。olに指定したfont-familyやcolorも、liで上書きしなければ継承されます。 マーカーだけ変えたい場合は、li::markerにfont-familyやcolorを指定できます。

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

たとえば、下の例はGoogle FontsのQuicksandを読み込み、font-family: "Quicksand", sans-serif;を指定した場合です。名前を指定するだけではWebフォントは読み込まれません。使うページにもGoogle Fontsの読み込み設定を追加してください。読み込みに失敗したときはsans-serifで表示されます。

  1. Example
  2. Example
  3. Example

次の例ではol{color: skyblue}で文字とマーカーを水色にし、list-style-type: upper-latinでマーカーをA、B、Cに変更しています。色だけを変えた例ではありません。

  1. Example
  2. Example
  3. Example

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

同様に「漢数字」や「ひらがなのあいうえお…」のマーカーも、liが継承したフォントで表示されます。以下はserifを指定した例です。実際の字形は端末のフォントや、その文字を収録している代替フォントによって異なります。

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

シブくなりましたね。

マーカーのデザインを変える方法

マーカーや数字のデザインを変えたい場合はこちらの記事で参考になるかと思います。

あわせて読みたいコピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

リストデザイン例

CSSをコピペしてそのまま使えるたくさんのリストデザイン例をのせています。

関連記事

またul・ol・liの基本的な使い方はこちらで解説しています。

あわせて読みたい【HTMLで箇条書き】ul・ol・liタグの使い方まとめ

こちらの記事も参考になるかもしれません。

あわせて読みたい【HTML&CSS】箇条書きの余白とインデントの調整方法