入れ子のリストとリストのスタイル
リストの中にリストを入れ子にし、見た目を調整します。
「入れ子のリストとリストのスタイル」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
リストの入れ子
リストは<li>要素の内側に入れ子にできます：
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>正しい入れ子構造
入れ子にするリストは、<ul>や<ol>の直接の子要素ではなく、<li>要素の内側に置く必要があります：
<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
<ul> <!-- INVALID -->
<li>Item</li>
</ul>
</ul>
<!-- CORRECT: nested ul inside li -->
<ul>
<li>
Parent item
<ul>
<li>Child item</li>
</ul>
</li>
</ul>複数レベルの箇条書きスタイル
ブラウザーは、入れ子の各レベルに異なるデフォルトの箇条書き記号を適用します：
<ul>
<li>Level 1 — disc (filled circle)</li> <!-- • -->
<ul>
<li>Level 2 — circle (open circle)</li> <!-- ○ -->
<ul>
<li>Level 3 — square</li> <!-- ▪ -->
</ul>
</ul>
</ul>CSSでリセットする
CSSで入れ子になったリストのスタイルを上書きします：
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
/* Style each level explicitly */
.nav > li > ul {
padding-left: 1rem;
list-style: disc;
}番号付きの入れ子リスト
異なる種類を使用した、入れ子になった順序付きリスト：
<ol type="1">
<li>Introduction
<ol type="a">
<li>Background</li>
<li>Motivation</li>
</ol>
</li>
<li>Methods
<ol type="a">
<li>Data collection</li>
</ol>
</li>
</ol>CSSカウンターによるカスタム番号付け
CSSカウンターで階層的な番号付けをカスタマイズします：
ol {
list-style: none;
counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }
ol ol {
counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
content: counter(level1) '.' counter(level2) ' ';
}アコーディオン型ナビゲーションパターン
入れ子になったリストを、展開可能なサイドバーナビゲーションにできます：
<ul class="tree-nav">
<li>
<details>
<summary>Frontend</summary>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
</ul>
</details>
</li>
<li><a href="/backend">Backend</a></li>
</ul>入れ子リストの間隔
CSSで視覚的なインデントを制御します：
ul {
padding-left: 1.5rem; /* Controls indent at each level */
margin: 0.5rem 0;
}
/* Tighter nested spacing */
ul ul {
margin: 0.25rem 0;
padding-left: 1.25rem;
}list-styleショートハンドの復習
すべてのリストスタイルプロパティを組み合わせます：
/* Shorthand: type position image */
ul {
list-style: square inside;
}
/* Longhand equivalents: */
ul {
list-style-type: square;
list-style-position: inside; /* inside or outside */
list-style-image: none;
}リストマーカーとしてのカスタムアイコン
リストマーカーとしてSVGや絵文字を使用します：
ul.checklist {
list-style: none;
padding: 0;
}
ul.checklist li::before {
content: '✓ ';
color: #22c55e;
font-weight: bold;
}
/* Or with a background SVG */
ul.icon-list li {
padding-left: 2rem;
background: url('/icons/arrow.svg') no-repeat 0 0.2em;
background-size: 1rem 1rem;
list-style: none;
}入れ子リストのアクセシビリティ
入れ子リストとスクリーンリーダー：
- スクリーンリーダーは、入れ子のレベルと項目数を読み上げます
- 深すぎる入れ子（4レベル以上）は分かりにくいため、最大でも2〜3レベルに抑えます
- 外側のリストに
list-style: noneを使用する場合は、role="list"を追加します
クイックチェック
入れ子になったリストは、外側のリスト内のどこに配置する必要がありますか？
振り返り：ネストしたリスト
ネストしたリストの基本：
<li>の中にリストをネストします。<ul>の直下には置きません- ブラウザーのデフォルトでは、レベルごとに disc → circle → square になります
- CSSカウンターを使うと、階層に応じた独自の番号付けができます
- 使いやすさのため、ネストは2～3レベルまでに抑えます
- 展開可能なネストナビゲーションには、
<details>と<summary>を使います
よくある質問
「入れ子のリストとリストのスタイル」レッスンは無料ですか？
はい。「入れ子のリストとリストのスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「入れ子のリストとリストのスタイル」で何を学びますか？
リストの中にリストを入れ子にし、見た目を調整します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「入れ子のリストとリストのスタイル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 順序なしリスト：ulとli
- 順序付きリスト：ol、start、reversed、type
- 説明リスト：dl、dt、dd
- 入れ子のリストとリストのスタイル