HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2017/11/12

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

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

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

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

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

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

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

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

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

パンくずリストの例

まとめ

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

 - HTML・CSS