【CSS】list-style-typeでリストマーカーの変更方法

ul、ol、liタグ作る箇条書きの各項目の先頭に表示される「・」や「1.」のことをリストマーカーやビュレットといいます。

今回はul、olタグで作られている箇条書きのリスト項目のリストマーカーを好みのものにカスタマイズ（変更）する方法を紹介します。

また、ul、ol、liタグの基本的な使い方は以下の記事にまとめてあります。

【HTML】ul・ol・li | 箇条書き（リスト）の使い方を解説

リストマーカーを変更する方法

箇条書きのリストマーカーをカスタマイズする方法は、大きく分けてCSSプロパティ「list-style-type」を使う方法と疑似要素、アイコンフォントを使う方法の2種類があります。

それぞれの記述方法や特徴を解説していきます。

list-styleとlist-style-typeの違い

list-style-typeはリストマーカー“だけ”を指定するCSSプロパティです。

対して、list-styleは「list-style-type」、「list-style-image」、「list-style-position」という3種類のCSSプロパティを一括して指定できるCSSプロパティです。

リストマーカーだけを指定する場合はlist-style-typeを使ったほうが間違いなく指定できますね。list-style-positionなどと併用する場合、list-styleで指定すると1行で済むのでおススメです。

list-style-typeを使ってリストマーカーを変更する

HTMLでulタグやolタグを使うと、デフォルトの状態では項目の頭にそれぞれ「・」と「1.」が表示されると思います。(CSSがリセットされていない場合)

ul、olタグのデフォルトスタイルとして「・」や「1.」がリストマーカーに指定されているので、このように表示されるんですね。

「Webのいろは」のul、olタグを使った箇条書きは、デフォルト状態で以下のように表示されます。

<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>

上記の例のように、基本的にデフォルトのlist-style-typeが指定されているので、ul、olタグに新しくlist-style-typeを指定すればリストマーカー変更できます。

list-style-typeで指定できる値は色々な種類があるので、1つずつ指定して種類をを見てみましょう。

また、list-style-typeのプロパティの値ははul、olどちらでも使用できます。

※HTMLへCSSを指定する方法は以下をご覧ください。

HTMLでCSSを読み込む3種類の方法

ul{
  list-style-type:none;
}

ul{
  list-style-type:disc;
}

ul{
  list-style-type:circle;
}

ul{
  list-style-type:square;
}

続いて数字系の値です。

ul{
  list-style-type:decimal;
}

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

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

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

ul{
  list-style-type:lower-alpha;
}

ul{
  list-style-type:upper-alpha;
}

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

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

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

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

ul{
  list-style-type:hiragana;
}

ul{
  list-style-type:katakana;
}

普段あまり使わなそうなものも含めると結構種類が多いですね（笑）
ひらがななど一部、ブラウザによって上手く表示されないものもあるので注意が必要です。

疑似要素(::before)使ってリストマーカーを変更する

list-style-typeプロパティでなく、CSSの疑似要素(::before)というものを使って、好きな文字をリストマーカーとして設定する方法を紹介します

議事要素でのリストマーカー指定は、list-style-typeの方法よりやや複雑になりますが、リストマーカーの選択範囲が大幅に広がります。

例を見てみましょう。1つ目はリストマーカーに「※」を設定してみました。

今度はリストマーカーに「★」を設定してみました。

このように、疑似要素を使ったリストマーカーの指定は好きな文字を使えるのでカスタマイズ性が高いのが特徴です。

半面、以下のようにCSSが複雑になりやすいのがデメリットです。

ul{
  margin-left:0;
  list-style-type:none;
}
ul.lub1 >li::before{
  margin-right:4px;
  content:'※';
}
ul.lub2 >li::before{
  margin-right:4px;
  content:'★';
}

上記のCSSでは「list-style-type:none;」でulの持つ元々のリストマーカー非表示にし、子要素のliの疑似要素（::before）に表示したい文字を直接指定します。また、marginで余白の調整をしています。

【応用編】アイコンフォントをリストマーカーに使う

疑似要素を使ったリストマーカー指定の応用として、文字の代わりにアイコンフォントを使うことで、より表現が広がります。
今回は「Font Awesome」のアイコンを読み込んで使ってみましょう。

Font Awesomeについては以下の記事にまとめてあります。

Font Awesome 4.7（アイコンフォント）の使い方を解説

アイコンフォントを使って、指で項目を指しているような感じにリストマーカーを設定してみました。

ul{
  margin-left:0;
  list-style:none;
}
ul.lub3 >li::before{
  margin-right:4px;
  content:'\f0a4';
  font-family:FontAwesome;
}

Font Awesomeのアイコンページからお好みのアイコンのコードをコピペしてみてください。

まとめ

• ul、olのリストマーカーを変更はCSSで指定する
• 「list-style-type」の方法と、liタグの疑似要素で指定する方法がある
• 疑似要素での方法は「Font Awesome」などのアイコンフォントを使用可能