装飾用のimg要素
本文の左右には画像（風景などのイメージ写真）が配置されています。今回のサンプルではCSSの背景画像で実装されていますが、このような「直接的な意味は持たないものの、雰囲気を演出する画像」は、img要素でマークアップできます。また、ブログのエントリーなどでもこうしたイメージ写真を掲載することがありますが、すべてを背景画像として記述するのは運用上もあまり現実的ではないでしょう。
本文をサポートする役割を持つ画像の場合は、本文と無関係とまでは言えないので、img要素をaside要素で囲うと意味がはっきりします。なお、その際にalt属性値は、何も入れません。
<aside><img src="coffee_files/img-coffee-03.jpg" alt="" height="135" width="135" /></aside>
CSSを適用する
CSSではまず、ブラウザーのデフォルトスタイルをリセットします。HTML5に使われるリセットCSSには、これまでのようにmarginやfont-sizeをリセットするものに加えて、新しい要素のいくつかを display: block; にするものが含まれています。古いIEなど、HTML5に対応していないブラウザーでは、新しい要素がすべて display: inline; で表示されてしまうためです。
article, aside, figure, footer, header, hgroup, nav, section {
display: block;
}
新登場の要素に、必要に応じて display: block; を指定したら、あとはこれまでと同じように、お好みで各プロパティをリセットするとよいでしょう。
参考サイト
- HTML5用のリセットCSS（正式版？） - IT-Walker on hatena
- http://d.hatena.ne.jp/Syunpei/20100108/1262916962
- html5resetcss - A reset stylesheet including HTML5 elements - Google Project Hosting
- http://code.google.com/p/html5resetcss/
div要素の適切な追加
ここまできたら、あとはCSSを記述していくだけです。しかし、CSSでデザインを再現するにはマークアップした要素だけでは足りない、という状況はよくあります。そのような場合は、XHTM L1.0などと変わらず、div要素やspan要素を使用します。「せっかくsection要素やarticle要素が増えたのに、div要素なんて使いたくない！」と思う方もいるかもしれませんが、それはHTML5コーディングを始めた頃にありがちな間違いの1つです。
ここまでの解説を読んできた方の中には、section要素やarticle要素の使いどころが、div要素とよく似ていると感じる方もいるかもしれません。しかし、両者が持つ意味はまったく違うものです。section要素やarticle要素はセクションを明示するための要素ですが、div要素は特別な意味を持っていません。たとえsection要素やarticle要素がdivのように記述されていたとしても、それは偶然であり、div要素の替わりにsection要素を使うという考え方は間違いなのです。
div要素は、適切に使用するならば何の問題もありません。CSSを適用する要素が足りない場合は、div要素を使いましょう。
著者：浜 俊太朗 （はま・しゅんたろう）
ライブドアで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
