asideと補足コンテンツ
サイドバーや関連性の薄い補足コンテンツにasideを使用します
「asideと補足コンテンツ」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
aside要素
<aside>要素は、周囲のコンテンツと間接的に関連するコンテンツを表します：
- メインコンテンツの意味を損なわずに、そこから切り離せます
- サイドバー、補足ボックス、プルクォート、広告などを思い浮かべてください
article内のaside
article内では、asideを使って物語の本筋には必須ではない関連情報を示します：
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>ページレベルのaside
ページレベルでは、asideをサイドバーに使用します：
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>asideのARIAロール
ページレベルの<aside>は、role="complementary"に対応します：
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->asideによるプルクォート
プルクォート（視覚的な効果を狙って抜き出した引用）は、asideとしてマークアップできます：
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>asideによる広告
サイドバー内の広告ユニットは、asideとしてマークアップできます：
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>asideとsectionの違い
重要な違い：
<aside>— メインコンテンツと間接的に関連する補足情報<section>— メインコンテンツのテーマの一部
用語集に使用するaside
articleで使用されている用語を定義するには、asideを使用します：
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>複数のサイドバーセクション
サイドバーのasideには、複数の独立したsectionを含められます：
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>asideには見出しが必須ではない
sectionとは異なり、asideには見出しが厳密には必要ありません：
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>接線的なスタイル設定にasideを使用しない
asideはセマンティックな要素です。視覚的なサイドバーのレイアウトだけを目的に使用しないでください：
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>確認問題
ページレベルのasideは、どのARIAランドマークロールに対応しますか？
まとめ：aside
asideの要点：
- 周囲のコンテンツと間接的に関連するコンテンツ
- ページレベルのサイドバー → complementaryランドマーク
- article内 → 補足情報（用語の定義、補足ボックスなど）
- 複数のasideにはaria-labelでラベルを付けます
- 純粋なレイアウト用コンテナには使用しません。その場合はdivを使用します
よくある質問
「asideと補足コンテンツ」レッスンは無料ですか？
はい。「asideと補足コンテンツ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「asideと補足コンテンツ」で何を学びますか？
サイドバーや関連性の薄い補足コンテンツにasideを使用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「asideと補足コンテンツ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。