アサイド要素（aside）の仕様と使い方
カテゴリ：HTML5編
aside要素の概要
aside要素はメインコンテンツ以外のコンテンツ（一般的にはサイドバーや広告など）を配置する際に使用します。
つまりメインコンテンツとは直接関係のない、複数ページ共通のコンテンツ用の要素と言い換えてもいいかもしれません。
別の言い方をすれば、ヘッダー（header要素）、フッター（footer要素）、メインコンテンツ（main要素）以外の要素とも言えます。
一般的な構成例
header要素はページの上部、footer要素はページの下部に配置されるのに対し、asideはメインコンテンツの左、右、もしくは左右に配置します。
典型的なHTML5要素の構成例）
<body>
<header>
ページヘッダー（サイトタイトル、メニューなど）
<nav>
サイトメニュー
</nav>
</header>
<main>
記事などのメインコンテンツ
<article>
記事本文
</article>
</main>
<aside>
サイドバーなどのメイン以外のコンテンツ
</aside>
<footer>
ページフッター（メニュー、コピーライトなど）
</footer>
</body>また、スマートフォン用のレイアウトではmain要素の直下に配置されます。（一般的にレスポンシブデザインでは、右サイドバーはメインコンテンツの下に配置するため）
また、右サイドバーはスマートフォンではメインコンテンツの前に存在することになりますが、メインコンテンツの上部にその他のコンテンツが表示されるのは、SEO上も、ユーザビリティ上も好ましくないため、スマートフォン表示では非表示（display: none）にするのが良いでしょう。
もっとも、最近は両サードバーのレイアウトのサイトはあまり見かけなくなりましたが…。
なお、左サイドバーのみのサイトはまだ多く存在ますが、サイドバーが左側だけのレイアウトの場合は、スマートフォン表示では、CSSでメインコンテンツの下に配置するように構成することになるでしょう。
aside要素のポイントはaside要素はその他のコンテンツであり、メインコンテンツよりも重要度は低く、ページの脇に、あるいは下部に配置すべきものであるということです。
aside要素の利点
HTML5の登場よりも前はサイドバーなどの「その他のコンテンツ」を表す要素はありませんでした。
メインコンテンツとその他のコンテンツが明示的にHTML要素として区別できるようになったのは、特にレスポンシブデザインでサイトを作成する際に管理しやすくなったと感じます。
例えば、aside要素自体をまとめて表示、非表示を切り替えられるため、例えばスマートフォン用表示では、aside要素は非表示にしてヘッダーとフッター、メインコンテンツのみの表示にすることも比較的容易に構成できるようになりました。
もちろん従来のようにidやclassでCSSを指定することも可能ですが、特定のコンテンツ専用の要素が存在するということは、デザインを構成する上で、非常にシンプルに（後から見ても分かりやすく）記述でき、可読性の向上に寄与しますね。
HTML5で追加された「文書構造を表す要素」は表示上はdivと変わりませんが、コンテンツの論理構造をHTML要素のみである程度表せるようになったことは、Web開発者にとっては意外に重宝します。
自分だけではなく後から他の人がコードを見て理解したり、修正する際にも大きな助けとなりますので、できるだけ適切にHTML5の文書構造を表す要素を使用することを心がける事をお勧めいたします。
W3Cによるaside要素の説明
aside要素は、aside要素の周囲のコンテンツに接線方向に関連し、そのコンテンツとは別のものと見なすことができるコンテンツで構成されるページのセクションを表します。そのようなセクションは、印刷されたタイポグラフィではサイドバーとして表されることがよくあります。
この要素は、引用文やサイドバーなどの誤植的影響があるもの、広告、nav要素のグループ、およびページのメインコンテンツとは別と見なされるコンテンツに使用できます。
公開日時：2019年06月03日 12:20:10
