「あれ、番号が飛んじゃった！」を解決する、olタグのちょっと便利な裏ワザ
Webサイトを作っていると、商品のランキングや手順の解説などで「1, 2, 3…」と番号付きのリスト（`
- `タグ）を使うこと、よくありますよね。
- まずは準備！
- 次は材料を揃える
- ここから特別に5番です！
- おっと、自動的に6番になりましたね
- 準備を整える
- 道具を使う
- ステップ10：応用編へ突入！
- さらに深掘りしましょう
普通に使っている分には、HTMLが勝手に「1番、2番、3番…」と数えてくれるのでとっても楽ちんです。でも、たまにこんな場面に出くわしたことはありませんか？
「途中で項目を飛ばしたい」
「特定の数字から再開させたい」
そんなとき、多くの初心者がCSSで無理やり数字を消して書き直したり、``タグで手打ちしてしまったりしがちです。でも、実はHTMLには、「ここから番号を変えるよ！」と指示を出せる魔法の属性があるんです。それが `value` 属性です。
今回は、このあまり知られていないけれど、知っておくとちょっと自慢できる `value` 属性について、優しく紐解いていきましょう。
—
まるで「整理番号」を割り当てるイメージ
想像してみてください。あなたは今、行列の整理係です。
普段は並んだ順番通りに「1番、2番、3番…」と札を渡していきますよね。でも、途中で「ここは特別枠だから、5番の札を渡そう」とか、「一度中断して、次は10番から再開しよう」という指示を出すことってありますよね。
`li` タグの `value` 属性は、まさにこれと同じです。
このコードを書くと、ブラウザは「ああ、この項目は5番として扱えばいいんだな」と理解します。そして、その次に続く項目は、自動的に「6番」に戻って数え続けてくれるんです。賢いですよね！
—
なぜこれが「現場の知恵」なのか
「別に手打ちで『5.』って書けばいいんじゃない？」と思うかもしれません。でも、Web開発の現場では、「HTMLの構造」と「見た目」を切り離すことをとても大切にします。
もし後から「やっぱり項目を増やそう！」となったとき、全部手打ちで番号を振っていたら、その後の数字を全部修正しなければなりませんよね。想像するだけでゾッとします……。
`value` 属性を使っておけば、ブラウザが勝手に数字を計算してくれるので、修正は最小限で済むんです。これは、将来の自分を助けるための小さな工夫なんですよ。
—
注意点：魔法は「ol要素の中」でだけ使える
ここで一つだけ、つまずきポイントをフォローしておきますね。
この `value` 属性、あくまで「順番が意味を持つリスト（`
- `）」の中でしか効果を発揮しません。
「点々（・）」で並ぶ「ただの箇条書き（`
- `）」に対して `value` を書いても、残念ながら無視されてしまいます。`
- ` は順番に意味がないリストですから、「数字を変える」という概念そのものがないんですね。
もし「数字は振りたいけれど、`
- ` のルールから外れたいな…」というときは、CSSを使ってデザインを調整する段階に進む合図です。まずは基本の `
- ` + `value` で、「順番を操作する」感覚を掴んでみましょう！
—
実践！こんな時に使ってみよう
例えば、ブログ記事で「ステップ1：準備」から始めて、途中で「ステップ10：応用編」にジャンプさせたいときなどにも使えます。
どうですか？「手打ち」という苦行から解放される予感がしませんか？
HTMLは、一見するとただの箱の積み重ねのように見えますが、実は今回のように「意味を伝える」ための便利な機能がたくさん隠されています。全部一気に覚える必要はありません。「こんなことできないかな？」と思ったら、またいつでもここを覗きに来てくださいね。
皆さんのWeb制作ライフが、少しでも楽に、そして楽しくなりますように！
コメント