◀ 3.

HTML aside要素 完全ガイド（補足情報 / サイドバー / 引用 / article との違い）

▶
編集
この記事の要点
  • aside 要素は本文と関連はあるが直接の流れには属さない補足情報を表す
  • 典型用途: サイドバー / 注釈 / 関連リンク / プルクオート / 広告枠
  • 配置: article 内に置けば「その記事に関する補足」、body 直下なら「サイト全体の補足」
  • 注意: 単に「右側のサイドバー」を全部 aside にするのは誤用 — 本文との関連度で判断
  • 見出し (h2-h6) を入れて意味づけ、スクリーンリーダーは「補足情報」と読み上げる

aside 要素とは

aside 要素は HTML5 で追加されたセクショニング要素のひとつで、本文と関連はあるが直接の流れには属さない補足情報を表します。雑誌の「サイドバー記事」「囲み記事」「注釈」のようなイメージです。

基本構文

<aside>
  <h2>関連記事</h2>
  <ul>
    <li><a href="/related-1">関連記事1</a></li>
    <li><a href="/related-2">関連記事2</a></li>
  </ul>
</aside>

aside を使う場面

用途説明
サイドバー関連リンク・カテゴリ一覧・最近の投稿など
プルクオート本文中の重要なフレーズを大きく抜粋して表示
注釈用語解説・コラム・豆知識
広告記事に関連する広告枠
著者情報記事下部のプロフィール枠

article 内 vs body 直下

配置場所で意味が変わるのが aside の特徴です。

<!-- article 内: その記事に関する補足 -->
<article>
  <h1>サマーキャンプの記録</h1>
  <p>今年のサマーキャンプは大変盛り上がった...</p>

  <aside>
    <h2>関連記事</h2>
    <ul>
      <li><a href="/winter-camp">ウィンターキャンプの記録</a></li>
    </ul>
  </aside>
</article>

<!-- body 直下: サイト全体の補足 -->
<body>
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>サイドバー</h2>
    <nav>
      <h3>カテゴリ</h3>
      <ul>
        <li><a href="/cat/tech">技術</a></li>
        <li><a href="/cat/life">生活</a></li>
      </ul>
    </nav>
  </aside>
</body>

プルクオートの例

<article>
  <h1>働き方改革の真実</h1>
  <p>残業時間が減ったからといって生産性が上がるわけではない...</p>

  <aside class="pull-quote">
    <blockquote>
      「生産性は時間ではなく集中度で決まる」
    </blockquote>
  </aside>

  <p>例えば私の部署では...</p>
</article>

使ってはいけないパターン

aside は本文に何かしら関連している必要があります。完全に無関係なら aside ではなく単なる別要素として扱うべきです。

誤用正しい選択
本文の途中で改ページ的に挿入する区切りdiv / section
本文の段落そのものp
本文の見出しと中身section / article
無関係な広告意味的には div、aside にする場合は記事に関連したものに限定

section / article との違い

要素意味
article独立して配信可能な記事 (ブログ記事、ニュース)
section一般的なセクション (見出しのある章)
aside本文と関連はあるが流れには属さない補足
navナビゲーション (リンク集)

アクセシビリティ

スクリーンリーダーは aside を「補足情報」「complementary landmark」として読み上げます。これにより視覚障害ユーザーが本文と補足を区別できます。

  • aside には見出し (h2-h6) を入れると意味づけが明確
  • aria-labelledby で見出しと紐付け推奨
  • WAI-ARIA Landmark Roles 上は role="complementary" に相当
<aside aria-labelledby="related-heading">
  <h2 id="related-heading">関連記事</h2>
  <ul>
    <li><a href="/post-1">記事1</a></li>
  </ul>
</aside>

CSS でサイドバー風に整形

/* 右側のサイドバーとして配置 */
.layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2em;
}

aside.sidebar {
    background: #f5f5f5;
    padding: 1em;
    border-radius: 8px;
}

/* プルクオート風 */
aside.pull-quote {
    float: right;
    width: 40%;
    margin: 0 0 1em 1em;
    padding: 1em;
    border-left: 4px solid #667eea;
    font-style: italic;
    font-size: 1.2em;
    color: #555;
}

FAQ

Q: ヘッダーやフッターを aside にしていい？
A: NG。ヘッダーは header、フッターは footer。aside は本文の補足。

Q: 広告枠は aside？
A: 記事内容に関連する広告 (記事連動広告) なら aside、無関係な広告は div class="ad" 等で十分。

Q: 一つの記事に aside は何個まで？
A: 制限なし。関連情報・コラム・参考文献など複数置いてOK。

Q: モバイルでサイドバーを表示しない場合 aside ごと消していい？
A: 視覚的に隠す (display: none) のは OK だが、内容自体が必要なら別途展開可能なメニューに変換するなどして情報損失を避ける。

典型的な HTML5 全体構造の中での aside

<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>記事タイトル</h1>
      <p>本文...</p>

      <!-- 記事内の補足 (記事に関連) -->
      <aside>
        <h2>関連記事</h2>
        <ul>...</ul>
      </aside>
    </article>
  </main>

  <!-- サイト全体のサイドバー -->
  <aside>
    <h2>サイドバー</h2>
    <nav>...</nav>
  </aside>

  <footer>
    <p>&copy; 2026 MySite</p>
  </footer>
</body>

このように本文と関連はあるが流れには属さない部分を aside でマークアップすると、文書構造が明確になり SEO・アクセシビリティの両面でメリットがあります。

関連記事

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. section要素
  2. article要素
  3. aside要素
  4. nav要素
2026-06-11 07:07:02 guest 191

人気ページ

最近更新/作成されたページ