番号のついたリスト

<ol>を使用して番号のついたリストを作っていきます。

リスト番号には、いくつか種類があり、CSSでリスト番号を途中から表示させることもできます。

番号つきリストを作る

<ul>と同じように<ol>～<ol>で番号つきのリストであることを表し、その中に<li>～</li>でリストの項目を作っていきましょう。

<p>欲しい物ランキング</p>
<ol>
<li>テレビ</li>
<li>掃除機</li>
<li>ソファー</li>
<li>スマートフォン</li>
<li>i-pad</li>
</ol>

ブラウザ表示例

欲しい物ランキング

ol要素のリスト番号をlist-style-typeをCSSに入力して設定します。入力する値としては以下のようなものがあります。

CSSプロパティ	解説
list-style-type	リストマークを設定

先ほど作成した番号つきリストに以下のCSSを反映させます。今回は英大文字で表示してみましょう。

@charset "utf-8";

ol { list-style-type: upper-alpha; }

ブラウザ表示例

欲しい物ランキング

何も設定しなければ番号つきのリストは１から始まります。start属性を使用し、途中の番号からスタートさせることができます。

属性	解説
start	リスト番号の初期値を設定

<p>都道府県別にんじん収穫量ランキング</p>
<ol>
<li>北海道</li>
<li>千葉県</li>
<li>徳島県</li>
</ol>
<p>4位以降はこちら</p>
<ol start="4">
<li>青森県</li>
<li>長崎県</li>
</ol>

ブラウザ表示例

都道府県別にんじん収穫量ランキング

4位以降はこちら