HTML <脇>タグ
例
配置されているコンテンツ以外のコンテンツを表示します。
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
<aside>タグは、配置されるコンテンツ以外のコンテンツを定義します。
脇のコンテンツは、周囲のコンテンツに間接的に関連している必要があります。
ヒント：<aside>コンテンツは、多くの場合、ドキュメントのサイドバーとして配置されます。
注：要素<aside>は、ブラウザーで特別なものとしてレンダリングされません。ただし、CSSを使用して<aside>
要素のスタイルを設定できます（以下の例を参照）。
ブラウザのサポート
表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。
| Element | |||||
|---|---|---|---|---|---|
| <aside> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
グローバル属性
この<aside>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<aside>タグは、HTMLのイベント属性もサポートしています。
その他の例
例
CSSを使用して<aside>要素のスタイルを設定します。
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<h1>The aside element</h1>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
関連ページ
HTML DOMリファレンス：オブジェクト以外
デフォルトのCSS設定
ほとんどのブラウザは<aside>、次のデフォルト値で要素を表示します。
aside {
display: block;
}