【list-style-type】リスト表示のマーク一覧と設定方法【番号・記号・色・種類】

SIM

こんにち、SIMです。
今回はCSSの「list-style-type」の使い方を紹介します。

マーカーの種類一覧

まずは、list-style-typeのCSS設定で簡単に変更できる箇条書きのマーカーや数字の一覧を下にお示しします。

デフォルト設定のマーカーを消す方法

最初に初期設定のリストマーカーを消す方法からご紹介します。

リストのマーカーを消した状態は下記のとおりです。

CSSで設定する場合

CSSのみでマーカーを消す場合は下記のコードをCSSに書きます。

ul{
  list-style-type: none;
}

HTMLにスタイルを直接書く場合

また、HTMLのみでマーカーを消すこともできて、そのコードは下記のとおりです。

<ul style="list-style:none">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

記号・マーク（ul）の場合

次に初期設定のリストマーカーを設定方法を紹介していきます。

●黒丸（初期設定）

list-style-type（ul）のリストマーカーの初期設定は黒丸（黒ポチ）です。下にその表示例を載せておきます。

CSSで設定する場合

初期設定で上の表示になるため通常は設定しなくても良いのですが、変更したマークを元に戻す場合などにはCSSに下記のように書きます。

ul{
  list-style-type: disc;
}

HTMLに直接書く場合

同様にHTMLで設定するときは、下記のように書きます。

  <ul style="list-style:disc">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>

◯白丸

続いて、リストマーカーが白丸の場合です。表示例は下記のとおり。

CSSで設定する場合

CSSで設定する場合には、下記のように書きます。

ul{
  list-style-type: circle;
}

HTMLにスタイルを直接書く場合

HTMLで設定する場合には下記のとおりです。

  <ul style="list-style:circle">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>

■四角

続いて黒い四角の場合で、表示例は下記のとおりです。

CSSで設定する場合

CSSで設定する場合には下記のように書きます。

ul{
  list-style-type: square;
}

HTMLにスタイルを直接書く場合

HTMLで設定する場合には下記のとおりです。

  <ul style="list-style:square">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>

連番（ol）の場合

つぎに、連番（ol）の設定方法について紹介していきます。

数字(デフォルト)｜1, 2, 3…

まずは連番（ol）の初期設定の表示は下記のとおりです。

CSSで設定する場合

このデフォルト連番リストのCSS設定は下記のとおりです。

ol{
  list-style-type: decimal;
}

HTMLにスタイルを直接書く場合

HTML設定は下記のようになります。

  <ol style="list-style:decimal">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

丸数字｜①, ②, ③…

疑似要素で作ります。「list-counter」のプロパティを使えば自動的に連番にすることができます。

詳しくは別記事にする予定です。

ゼロ付き数字｜01, 02, 03…

ゼロ付き数字連番の表示例は下記のとおりです。

CSSで設定する場合

このCSS設定は下記のようになります。

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

HTMLにスタイルを直接書く場合

HTML設定は下記のとおり。

  <ol style="list-style:decimal-leading-zero">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

ローマ数字（小文字）｜ⅰ, ⅱ, ⅲ…

ローマ数字（小文字）連番の表示例は下記の通り。

CSSで設定する場合

CSSの書き方は下記のとおりです。

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

HTMLにスタイルを直接書く場合

HTMLで設定する場合には、下記のように書きます。

  <ol style="list-style:lower-roman">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

ローマ数字（大文字）｜Ⅰ, Ⅱ, Ⅲ…

ローマ数字（大文字）連番の表示例は下記のとおりです。

CSSで設定する場合

このCSSの設定は下記のとおりです。

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

HTMLにスタイルを直接書く場合

HTMLで設定する場合には、下記のように書きます。

  <ol style="list-style:upper-roman">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

アルファベット（小文字）｜a, b, c…

アルファベット（小文字）連番の場合の表示は下記のようになります。

CSSで設定する場合

これをCSSで設定する場合には、下記のように書きます。

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

HTMLにスタイルを直接書く場合

HTMLで設定する場合には、下記のとおりです。

  <ol style="list-style:lower-latin">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

アルファベット（大文字）｜A, B, C…

アルファベット（大文字）連番の表示例は下記のとおりです。

CSSで設定する場合

CSSで設定する場合には、下記のようになります。

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

HTMLにスタイルを直接書く場合

HTMLで設定する場合には、下記のとおりです。

  <ol style="list-style:upper-latin">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

ギリシャ数字（小文字）｜α, β, γ…

ギリシャ数字（小文字）連番の場合の表示は下記のようになります。

CSSで設定する場合

CSSで設定する場合には、下記のようになります。

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

HTMLにスタイルを直接書く場合

HTMLで設定する場合には、下記のようのとおりです。

  <ol style="list-style: lower-greek">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

イロハ（カタカナ）｜イ, ロ, ハ…

イロハ連番の表示は下記のようになります。

CSSで設定する場合

CSSでで設定する場合には、下記のようになります。

ol{
  list-style-type: katakana-iroha;
}

HTMLにスタイルを直接書く場合

HTMLで設定する場合には下記のとおりです。

  <ol style="list-style: katakana-iroha">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ol>

マーカーの色を変える

続いて、リストマークや連番の色を変える方法を紹介します。

方法の要点をまとめると下記のようになります。

HTMLの記述例は下記のとおりです。

  <ul>
    <li><span>リスト</span></li>
    <li><span>リスト</span></li>
    <li><span>リスト</span></li>
  </ul>

CSSの設定例は下記のとおりです。

ul{
  list-style-type: disc;
}
li{
  color: red;
}
span{
  color: black;
}

まとめ

以上、list-style-typeのマーカーを簡単に変える方法を紹介しました。

マーカーのサイズを変えたり、画像自体を変えたりする場合には疑似要素を使うのが一般的です。