番号付き（順序あり）リストとは
番号付きリストは、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要素のみ
- パンくずリストは、番号付きリストで作るほうが検索サイトに効果的