ol要素・olタグとは

順番が決まったリスト　ol要素

olリストとは何か 他のリストとの違いは何か

HTMLにおいてリストを示す要素は「順不動のリストを表すul要素」「序列のあるリストを示すol要素」「定義リストを示すdt要素」の大きく3つに分けられます。

ol要素は料理レシピの手順などのように、順番が決まった項目を並べる場面で利用します。

ol要素の内部要素として1つ以上のli要素を含む必要があります。
li要素以外の要素がol要素の直下に存在することは文法的に間違いです。

<ol>
    <li>小麦粉、砂糖、塩コショウを混ぜます</li>
    <li>卵と牛乳を混ぜます。</li>
    <li>全体を5分間よく撹拌します。</li>
    <li>250度のオーブンで1時間ほど焼きます。</li>
</ol>

ol要素、li要素の見た目について

ブラウザにおいて、ol要素はインデント表示され、内包されるli要素には1から始まる10進数などのリストマーカーが表示されます。これらの装飾はスタイルシートを利用する事で変更が可能です。

cssの「list-style-type」を利用する事でリストマーカーを「表示しない」「1から始まる10進数」「ローマ数字の小文字」「ローマ数字の大文字」「アルファベットの小文字」「アルファベットの大文字」に変更可能。

以下、スタイルシートでリストマーカーを変更した実例を示す。

olリストの中に別のリストを表示、リストの入れ子

olリストの中に別のリストを表示（リストの入れ子）することも可能です。具体的なHTMLの記述としては、リスト項目のli要素の中に、入れ子となるul要素やol要素を記述します。

<ol>
    <li>リスト項目1</li>
    <li>リスト項目2
        <ol>
            <li>入れ子の項目2-1</li>
            <li>入れ子の項目2-2</li>
        </ol>
    </li>
    <li>リスト項目3</li>
</ol>

関連情報

• li要素・liタグとは
• ul要素・ulタグとは
• dl要素・dlタグとは