このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

aside”要素:補足するセクションHTML5で追加

記事May 17th,2015
Feb. 12th,2023
本筋とは別に触れておきたい内容を含むセクションを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

aside”要素はその前後のコンテンツには関係しているが本筋とは別に触れておきたい内容を含むセクションを表す要素です。補足、脚注、欄外の用語説明などに使用することができます。

aside”要素にはその内容が本筋から分離されたときに本筋が成り立たなくなるような内容を含むのは適切ではありません。

補助的なナビゲーション、広告(文書の内容に関連するもの)に使用することもできます。

サンプルコード

<article>
<section>
<h1>バナナの栄養素</h1>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれていて栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。
</p>
</section>
<aside>
<h1>用語</h1>
<section>
<h2>ビタミンB群</h2>
<p>
ビタミンB1、B2、B6、B12、ナイアシン、パントテン酸、葉酸、ビオチンの8種類のビタミンが含まれ、さまざまな物質代謝にかかわっている。
</p>
</section>
<section>
<h2>食物繊維</h2>
<p>
水溶性食物繊維と不溶性食物繊維がある。ともに、整腸効果があるだけでなく、血糖値上昇の抑制や血液中のコレステロール濃度の低下などの効果がある。
</p>
</section>
</aside>
<section>
<h1>バナナの保存方法</h1>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
</section>
</article>

バナナの栄養素

ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれていて栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。

バナナの保存方法

果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。

属性と値

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

仕様書

aside”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<aside>
定義なし

定義あり

定義あり

定義あり

定義あり
DOMインターフェース

aside”要素は“HTMLElement”インターフェイスを使用します。

UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

aside {
display: block;
unicode-bidi: isolate;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
aside {
unicode-bidi: bidi-override;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク