HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

アサイド

aside要素

ページの内容とは直接関係のない補足情報、サイドメニューなどを表したい場合に使用します。メインではないけれど、触れておきたい内容という位置付けです。

サンプルコード

<article>
	<h1>美味しいコーヒーのお店をご紹介</h1>
	<p>今回は渋谷駅周りで見つけた、美味しいコーヒーが飲めるお店を紹介します!</p>
	<p>...記事本文...</p>
	<aside>
		<h2>渋谷駅周辺に喫茶店が集まる理由</h2>
		<p>遡ること1994年。<br>当時流行っていた...</p>
	</aside>
</article>
  • カテゴリー

    フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ

  • コンテンツモデル

    フローコンテンツ

  • 使用ケース

    フローコンテンツが期待される場所(メインコンテンツを子孫要素に持つことはできない)

属性

グローバル属性

グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

サイドメニューのサンプルコード

ブログでよく見かけるサイドメニューを想定したHTMLコードです。

<main>
	<h1>メインコンテンツ</h1>
	<p>記事テキスト</p>
</main>
	
<aside>
	<h2>カテゴリー</h2>
	<nav>
		<ul>
			<li><a href="/shibuya">渋谷周辺のカフェ情報</a></li>
			<li><a href="/ikebukuro">池袋周辺のカフェ情報</a></li>
			<li><a href="/ebisu">恵比寿周辺のカフェ情報</a></li>
			<li><a href="/coffee">コーヒー豆知識</a></li>
		</ul>
	</nav>
</aside>