ul、ol、liタグ作る箇条書きの各項目の先頭に表示される「・」や「1.」のことをリストマーカーやビュレットといいます。
今回はul、olタグで作られている箇条書きのリスト項目のリストマーカーを好みのものにカスタマイズ(変更)する方法を紹介します。
また、ul、ol、liタグの基本的な使い方は以下の記事にまとめてあります。
MENU
- リストマーカーを変更する方法
- list-style-typeを使ってリストマーカーを変更する
- リストマーカーなし[none]
- 黒ポチ [disc]
- 白丸 [circle]
- 四角形 [square]
- 数字 [decimal]
- 数字(2桁) [decimal-leading-zero]
- 英数字(小文字) [lower-roman]
- 英数字(大文字) [upper-roman]
- アルファベット(小文字) [lower-alpha]
- アルファベット(大文字) [upper-alpha]
- ギリシャ文字 [lower-greek]
- ラテン(小文字) [lower-latin]
- ラテン(大文字) [upper-latin]
- 漢数字 [cjk-ideographic]
- ひらがな [hiragana]
- カタカナ [katakana]
- 疑似要素(::before)使ってリストマーカーを変更する
- まとめ
リストマーカーを変更する方法
箇条書きのリストマーカーをカスタマイズする方法は、大きく分けて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を指定する方法は以下をご覧ください。
リストマーカーなし[none]
リストマーカーを非表示にする値です。Webサイト制作ではナビゲーションやパンくずリストを作る際などでよく使う値です。
- リスト
- リスト
- リスト
ul{
list-style-type:none;
}
黒ポチ [disc]
デフォルトでulタグに反映されている値です。
- リスト
- リスト
- リスト
ul{
list-style-type:disc;
}
白丸 [circle]
- リスト
- リスト
- リスト
ul{
list-style-type:circle;
}
四角形 [square]
- リスト
- リスト
- リスト
ul{
list-style-type:square;
}
続いて数字系の値です。
数字 [decimal]
decimalはolで指定した箇条書きでデフォルト表示されます。
- リスト
- リスト
- リスト
ul{
list-style-type:decimal;
}
数字(2桁) [decimal-leading-zero]
最初に「0」が付いて、2桁表示になる値です。。
- リスト
- リスト
- リスト
ul{
list-style-type:decimal-leading-zero;
}
英数字(小文字) [lower-roman]
- リスト
- リスト
- リスト
ul{
list-style-type:lower-roman;
}
英数字(大文字) [upper-roman]
- リスト
- リスト
- リスト
ul{
list-style-type:upper-roman;
}
アルファベット(小文字) [lower-alpha]
- リスト
- リスト
- リスト
ul{
list-style-type:lower-alpha;
}
アルファベット(大文字) [upper-alpha]
- リスト
- リスト
- リスト
ul{
list-style-type:upper-alpha;
}
ギリシャ文字 [lower-greek]
- リスト
- リスト
- リスト
ul{
list-style-type:lower-greek;
}
ラテン(小文字) [lower-latin]
- リスト
- リスト
- リスト
ul{
list-style-type:lower-latin;
}
ラテン(大文字) [upper-latin]
- リスト
- リスト
- リスト
ul{
list-style-type:upper-latin;
}
漢数字 [cjk-ideographic]
- リスト
- リスト
- リスト
ul{
list-style-type:cjk-ideographic;
}
ひらがな [hiragana]
- リスト
- リスト
- リスト
ul{
list-style-type:hiragana;
}
カタカナ [katakana]
- リスト
- リスト
- リスト
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については以下の記事にまとめてあります。
アイコンフォントを使って、指で項目を指しているような感じにリストマーカーを設定してみました。
- リスト
- リスト
- リスト
ul{
margin-left:0;
list-style:none;
}
ul.lub3 >li::before{
margin-right:4px;
content:'\f0a4';
font-family:FontAwesome;
}
- headタグ内のlinkタグを使ってでFont Awesomeを読み込みます。
- liの疑似要素で、font-familyプロパティにFontAwesomeと指定します。
- contentプロパティで、アイコンごとのコードを指定します。例で使用した“指アイコン”のコードは「\f0a4」です。
Font Awesomeのアイコンページからお好みのアイコンのコードをコピペしてみてください。
まとめ
- ul、olのリストマーカーを変更はCSSで指定する
- 「list-style-type」の方法と、liタグの疑似要素で指定する方法がある
- 疑似要素での方法は「Font Awesome」などのアイコンフォントを使用可能