【実務・中級編】olタグのstart属性とreversed属性の活用 – HTML実践ガイド

CSSに頼りすぎない。「HTMLの標準機能」でリストを操る、start属性とreversed属性の作法

フロントエンド開発の現場で、リスト要素（`ol`や`ul`）を扱うとき、つい「CSSでなんとかなるか」と`counter-reset`や`counter-increment`を書いてしまうことはないだろうか。

もちろん、CSSによるカウンタ制御は表現の幅が広く強力だ。しかし、HTMLには古くから、そして現代においてこそ再評価されるべき「意味付けを伴う制御機能」が備わっている。それが、`

今回は、JavaScriptを一行も書かず、CSSの複雑なロジックにも頼らず、HTMLの標準機能だけで「リストの番号」をスマートに制御する手法について解説しよう。

—

1. なぜ「CSSカウンタ」ではなく「HTML属性」なのか

中級レベルに差し掛かると、私たちは「見た目を整えるのはCSSの仕事」という教義に忠実になりがちだ。しかし、HTMLの属性は「コンテンツの性質そのもの」を定義する。

例えば、「ステップバイステップのチュートリアル」で、ページを跨いで番号を継続させたい場合や、「トップ10ランキング」でカウントダウンさせたい場合、これらは単なる見た目の問題ではなく、ドキュメントの構造そのものの話だ。

ブラウザのレンダリングエンジンは、`start`や`reversed`が指定された`

—

2. start属性：リストの開始番号を再定義する

`start`属性は、順序付きリストが「1」から始まらなければならないという固定観念を壊してくれる。

例えば、記事の後半から続き番号を振りたいときや、複雑なレイアウトでリストを分割しているが、通し番号にしたいとき。CSSでごちゃごちゃと制御する前に、まずはこれを使うべきだ。

5番目のステップ：検証プロセスを開始する
6番目のステップ：ログを解析する
7番目のステップ：デプロイを実行する

—

3. reversed属性：カウントダウンの「意味」を伝える

ランキングサイトや、期限付きのカウントダウンリストを作るとき、CSSの`flex-direction: column-reverse`などで強引に並び替えていないだろうか？

`reversed`属性を使えば、ブラウザは「これは逆順に数える必要があるリストである」と正しく認識し、マークアップ上の順序（上から下へ）を維持したまま、番号だけを降順に表示してくれる。

第3位：圧倒的なパフォーマンス
第2位：メンテナンス性の高いコンポーネント設計
第1位：型安全による堅牢なデータフロー

※補足：`reversed`と`start`を組み合わせることも可能だ。例えば「ランキングの10位から6位までを表示する」といったケースでは、`

—

4. 現場で直面する「ブラウザサポート」の現実

「古いブラウザで動かないのでは？」という懸念を持つかもしれないが、安心してほしい。`start`および`reversed`属性は、IE時代から含めても非常に堅牢なサポート状況にある。現在主流のモダンブラウザ（Chrome, Firefox, Safari, Edge）はもちろん、レガシー環境でもCSSほど挙動が崩れるリスクは低い。

ただし、一点だけ注意がある。「番号の見た目」を変えたい場合だ。
`list-style-type`で`decimal`以外（例えば、丸囲み数字や独自のスタイル）を使いたい場合、CSSの`::marker`疑似要素と組み合わせるのが現代のベストプラクティスだ。

/ 現代的なスタイリングの組み合わせ例 /
ol {
list-style-type: none; / デフォルトの数字を消す /
counter-reset: custom-counter;
}

ol li::before {
/ HTMLのstart/reversed属性の影響を受けたカウンタ値を取得 /
counter-increment: custom-counter;
content: counter(custom-counter) “. “;
font-weight: bold;
}

—

最後に：なぜ「泥臭いHTML」を愛すべきか

シニアエンジニアとして、後輩にいつも伝えていることがある。
「技術の引き出しは多いに越したことはないが、最もメンテナンスコストが低いのは、標準仕様に準拠したコードだ」と。

JavaScriptでリストの番号を計算したり、CSSで複雑な`counter-reset`を多用するのは、往々にして「コードの複雑化」を招く。HTMLの属性を適切に使うことは、ブラウザに本来の役割を任せるということ。それは、より軽量で、より堅牢で、よりアクセシブルなウェブサイトを作るための「プロの矜持」とも言える。

明日からの実装で、もしリストの番号制御に悩んだら、まずはCSSを閉じて、`