【HTML5】asideタグとは？使い方についてまとめ

asideに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)

入れられるタグのカテゴリー・モデル

asideに使える属性

属性とは<aside> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

asideの使い方

<header>ヘッダー</header>

<section id="container">
<main>メインコンテンツ</main>
<aside>サイドバーがアサイド要素になるよ！</aside>
</section>

<footer>
  <small>Copyright 2019 HTML/CSS Glossary</small>
</footer>

header{
  padding:10px 0;
  background:#e1e1e1;
  text-align:center;
}
#container{
  display:flex;
}
main{
  flex:2;
  background:#eee;
  height:150px;
}
aside{
  flex:1;
  background:#d1d1d1;
  height:150px;
}
footer{
  background:#e1e1e1;
  text-align:center;
  padding:15px 0;
}

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

asideの使い方についてまとめ

asideの概要

asideのカテゴリー

コンテンツカテゴリー

コンテンツモデル