HTMLで「順序付きリスト」と呼ばれるものは、ある決まった順番で並べたい項目を番号付きで表示するための仕組みです。たとえば「手順」「ランキング」「ステップ」「工程」など、順番に意味がある情報を表現したいときによく使われます。HTML（エイチティーエムエル）はWebページの骨組みを作るための言語で、ブラウザがどのように内容を表示するかを指定するためのルールの集まりだと考えていただくとイメージしやすいです。
順序付きリストとは何かを理解するための基本概念
順序付きリストは、<ol>タグと<li>タグを組み合わせて記述します。<ol>は「ordered list（オーダードリスト）」の略で、順序付きリスト全体を囲むタグです。<li>は「list item（リストアイテム）」の略で、1つ1つの項目を表します。ブラウザは<ol>の中に並んだ<li>を自動的に1, 2, 3…というように番号付きで表示してくれます。
<ol>
<li>HTMLファイルを作成する</li>
<li>ブラウザで表示を確認する</li>
<li>デザインを整える</li>
</ol>このように書くと、ブラウザ上では先頭から順番に1、2、3と番号が振られたリストとして表示されます。ここで重要なのは、番号そのものは基本的にはHTML側で自動生成されるという点です。開発者が1, 2, 3と数字を直接書いているわけではなく、あくまで<ol>と<li>の組み合わせからブラウザが番号を決めている、というイメージを持っていただくと理解が進みます。
順序付きリストは、箇条書きを表す「箇条書きリスト（<ul>タグ）」とよく比較されます。<ul>は「unordered list（アンオーダードリスト）」の略で、先頭に「・」や「●」などのマークが付きますが、その順番には意味がないときに用いられます。一方で<ol>は、順番に意味があるときに用いるタグです。たとえば料理レシピの手順、アプリの操作手順、アンケートの設問番号などは<ol>で表現すると、読み手にとっても意図が伝わりやすくなります。
順序付きリストが便利なポイントをいくつか挙げます。
- 手順やフローを視覚的にわかりやすくできる
- 番号が自動的に振られるので、途中で手順を追加・削除しても番号を手動で直す必要がない
- CSS（スタイルを指定するための仕組み）と組み合わせることで、デザインを柔軟にカスタマイズできる
- 画面読み上げソフトなどにも順序情報が伝わりやすく、アクセシビリティ（利用しやすさ）の面でも有利になる
「アクセシビリティ」という言葉は、できるだけ多くの人が問題なくコンテンツを利用できる状態を指します。視力が弱い方やキーボード操作が中心の方など、さまざまな環境のユーザーがいる中で、HTMLの正しい構造を使って情報の意味を示しておくことは、Web制作において非常に大切です。順序付きリストを使うと、「これは順番が重要な情報ですよ」という意味をブラウザや支援技術にしっかり伝えることができます。
また、順序付きリストは単に1から順番に並べるだけでなく、「途中から再開したい」「別ページで続きの番号を振りたい」といったニーズにも対応できます。そのときに関わってくるのが、のちほど扱うstart属性です。順序付きリストの仕組みを理解しておくと、このような細かい番号のコントロールもスムーズに行えるようになります。
プログラミング学習の現場では、「仕様書の手順」「課題の番号」「サンプルコードの説明順」など、順序付きリストが活躍する場面が多くあります。単に見た目として番号が付いていれば良い、というわけではなく、「HTMLとして意味のある構造であるかどうか」を意識して<ol>と<li>を使い分けていくことが、初学者の方にとって大きな一歩になります。
start属性が担う役割と番号開始位置の仕組み
順序付きリストにおけるstart属性は、「リストの番号をどこからスタートさせるか」を指定するための仕組みです。通常、<ol>タグで作成した順序付きリストは、何も指定しなければ1から番号が始まります。しかし、途中の番号からリストを始めたいことがあります。たとえば「前の章の続きを4番から始めたい」「1〜3は別の場所に書いているので、ここでは4から表示したい」といったケースです。このときに役立つのがstart属性です。
start属性は、<ol>タグに対して記述します。属性とは、タグに追加情報を与えるための設定項目のようなもので、<ol start="4">のように書くことで、「この順序付きリストは4から番号を始めてください」という意味になります。実際のHTMLコードのイメージは次のようになります。
<ol start="4">
<li>ログイン画面を開く</li>
<li>ユーザー名とパスワードを入力する</li>
<li>ログインボタンをクリックする</li>
</ol>このコードをブラウザで表示すると、項目は3つしかありませんが、表示される番号は「4, 5, 6」となります。start="4"と指定しているため、最初の<li>に4が、次の<li>に5、その次に6という形で、自動的に連番が振られます。ここでも番号そのものはあくまでブラウザが計算してくれていて、開発者は「開始番号だけ」を指定している点がポイントです。
start属性に指定できる値は基本的に整数です。0や負の数を指定した場合の挙動はブラウザによって異なる可能性がありますが、少なくとも一般的な利用場面では1以上の正の整数を指定するのが望ましいです。実務で使うときには、仕様書やデザインの指示に合わせて「何番から始めたいか」を明確にし、その番号をstartに設定することになります。
ここで、start属性と「番号の見た目」を制御するtype属性の違いも押さえておくと理解が深まります。type属性は番号の形式、たとえば「1, 2, 3」「A, B, C」「a, b, c」「I, II, III」のようなスタイルを指定するためのものです。一方で、start属性は「何番から始めるか」を指定する役割を持ちます。この2つを組み合わせると、「Dから始まるアルファベットのリスト」なども表現できます。イメージとしては、typeで「番号の種類」を、startで「スタート位置」を決めていると考えると分かりやすいです。
<ol type="A" start="4">
<li>要件定義</li>
<li>設計</li>
<li>実装</li>
</ol>この場合、表示されるリストは「D, E, F」となります。type="A"によってアルファベット大文字の連番になり、start="4"によって4番目の文字であるDから始まるためです。typeとstartの役割をきちんと区別しておくと、意図した番号表示を柔軟に作れるようになります。
また、start属性は複数の順序付きリストをまたいで番号を続けたいときにも使われます。たとえば、長い文章の中で途中に画像や説明文が入り、HTML構造上はリストを一度閉じて、別の場所で再びリストを始めたいことがあります。単純に<ol>を2つに分けてしまうと、後半がまた1から始まってしまいますが、start属性を使えば前半の続きの番号から再開させることができます。この使い方については、後の見出しでより詳しく扱うことになりますが、ここでは「番号を引き継ぐときにもstartが使われる」というイメージを持っておくと良いです。
なお、最近のHTML仕様では、スタイルの指定はなるべくCSS側に任せることが推奨される傾向があります。ただし、start属性のように「意味として開始番号を指定する」ものは、構造を表す情報としてHTML側に記述するメリットがあります。実際、ブラウザだけでなく、スクリーンリーダー（画面読み上げソフト）などもこの番号情報を利用し、ユーザーに「何番目の項目か」を伝えることがあります。そのため、単純に見た目だけを変えるのではなく、「番号として何番から始まるべきか」をHTMLで表現することは、意味的にも重要な役割を持っていると考えられます。
このように、start属性は順序付きリストにおいて開始番号をコントロールするためのキーとなる機能であり、手動で数字を書き換える手間を減らしつつ、意味の通った番号付けを実現するために利用されます。複数のリストをまたいだ連番や、途中番号からの再開など、現場でよく出てくるニーズに対応できるため、順序付きリストを使うのであればぜひ押さえておきたい属性です。
順序付きリストとstart属性を組み合わせた実用的なコード例
順序付きリストとstart属性を組み合わせると、「途中の番号から手順を始めたい」「章ごとに区切りたいが、番号は続きにしたい」といった実用的なニーズに対応できるようになります。ここでは、実際にWebページでよくある場面を想定しながら、コード例をいくつかご紹介していきます。初心者の方でもコピーして試せるように、できるだけシンプルな形で説明します。
手順書の途中から番号を始めるコード例
まずは、基本的な「途中番号からのスタート」です。すでに1〜3番の手順が別の場所にあると仮定し、このブロックでは4番から手順を並べたいケースを考えます。
<h2>アカウント登録の手順（続き）</h2>
<ol start="4">
<li>登録内容を確認する</li>
<li>利用規約に同意する</li>
<li>登録ボタンをクリックする</li>
</ol>このコードでは、<ol start="4">と書くことで、最初の項目に4番が付くようになります。実際の画面では「4. 登録内容を確認する」「5. 利用規約に同意する」「6. 登録ボタンをクリックする」という形で表示されます。すでに1〜3番が別ページや前のセクションに存在していても、番号の整合性を保ったまま続きを表示できます。
長い説明の途中に画像や補足を挟むコード例
次に、「長い手順の途中に説明文や画像を挟みたい場合」の例です。HTMLの構造上、画像や解説文を入れるために一度リストを閉じる必要がありますが、そのあとで手順を続きの番号から再開したい、という場面です。
<h2>アプリのインストール手順</h2>
<ol>
<li>公式サイトにアクセスする</li>
<li>ダウンロードボタンをクリックする</li>
<li>ダウンロードされたインストーラーファイルを開く</li>
</ol>
<p>以下の画像は、インストーラーの初期画面の例です。実際の表示は環境によって異なる場合があります。</p>
<img src="installer-example.png" alt="インストーラー初期画面の例">
<ol start="4">
<li>表示された案内に従って「次へ」をクリックする</li>
<li>インストール場所を確認してインストールを実行する</li>
<li>完了メッセージが表示されたらアプリを起動する</li>
</ol>ここでは最初の<ol>で1〜3番の手順を作り、その後に説明文と画像を挟んで、別の<ol>をstart="4"で再開しています。このようにすることで、HTMLの構造をきれいに保ちながら、読みやすいレイアウトと連続した番号付けを両立できます。
番号形式（type属性）とstart属性を組み合わせる例
type属性を併用すると、アルファベットやローマ数字とstart属性を組み合わせた表現も可能です。たとえば、設問の選択肢をアルファベットで表示したい場合などです。
<h2>設問1：次のうち正しいものを選びなさい</h2>
<ol type="A">
<li>HTMLはプログラミング言語である</li>
<li>HTMLはWebページの構造を記述するための言語である</li>
<li>HTMLはデータベースを操作するための言語である</li>
</ol>この場合はtype="A"だけで十分ですが、続きの問題でアルファベットを引き継ぎたい場合にはstartを組み合わせます。
<h2>設問2：次のうちCSSに関する説明として正しいものを選びなさい</h2>
<ol type="A" start="4">
<li>CSSはデータベースを管理するための仕組みである</li>
<li>CSSはWebページの見た目やデザインを指定するための仕組みである</li>
<li>CSSはサーバーの設定ファイルの一種である</li>
</ol>ここでは、type="A" start="4"とすることで、D, E, Fというアルファベットで選択肢が表示されます。「設問1の選択肢A〜C、設問2の選択肢D〜F」といったように、問題全体を通して一連の選択肢番号にしたい場合に有効です。
JavaScriptで番号を動的に切り替えるための下準備例
start属性はHTML側で静的に指定するだけでなく、JavaScript（ブラウザ上で動作するスクリプト言語）と組み合わせて動的に変更することもできます。ここでは雰囲気が伝わる程度の簡単な例を示します。
まずHTML側にid属性を付けておきます。id属性は、要素を一意に識別するための名前で、JavaScriptから特定の要素を取得するときに便利です。
<h2>動的に開始番号を変える例</h2>
<label>
開始番号：
<input type="number" id="startInput" value="1">
</label>
<button id="applyButton">番号を変更</button>
<ol id="dynamicList">
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ol>この状態では通常どおり1, 2, 3から始まりますが、JavaScriptを使って<ol>要素のstart属性を書き換えることで、ユーザーが入力した番号からリストを始めることができます。
<script>
const input = document.getElementById('startInput');
const button = document.getElementById('applyButton');
const list = document.getElementById('dynamicList');
button.addEventListener('click', () => {
const value = parseInt(input.value, 10);
if (!Number.isNaN(value) && value > 0) {
list.setAttribute('start', value);
}
});
</script>ここでは、ボタンが押されたときに、入力欄の値を数値として取得し、それが正の数であればsetAttributeというメソッドでstart属性に反映しています。これにより、ユーザーが任意の開始番号を指定できるインタラクティブな順序付きリストを作ることができます。JavaScriptという専門用語が出てきましたが、これは「Webブラウザ上で動きをつけたり、値を変更したりするためのプログラミング言語」と理解していただければ大丈夫です。
実務を意識したコード整理のポイント
実務では、サンプルのような短いコードだけでなく、ページ全体の構造の中で順序付きリストとstart属性を使うことが多いです。その際には、次のような点を意識してコードを書くと扱いやすくなります。
- 各
<ol>の役割が分かるように、近くに見出し（<h2>,<h3>など）を置く startの値は、前のリストの項目数と整合性が取れているか確認する- JavaScriptで動的に変更する場合は、意図しない値（0や負の数）が入らないように条件分岐を入れておく
- CSSで余白や行間を整えることで、リストが詰まりすぎず読みやすい見た目にする
このような実用的なコード例を通して、「順序付きリスト＋start属性」という組み合わせが、単なる仕様の説明ではなく、実際のWebページ制作で役立つ道具であることを意識しながら使っていただけると、理解が深まりやすくなります。
複数の順序付きリストを自然につなげるための番号調整方法
1つのページの中で、複数の順序付きリストを使いながらも「番号は通しでつなげたい」というニーズはよくあります。たとえば、長いマニュアルやチュートリアルでは、「セクションごとに説明を分けたいが、ステップ番号は1から順に続けたい」といった構成がよくあります。このときに鍵になるのが、<ol>タグとstart属性を組み合わせた番号調整です。ここでは、複数の順序付きリストを自然につなげるための考え方と、具体的な書き方を整理して説明します。
セクション分割と番号継続の基本パターン
まず、最も基本的なパターンとして、「前半のリストを1〜3、後半のリストを4〜6にする」例を考えます。HTML全体の構造を意識しながら、見出しと順序付きリストを組み合わせると、次のようになります。
<h2>ステップ1〜3：準備作業</h2>
<ol>
<li>公式サイトにアクセスする</li>
<li>アカウント登録ページを開く</li>
<li>必要項目を入力して仮登録する</li>
</ol>
<h2>ステップ4〜6：本登録と初期設定</h2>
<ol start="4">
<li>メールに記載されたURLを開く</li>
<li>パスワードを設定する</li>
<li>ログインしてプロフィールを設定する</li>
</ol>ここでは、1つ目の<ol>にはstart属性を付けずに1〜3を表示し、2つ目の<ol>にstart="4"を指定して番号を継続させています。重要なのは、「前のリストの項目数＋1」という値をstartに正しく設定することです。前のリストが3件ならstart="4", 5件ならstart="6"という具合です。
項目数が変更されたときの調整の考え方
制作途中や運用中に、「ステップを1つ追加したい」「手順を整理して項目数が変わった」ということはよく起こります。そのときに、後続のstartの値の更新が必要になります。ここでのポイントは、「リストの数を意識しながら設計すること」と「できれば再利用しやすい構造にしておくこと」です。
実務では、次のような流れで調整することが多いです。
- まず、各
<ol>の<li>の数を数える - 先頭以外の
<ol>について、「直前までの合計＋1」をstartに設定しなおす - コードレビューの際に、番号の合計と表示結果が一致しているかを目視確認する
たとえば、最初の<ol>に4つ、2つ目に3つの項目がある場合、3つ目のリストを続きから始めるにはstart="8"と指定する必要があります。
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ol>
<ol start="5">
<li>項目5</li>
<li>項目6</li>
<li>項目7</li>
</ol>
<ol start="8">
<li>項目8</li>
<li>項目9</li>
</ol>このような形にしておくと、見た目には1〜9の連番として自然につながったリストになります。
HTML構造とデザインの分離を意識したつなげ方
番号調整をするときには、「HTMLは意味や構造を表現する」「CSSは見た目を整える」という役割分担も意識しておくとよいです。デザインの都合で間に画像やボックスレイアウトを挟みたい場合でも、順序付きリストとしての意味は保ちながら、startで番号を引き継いでいきます。
<h2>手順1〜3</h2>
<ol>
<li>アプリをダウンロードする</li>
<li>インストールを実行する</li>
<li>アプリを起動する</li>
</ol>
<div class="tips-box">
<p>ヒント：初回起動時には多少時間がかかることがあります。</p>
</div>
<h2>手順4〜5</h2>
<ol start="4">
<li>ログイン情報を入力する</li>
<li>ホーム画面を確認する</li>
</ol>ここでは、<div class="tips-box">を挟むことで、CSS側で背景色や枠線を付けたヒント枠を表示できますが、番号はstartにより自然に続いています。構造上はリストが分かれていても、ユーザーから見ると1本の流れに見えるのが理想的な状態です。
JavaScriptでstart値を自動計算するアイデア
より高度なやり方として、JavaScriptを使ってstartの値を自動計算する方法もあります。たとえば、すべての<ol>を取得し、前のリストの<li>の個数を数えて合計しながらstart属性を設定する、といった処理です。これにより、手動で数える手間とミスのリスクを減らせます。
考え方のイメージだけ示すと、次のようになります。
document.querySelectorAll('ol.step-list')のように、対象の順序付きリストをまとめて取得する- 1つ目のリストは
startなし、2つ目以降のリストに対して、直前までの項目数＋1を計算する setAttribute('start', 計算した値)で反映する
ここで登場するquerySelectorAllは、「指定したCSSセレクタにマッチする要素をまとめて取得するJavaScriptのメソッド」です。初学者の段階ではコードを丸暗記する必要はありませんが、「リストの数をプログラムで数えて、startを自動で設定することもできる」という発想を持っておくと、実務や応用で役に立ちます。
複数リストをつなげるときの運用上のポイント
運用の場面で順序付きリストをつなぐときには、次のようなポイントを意識すると扱いやすくなります。
- 各
<ol>にクラス名（例：class="step-list"）を付けておき、対象を明確にしておく - デザインや構成が変わったときに、
startの値が古いままになっていないかを確認する - チーム開発では、「通し番号を使っている箇所」をコーディング規約やコメントなどで共有しておく
- 印刷用レイアウトやモバイル表示でも番号が崩れていないかを確認する
これらを押さえることで、複数の順序付きリストを使った構成でも、読み手にとって自然でわかりやすい番号表示を維持しやすくなります。
Webページの可読性を高める順序付きリスト活用テクニック
Webページの「可読性」とは、ユーザーが内容をスムーズに読み進められるかどうか、情報を理解しやすいかどうかを指す言葉です。順序付きリストは、この可読性を高めるためのとても強力な手段です。単に番号を付けるだけでなく、「どの情報をリストにするか」「どの粒度で区切るか」「start属性でどう番号を調整するか」を意識することで、読み手にとって分かりやすい構造を作ることができます。
手順・フローの情報をリストにまとめるテクニック
まず意識したいのは、「手順やフローの説明は、できるだけ順序付きリストにする」という考え方です。文章の中で「まず〜、次に〜、その後〜」と文章だけで説明してしまうと、読む人によってはどこが区切りなのか把握しづらくなります。そこで、手順1つにつき1つの<li>に分けて書くことで、「どこからどこまでが1ステップか」が視覚的に明確になります。
<h2>会員登録の流れ</h2>
<ol>
<li>登録ページを開く</li>
<li>メールアドレスとパスワードを入力する</li>
<li>利用規約を確認して同意する</li>
<li>登録ボタンをクリックする</li>
</ol>このように、1つの<li>の中に複数のアクションを詰め込みすぎないことが重要です。「ボタンをクリックし、その後表示される画面で〜して〜して…」と長文にせず、画面が変わるタイミングやユーザーの操作が変わるタイミングで<li>を分割すると、ステップの境界がはっきりして読みやすくなります。
見出しと組み合わせて情報の階層をはっきりさせる
順序付きリストを使うときは、見出し要素（<h2>, <h3>など）と組み合わせることで、情報の階層構造がはっきりします。見出しは「このリストは何の手順なのか」を示すラベルの役割を持ちます。
<h2>インストール前の準備</h2>
<ol>
<li>対応OSを確認する</li>
<li>必要な空き容量を確認する</li>
<li>インターネット接続を確認する</li>
</ol>
<h2>インストールの手順</h2>
<ol start="4">
<li>インストーラーファイルをダウンロードする</li>
<li>インストーラーファイルを実行する</li>
<li>案内に従ってインストールを完了させる</li>
</ol>このように、見出し＋順序付きリストの組をいくつか並べることで、「どの範囲のステップが何を目的とした作業なのか」が直感的に把握しやすくなります。start属性を使って番号を引き継げば、「準備〜インストールまでが一連の流れである」ということも番号から読み取ることができます。
CSSで行間・余白を整えて読みやすくする
順序付きリストは、HTML構造だけでなく、CSSによる見た目の工夫も可読性に大きく影響します。CSS（スタイルシート）は、文字の大きさや色、余白などを指定するための仕組みです。リストまわりで特に意識したいのは、行間と余白です。
<style>
ol {
margin-left: 1.5rem;
line-height: 1.8;
}
ol li {
margin-bottom: 0.4rem;
}
</style>このように余白や行間を調整することで、番号とテキストが詰まりすぎず、読み疲れしにくい表示になります。行間を適度に広げると、特にスマートフォンなどの小さい画面で見たときに効果的です。
長い説明文には「タイトル付きのリスト項目」を使う
1つのステップに対する説明が長くなる場合、「タイトル＋詳細説明」という構成にすると、ぱっと見で内容を把握しやすくなります。
<ol>
<li>
ログイン情報の入力
<p>登録時に設定したメールアドレスとパスワードを入力します。大文字・小文字の違いに注意してください。</p>
</li>
<li>
二段階認証コードの確認
<p>登録メールアドレスに届いた認証コードを確認し、画面の入力欄に入力します。</p>
</li>
</ol>このように<li>の中に小見出し的な文章と<p>タグによる詳しい説明を入れることで、「何をするステップなのか」と「具体的な説明」が切り分けられます。読み手はまずタイトル部分だけをざっと読み、必要に応じて説明部分を読み込むことができるため、情報量が多くてもストレスが少なくなります。
start属性を使った「章ごとの読みやすい区切り方」
可読性の観点からは、番号が通しでつながっていることに加えて、「どのブロックがどこから始まるか」が明確であることも大切です。start属性を使うと、章やセクションごとにリストを分けながら、番号は継続させることができます。
<h2>第1章：環境準備（ステップ1〜4）</h2>
<ol>
<li>OSをアップデートする</li>
<li>ブラウザを最新版にする</li>
<li>必要なソフトウェアをインストールする</li>
<li>インターネット接続を確認する</li>
</ol>
<h2>第2章：アカウント設定（ステップ5〜8）</h2>
<ol start="5">
<li>アカウント登録ページにアクセスする</li>
<li>ユーザー情報を入力する</li>
<li>確認メールから本登録を行う</li>
<li>プロフィール情報を設定する</li>
</ol>見出しには「ステップ1〜4」「ステップ5〜8」と範囲を明示し、番号はstartによって連続させています。これにより、読み手は「今、全体のどのあたりを読んでいるのか」を把握しやすくなります。
アクセシビリティを意識した表現
順序付きリストは、スクリーンリーダーなどの支援技術を利用するユーザーにとっても重要です。スクリーンリーダーは、リストの項目数や現在の項目番号を読み上げることがあります。適切に<ol>と<li>を使い、start属性で意味のある番号を維持しておくことで、「全体で10ステップあるうちの今は7番目」というような情報をユーザーに伝えやすくなります。
このような配慮は、視覚的なデザインだけでは伝わりにくい情報を補う役割を果たし、より多くの人にとって利用しやすいWebページ作りにつながります。
初心者がつまずきやすいstart属性の注意点と対処法
start属性は便利な一方で、初心者の方が「思ったとおりに動かない」と感じやすいポイントがいくつかあります。ここでは、代表的なつまずきポイントと、その対処法を具体的に整理しておきます。
まず多いのが、「startを付けたのに番号が変わっていない」というケースです。これは、start属性を<li>タグにつけてしまっているパターンがよく見られます。startはあくまで<ol>タグに指定する属性であり、<li start="4">のように書いても意味を持ちません。
<!-- よくある間違い -->
<ol>
<li>手順1</li>
<li start="4">手順2</li>
<li>手順3</li>
</ol>
<!-- 正しい書き方 -->
<ol start="4">
<li>手順4</li>
<li>手順5</li>
<li>手順6</li>
</ol>このように、開始番号を変えたいときには、必ず<ol>側に指定することを意識する必要があります。
次に、「前のリストと番号がつながらない」というつまずきもよくあります。原因としては、単純にstartの値を間違えていることが多いです。たとえば、前の<ol>に<li>が3つあるのに、続きのリストでstart="3"としてしまうと、2つの項目に同じ番号が存在することになります。人間が読むうえでも混乱を招きますし、意味的にも正しくありません。対処法としては、「前のリストの項目数＋1」を徹底することと、修正のたびに確認することが大切です。
<!-- 前のリストが3件の例 -->
<ol>
<li>手順1</li>
<li>手順2</li>
<li>手順3</li>
</ol>
<!-- startの誤り: 3から始めてしまっている -->
<ol start="3">
<li>手順3</li>
<li>手順4</li>
</ol>
<!-- 正しくは4から始める -->
<ol start="4">
<li>手順4</li>
<li>手順5</li>
</ol>また、startに0や負の数を入れてしまい、ブラウザの挙動が想定と異なるという問題もあります。HTMLの仕様上、ブラウザによって扱いが分かれる可能性があり、実務では好まれません。基本的に1以上の整数を指定するようにし、0やマイナスは使わない方が安全です。
さらに、CSSでlist-style-typeを変更している場合に、「type属性やstart属性を変えても思った表示にならない」という混乱も起こりがちです。list-style-typeはCSSから番号やマーカーの見た目を変えるプロパティで、decimal, upper-alpha, lower-romanなどを指定できます。もしCSS側でlist-style-typeを指定していると、HTML側のtype属性の指定が上書きされるような形になり、想定とは違う表示になることがあります。対処法としては、「番号の表示形式をどこで制御しているか」を整理し、HTML側（type属性）で制御するのか、CSS側（list-style-type）で制御するのかを統一しておくと混乱が減ります。
ネスト（入れ子）したリストでも、初心者の方はつまずきやすいです。たとえば、大きな手順を順序付きリストで、その中に箇条書きの説明を持たせたいときに、<ol>と<ul>を適切に組み合わせる必要があります。このとき、内側のリストにも誤ってstartを付けてしまうと、思わぬ番号表示になることがあります。
<ol>
<li>
アカウント登録
<ul>
<li>メールアドレスの入力</li>
<li>パスワードの入力</li>
</ul>
</li>
<li>ログイン</li>
</ol>この例のように、内側のリストは「順番よりも箇条書きとしての意味が強い」場合が多いので、<ul>を使い、start属性は外側の<ol>だけで管理するとシンプルです。
もう1つの注意点として、「HTMLのバリデーションエラー」があります。バリデーションとは、HTMLが仕様に従って正しく書かれているかをチェックすることです。start属性に数値以外の値を入れたり、あり得ない大きさの値を入れたりすると、バリデーションエラーや警告の原因になります。数値は必ず半角で、不要な文字を付けないように気をつける必要があります。
運用面では、「後から手順を追加したときに、startの更新を忘れてしまう」こともよくあります。特に長期運用しているマニュアルやドキュメントでは、途中にステップを追加するたびに、後ろのstartをすべて見直す必要が出てきます。対処法としては、次のような工夫が考えられます。
- 「ここからは手動で連番を継続している」とコメントを残す
- 章や大きな区切りごとにリストを区切り、
startの調整が必要な箇所を少なくする - 場合によっては、JavaScriptで
start値を自動計算する処理を導入する
このようなポイントを意識しておくことで、start属性を使った順序付きリストでも、予期しない挙動やメンテナンス時の混乱を減らすことができます。
実務で役立つ順序付きリストとstart属性の応用パターン
順序付きリストとstart属性は、学習用のサンプルだけでなく、実務の現場でもさまざまな場面で役立ちます。ここでは、実際のWebサイト制作や業務システムでよく登場するパターンをイメージしながら、「どういうときに使うと便利か」「どう設計すると運用しやすいか」という視点で解説していきます。
マニュアル・手順書の通し番号管理
もっとも典型的なのが、オンラインマニュアルや操作手順書です。たとえば、業務アプリの「初期設定マニュアル」では、インストールからログイン、各種設定までを1〜20などの通し番号で説明したいことがあります。途中で画面キャプチャや注意書きを挟みつつも番号は途切れさせたくない場合、start属性による調整が活躍します。
<h2>初期設定（ステップ1〜5）</h2>
<ol>
<li>アプリをインストールする</li>
<li>アプリを起動する</li>
<li>ライセンスキーを入力する</li>
<li>利用規約に同意する</li>
<li>初回設定を保存する</li>
</ol>
<h2>ユーザー設定（ステップ6〜10）</h2>
<ol start="6">
<li>ユーザー情報を登録する</li>
<li>権限を設定する</li>
<li>通知設定を行う</li>
<li>プロフィール画像を設定する</li>
<li>設定を確認して保存する</li>
</ol>印刷用のPDFや社内ポータルに同じ内容を載せる場合でも、ステップ番号が一貫していれば、サポート担当者とユーザーが「ステップ7を見てください」のように共通の番号で会話でき、コミュニケーションがスムーズになります。
FAQや設問番号の一元管理
よくある応用として、FAQページや練習問題の設問番号を順序付きリストで表現するパターンがあります。たとえば「問1〜問10」を複数のカテゴリーに分けて掲載したいとき、それぞれを別々に管理しつつ番号は続きにしたい、というニーズが生まれます。
<h2>基本操作に関する質問（問1〜問4）</h2>
<ol>
<li>ログインできないときはどうすればよいですか？</li>
<li>パスワードを忘れた場合の対応方法は？</li>
<li>対応ブラウザは何ですか？</li>
<li>推奨動作環境はありますか？</li>
</ol>
<h2>アカウント設定に関する質問（問5〜問8）</h2>
<ol start="5">
<li>メールアドレスを変更するには？</li>
<li>二段階認証を設定するには？</li>
<li>退会手続きの方法は？</li>
<li>アカウント情報をエクスポートできますか？</li>
</ol>このようにしておけば、「FAQの問7を参照してください」といった案内がしやすくなり、紙のマニュアルや社内資料と番号を合わせることも可能になります。
複数ページにわたるステップ表示
長いチュートリアルやオンボーディングコンテンツでは、複数ページにわたってステップを説明することもあります。HTMLのファイルがページごとに分かれている場合、ページ2以降の<ol>にstartを設定することで、1ページ目からのステップ番号を引き継げます。
<!-- page1.html 内 -->
<ol>
<li>アカウント登録を行う</li>
<li>メールアドレスを認証する</li>
<li>初回ログインを行う</li>
</ol><!-- page2.html 内 -->
<ol start="4">
<li>プロフィール情報を入力する</li>
<li>通知設定を行う</li>
<li>チュートリアルを完了する</li>
</ol>このようにしておくと、「全体で6ステップあるうち、今は後半の4〜6ステップを説明している」ということを番号から自然に伝えることができます。ページ遷移を伴うフローでも、ユーザーが自分の進捗を把握しやすくなります。
業務システムの操作ログや手順履歴との連携
業務システムでは、「何番目の手順でエラーが発生したか」を記録したい場面があります。その際、画面上の手順番号とログの番号が一致していると、原因調査が格段にやりやすくなります。順序付きリストでステップ番号を管理し、start属性で番号を厳密に制御しておくことで、システム側のログやエラーメッセージと対応させやすくなります。
たとえば、ログには「STEP=7」で記録しておき、画面の説明も7番目のステップとして表示しておけば、開発者やサポート担当者が問題の位置をすぐに特定できます。
教材・研修資料でのステップ学習
プログラミングスクールや社内研修の教材でも、「演習1〜演習10」「課題1〜課題5」のように連番で学習を進める形がよく使われます。順序付きリストとstart属性を利用すると、章ごとにHTMLファイルを分けたり、セクションごとに見出しを分割したりしても、番号を一貫して管理できます。
<h2>基礎編：演習1〜3</h2>
<ol>
<li>HTMLで見出しを作成する</li>
<li>段落と改行を使って文章を書く</li>
<li>順序付きリストと箇条書きを使う</li>
</ol>
<h2>応用編：演習4〜6</h2>
<ol start="4">
<li>フォームで入力欄を作成する</li>
<li>CSSで見た目を整える</li>
<li>簡単なインタラクションを追加する</li>
</ol>こうした構成にしておくと、講師と受講生の間で「演習5まで終わりましたか？」のような確認がやりやすくなり、学習進捗の共有にも役立ちます。
デザインとの組み合わせを意識した応用
実務では、単純なテキストのリストではなく、アイコンやボックスデザインと組み合わせた「ステップ表示」にすることも多いです。CSSで番号の位置や装飾を変えても、HTML側ではあくまで<ol>と<li>＋startで意味を保つようにすると、デザイン変更があっても構造が崩れにくくなります。
<ol class="step-list" start="3">
<li>
<div class="step-card">
<span class="step-label">STEP</span>
<p>支払い方法を選択する</p>
</div>
</li>
<li>
<div class="step-card">
<span class="step-label">STEP</span>
<p>内容を確認して注文を確定する</p>
</div>
</li>
</ol>ここでは、見た目としてはカード状のデザインになっていても、HTMLとしてはきちんと順序付きリストになっているため、読み上げソフトや検索エンジンにも「順番のあるステップ」として情報が伝わります。
このように、実務で順序付きリストとstart属性を活用する場面は多岐にわたります。「番号に意味があるか」「途中からでも番号を引き継ぎたいか」という視点でページ構成を考えると、どの部分でこれらの仕組みを使うべきかが見えてきます。
まとめ
HTMLの順序付きリストとstart属性について、基礎から実務での応用まで一通り整理してきました。まず、「順序付きリスト」とは何かという点では、<ol>タグと<li>タグを使って、順番に意味のある情報を番号付きで表現する仕組みであることを確認しました。料理のレシピ、アプリの操作手順、テストの設問番号など、「1番・2番・3番」という順番自体が重要な場面で使うべきタグであり、単なる見た目のスタイルではなく、意味を持った構造として扱うことが大切であるとお伝えしました。
次に、start属性の役割として、「リスト番号の開始位置を指定するための機能」である点を詳しく見てきました。通常は1から始まる番号を、<ol start="4">のように書くことで4番から振り直すことができ、前のリストの続きとして番号を再開したり、途中の番号から説明を始めたりできることを具体例を交えて説明しました。また、type属性と組み合わせることで、「Dから始まるアルファベットのリスト」や「IVから始まるローマ数字のリスト」なども表現できることを確認しました。
実際のコード例としては、長い手順の途中に画像や補足説明を挟みたいケース、章ごとに見出しを区切りながらもステップ番号は通し番号にしたいケース、選択肢のアルファベットを途中から継続させたいクイズ形式のコンテンツなどを扱いました。これらの例を通して、「1つの大きな流れを、HTMLの構造上は複数の<ol>に分けつつも、番号だけはつながって見せる」という設計の考え方をイメージしていただけたと思います。
さらに、複数の順序付きリストを自然につなげるためには、「前のリストの<li>の数＋1」をstartに指定することが基本であること、項目数の増減があった場合には後続のstartを見直す必要があることなど、運用上のポイントも整理しました。必要に応じてJavaScriptでstart値を自動計算するという発想にも触れ、規模の大きなコンテンツや頻繁に更新されるマニュアルほど、自動化のメリットが大きいことも解説しました。
可読性という観点では、順序付きリストを使うことで、文章をだらだらと続けるのではなく、「1ステップ＝1つの<li>」として整理する重要性をお話ししました。見出しと組み合わせて情報の階層をはっきりさせること、CSSで余白や行間を整えて読みやすくすること、<li>の中にタイトルと詳細説明を両方記述して情報量の多いステップも見やすくすることなど、デザインと構造の両面からの工夫も紹介しました。また、スクリーンリーダーなどの支援技術にとっても、順序付きリストと正しい番号付けは重要であり、「何番目の項目か」という情報をユーザーに伝えやすくなるため、アクセシビリティの観点からも意義があることをお伝えしました。
一方で、初心者がつまずきやすい点としては、startを<li>に書いてしまうミス、前のリストとの番号がずれてしまう設定、0や負の数を使ってしまうケース、CSSによる番号スタイル変更との競合、入れ子構造の中でどこまで番号を管理するかの混乱などを挙げ、それぞれに対する対処法を整理しました。特に、実務で長期運用するコンテンツでは、後からステップを追加するたびに番号が崩れてしまうことが多いため、「どこで通し番号を使っているのか」をコメントや規約で共有しておくことの重要性も確認しました。
最後に、実務での応用パターンとして、オンラインマニュアルや操作手順書、FAQや設問番号の管理、複数ページにわたるチュートリアル、業務システムのログと連携したステップ管理、教材や研修資料での演習番号の管理、そしてデザイン性の高いステップUIとの組み合わせなど、具体的なユースケースをいくつも挙げました。どの場面でも共通しているのは、「番号に意味があるのであれば、順序付きリストとして正しく構造化し、開始番号の制御が必要ならstart属性を使う」という考え方です。
順序付きリストとstart属性は、一見すると小さな機能に見えますが、情報の伝わり方やコンテンツの分かりやすさに大きく影響します。HTMLの基本的なタグとしてしっかり理解しておくことで、今後、マニュアルやチュートリアル、教材、FAQなどを作成するときに、「どのように構造を設計すべきか」を自信を持って判断できるようになります。ぜひ実際に小さなサンプルから書いてみて、ブラウザで表示を確認しながら、自分なりの使い方や工夫を身につけていってください。