【HTML】リスト（箇条書き）の<ol>、<ul>、<li>タグの使い方を解説。

本記事の目次

<ol>タグと<li>タグでリストを表示する

<li>タグを<ol>タグで挟む形で、リストを表示します。

<ol>タグを使用することで、各リストの先頭が数字番号となります。

<li>タグは、何度使用してもOK。必要な数のリストを作成しましょう。

＜↓以下サンプルです。＞

<ol>
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ol>

<li>タグを<ul>タグで挟む形で、リストを表示します。

<ul>タグを使用することで、各リストの先頭が黒ポチとなります。

こちらのリストも、<li>タグは何度使用してもOKです。

＜↓以下サンプルです。＞

<ul>
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

HTMLリストのマーカーを消すには、CSSで<li>タグにlist-style: none; を指定してあげましょう。

＜↓以下サンプルです。＞

<!-- olタグでのリストでもマーカーを消すことができます -->
<ul>
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.li{
  list-style: none;
}

<ol>タグのリストであっても<ul>タグのリストであっても、CSSのlist-styleプロパティを指定することで、リストのデザインをカスタマイズすることができます。

list-styleプロパティにもたくさんの種類があったり、擬似要素などを活用することでリストをよりおしゃれにデザインすることもできますが、本記事では数を絞って5つご紹介します。

list-style: decimal-leading-zero; を指定することで、リストのマーカーを数字（01〜）にします。

<ul class="decimal_leading_zero">
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.decimal_leading_zero li{
  list-style: decimal-leading-zero;
}

list-style: square; を指定することで、リストのマーカーを黒四角にします。

<ul class="square">
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.square li{
  list-style: square;
}

list-style: lower-roman; を指定することで、リストのマーカーを小文字のローマ数字にします。

<ul class="lower_roman">
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.lower_roman li{
  list-style: lower-roman;
}

list-style: lower-alpha; を指定することで、リストのマーカーを小文字のアルファベットにします。

<ul class="lower_alpha">
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.lower_alpha li{
  list-style: lower_alpha;
}

list-style: hiragana; を指定することで、リストのマーカーをひらがな（あ〜）にします。

<ul class="hiragana">
  <li>リストの１つ目</li>
  <li>リストの2つ目</li>
  <li>リストの3つ目</li>
</ul>

.hiragana li{
  list-style: hiragana;
}