<aside>: 余談要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

<p>
  イモリは、幼体も成体も短い足と尾を持つ、トカゲのような外観を持つ両生類のグループです。
</p>

<aside>
  <p>サメハダイモリは、致命的な神経毒で身を守ります。</p>
</aside>

<p>
  太平洋岸北西部の温帯雨林には、エンサティナ、ノースウェスタンサラマンダー、サメハダイモリなど、数種類のイモリが生息しています。ほとんどのイモリは夜行性で、昆虫やミミズ、その他の小動物を餌としています。
</p>

aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}

属性

この要素にはグローバル属性のみがあります。

使用上の注意

文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために <aside> 要素を使用しないでください。

例

<aside> の使用

この例は <aside> を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。

html

<article>
  <p>
    ディズニー映画「<cite>リトル・マーメイド</cite>」は、 1989 年に最初に劇場公開されました。
  </p>
  <aside>
    <p>この映画は、公開当初の興行収入は 8,700 万ドルに達しました。</p>
  </aside>
  <p>この映画の詳細情報…</p>
</article>

結果

技術的概要

コンテンツカテゴリー	フローコンテンツ、区分コンテンツ、知覚可能コンテンツ
許可されている内容	フローコンテンツ
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	フローコンテンツを受け入れるすべての要素。 `<aside>` 要素は `<address>` 要素の子孫要素として配置してはならない。
暗黙の ARIA ロール	`complementary`
許可されている ARIA ロール	`feed`, `none`, `note`, `presentation`, `region`, `search`
DOM インターフェイス	`HTMLElement`

仕様書

Specification
HTML # the-aside-element