飛ばさずに見出しレベルを入れ子にする
アウトラインが論理的になるよう、h2からh3へ順番に進めます。
「飛ばさずに見出しレベルを入れ子にする」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Headings Form an Outline
Heading levels build an outline like a nested list. The level numbers tell users which sections sit inside which, just like an essay outline. 🌳
Go Down One at a Time
After an h2, a subsection uses h3, not h4. Increasing levels one step at a time keeps the structure honest and easy to follow.
<h2>Shipping</h2>
<h3>Delivery Times</h3>Skipping Down Breaks It
Jumping from h2 straight to h4 implies a missing h3. The outline now has a hole, and users wonder what they skipped.
Climbing Back Up Is Fine
You can leap back up any amount. After an h4, returning to h2 simply means a new top-level section started. That is allowed.
<h2>Payment</h2>
<h3>Cards</h3>
<h4>Visa</h4>
<h2>Returns</h2>Levels Mean Hierarchy
Each step down means contained within. An h3 is part of the h2 above it, not a sibling. The number is a relationship, not a size.
Do Not Choose by Looks
Never pick h4 just because you want smaller text. Choose the level the structure needs, then style the size with CSS.
Siblings Share a Level
Sections at the same depth share a heading level. Three equal subsections under one topic should all be h3, side by side.
<h2>Menu</h2>
<h3>Starters</h3>
<h3>Mains</h3>
<h3>Desserts</h3>Start Below the h1
Your first section heading is h2, sitting just under the single h1. The outline grows downward from that one root.
Deep Nesting Is Rare
Most pages stop around h3 or h4. If you reach h6 often, your content may need splitting into simpler, shallower sections.
Empty Levels Confuse
Do not add an h3 with no content under it just to reach a level. Every heading should introduce real material below it.
Test by Reading Numbers
Read your headings aloud as just their numbers. A smooth 1, 2, 3, 2, 3 flows; a sudden 2 to 4 reveals a skipped level.
Quick Check
You have an h2. What is the correct level for a subsection inside it?
Recap
You learned to step heading levels down one at a time, never skip a level going down, and choose levels for hierarchy, not size. ✅
よくある質問
「飛ばさずに見出しレベルを入れ子にする」レッスンは無料ですか？
はい。「飛ばさずに見出しレベルを入れ子にする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「飛ばさずに見出しレベルを入れ子にする」で何を学びますか？
アウトラインが論理的になるよう、h2からh3へ順番に進めます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「飛ばさずに見出しレベルを入れ子にする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 1ページにh1は1つ：主要トピックに名前を付ける
- 飛ばさずに見出しレベルを入れ子にする
- 見出しは大きな文字ではなくナビゲーション
- 耳でページのアウトラインを監査する