サイト制作

番号付きリストを途中から始めたい　HTMLのolとstart・reversedの基本

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

手順や順位に使うolには、開始番号や逆順の番号を指定する方法があります。番号の向きと項目の並べ替えを混同しないようにしましょう。

順番が意味を持つ一覧に使う

料理の工程や作業の手順では、項目の順序を入れ替えると内容が変わります。こうした一覧に使うのが、番号付きリストを表すol要素です。順番を入れ替えても意味が変わらない単なる品目一覧なら、番号が必要なのかを先に考えます。

番号を本文へ直接打ち込むより、一覧の構造をHTMLに持たせると、途中の追加や変更にも対応しやすくなります。見た目の数字と、文章の構造を分けて扱えるのがポイントです。

リストを続きの番号から始めたい場合は、olのstart属性で開始値を指定できます。表示をローマ数字やアルファベットにしている場合でも、startに指定する値は整数です。見た目が文字だから、開始値も文字にするわけではありません。

reversed属性は、項目の番号を大きい方から小さい方へ付ける指定です。HTMLに書いた項目の順番そのものを自動で逆転させる機能ではありません。順位を三位から一位へ見せるなら、項目の内容もその順序で用意する必要があります。

表示を確認するときは、完成した一覧を見るだけでなく、先頭や途中へ一項目を足した状態でも番号を見てみましょう。開始値を固定しているのか、項目数に応じた番号にしたいのかを整理できます。

数字の飾りを整える前に、読者が上から読んだときに正しい手順になるかを確認すると、一覧の目的がぶれにくくなります。