【実務・中級編】リストの入れ子構造（ネスト） – HTML実践ガイド

HTMLリストの「入れ子構造」を制する：セマンティクスとブラウザの裏側

フロントエンド開発の現場で、意外と軽視されがちなのが「リストの入れ子（ネスト）」の作法です。

「とりあえず`

`の中に`
`を突っ込めば表示はされるし、CSSで調整すればいいでしょ？」

もしあなたがそう考えているなら、少しだけ立ち止まってください。HTMLは単なる「見た目を作る道具」ではなく、ブラウザや支援技術に「構造を伝える言語」です。複雑なUIを実装する際、この構造が崩れていると、アクセシビリティの低下や、レンダリングエンジンの不可解な挙動を引き起こす種になります。

今回は、実務レベルで押さえておくべき「正しいリストの入れ子」の作法を、深掘りして解説します。

—

1. 鉄則：` `の直下には必ず「子要素としてのリスト」を配置する

初心者がやりがちな間違いが、`

`や`
`の直下に直接別のリストを置いてしまうケースです。これは仕様上NGです。

HTMLの構造上、リストアイテム（`

1. `）はリストの唯一の直接の子要素でなければなりません。入れ子を作りたい場合、必ず「親の`
2. `の中に、新しいリストを格納する」のが正解です。
   

   正しいマークアップの構造

   • 親リストの項目
     
     • 子リストの項目 1
     • 子リストの項目 2
   • 次の親リスト項目

   ここで重要なのは、ブラウザがこの構造をどう解釈しているかです。ブラウザのDOMツリー構築において、`

3. `の中にリストが入ることで、アクセシビリティツリー上では「この項目にはサブカテゴリが存在する」という親子関係が明確に定義されます。スクリーンリーダーを使用しているユーザーは、この構造があるおかげで「今、深い階層にいること」を正しく認識できるのです。

   —

   2. 実務で遭遇する「dl, dt, dd」のネストという難所

   `

   `や`
   `だけでなく、記述リスト（`

   `）の入れ子に悩んだことはありませんか？

   実は、`

   `の中に`

   `を入れ子にする場合も、基本ルールは同じです。`

   `（記述）の中に、新しい`

   `を配置します。

   実践的なコード例：FAQや仕様書の構造

   プロジェクトの構成要素

   フロントエンド

   React, TypeScript, Next.js

   バックエンド

   Node.js, PostgreSQL

   デプロイフロー

   GitHub Actionsによる自動デプロイ

   このように記述することで、情報の論理的な階層構造が明確になります。「リストの中にリストを入れる」という制約は、一見不自由に見えますが、「情報の親子関係を強制的に構造化させる」という強力なツールなのです。

   —

   3. シニアが教える「保守性を高める」ためのTips

   実務では、単にマークアップするだけでなく、後からスタイルを当てることも考慮しなければなりません。

   Tips: CSSのセレクタを汚さない

   入れ子構造を作る際、`ul ul` といったセレクタを乱発していませんか？ これを繰り返すと、特定の階層だけスタイルを上書きしたい時に地獄を見ることになります。

   / 悪い例：深い入れ子でCSSが複雑化する /
   ul ul { margin-left: 20px; }

   / 良い例：コンポーネントクラスで管理する /
   .nav-list {
   &__item {
   / アイテムごとのスタイル /
   }

   &__sub-list {
   / サブリストのスタイル（インデント等）を独立させる /
   margin-left: 1.5rem;
   }
   }

   ブラウザの「解釈」を信じるな

   ブラウザは多少のHTMLの崩れを勝手に補完（修正）して表示してくれます。しかし、その補完は「DOMのゆらぎ」を生み出します。特にJavaScriptでDOM操作を行う際、`li`の親が期待通りでないと、`parentNode`や`children`の取得でバグを誘発することがあります。

   「ブラウザの補完機能に頼らず、自分自身で完璧な構造を組む」。これこそが、バグの少ない堅牢なフロントエンドを構築するシニアエンジニアの流儀です。

   —

   まとめ：HTMLは「情報の骨格」である

   リストの入れ子は、単なる見た目のインデントではありません。それは情報の重なりをブラウザとユーザーに伝えるための「地図」です。

   1. `ul`/`ol` の直下には必ず `li` を置く。
   2. ネストしたリストは、必ず親 `li` の中に配置する。
   3. `dl`/`dt`/`dd` の構造も同様に、論理的な包含関係を守る。

   この基本を徹底するだけで、あなたのコードのセマンティクスは劇的に向上します。次にリストをマークアップする際、ぜひこの「入れ子の作法」を意識してみてください。一歩先のフロントエンド開発が、そこから始まります。