Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<aside>

<aside> は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

セクショニング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<aside>
5
12
4
5
18
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/guide">Getting Started Guide</a></li>
    <li><a href="/faq">Frequently Asked Questions</a></li>
  </ul>
</aside>

ライブデモ

サイドバー

メインコンテンツの横にサイドバーを配置するレイアウト。

プレビュー全画面表示

補足情報ボックス

本文中に補足情報を挿入するパターン。注意書きやヒントに使用。

プレビュー全画面表示

警告コールアウト

重要な注意事項を aside で表現。異なる種類のコールアウト。

プレビュー全画面表示

実務での使いどころ

  • <aside> の活用

    <aside> は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク