<aside> - 補足・関連情報 | HTML5

aside 要素のポイント！

メインとなるコンテンツと間接的な関連でしかないコンテンツを表します
例えば「りんご」の説明の文書の中で、そのみかんの産地である「青森」に関する余談などはaside要素が適切です
また、そのページの関連ページ一覧や、記事のアクセスランキング、また関連する広告スペース等、欄外やサイドバーに配置するようなコンテンツも対象となるでしょう

`aside`要素の概要

SUMMARY OF ELEMENT

<aside>要素は、メインとなる対象コンテンツに関連した補足的な情報や文書などを表す際に利用することができます。

具体的には、例えば、そのページのメインコンテンツが「リンゴ」について説明しているとしたら、その文書の中で、リンゴの産地である「青森県」に関する余談を書く場合等が挙げられるでしょう。

この場合「青森県の余談」は直接リンゴの説明に掛かってはいないが、関連する補足情報であることを表すことができます。あくまで余談、間接的な補足、間接的に関連する文書を表すものであるため、本文中に挿入するような直接関連する挿入句などに使うべきではありません。

また、ページ全体に間接的に関連するコンテンツとして、サイドバーに設置するような、関連記事へのリンクやアクセスランキング、SNSのリンク、最新記事リストなどを<aside>でマークアップすることもできます。

<article>の中で子要素として<aside>を利用すると、その親要素のarticleに関連する補足情報であることを表すことができます。
これは例えば、その記事に関連する記事へのリンクであったり、その記事を書いた著者や日時などの情報などが対象となるでしょう。

なお、<aside>はセクショニング・コンテンツに分類され、アウトラインに影響を与えます。

`aside`要素の利用例

USAGE EXAMPLE FOR ELEMENT

要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。

`aside`要素の基本的な利用例

ここでは、<aside>の具体的な利用例を見ていきましょう。

概要の例を元に「リンゴ」に関してのメイン記事内に産地である「青森県」の余談を<aside>でマークアップしています。

このように記述していくことで「本文のリンゴの説明とは間接的な関係を持つ文書である」という事が示されます。


<article>
  <h1>リンゴ</h1>
  <p>リンゴに関しての本文...</p>
  <aside>
    <h2>リンゴの名産地青森</h2>
    <p>リンゴの産地国内1位の青森は...</p>
  </aside>

</article>


h1 {
  font-size: 1.2rem;
  border-bottom: solid 2px #555;
  margin-bottom: 1rem;
}

aside {
  background-color: #fff;
  padding: 1rem;
  border: solid 1px #ccc;
}

h2 {
  font-size: 1rem;
  font-weight: bold;
}

p {
  margin: 0;
  line-height: 2rem;
}

サンプル結果表示

`aside`でページのサイドバーを作成

続いては、<aside>はでサイドバーのコンテンツを作成してみます。

ここでは、このページの補足コンテンツとして「アクセスランキング」と「最新記事一覧」そして「関連する広告」を設置し、全体を <div>で括っています。
また<nav>でマークアップしたサイトのグローバルナビを置いてみました。navとasideの用途の違いを確認してみてください。


<div>
  <aside>
    <h2>最新ポスト</h2>
    <ul>
      <li><a href="kijiA.html">記事A</a></li>
      <li><a href="kijiB.html">記事B</a></li>
      <li><a href="kijiC.html">記事C</a></li>
      <li><a href="kijiD.html">記事D</a></li>
      <li><a href="kijiE.html">記事E</a></li>
    </ul>
  </aside>
  
  <aside>
    <h2>アクセスランキング</h2>
    <ol>
      <li><a href="kiji1.html">記事1</a></li>
      <li><a href="kiji2.html">記事2</a></li>
      <li><a href="kiji3.html">記事3</a></li>
      <li><a href="kiji4.html">記事4</a></li>
      <li><a href="kiji5.html">記事5</a></li>
    </ol>
  </aside>
  
  <aside>
    <h2>関連広告</h2>
    <img src="*****.jpg" alt="関連広告" width="250" height="180">
  </aside>

</div>


div {
    width: 280px;
}

aside,
nav {
  background-color: #fff;
  padding: 1rem;
  border: solid 1px #ccc;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1rem;
}

img {
  width: 100%;
  height: auto;
}

サンプル結果表示

`aside`要素の定義

DEFINITIONS OF ELEMENT

コンテンツ・カテゴリ

要素を記述出来る場所

フローコンテンツを記述できる場所。

内包できるコンテンツ

フローコンテンツ

開始/終了タグの省略

省略不可。

ボックスのタイプ

block

付与できる属性

グローバル属性

aside 要素のポイント！

aside要素の基本的な利用例

asideでページのサイドバーを作成

`aside`要素の基本的な利用例

`aside`でページのサイドバーを作成