【list-style-typeとは】箇条書きリストのマーカーを自由に変える方法

箇条書きの「・」とか「1, 2, 3,」とかを、自分っぽくカスタマイズしたいな。

「あ, い, う」とかにできないだろうか…？

そもそも、リストのカスタマイズって、初心者の僕にもできるものなの？

こんな疑問を解決する記事です。

<ul> や <ol> で作った箇条書きは、マーカーを変更することで自由自在にカスタマイズ可能です。

標準値のマーカーなら、難しいカスタマイズを使わず、呼び出したいスタイルを追記するだけで設定可能なので、本記事を参考にどうぞ。

» 参考記事：【HTMLで箇条書きを作る方法】li ul olタグを使ってリスト化しよう

スポンサードサーチ

本記事のもくじ

list-style-typeとは【リストマーカーのカスタマイズ】

list-style-typeとは、箇条書きの先頭についている「・」や「番号」をカスタマイズするプロパティです。

- ←この「・」が、基本のマーカー表示ですが…
- list-style-typeを使えば自由に変更できます
  1. ギリシャ数字（α, β, γ）にしたり…
  2. ローマ数字（i, ii, iii）にすることも可能
  3. ひらがな（あ, い, う）もあります
    1. ヘブライ語だって、
    2. モンゴル語だって、
    3. チベット語だってあります。
- イロハニホヘトとかもできます

本記事では、24個の list-style-type を解説します。

list-style-typeを設定する方法（WordPress編）

WordPressには、あらかじめlist-style-typeが登録されていまして、標準値マーカーであれば、投稿や固定ページのエディター画面のHTMLを書き換えるだけでOKです。

STEP①：エディター画面をテキスト表示で開く

リストのHTML表記

<ul>
  <li>箇条書き項目①</li>
  <li>箇条書き項目②</li>
  <li>箇条書き項目③</li>
</ul>

エディター画面をテキスト表示にしましょう。

そこで、該当部分を見ると、箇条書きリストは上記のように表示されています。

STEP②：`style="list-style-type: 〜〜〜;"` を追記する

マーカーをひらがなにする

<ul style="list-style-type: hiragana;"> 
  <li>箇条書き項目①</li>
  <li>箇条書き項目②</li>
  <li>箇条書き項目③</li>
</ul>

ここに style="list-style-type: 〜〜〜;" を追記します。

ひらがなにしたい場合は、style="list-style-type: hiragana;" にすることで、マーカーが次のようなひらがなに変わります。

箇条書き項目①
箇条書き項目②
箇条書き項目③

ビジュアルエディターにも搭載されている

ちなみに、使用頻度が高い「ローマ数字」や「ギリシャ文字」などは、ビジュアルエディターのメニューにも予め搭載されているので、こちらをクリックすればOKです。

マーカーが変わらない…そんなときは

HTMLを書き換えても、マーカーに反映されない場合は、CSSでマーカーのデザインを指定することで、思い通りにすることができます。

①`<ol>`（または`<ul>`）にクラス名を付ける

クラス名を付ける

<ul class="hiragana"> 
  <li>箇条書き項目①</li>
  <li>箇条書き項目②</li>
  <li>箇条書き項目③</li>
</ul>

②CSSでカスタマイズ

CSSでカスタマイズ

ul .hiragana {
  list-style-type: hiragana;
  }

こんな感じで対処しましょう。

スポンサードサーチ

list-style-typeでマーカーを変える【24個】

実際に、どんな風にマーカーをカスタマイズできるのかを解説します。

<ul>のマーカーを変える（3種類）

unordered list（順不同）のリスト表示でマーカーを変える方法です。

1. 【disc】黒い点

style="list-style-type: disc;"

disc にすると
黒い点が作れます

<ul>リストの基本になるのが、この黒い点「・」です。

styleを指定しない（styleが間違っている）場合は、「・」が表示されます。

2. 【circle】白い点

style="list-style-type: circle;"

circle にすると
白い点が作れます

黒い点を白く変えたいときは、[circle] を使います。

3. 【square】黒い四角

style="list-style-type: square;"

square にすると
黒い四角が作れます

[square]とすれば、四角も作れます。

<ol>のマーカーを変える（20種類）

ordered list（順序付き）もリストでマーカーを変える方法です。

こちらは一挙20個をまとめて紹介するので下記をどうぞ。

4. 【decimal】数字

style="list-style-type: decimal;"

decimal にすると
数字のリストが作れます

5. 【decimal-leading-zero】01, 02, 03の数字

style="list-style-type: decimal-leading-zero;"

decimal-leading-zero にすると
ゼロから始まる数字のリストが作れます

6. 【lower-roman】ローマ数字（小文字）

style="list-style-type: lower-roman;"

lower-roman にすると
ローマ数字（小文字）のリストが作れます

7. 【upper-roman】ローマ数字（大文字）

style="list-style-type: upper-roman;"

upper-roman にすると
ローマ数字（大文字）のリストが作れます

8. 【lower-latin】アルファベット（小文字）

style="list-style-type: lower-latin;"

lower-latin にすると
アルファベット（小文字）のリストが作れます

9. 【upper-latin】アルファベット（大文字）

style="list-style-type: upper-latin;"

upper-latin にすると
アルファベット（大文字）のリストが作れます

10. 【armenian】アルメニア文字

style="list-style-type: armenian;"

armenian にすると
アルメニア文字（小文字）のリストが作れます

11. 【lower-greek】ギリシャ文字

style="list-style-type: lower-greek;"

lower-greek にすると
ギリシャ文字のリストが作れます

12. 【cambodian】カンボジア文字

style="list-style-type: cambodian;"

cambodian にすると
カンボジア文字のリストが作れます

13. 【georgian】ジョージア文字

style="list-style-type: georgian;"

georgian にすると
ジョージア文字のリストが作れます

14. 【hebrew】ヘブライ文字

style="list-style-type: hebrew;"

hebrew にすると
ヘブライ文字のリストが作れます

15. 【mongolian】モンゴル語

style="list-style-type: mongolian;"

mongolian にすると
モンゴル文字のリストが作れます

16. 【tibetan】チベット文字

style="list-style-type: tibetan;"

tibetan にすると
チベット文字のリストが作れます

17. 【korean-hangul-formal】韓国語（ハングル）

style="list-style-type: korean-hangul-formal;"

korean-hangul-formal にすると
韓国語（ハングル文字）のリストが作れます

18. 【korean-hanja-formal】韓国語（漢数字）

style="list-style-type: korean-hanja-formal;"

korean-hanja-formal にすると
韓国語（漢数字）のリストが作れます

19. 【hiragana】ひらがな

style="list-style-type: hiragana;"

hiragana にすると
ひらがなのリストが作れます

20. 【hiragana-iroha】ひらがな（いろはにほへと）

style="list-style-type: hiragana-iroha;"

hiragana-iroha にすると
いろはにほへとのリストが作れます

21. 【katakana】カタカナ

style="list-style-type: katakana;"

katakana にすると
カタカナのリストが作れます

22. 【katakana-iroha】カタカナ（イロハニホヘト）

style="list-style-type: katakana-iroha;"

katakana-iroha にすると
イロハニホヘトのリストが作れます

23. 【trad-chinese-informal】漢数字

style="list-style-type: trad-chinese-informal;"

trad-chinese-informal にすると
漢数字のリストが作れます

<ul> <ol>のマーカーを消す

マーカーを表示したくないときは、[none]にしましょう。

24. 【none】マーカー非表示

style="list-style-type: none;"

none にすると
マーカーは表示されません

スポンサードサーチ

list-style-typeとブラウザの互換性

最後に「ブラウザの互換性はどうなの？」という話ですが、基本的にほとんどのマーカーが全てのブラウザに対応しています。

ただし、IE（Internet Explorer）には非対応のものもあるので、下記をご参照あれ。

	Chrome	Edge	Firefox	IE	Opera	Safari
【decimal】数字	○	○	○	○	○	○
【decimal-leading-zero】01, 02, 03	○	○	○	○	○	○
【lower-roman】ローマ数字（小文字）	○	○	○	○	○	○
【upper-roman】ローマ数字（大文字）	○	○	○	○	○	○
【lower-latin】アルファベット（小文字）	○	○	○	○	○	○
【upper-latin】アルファベット（大文字）	○	○	○	○	○	○
【armenian】アルメニア文字	○	○	○	○	○	○
【lower-greek】ギリシャ文字	○	○	○	○	○	○
【cambodian】カンボジア文字	○	○	○	×	○	○
【georgian】ジョージア文字	○	○	○	○	○	○
【hebrew】ヘブライ文字	○	○	○	×	○	○
【mongolian】モンゴル文字	○	○	○	×	○	○
【tibetan】チベット文字	○	○	○	×	○	○
【korean-hangul-formal】韓国語（ハングル）	○	○	○	×	○	○
【korean-hanja-formal】韓国語（漢数字）	○	○	○	×	○	○
【hiragana】ひらがな	○	○	○	×	○	○
【hiragana-iroha】いろはにほへと	○	○	○	×	○	○
【katakana】カタカナ	○	○	○	×	○	○
【katakana-iroha】イロハニホヘト	○	○	○	×	○	○
【trad-chinese-informal】漢数字	○	○	○	×	○	○