Webのいろは
MENU
検索結果
  • Webデザイン
  • HTML
  • CSS
  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
  • 【CSSのみ】全画面オーバーレイ検索フォームの作り方
    2018-06-12
    【CSSのみ】全画面オーバーレイ検索フォームの作り方
  • 【HTML】table・tr・th・td | 表の作り方・使い方を解説
    2018-06-06
    【HTML】table・tr・th・td | 表の作り方・使い方を解説
検索結果
  • HOME
  • >
  • Webデザイン
  • >
  • CSS

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

2018/5/1 2019/1/13
いろは
【CSS】list-style-typeでリストマーカーの変更方法
  • B!

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

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

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

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

MENU

  • リストマーカーを変更する方法
    • list-styleとlist-style-typeの違い
  • 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タグを使った箇条書きは、デフォルト状態で以下のように表示されます。

HTML
<ul>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>
実行結果
  • リスト項目
  • リスト項目
  • リスト項目
HTML
<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>
実行結果
  1. リスト項目
  2. リスト項目
  3. リスト項目

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

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

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

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

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

リストマーカーなし[none]

リストマーカーを非表示にする値です。Webサイト制作ではナビゲーションやパンくずリストを作る際などでよく使う値です。

  • リスト
  • リスト
  • リスト
CSS
ul{
  list-style-type:none;
}

黒ポチ [disc]

デフォルトでulタグに反映されている値です。

  • リスト
  • リスト
  • リスト
CSS
ul{
  list-style-type:disc;
}

白丸 [circle]

  • リスト
  • リスト
  • リスト
CSS
ul{
  list-style-type:circle;
}

四角形 [square]

  • リスト
  • リスト
  • リスト
CSS
ul{
  list-style-type:square;
}

続いて数字系の値です。

数字 [decimal]

decimalはolで指定した箇条書きでデフォルト表示されます。

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:decimal;
}

数字(2桁) [decimal-leading-zero]

最初に「0」が付いて、2桁表示になる値です。。

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:decimal-leading-zero;
}

英数字(小文字) [lower-roman]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:lower-roman;
}

英数字(大文字) [upper-roman]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:upper-roman;
}

アルファベット(小文字) [lower-alpha]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:lower-alpha;
}

アルファベット(大文字) [upper-alpha]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:upper-alpha;
}

ギリシャ文字 [lower-greek]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:lower-greek;
}

ラテン(小文字) [lower-latin]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:lower-latin;
}

ラテン(大文字) [upper-latin]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:upper-latin;
}

漢数字 [cjk-ideographic]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:cjk-ideographic;
}

ひらがな [hiragana]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:hiragana;
}

カタカナ [katakana]

  1. リスト
  2. リスト
  3. リスト
CSS
ul{
  list-style-type:katakana;
}

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

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

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

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

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

実行結果
  • リスト
  • リスト
  • リスト

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

実行結果
  • リスト
  • リスト
  • リスト

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

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

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(アイコンフォント)の使い方を解説

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

実行結果
  • リスト
  • リスト
  • リスト
CSS
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」などのアイコンフォントを使用可能
  • B!
【CSS】list-style-typeでリストマーカーの変更方法
いろは
Webのいろは

Relate Post

  • 【CSS】width・height|幅と高さを指定する方法を解説
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【Webデザインの必須スキル】CSSについて学ぼう!
    【Webデザインの必須スキル】CSSについて学ぼう!
  • 【CSS】id・class|違いとそれぞれの意味・使い分けを解説
    【CSS】id・class|違いとそれぞれの意味・使い分けを解説
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
検索結果

カテゴリー

  • Blog
  • Webデザイン
    • CSS
    • HTML
    • WordPress
  • テクノロジー
    • Techニュース

NEW POSTS

  • 【CSS】width・height|幅と高さを指定する方法を解説
    2018-08-26
    【CSS】width・height|幅と高さを指定する方法を解説
  • 【HTML】blockquote・q・site | 引用の使い方を解説
    2018-07-28
    【HTML】blockquote・q・site | 引用の使い方を解説
  • 【HTML】<p>|正しい段落の使い方・指定方法を解説
    2018-07-22
    【HTML】<p>|正しい段落の使い方・指定方法を解説
  • 5Gって何?2020年の実用化でどう変わるのか?
    2018-07-21
    5Gって何?2020年の実用化でどう変わるのか?
  • 【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説
    2018-06-24
    【CSS】スティッキーヘッダー(固定ヘッダー)の作り方・メリットを解説

カテゴリー

  • Blog
  • CSS
  • HTML
  • Techニュース
  • Webデザイン
  • WordPress
  • テクノロジー

ARCHIVE

  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月

SEARCH

検索結果
Webのいろは
  • ホーム
  • 利用規約
  • お問い合わせ

Copyright © 2019 Webのいろは All Rights Reserved.