サイト内検索

aside を見直す

この記事は、html5doctor に掲載されている記事「Aside Revisited」を日本語訳したものです。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

aside を見直す

これは、以前の article の記事のアップデート版だ。仕様が変更され、aside にあまり重要でないコンテンツを入れても良いことになったのだ。そのコンテキストは、それが article の中にあるかどうかに依存するという点が変わったのだ。

HTML5 仕様はまだ完了していないので、良い点を取り入れたり、良くない点を取り除いたりして、変更されていくはずだ。aside、これは分かりづらい要素だが、ウェブ開発コミュニティからのフィードバックに基づいて見直され、ちょっとした変更が加えられた。この記事では、その変更点を見ていこう。

先生!先生!これは以前に読んだ気がします!

ここ HTML5Doctor では、確かに、すでに “aside 要素を理解しよう“ で aside について議論した。もし、あなたが私と直に会っていたとしたら、その定義についての私の叫びに打ちのめされたと感じただろう。その定義では、aside はその前後のコンテンツに間接的に関連するコンテンツに使うべき、と言っていた。例えば、内容に関連したリンクや解説などだ。

この要素は、あまり重要でないコンテンツを入れるのには、ふさわしくないと考えられていた。あまり重要でないコンテンツとは、記事に特化したものというよりかは、サイトに関連したコンテンツで、“サイドバー” としてよく知られているものが典型だろう。ここやそれ以外のコメントを見れば、この定義がコミュニティに受け入れられず、“あまり重要でないコンテンツには何を使えば良いのか?” という議論がわき起こったと分かるだろう。

再定義された aside

aside は、あまり重要でないコンテンツに使っても良いことになった。たとえば、ブログロール、補助的なナビゲーション、そして、ページに関連するのであれば広告にも使って良いのだ。とりわけ article 要素の中で使うときは、例えば解説など、その記事に関連したコンテンツとするべきだ。aside を使うときは、これらのコンテキストの変更点に注意してほしい。

この例で示しているのが aside のベストな使い方となるだろう。

<body>
  <header>
    <h1>私のブログ</h1>
  </header>
  <article>
    <h1>私のブログの投稿</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!-- この aside は article の中なので、パーサーは、
      この aside のコンテンツは、その article そのものに直接的に関係したものだと
      解釈するはずだ。 -->
      <h1>解説</h1>
      <dd>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dd>
    </aside>
  </article>
  <aside>
    <!-- この aside は記事の外に出してある。そのため、そのコンテンツは
    ページには関係するが、上の articleに深く関係している訳ではない。 -->
    <h2>ブログロール</h2>
    <ul>
      <li><a href="#">私の友達</a></li>
      <li><a href="#">私の他の友達</a></li>
      <li><a href="#">私の親友</a></li>
    </ul>
  </aside>
</body>

まとめ

これは、あまり重要でないコンテンツに aside を使うことができるようになったということを意味する。aside 、そして、あまり重要でないコンテンツとは、必ずしも “サイドバー” を意味しているわけではないということに注意してほしい。コンテンツのスタイルのために、この要素を使ってはいけないのだ。もし、メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切だ。