【実務・中級編】li要素（リスト項目）の役割と制約 – HTML実践ガイド

意外と語られない「li要素」の深淵――その制約と正しい作法

現場でコードレビューをしていると、`

`や`
`の中に平然と`
`を突っ込んでいたり、逆に`

`を単独でリストの外に放り出しているコードを見かけることがあります。

「動くからいいだろう」――そう思うかもしれません。しかし、HTMLはブラウザという名の「厳格な解釈者」に渡される設計図です。この設計図が歪んでいると、アクセシビリティの欠如や、意図しないレイアウト崩れという負債を将来的に抱えることになります。

今回は、フロントエンドの中級者が改めて立ち返るべき「`li`要素の正体」について、仕様と実務の境界線から深掘りしていきましょう。

—

1. li要素は「選ばれし者」の子であるという事実

仕様上、`

`（List Item）は、必ず`

`（順序なしリスト）または`
`（順序ありリスト）の直接の子要素として配置されなければなりません。

なぜなら、ブラウザのレンダリングエンジンは、`ul`や`ol`を見つけた瞬間に「よし、これからリスト要素を処理するぞ」という特殊なモードに切り替わるからです。もし、その中に`div`や`p`が混じっていると、ブラウザはDOMツリーの整合性を保とうとして、無駄なパース（構文解析）を走らせたり、場合によっては「本来あるはずのない要素」を強引にリストの外へ追い出したりする挙動を見せることがあります。

実務で陥りやすい罠：liの直下にブロック要素を置くべきか？

「リストの中にリッチなカードを置きたい」という要件はよくあります。その際、`

1. …

` と書くのは全く問題ありません。`li`はコンテナとして非常に優秀です。 しかし、`li`の親はあくまで`ul`や`ol`でなければならない。ここだけは、CSSでどうにかしようとせず、HTMLの構造として守り抜くのがプロの流儀です。

—

2. ブラウザが裏側で行っている「暗黙の処理」

`

2. `には、CSSを書かずともデフォルトで付与される挙動がいくつかあります。
   • display: list-item;：これが最大の特徴です。この値を持つことで、ブラウザは内部的に「マーカー（点や数字）」を生成する領域を確保します。
   • マーカーの制御：`list-style-type`を指定すれば、マーカーの形状を自由に変えられます。

   もし、あなたが「リストっぽくない見た目」にしたいからといって、`li`を捨てて`div`を並べる道を選ぶなら、それは「検索エンジンやスクリーンリーダーに対する誠実さ」を捨てることと同義です。SEOやアクセシビリティを語るなら、まずは意味のあるタグ選び、すなわち`li`を正しく使うところから始めましょう。

   —

   3. そのまま使える！セマンティックなリストのサンプル

   現場ですぐに使える、堅牢でクリーンなリスト構造のコード例を紹介します。ただのリストではなく、装飾をCSSで完全に分離し、構造を担保した形式です。

   • 高速なレンダリング

     仮想DOMの最適化により、滑らかな操作感を実現します。

   • 高い保守性

     コンポーネント設計により、拡張が容易なコードベースを提供。

   —

   4. プロからのアドバイス：liは「独立したパーツ」になれる

   初心者は「`li`＝箇条書き」と教わりますが、中級者へステップアップするなら「`li`＝リスト構造を支えるための柔軟なコンテナ」と認識を改めてください。

   • `dl`, `dt`, `dd`（記述リスト）との使い分けも重要です。もし「項目名」と「その説明」のペアを作るなら、`ul/li`ではなく`dl`を使うべきです。適材適所。これができるだけで、あなたの書くHTMLの品質は一段上のレベルに達します。

   まとめ：今日からできること

   1. HTML Validatorを信じる：自分が書いたコードが`ul`の直下に`li`以外を置いていないか、一度チェックツールに通してみてください。
   2. CSSでデザイン、HTMLで構造：リストの見た目（マーカーなど）はCSSに任せ、`li`は単なる「項目を囲う箱」としてクリーンに保つ。

   技術の変化は激しいですが、HTMLのこうした本質的な仕様は、今後10年経っても変わりません。基礎を徹底的に磨くことは、実は一番の近道なんです。

   現場からは以上です。明日からのコーディングで、ぜひ「意味のあるタグ」を意識してみてください。