順序付きリストの「深淵」：なぜ今、あえて `ol` 要素を語るのか
フロントエンドの現場で「リストを作るならとりあえず `ul` でいいや」と安易に考えていないだろうか？ 確かに、マークアップの現場では `ul` が圧倒的なシェアを誇る。しかし、順序が結果やプロセスを左右する文脈において、`ol`（Ordered List）を適切に使いこなすことは、単なるセマンティクスの遵守以上に、アクセシビリティとユーザー体験（UX）を決定づける重要な指針となる。
今回は、あえて基礎中の基礎である `ol` 要素に立ち返り、ブラウザが裏側でどうこの「順序」を解釈し、我々がCSSでどうコントロールすべきかを深掘りしていこう。
1. `ol` 要素の定義と「順序」の真意
`ol` 要素は、その名の通り「順序付きリスト」を表す。ここで重要なのは、「項目の並び順を入れ替えると意味が変わるか？」という問いだ。
- レシピの手順
- ランキングの順位
- 決済フローのステップ
これらは `ol` を使うべき典型例だ。逆に、単なる箇条書きやメニュー項目などは `ul` が適している。この使い分けが曖昧だと、スクリーンリーダーを利用するユーザーがコンテンツの構造を正しく理解できず、情報の優先順位を見誤るリスクが生じる。
2. ブラウザの裏側：リストマーカーの生成メカニズム
皆さんは `ol` の数字がどうやって描画されているか意識したことがあるだろうか？
実は、ブラウザは `ol` の子要素である `li` に対して、内部的に `::marker` という擬似要素を生成している。これはCSSで直接制御できる強力なフックだ。昔のようにわざわざ `list-style-type` を指定して画像を用意しなくても、現代のブラウザではこの `::marker` をいじるだけで、驚くほどリッチな連番表現が可能になった。
例えば、`counter-increment` を駆使すれば、途中でリストを分断しても通し番号を維持したり、複雑な階層構造の番号を自在に操ることができる。これは「ただ数字が出るだけ」の箱ではない。CSSが動的に計算する「カウンター」の入り口なのだ。
3. 実務で使える：洗練された `ol` スタイル
実務では、ブラウザのデフォルトスタイル（マージンやパディング）が邪魔になることが多い。以下に、モダンなプロジェクトでそのままコピペして使える、堅牢で美しい `ol` のベーススタイルを提示する。
/ リストの基本リセットとモダンな装飾 /
.ordered-list {
list-style: none; / デフォルトのマーカーを一度消す /
counter-reset: custom-counter; / カウンターを初期化 /
padding-left: 0;
}
.ordered-list li {
position: relative;
counter-increment: custom-counter; / カウンターをインクリメント /
padding-left: 2.5rem; / テキストと番号の間にスペースを確保 /
margin-bottom: 1rem;
}
/ ::markerの代わりに疑似要素でデザイン性の高い番号を作る /
.ordered-list li::before {
content: counter(custom-counter, decimal-leading-zero); / 01, 02… と表示 /
position: absolute;
left: 0;
font-weight: bold;
color: #3b82f6; / ブランドカラーなどを指定 /
}
このコードのポイント
- `list-style: none`: ブラウザごとのデフォルト表示のバラつきを排除する。
- `counter-reset` / `counter-increment`: CSSのカウンター機能を使うことで、HTML構造に依存せず、自由なデザインの連番を生成できる。
- `decimal-leading-zero`: 「1」ではなく「01」と表示させることで、UIデザインとしての質感を高めている。
4. シニアからのアドバイス：保守性を高めるために
最後に一つ、現場でのTipsを伝授しよう。
マークアップ時に `type=”1″` や `start=”3″` といった属性をHTMLに直接書くのは、極力避けたい。これらは表現に関する指示であり、HTML（構造）とCSS（見た目）の責務分離に反するからだ。もしリストの開始番号を変える必要があるなら、CSSの `counter-reset: custom-counter [開始したい番号 – 1];` を使うのがスマートだ。
「HTMLは情報の意味を伝え、CSSはそれを美しく昇華させる」。この鉄則を `ol` 要素一つとっても徹底することで、コードの保守性は劇的に向上する。
次に `ol` を書くとき、ぜひこの「裏側」を意識してみてほしい。たかがリスト、されどリスト。その小さなこだわりが、あなたのコードを「動くもの」から「信頼できる資産」へと変えていくはずだ。
コメント