<aside> の使い方と解説

POINT !

<aside> 要素のポイント！

<aside> は「メインコンテンツと関連性はあるが、なくても主コンテンツの理解に支障がない補足情報」に使う。サイドバー、補足説明ボックス、関連記事リスト、広告枠、用語解説などが典型的な用途。
ページ全体のサイドバー（グローバルな補足情報）にも、記事内の補足説明ブロック（ローカルな補足情報）にも使える。どちらも <aside> として正しいが、ページレベルの <aside> は ARIA ロール complementary を持ち、ランドマーク対象になる。
「関連性がある」ことが前提。単なる広告スペースや、メインコンテンツと無関係なプロモーションに <aside> を使うのは意味的に適切でない。コンテンツとの関連性が薄い場合は <div> を使うほうが誠実なマークアップといえる。
<aside> は <article> の内部に配置することもできる。この場合、<aside> は記事全体ではなく「その記事に関連した補足情報」を表す、よりローカルなスコープになる。

概要

<aside> 要素は HTML5 で導入されたセマンティック要素で、ページのメインコンテンツと関連はあるものの、独立して切り離すことができる「補足的・付随的なコンテンツ」を表します。新聞や書籍でいえば「コラム」「囲み記事」「脚注」に相当するような情報が典型的な対象です。

Webページでは、記事サイドバー・関連記事リスト・プルクオート（記事内の強調引用）・用語解説ボックス・著者プロフィールなどが代表的なユースケースです。ただし <aside> に含めるコンテンツは「主コンテンツに関連している」ことが条件であり、まったく無関係な広告や装飾的な要素には使うべきではありません。

<aside> はセクショニングコンテンツであるため、ページのアウトライン構造に影響します。ページ全体のサイドバーとして使う場合、<aside> は ARIA ロール complementary（補完的）を持ち、スクリーンリーダーのランドマークナビゲーションで「補足情報」として認識されます。複数配置する場合は aria-label で識別名を付与することが推奨されます。

具体的な役割

ブログ記事の横に置く関連記事リスト・著者情報・SNSシェアボタン、記事本文中の用語解説ボックスや注釈、ECサイトの商品ページ横の「他のお客様はこちらも購入」エリア、ドキュメントサイトのサイドナビゲーション（補足的）などに使う。

ネスト（入れ子）のルール

📦 <aside> はフローコンテンツを内包できます。<section>・<article>・<nav>・<h2>〜<h6>・<p>・<ul>・<figure> などを自由に含められます。記事サイドバーとしてよく使われる構成は「<aside> > <section>（関連記事）、<section>（著者情報）、<section>（タグ一覧）」のようにセクションで分割するパターンです。<aside> の中に <aside> をネストすることも仕様上は許可されています。

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)

HTML5 以前は <div class="sidebar"> や <div class="related"> でサイドバーや補足情報エリアを表現していた。スクリーンリーダーは主コンテンツと補足情報を区別できず、補足情報をスキップする手段がなかった。補足情報が大量にある場合、キーボードユーザーは全コンテンツを順に移動するしかなかった。

MODERN (今)

<aside> と complementary ランドマークにより、スクリーンリーダーユーザーが補足情報をスキップしたり、目的の補足情報に直接ジャンプしたりできるようになった。DOM 順序の設計（メインコンテンツを先に、<aside> を後に）と組み合わせることで、スクリーンリーダーとビジュアルレイアウト双方の UX を最適化できる。

主要な属性

属性名	説明
`HTMLカテゴリ`	フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
`親要素の制限`	フローコンテンツを受け入れる任意の要素
`ARIAロール`	complementary（ページルートレベルの場合）/ generic（セクション内の場合）
`aria-label 推奨`	複数配置する場合は aria-label で識別名を付与
`関連性`	メインコンテンツと関連性があることが使用の前提条件
`グローバル属性`	すべてのグローバル属性が使用可能
`HTML5 導入`	HTML5（2014年 W3C 勧告）で追加

利用例

記事ページのサイドバー

ブログ記事に関連する補足情報（関連記事・著者情報）を <aside> でまとめたサイドバー。aria-label で役割を明示。

CSS Style

aside { font-family: sans-serif; width: 280px; display: flex; flex-direction: column; gap: 16px; } aside section { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; } aside h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; margin-bottom: 14px; font-weight: 700; } aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } aside ul a { color: #1a56db; font-size: 14px; text-decoration: none; display: flex; align-items: center; gap: 6px; } aside ul a::before { content: '→'; font-size: 12px; } aside ul a:hover { text-decoration: underline; } aside p { font-size: 14px; color: #475569; line-height: 1.6; margin-bottom: 6px; }

HTML Structure

<aside aria-label="サイドバー">
  <section>
    <h2>関連記事</h2>
    <ul>
      <li><a href="/html/section"><section> 要素の使い方</a></li>
      <li><a href="/html/article"><article> 要素の使い方</a></li>
      <li><a href="/html/main"><main> 要素の使い方</a></li>
    </ul>
  </section>

  <section>
    <h2>著者情報</h2>
    <p><strong>きゃすぱ</strong></p>
    <p>フロントエンドエンジニア。HTML/CSS/JS を中心に Web 制作の知識を発信中。</p>
  </section>
</aside>

記事内の補足説明ボックス

記事本文中に挿入する用語解説や補足情報ボックス。<article> 内の <aside> はその記事に関連したローカルな補足情報を表す。

CSS Style

article { font-family: sans-serif; max-width: 580px; padding: 24px; } article h1 { font-size: 24px; margin-bottom: 12px; color: #1a1a2e; } article p { color: #334155; line-height: 1.8; margin-bottom: 16px; } .note-box { background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%); border: 1px solid #bae6fd; border-left: 4px solid #1a56db; border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; } .note-box h3 { font-size: 15px; color: #1e40af; margin-bottom: 8px; } .note-box p { color: #1e3a5f; font-size: 14px; line-height: 1.7; margin: 0; }

HTML Structure

<article>
  <h1>CSS Grid の基本</h1>
  <p>CSS Grid を使うと、二次元のレイアウトを簡単に実現できます。</p>

  <aside class="note-box">
    <h3>💡 補足：Flexbox との違い</h3>
    <p>
      Flexbox は一次元（行または列）のレイアウト、
      Grid は二次元（行と列の両方）のレイアウトに特化しています。
      用途に応じて使い分けるのがベストプラクティスです。
    </p>
  </aside>

  <p>Grid コンテナを定義するには…</p>
</article>

よくある誤用・注意点

メインコンテンツと無関係なコンテンツ（完全に別のテーマの広告、装飾）に <aside> を使うのは誤り。<aside> はあくまで「関連性のある補足情報」であることが前提。

CSS

HTML (Incorrect)

<!-- ❌ 悪い例：メインコンテンツとまったく無関係なプロモーション -->
<article>
  <h1>CSS Gridの基本</h1>
  <p>Grid の解説...</p>
  <aside><!-- Gridと無関係な宣伝 -->
    <p>🎉 今だけ！英会話スクール入会金50%OFF！</p>
  </aside>
</article>

<!-- ✅ 良い例：記事内容に関連した補足情報 -->
<article>
  <h1>CSS Gridの基本</h1>
  <p>Grid の解説...</p>
  <aside>
    <h3>関連リソース</h3>
    <p>MDN Web Docs の CSS Grid ガイドも参考にしてください。</p>
  </aside>
</article>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<aside> 要素