【HTML】順序付きのリストを作る<ol>～</ol>

料理ウェブページにてレシピの手順をステップごとに紹介したり、数字のついた項目を並べるにはol要素で順番付きリストを作成します。

リストを表示させる項目はリストタグである「li要素」で指定します。順番が決まってない項目を並べたいときはul要素を使います。

ol要素の属性

以下のようなol要素の属性で指定します。

「type」属性： <ol type="数字の種類">～</ol>
このtype属性を使えば、リスト項目の先頭に表示する数字の種類を変更できます。type属性は全て非推奨となります。リスト項目の番号はCSSのlist-style-typeプロパティで指定するほうがいいと思います。
1	普通のアラビア数字
a	アルファベット小文字
A	アルファベット大文字
i	小文字のローマ数字
I	大文字のローマ数字

「start」属性： <ol start="数字">～</ol>
このstart属性を使えば、リスト項目の先頭に始まる番号を指定します。このstart属性も非推奨属性ですが、これに対応するCSSのプロパティはありません。

<!DOCTYPE html>
<html>
<head>
<title>作業手順</title>
</head>
<body>
 <h3>作業手順～第4・5作業省略</h3>
  <ol>
    <li>第1作業</li>
    <li>第2作業</li>
    <li>第3作業</li>
  </ol>
  <ol srart="6">
    <li>第1作業</li>
    <li>第2作業</li>
    <li>第3作業</li>
  </ol>
  </body>
</html> 

順序付きのリスト<ol>の場合、<li>要素に「value="値"」を指定すると、リストの番号を途中で変更することができます。指定した番号以降の項目は、連番となります。

<!DOCTYPE html>
<html>
<head>
<title>リストの項目</title>
</head>
<body>
  <ol>
    <li>山手線</li>
    <li>中央線</li>
    <li>総武線</li>
    <li>京浜東北線</li>
    <li>宇都宮線</li>
  </ol>
  <ol>
    <li>山手線</li>
    <li>中央線</li>
    <li value="15">総武線</li>
    <li>京浜東北線</li>
    <li>宇都宮線</li>
  </ol>
  <ol>
    <li type="A">山手線</li>
    <li type="a">中央線</li>
    <li type="I">総武線</li>
    <li type="1">京浜東北線</li>
    <li type="i">宇都宮線</li>
  </ol>
  </body>
</html> 

「compact」属性： <ol compact="compact">～</ol>
このcompact属性を使えば、リスト項目がコンパクトな方法で表示されるということですが、このcompact属性も非推奨属性ですが、これに対応するCSSのプロパティはありません。

ol要素の指定可能な属性

共通	「id」・「class」・「style」・「title」・「lang」・「dir」
イベント属性	「onclick」・「ondblclick」・「onmouseover」・「onmouseout」・「onmousedown」・「onmousemove」・「onmouseup」・「onkeydown」・「onkeypress」・「onkeyup」