HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 応用44. ol要素、li要素-番号付き(順序あり)リスト

応用44. ol要素、li要素-番号付き(順序あり)リスト

  1. 公開日:2016年07月21日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

番号付き(順序あり)リストとは

番号付きリストは、ol要素(Ordered List)とli要素(List Item)を組み合わせて使用します。
箇条書きリスト(ul要素、li要素)より使用頻度は少ないですが、「手続きの流れ」「料理のレシピ」などの手順、フローや「パンくずリスト」に使うことができます。
箇条書きリストと同じで、入れ子のルールが決まっています。olタグの直下の子要素はliタグしか使用できません。
箇条書きリストとの違いは順序があるかないかです。
ol要素の初期値は、display:block;です。
li要素の初期値は、箇条書きリストのli要素と同じdisplay: list-item;です。

下記は、間違った入れ子の使い方の例です。


<!-- ol要素の子要素がdiv -->
<ol>
  <div>
    <li>手順1</li>
    <li>手順2</li>
    <li>手順3</li>
  </div>
</ol>

番号付きリストの行頭マーカー

行頭マーカーに使用できるCSSのプロパティの代表的な値は下記の通りです。
※他にも行頭マーカーはありますが、ブラウザにより対応していないものがあります。
箇条書きリストで使う行頭マーカーも使用できます。

  • 数字(初期値)…list-style-type: decimal;
  • 小文字のアルファベット…list-style-type: lower-alpha;
  • 大文字のアルファベット…list-style-type: upper-alpha;

<ol>
  <li class="list01">手順1</li>
  <li class="list02">手順2</li>
  <li class="list03">手順3</li>
</ol>


li{ margin-left: 30px; }
.list01{ list-style-type: decimal; }
.list02{ list-style-type: lower-alpha; }
.list03{ list-style-type: upper-alpha; }

番号付きリストの行頭マークの例

「パンくずリスト」での使用例

「パンくずリスト」とは、ユーザーがサイト内のどの階層にいるのかを表示したリストのことです。主にページの上部に設置します。
箇条書きリストで作ることもできますが、番号付きリストのほうが、より検索サイトにページの階層構造を理解させることができます。
下記は「パンくずリスト」のサンプル例です。疑似要素カウント擬似クラスを利用して作成しています。

パンくずリストの例


<ol class="breadcrumb">
  <li><a href="#">トップ</a></li>
  <li><a href="#">カテゴリ</a></li>
  <li>現在のページ</li>
</ol>


.breadcrumb{
  list-style: none;
  overflow: hidden;
}
.breadcrumb li{
  float: left;
  margin-right: 16px;
}
.breadcrumb li::after{
  content: ">";
  padding-left: 16px;
}
.breadcrumb li:last-child::after{
  content: "";
}

まとめ

  • 番号付きリストは、手順やフローに使うことができる
  • 入れ子のルールは、ol要素の直下の子要素はli要素のみ
  • パンくずリストは、番号付きリストで作るほうが検索サイトに効果的