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

list-style-typeでマーカーの種類を指定

記事内に商品プロモーションが含まれる場合があります

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

list-style-typeとは?

list-style-typeとは?

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

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

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

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

CSSでの指定の仕方

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

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

2-1. disc(黒ポチ)

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

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

CSS
ul {list-style-type: disc;}

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

2-2. circle(白丸)

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

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

CSS
ul {list-style-type: circle;}

2-3. square(四角)

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

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

CSS
ul {list-style-type: square;}

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

3-1. decimal(普通の数字)

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

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

CSS
ol {list-style-type: decimal;}

3-2. decimal-leading-zero(二桁の数字に)

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

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

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

3-3. lower-roman(小文字のローマ数字)

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

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

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

3-4. upper-roman(大文字のローマ数字)

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

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

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

3-5. cjk-ideographic(漢数字)

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

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

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

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

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

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

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

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

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

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

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

3-8. hiragana(あいうえお…)

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

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

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

3-9. katakana(アイウエオ…)

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

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

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

3-10. hiragana-iroha(いろはにほへと…)

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

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

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

3-11. katakana-iroha(イロハニホヘト…)

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

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

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

3-12. lower-greek(ギリシャ文字)

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

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

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

シブくなりましたね。


同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ