HTML要素 ・ リスト・テーブル
<ol>
順序のあるリスト
手順やランキングなど、順番に意味がある項目を並べるリストです。各項目は li で書き、自動で番号が付きます。
01
サンプルコード
HTML
1<ol>
2 <li>お湯を沸かす</li>
3 <li>豆を挽く</li>
4 <li>ドリッパーにお湯を注ぐ</li>
5</ol>
02
実行結果
ブラウザでの表示
03
解説
ol は "ordered list" の略で、順番が大事なリストに使います。項目を入れ替えると意味が変わるもの（手順・順位など）が対象です。
番号は自動で振られるため、項目の追加や削除をしても書き直す必要がありません。
順番に意味がないリストには ul を使います。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
start | 最初の番号（例：start="5"） |
reversed | 番号を逆順にする |
type | 番号の種類（1 / a / A / i / I） |
番号の見た目を変える
CSSの list-style-type で番号の種類を変えられます。
HTML
1<ol class="steps">
2 <li>準備</li>
3 <li>実行</li>
4</ol>
CSS
1.steps {
2 list-style-type: decimal-leading-zero;
3}
カウントダウンにする
reversed 属性で番号が大きい順になります。
HTML
1<ol reversed>
2 <li>3位</li>
3 <li>2位</li>
4 <li>1位</li>
5</ol>
注意点
- 01ol の直下には li しか書けません。
- 02番号を手で書く（<li>1. 〜</li>）と、自動の番号と二重になります。