ブログをリニューアル予定。過去記事は削除するかもです。

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

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

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

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

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

 

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

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

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

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

 

スポンサードサーチ

本記事のもくじ

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

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;" にすることで、マーカーが次のようなひらがなに変わります。

 

  1. 箇条書き項目①
  2. 箇条書き項目②
  3. 箇条書き項目③

 

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

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

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;"

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

 

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

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

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

 

6. 【lower-roman】ローマ数字(小文字)

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

  1. lower-roman にすると
  2. ローマ数字(小文字)のリストが作れます

 

7. 【upper-roman】ローマ数字(大文字)

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

  1. upper-roman にすると
  2. ローマ数字(大文字)のリストが作れます

 

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

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

  1. lower-latin にすると
  2. アルファベット(小文字)のリストが作れます

 

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

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

  1. upper-latin にすると
  2. アルファベット(大文字)のリストが作れます

 

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

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

  1. armenian にすると
  2. アルメニア文字(小文字)のリストが作れます

 

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

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

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

 

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

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

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

 

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

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

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

 

14. 【hebrew】ヘブライ文字

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

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

 

15. 【mongolian】モンゴル語

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

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

 

16. 【tibetan】チベット文字

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

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

 

17. 【korean-hangul-formal】韓国語(ハングル)

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

  1. korean-hangul-formal にすると
  2. 韓国語(ハングル文字)のリストが作れます

 

18. 【korean-hanja-formal】韓国語(漢数字)

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

  1. korean-hanja-formal にすると
  2. 韓国語(漢数字)のリストが作れます

 

19. 【hiragana】ひらがな

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

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

 

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

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

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

 

21. 【katakana】カタカナ

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

スポンサードサーチ

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】漢数字 ×

2021年5月現在 各ブラウザ最新ver.の互換性です
「ここ、アップデートされたよ」などがあればお知らせいただけると嬉しいです

 

スポンサードサーチ

まとめ:list-style-typeでリストマーカーは自由自在

まとめ

本記事のまとめです。

箇条書きリストのマーカー表示は style="list-style-type: 〜〜〜;" を記載するだけで自由に変更できます。

【HTMLで箇条書きを作る方法】li ul olタグを使ってリスト化しよう」で、解説しているHTMLリストの作り方も参考に、思い通りの箇条書きリストを作りましょう。

おわり。