番号付きリスト、途中から始めたい時はどうする？ `ol` 要素の「start属性」を使いこなそう
Webサイトを作っていると、「このリスト、1からじゃなくて5からスタートさせたいんだけどな…」なんて場面、意外とありますよね。
例えば、「前編と後編に分かれた記事」。前編が1〜5までで、後編を6から始めたい時。あるいは、「ランキングの途中経過を表示する」なんて時です。
そんな時、HTMLの `ol` 要素（Order List：順序付きリスト）で使える、ちょっと便利な「start属性」という魔法の杖をご紹介します。
—
start属性ってなに？
通常、`
- ` タグで作ったリストは、自動的に「1, 2, 3…」と番号が振られます。ブラウザが気を利かせて勝手にやってくれるので便利ですが、逆に言えば「自動だから数字をいじれない」と思われがちです。
- 5番目の項目です
- 6番目の項目です
- 7番目の項目です
- これはどうなるでしょう？
- 結果は「1」から始まってしまいます
- お菓子セット
- 文房具セット
- ちょっと良いランチ券
- 高品質なノート
- HTMLの `start` 属性： パッと書いてすぐに結果が出る。シンプルで間違いが少ない。
- CSSの `counter`： デザインを複雑に作り込みたい時や、入れ子構造が深い時に便利。
そこで登場するのが `start` 属性です。これを使うと、「君は今日から『5』番からスタートだよ！」とHTMLで直接指示を出せるようになります。
たったこれだけで、ブラウザは律儀に「5, 6, 7…」と表示してくれます。まるで、列に並んでいる人に「あんたは5番目に並んで！」と声をかけるような感覚ですね。
—
「え、数値以外を入れたらどうなるの？」という疑問
さて、ここで鋭い読者さんなら「じゃあ、`start=”abc”` とか適当な文字列を入れたらどうなるの？」と疑問に思うかもしれません。
結論から言うと、「HTMLの仕様上、無視されるか、あるいはブラウザが『1』として解釈する」という挙動になります。
ブラウザはとても優しくて頑固です。意味のわからない指示（数字じゃないもの）が飛んできても、「あ、これ正しくない命令だな」と判断して、無理やりエラーで止めるのではなく、安全な「1」という初期値に戻してくれるんです。
試してみましょう：失敗例
もし、あなたがこのコードを書いても、画面上には「1. これはどうなるでしょう？」と表示されます。「あれ、おかしいな？」と思ったら、属性に数字以外が混じっていないかチェックしてみてくださいね。
—
実践：こんな時に使ってみよう！
例えば、お買い物リストの「予算別ガイド」のようなものを作るとしましょう。
予算1,000円以内のおすすめセット
予算3,000円以内の追加アイテム
こうすることで、読み手は「あ、これは前のリストの続きなんだな」と直感的に理解できます。情報の繋がりが見えるだけで、Webサイトの「親切さ」がグッと上がるんですよ。
—
つまずきポイント：CSSで解決したほうがいい？
よくある質問として、「これ、CSSの `counter-reset` を使ったほうがいいの？」というものがあります。
確かに、本格的なWeb開発ではCSSで番号を制御することも多いです。でも、「まずはHTMLだけでシンプルに解決する」ことは、メンテナンスのしやすさという点で非常に大切です。
まずは `start` 属性を使いこなして、「やりたいこと」をHTMLだけで表現してみる。その成功体験が、皆さんのコーディングスキルを確実に引き上げてくれます。
—
最後に
HTMLは、突き詰めれば「文章に意味を与える道具」です。「ここは続きの番号であるべきだ」という意図を、`start` 属性を使ってブラウザに伝える。これは立派なプログラミングの一歩です。
うまくいかなくても大丈夫。何度でも書き直して、ブラウザで確認してみましょう。その「試行錯誤」こそが、最高のフロントエンド・エンジニアへの近道ですからね！
またわからないことがあれば、いつでも聞きに来てください。一緒に楽しくWebサイトを作っていきましょう！
コメント