<aside>タグの解説
<aside>は、親要素に含まれる情報の中で、本筋とは別に触れておきたい余談や補足、または本筋から分離して問題のない内容を含んだセクションを表します。
よくあるウェブページの構成では、ヘッダー、メインコンテンツ、サイドバー、フッターの中で、サイドバーに使われることが考えられます。サイドバーは、メインコンテンツに対して関連するが本筋には影響しない補足情報が含まれていることが多いからです。
ただし、サイドバーを設置する場合に、必ずしも<aside>を使うことが推奨される訳ではありません。あくまで、ドキュメントに書かれている内容に適切な意味を付与していくようなマークアップが求められます。<aside>は、レイアウト目的で使用されるべきではないという点に注意して下さい。
メインコンテンツの中でも、本文ほど重要ではないが、関連する情報を書き残しておきたいという場合に用いることが考えられます。適用範囲は、あくまで余談や補足情報です。その内容を除外した時に、本筋の意味や文脈が失われてしまうような箇所に使うことは避けて下さい。
<aside>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツなので、文章構造のアウトラインに影響を与えます。
- 原則として見出しを含むことを想定していますが、無くても問題ないようです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<aside>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<aside>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。特別な属性や機能はありません。「ここからここまで」と範囲を示したい箇所に配置します。
<aside>
文書の余談や補足情報。
</aside>
<aside>は、ドキュメントのアウトラインに影響を与えるセクショニング・コンテンツです。各要素との相対的な関係、文章に書かれている内容に対して適切な範囲に記述しましょう。以下の内容は、比較的シンプルな構造の文章に余談を足した場合の例です。
<article>
<h1>文章のタイトル</h1>
<section>
<h2>文章の小見出し</h2>
<p>この文章の段落。この文章の段落。</p>
<p>この文章の段落。この文章の段落。</p>
</section>
<section>
<h2>文章の小見出し</h2>
<p>この文章の段落。この文章の段落。</p>
<p>この文章の段落。この文章の段落。</p>
</section>
<aside>
<h3>余談</h3>
<p>本筋から省いても問題ない範囲の関連情報。</p>
</aside>
</article>
<aside>の中には、できるだけ見出しを付けた方が良いと考えられます。文書のアウトラインは見出しによって定義されるため、セクションの役割りを明確にしたい場合は、見出しを含めた内容をマークアップしましょう。
続いて、サイドバーに<aside>を設置した場合の参考例です。サイドバー全体を囲うコンテナの役割りをもたせる場合もあります。ページの中で主要なコンテンツとの関係性を考慮した上で配置して下さい。
<body>
<header class="site-header">
<h1>サイト名</h1>
<h2>サイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header><!--/=== site-header ===-->
<main class="main-contents">
<h1>コンテンツの見出し</h1>
<p>コンテンツの説明。コンテンツの説明。</p>
<article>
<h1>独立した文章のタイトル</h1>
<p>この文章の段落。この文章の段落。</p>
<p>この文章の段落。この文章の段落。</p>
<aside>
<h2>余談</h2>
<p>本筋から省いても問題ない範囲の関連情報。</p>
</aside>
</article>
<section>
<h2>子コンテンツ</h2>
<p>コンテンツの内容</p>
</section>
<section>
<h2>子コンテンツ</h2>
<p>コンテンツの内容</p>
</section>
</main><!--/=== main-contents ===-->
<div class="sidebar">
<address>
<h2>プロフィール</h2>
<p>運営者の連絡先</p>
<p>運営者のSNS</p>
</address>
<aside>
<h3>今日の一言</h3>
<p>余談を表す内容。</p>
</aside>
<ul>
<li><a href="url">メニューリンク</a></li>
<li><a href="url">メニューリンク</a></li>
<li><a href="url">メニューリンク</a></li>
<li><a href="url">メニューリンク</a></li>
<li><a href="url">メニューリンク</a></li>
</ul>
<aside>
<h4>スポンサードリンク</h4>
<div>コンテンツに関連する告知や広告</div>
</aside>
</div><!--/=== sidebar ===-->
<footer class="site-footer">
<small>コピーライト</small>
</footer><!--/=== site-footer ===-->
</body>