HTML <aside> タグ

定義と使用法

<aside> タグは、その中の内容以外の内容を定義します。

asideの内容は周囲の内容と間接的に関連するべきです。

ヒント：<aside> 内容は通常、ドキュメント内にサイドバーとして配置されます。

注意：<aside> 要素はブラウザ上で特別なスタイルとして表示されません。ただし、CSSを使用して <aside> 要素のスタイル（以下の例を参照）。

参照もしくは：

HTML DOM リファレンスマニュアル：Aside オブジェクト

例

例 1

他のコンテンツ以外の内容を表示します：

<p>今年の夏、私たち家族は上海海昌海洋公園を訪れました。天気はとても良いもので、海洋公園は夢のように素晴らしかったです！私たち家族は素晴らしい夏を過ごしました！</p>
<aside>
<h4>上海海昌海洋公园</h4>
<p>上海海昌海洋公園は浦東新区に位置するテーマパークで、海洋文化の特色を取り入れ、総面積約29.7ヘクタールで、国家AAAA級観光景区でもあります。</p>
</aside>

実際に試してみる

例 2

使用 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>aside 元素</h1>
<p>今年の夏、私たち家族は上海海昌海洋公園を訪れました。天気はとても良いもので、海洋公園は夢のように素晴らしかったです！私たち家族は素晴らしい夏を過ごしました！</p>
<aside>
<p>上海海昌海洋公園は浦東新区に位置するテーマパークで、海洋文化の特色を取り入れ、総面積約29.7ヘクタールで、国家AAAA級観光景区でもあります。</p>
</aside>
<p>今年の夏、私たち家族は上海海昌海洋公園を訪れました。天気はとても良いもので、海洋公園は夢のように素晴らしかったです！私たち家族は素晴らしい夏を過ごしました！</p>
<p>今年の夏、私たち家族は上海海昌海洋公園を訪れました。天気はとても良いもので、海洋公園は夢のように素晴らしかったです！私たち家族は素晴らしい夏を過ごしました！</p>
</body>
</html>

実際に試してみる

グローバル属性

<aside> タグは以下のイベント属性をサポートしています HTML でのグローバル属性。

イベント属性

<aside> タグは以下のイベント属性をサポートしています HTML でのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <aside> 要素：

aside {
  display: block;
}

ブラウザのサポート

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1