Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

HTML5新要素 asideタグ

概要

asideタグについて説明します。

内容

asideは文書の補足的内容や、サイドバーに表示するような内容に設定します。

サンプル

各言語の特徴をまとめた記事を想定します。
JavaRubyの特徴を列挙します。
(articleで利用したサンプルをちょっとだけ改修しました)

<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>Ruby,Javaの特徴</title>
    <style type="text/css">
    h1,h2 {
      border-style:solid;
      border-width:1px;
      background-color:yellow;
    }
    
    h1 {
      font-size:16px;
    }

    h2 {
      font-size:14px;
      margin-left:20px;
    }
    
    p {
      font-size:12px;
      border-style:solid;
      border-width:1px;
      background-color:gray;
      margin-left:30px;
    }
    
    article {
      border-style:solid;
      border-width:1px;
      border-color:green;
      padding:5px;
    }
    
    section {
      border-style:solid;
      border-width:1px;
      border-color:red;
      padding:5px;
    }
    
    aside {
      border-style:solid;
      border-width:1px;
      border-color:blue;
      padding:5px;
      margin:5px;
    }
    </style>
  </head>
  <body>
    <article>
      <h1>Ruby,Javaの特徴</h2>
      <p><time datetime="2012/03/12">2012/03/12</time></p>
      <section id="ruby">
        <hgroup>
          <h1>Rubyの特徴</h1>
          <h2>Rubyの特徴1</h2>
          <p>特徴1の説明</p>
          <h2>Rubyの特徴2</h2>
          <p>特徴2の説明</p>
          <h2>Rubyの特徴3</h2>
          <p>特徴3の説明</p>
          <h2>Rubyの特徴4</h2>
          <p>特徴4の説明</p>
        </hgroup>
      </section>
      <aside id="ruby_aside">Rubyの作者は日本人のまつもとゆきひろさんです</aside>
      <hr />
      <section id="java">
        <hgroup>
          <h1>Javaの特徴</h1>
          <h2>Javaの特徴1</h2>
          <p>特徴1の説明</p>
          <h2>Javaの特徴2</h2>
          <p>特徴2の説明</p>
          <h2>Javaの特徴3</h2>
          <p>特徴3の説明</p>
          <h2>Javaの特徴4</h2>
          <p>特徴4の説明</p>
        </hgroup>
      </section>
    </article>
  </body>
</html>

完成画面のキャプチャ

青枠がaside、緑枠がarticle、赤枠がsectionです。