補足的なコンテンツを表すには?
asideタグの書式
asideタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
asideタグの属性一覧
asideタグの解説
<aside>タグは、文書のメインとなるコンテンツと関連はしているものの、関連性が比較的低い、補足的なコンテンツを表すための要素です。
例えば本文の備考・補足情報、余談、本文中の用語についての解説、あるいはブログのサイドバーや広告といったコンテンツを表すのに使用します。
<aside>~</aside>は、メインのコンテンツとから切り離して表示しても影響のないコンテンツに使用してください。
メインのコンテンツに連なるような内容には<aside>を指定しないようにしてください。
asideタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<header>
<h1>今日の簡単レシピ</h1>
</header>
<p>今日はじゃことほうれん草の和風パスタを作ります。</p>
<p>作り方:
<ol>
<li>フライパンで強火をかける</li>
<li>じゃことほうれん草を手早く炒める</li>
<li>パスタを弱火で7-8分煮込む</li>
<li>ゆでたパスタと具を混ぜ合わせ、オリーブオイルをたらすだけででき上がり</li>
</ol>
</p>
<aside>
<h1>ポイント</h1>
<p>ポイントはほうれん草を炒めすぎないようにすることです。
チーズが好きな人は、最後にチーズをかけるともっとおいしくなります。</p>
</aside>
<footer>
<p><small>無断転載を禁止します。</small></p>
</footer>
</body>
</html>
asideタグのサンプル画面1
asideタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<article>
<h1>初めてのスキー</h1>
<p>先週初めてスキーにチャレンジしました。とても楽しかったです。</p>
<p>今度はスノボにチャレンジしたいと思います。</p>
<aside>
<h1>スキー場積雪情報</h1>
<ul>
<li><a href="/snow1.html">駒ヶ根高原スキー場</a></li>
<li><a href="/snow2.html">北志賀よませ温泉</a></li>
<li><a href="/snow3.html">鹿島槍スポーツヴィレッジ</a></li>
<li><a href="/snow4.html">飯綱高原スキー場</a></li>
<li><a href="/snow5.html">志賀高原 焼額山スキー場</a></li>
<li><a href="/snow6.html">野沢温泉</a></li>
<li><a href="/snow7.html">白馬八方尾根</a></li>
<li><a href="/snow8.html">斑尾高原スキー場</a></li>
<ul>
</aside>
</article>
</body>
</html>
asideタグのサンプル画面2
asideタグの関連項目