途中から続く番号付きリストを作る：説明を挟んだ手順をつなごう

手順を二つ書き、説明文を挟んで続きを書くと、また1番から始まってしまう。途中から続く番号付きリストを作るには、後半の開始番号をHTMLへ指定します。ただし番号がつながって見えることと、一つのリストであることは別に考えます。

題材は架空の図書交換会の出品準備です。HTMLの開始タグ・終了タグ・属性が分かる人向けに、四つの手順を前半と後半へ分けます。エディターとブラウザーを用意してください。番号の自動生成システムや、申し込みの実装は扱いません。

説明文が一つの手順に属するか、区切りになるかを決める

番号付きリストにはol、各項目にはliを使います。まず「本を選ぶ」「本の名前を書く」「紹介文を書く」「案内カードを本に添える」という四項目を並べます。今回は、この順に進める手順として番号を付けます。

項目を入れ替えても意味が変わらない持ち物一覧なら、番号が必要かを考え直します。MDNのolの説明では、順序が内容の意味を持つ一覧として説明されています。文字を強調するためだけに番号を足すのではありません。

説明が「本の名前を書く」という一項目の補足なら、そのliの中にpで入れられます。一つのolを保てるため、前半の項目数を別の場所へ転記する必要もありません。補足が長いという理由だけで分割せず、まず何についての説明かを確認します。

一方、前半を終えたところで案内全体の方針を説明し、その後に続きの節を設けるなら、二つのolへ分ける構成が候補になります。この場合は「準備の続き」と見出しにも書き、後半だけを読んでも続きだと分かるようにします。番号の連続は、この関係を補うものです。

後半のolにstartを付けたページを保存する

次の全体をordered-practice.htmlとして保存し、ブラウザーで開きます。前半は1・2、後半は3・4になるのが完成形です。紹介文の前に置く段落は、出品案内全体の方針としてリストの外へ出しています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>出品準備の手順｜練習</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.7; }
    main { max-width: 36rem; margin-inline: auto; }
    ol { padding-inline-start: 2rem; }
    li + li { margin-block-start: 0.5rem; }
  </style>
</head>
<body>
  <main>
    <h1>図書交換会の出品準備（架空の練習例）</h1>
    <h2>本と案内カードを用意する</h2>
    <ol>
      <li>紹介したい本を一冊選ぶ。</li>
      <li>案内カードに本の名前を書く。</li>
    </ol>
    <p>この練習では、持ち主の名前ではなく、本の紹介を中心に案内します。</p>
    <h2>準備の続き：紹介文を添える</h2>
    <ol start="3">
      <li>案内カードに本の紹介文を書く。</li>
      <li>カードを本に添え、内容の対応を確かめる。</li>
    </ol>
  </main>
</body>
</html>

start="3"は、このolを3から数え始める指定です。次のliは4になります。番号そのものをliの文章へ書き足す必要はありません。開始番号は属性で、手順の文章は要素の中身で管理します。

二つ目のolが、前のolを探して続きを計算するわけではありません。別のリストとして3を起点に数えています。そのため、最初のリストを後から三項目へ増やしても、後半のstartは自動では4へ変わりません。この更新時の関係も完成条件に含めます。

また、説明のpをolの直下に置いてliの間へ挟む書き方は避けます。HTML標準のolの内容モデルに沿い、今回の原稿ではolの直接の子をliにします。一項目の補足ならliの内側、一覧全体の外に置く文章ならolを閉じた後、と位置を選びます。

1へ戻る場合は、番号の文字を書き足さず属性を直す

最初の失敗を確かめるため、後半のstart="3"だけを取り除きます。今回の昇順リストでは、後半も1・2になります。ブラウザーの不具合ではなく、新しいolの開始値を指定していないことが原因です。

ここでliの文章を「3. 案内カードに……」へ変えると、自動の番号と手書きの番号が両方出る状態になります。修正は文章へ足した数字を除き、olへstart="3"を戻すことです。保存して再読み込みし、前後を合わせた番号が1・2・3・4で、それぞれ一度だけ表示されるか確認します。

既存サイトでは、番号を消すCSSや独自の番号表示が追加されている場合もあります。属性を直しても番号が見えなければ、まず今回の装飾の少ない練習ページで結果を比べます。開始番号の問題と、番号を表示するスタイルの問題を一緒に変更しないようにします。

番号が欠けたり本文へ重なったりする場合の余白調整は、リストのマーカー位置の記事で扱っています。ここでは見た目の位置ではなく、どの項目が何番になるかを先に確定します。

liのvalueは、その項目から番号を変える指定

startはolの始まりを指定します。一方、olの途中にある項目の番号を指定したい場合には、liのvalueを使えます。MDNのliの説明で、後続の項目もその値から続くことを確認できます。

次は挙動を比較するための断片です。先ほどのページのmainの末尾へ追加して開けます。出品の手順とは別の観察用リストで、表示される番号は1・5・6です。

<h2>番号指定の観察用リスト</h2>
<ol>
  <li>最初の項目</li>
  <li value="5">番号を指定した項目</li>
  <li>その次の項目</li>
</ol>

二つ目の失敗は、コピーしたliにvalueが残り、番号が突然飛ぶことです。1・2・3の連番が目的なら、value="5"を取り除きます。再確認では二つ目だけでなく三つ目も見て、2・3へ戻ったことを確かめます。すべてのliに番号を手で指定して修正する必要はありません。

元資料の一部を抜粋し、項目番号をそのまま残すなど、番号を飛ばす理由がある場合にはvalueが候補になります。その際は何を省略したかを本文で伝えます。実行に必要な手順を黙って省き、番号だけを合わせる使い方は避けてください。今回の四つの連続した手順には、個別のvalueは不要です。

項目を足したら、後半の開始値と文章内の参照も読む

前半の最後に「カードに書いた本の名前を表紙と照合する」を追加すると、前半は1・2・3になります。後半を続けるにはstartを4へ変更し、全体を1から5にします。項目を削除したときも、同じように後半の開始番号を見直します。

文章内に「手順3を終えたら」と書いていた場合、その指し先も確認が必要です。番号が連続していても、読者を別の作業へ案内していれば修正は終わっていません。「紹介文を書く手順」のように内容の名前で示す方が分かりやすい場面もあります。

頻繁に項目を増減する短い手順なら、補足をliの中へ収め、一つのolを保つ構成を先に検討します。分割が必要な場合は、更新時に前後のリストを一組で確認します。番号をつなぐ属性だけで、複数のolが一つのリストへ変わるわけではないことも覚えておきましょう。

項目を追加した後、番号と本文の参照を照合する

観察用リストを取り除き、出品準備へ照合の一項目を追加します。解答は、前半が三項目、後半のolがstart="4"、後半の末尾が5になる構成です。

• 前半は1・2・3で、追加した照合作業が三つ目にある。
• 後半は4・5で、最初の作業は紹介文を書くことになっている。
• liの文章に番号を手書きしておらず、番号が二重に出ない。
• 説明文はolの外にあり、両方のolの直接の子はliになっている。

幅390px程度と広い画面の両方で、番号と文末が読めることも確認します。読み上げを試せる環境では、リストの区切りと「準備の続き」という案内も聞いて記録してください。基本の構造を練習するには無料のHTMLレッスンを参照できます。確認記録には「1から5が連続する」と「前半・後半は別のリストである」を両方残しましょう。