HTML aside 要素って？

HTML Elements における aside 要素

• サイドバー
• 関連記事
• 広告
• 補足説明
• コラム

aside 要素の利点 は、以下のとおりです。

• 視覚的に独立 させることで、本文との区別が明確になる
• 検索エンジン に対して、本文とは異なる意味を持つコンテンツであることを示せる
• CSS でのスタイル設定が容易

aside 要素の例

<article>
  <h2>メイン記事のタイトル</h2>
  <p>メイン記事の本文</p>

  <aside>
    <h3>関連記事</h3>
    <ul>
      <li><a href="#">関連する記事1</a></li>
      <li><a href="#">関連する記事2</a></li>
    </ul>
  </aside>
</article>

注意点

• 必須要素ではない ため、なくても問題ありません。
• 本文と直接関係のないコンテンツ には使用しない。
• 過剰な使用は避ける。

補足

• グローバル属性 以外で使用することはできません。
• DOCTYPE 宣言が必要です。

応用例

• ブログのサイドバーに関連記事を表示する
• ニュース記事に補足説明を表示する
• 商品ページに広告を表示する

• float や position などの CSS プロパティを使って、レイアウトを調整できます。
• JavaScript を使って、動的にコンテンツを表示したり、非表示にしたりできます。

aside 要素 は、本文から独立したコンテンツを分かりやすく表示するための便利な要素です。適切に使用することで、Web ページの読みやすさや利便性を向上させることができます。

aside 要素のサンプルコード

サイドバー

<header>
  <h1>サイトタイトル</h1>
</header>

<main>
  <article>
    <h2>メイン記事のタイトル</h2>
    <p>メイン記事の本文</p>
  </article>

  <aside>
    <h3>関連記事</h3>
    <ul>
      <li><a href="#">関連する記事1</a></li>
      <li><a href="#">関連する記事2</a></li>
    </ul>

    <h3>カテゴリー</h3>
    <ul>
      <li><a href="#">カテゴリー1</a></li>
      <li><a href="#">カテゴリー2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>Copyright &copy; 2023</p>
</footer>

関連記事

<article>
  <h2>メイン記事のタイトル</h2>
  <p>メイン記事の本文</p>

  <aside>
    <h3>関連記事</h3>
    <ul>
      <li><a href="#">関連する記事1</a></li>
      <li><a href="#">関連する記事2</a></li>
      <li><a href="#">関連する記事3</a></li>
    </ul>
  </aside>
</article>

広告

<article>
  <h2>メイン記事のタイトル</h2>
  <p>メイン記事の本文</p>

  <aside>
    <p>
      <img src="ad.png" alt="広告">
    </p>
  </aside>
</article>

補足説明

<article>
  <h2>メイン記事のタイトル</h2>
  <p>メイン記事の本文</p>

  <aside>
    <p>
      <strong>用語解説</strong>
      <br>
      このページで使用されている用語の解説です。
    </p>

    <ul>
      <li>用語1：説明</li>
      <li>用語2：説明</li>
    </ul>
  </aside>
</article>

コラム

<article>
  <h2>メイン記事のタイトル</h2>
  <p>メイン記事の本文</p>

  <aside>
    <h2>コラム</h2>
    <p>
      ここでは、メイン記事とは別に、関連するコラムを紹介します。
    </p>

    <p>
      <a href="#">コラム1</a>
      <br>
      <a href="#">コラム2</a>
    </p>
  </aside>
</article>

上記以外にも、aside 要素は様々なレイアウトやデザインで利用できます。ぜひ、試してみてください。

aside 要素の代替方法

section 要素は、文書の独立した部分を表す要素です。aside 要素と同様に、本文とは独立したコンテンツを囲むように使用できます。

<section>
  <h2>関連記事</h2>
  <ul>
    <li><a href="#">関連する記事1</a></li>
    <li><a href="#">関連する記事2</a></li>
  </ul>
</section>

<div> 要素

div 要素は、汎用的なコンテナ要素です。aside 要素や section 要素のように意味的に定義されていませんが、CSS でスタイルを指定することで、aside 要素と同様に使用できます。

<div class="aside">
  <h2>関連記事</h2>
  <ul>
    <li><a href="#">関連する記事1</a></li>
    <li><a href="#">関連する記事2</a></li>
  </ul>
</div>

JavaScript を使用して、動的にコンテンツを表示したり、非表示にしたりすることもできます。

function showAside() {
  document.getElementById("aside").style.display = "block";
}

function hideAside() {
  document.getElementById("aside").style.display = "none";
}

CSS の float や position などのプロパティを使用して、レイアウトを調整することもできます。

aside {
  float: right;
  width: 200px;
}

どの方法を使うべきかは、コンテンツの内容や目的によって異なります。

• 意味的に独立したコンテンツである場合は、section 要素を使用するのが適切です。
• 汎用的に使用したい場合は、<div> 要素を使用するのが適切です。
• 動的にコンテンツを表示したり、非表示にしたりしたい場合は、JavaScript を使用するのが適切です。
• レイアウトを調整したい場合は、CSS を使用するのが適切です。

aside 要素以外にも、本文とは独立した補足的なコンテンツを表示する方法はいくつかあります。それぞれの方法の特徴を理解して、目的に合った方法を選びましょう。