<ol> 番号付きリストを作成する

最終更新日:

番号付きリストはol要素で記述します(olはordered listの略)。 <ol>から</ol>までが一つのリストを意味し、 各項目は<li>~</li>タグ内に記述します。 なお、リストは入れ子にすることも出来ます。

<ol>は番号付きのリストです。 番号なしのリストを作成したい場合は、<ul>を使用してください。


■ HTML

<ol>
<li>果物</li>
<li>野菜</li>
<li>魚</li>
</ol>

■ 表示結果

ol要素

■ HTML(リストを入れ子にする)

<ol>
<li>果物</li>
    <ol>
    <li>りんご</li>
    <li>みかん</li>
    </ol>
<li>野菜</li>
    <ol>
    <li>キャベツ</li>
    <li>たまねぎ</li>
    </ol>
<li>魚</li>
    <ol>
    <li>カレイ</li>
    <li>タイ</li>
    </ol>
</ol>

■ 表示結果

ol要素

■ リスト番号の種類を変更する

リスト番号の種類を指定したい場合はスタイルシートで指定します。 下記のようにlist-style-typeで種類が指定できます。

(スタイルシート)

ol {
  list-style-type: lower-greek;       /* 小文字ギリシア文字 */
}

<ol>タグで指定できるlist-style-typeはたくさんの種類があります。 以下にまとめて記述しておきます。 なお、ブラウザによっては対応していない場合があります。

list-style-type: decimal;              /* 数字 */
list-style-type: decimal-leading-zero; /* 数字(先頭に0が付く)*/
list-style-type: lower-greek;          /* 小文字ギリシア文字 */
list-style-type: lower-roman;          /* 小文字ローマ数字 */
list-style-type: upper-roman;          /* 大文字ローマ数字 */
list-style-type: lower-alpha;          /* 小文字アルファベット */
list-style-type: upper-alpha;          /* 大文字アルファベット */
list-style-type: lower-latin;          /* 小文字アルファベット */
list-style-type: upper-latin;          /* 大文字アルファベット */
list-style-type: cjk-ideographic;      /* 漢数字 */
list-style-type: hiragana;             /* ひらがな */
list-style-type: katakana;             /* カタカナ */
list-style-type: none;                 /* なし */