なぜ今さら ` ` の `start` 属性なのか？
フロントエンドの現場で「リスト」と言えば、`
- ` でメニューを作り、`
- ` で項目を並べる。このルーチンに慣れきった中級エンジニアほど、実は `
- ` の持つポテンシャルを見落としています。
- 4番目の項目
- 5番目の項目
- `”5″` → `5` として認識される（正常）
- `”abc”` → `0` または `1` として扱われる（ブラウザの実装依存だが、概ね「番号なし」か「1」になる）
- `”3.5″` → `3` として切り捨てられる（parseInt的な挙動）
- 依存関係のインストール
- 環境変数の設定
- ビルドスクリプトの実行
「番号なんてCSSの `counter-increment` で制御すればいいだろ？」という声が聞こえてきそうですね。確かにその通りです。しかし、マークアップの意味論（セマンティクス）を突き詰めると、「構造そのものに番号の開始位置という情報を持たせる」ことは、アクセシビリティや保守性の観点で非常に理にかなっています。
今日は、意外と知られていない `
- ` 要素の `start` 属性の仕様と、そこに潜む「数値以外を入れたらどうなるのか？」というマニアックな仕様の深淵を覗いてみましょう。
—
`start` 属性の標準的な挙動
`start` 属性は、`
- ` 要素のリスト番号を「1」以外から開始させるために存在します。例えば、記事の続きで「4番目」からリストを始めたい場合、以下のように書きます。
これだけで、ブラウザは自動的に番号をカウントアップしてくれます。CSSで擬似要素をいじる必要がないので、レンダリング負荷もかからず、スクリーンリーダーに対しても「このリストは4から始まる」という正しい情報が伝わります。
—
禁断の質問：数値以外を入れたらどうなるのか？
ここで少し意地悪な実験をしてみましょう。もし `start` 属性に「文字列」を指定したらブラウザはどう反応するのでしょうか？
仕様書（WHATWG HTML Living Standard）を紐解くと、`start` 属性は「整数（integer）」として定義されています。しかし、Webの仕様は寛容です。結論から言うと、「文字列を指定した場合、ブラウザはそれを整数値に変換しようと試みる」という挙動を示します。
実務において「文字列を入れる」ことはバグの元ですが、もし動的に値を渡す際に型変換を忘れてしまっても、ブラウザが爆発しないようになっているのは、Webの歴史が培った泥臭い優しさと言えるでしょう。
—
実践的Tips：実務で輝くコード例
例えば、ページ分割されたドキュメントや、複数のセクションにまたがる長い手順書を作る際、`start` 属性は非常に役立ちます。以下は、メンテナンス性を意識したクリーンな実装例です。
フェーズ 2: セットアップ
—
まとめ：なぜ「あえて」使うのか
最近のモダンな開発では、すべてをJavaScriptやCSSで解決しがちです。しかし、「ブラウザが標準で用意している属性を正しく使う」ことは、最も軽量で、最もバグの少ないソリューションです。
1. セマンティクス: 番号の開始位置はドキュメント構造の一部である。
2. パフォーマンス: CSSの `counter` を計算させるよりも、ブラウザのネイティブ処理に任せる方がCPUリソースに優しい。
3. メンテナンス: JSのロジックを変更することなく、HTMLの属性値を変えるだけで番号の制御が可能。もしあなたが大規模なドキュメント作成に関わっているなら、ぜひ一度 `start` 属性の存在を思い出してください。「便利だから使う」のではなく、「正しいから使う」。その一歩先にあるプロのマークアップを、ぜひあなたの現場でも実践してみてください。
それでは、また次回の深掘りでお会いしましょう。ハッピーコーディング！
コメント