基礎

HTML要素

アサイド

aside要素

最終更新日：2023-09-11
公開日：2016-01-19

ページの内容とは直接関係のない補足情報、サイドメニューなどを表したい場合に使用します。メインではないけれど、触れておきたい内容という位置付けです。

HTML サンプルコード

<article>
  <h1>美味しいコーヒーのお店をご紹介</h1>
  <p>今回は渋谷駅周りで見つけた、美味しいコーヒーが飲めるお店を紹介します！</p>
  <p>...記事本文...</p>
  <aside>
    <h2>渋谷駅周辺に喫茶店が集まる理由</h2>
    <p>遡ること1994年。<br>当時流行っていた...</p>
  </aside>
</article>

カテゴリー

フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
コンテンツモデル

フローコンテンツ
使用ケース

フローコンテンツが期待される場所（メインコンテンツを子孫要素に持つことはできない）

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

サイドメニューのサンプルコード

ブログでよく見かけるサイドメニューを想定したHTMLコードです。

HTML コード例

<main>
  <h1>メインコンテンツ</h1>
  <p>記事テキスト</p>
</main>
  
<aside>
  <h2>カテゴリー</h2>
  <nav>
    <ul>
      <li><a href="/shibuya">渋谷周辺のカフェ情報</a></li>
      <li><a href="/ikebukuro">池袋周辺のカフェ情報</a></li>
      <li><a href="/ebisu">恵比寿周辺のカフェ情報</a></li>
      <li><a href="/coffee">コーヒー豆知識</a></li>
    </ul>
  </nav>
</aside>