最終回　ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう

テクノロジー

コラム

2012.3.21 WED

最終回
ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう

前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。

HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。

解説：（有）ムーニーワークス　林豊／田崎一成

前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。

●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る

こちらをもとにCSSレイアウト用にclassやidを追加してCSSレイアウトの方を行います。

今回、CSSを設定する際に決めたポイントは、新規の要素は記述の際にセレクタにタグだけの指定はせずにclassやidをつけてそれに対してCSSを記述しました。

現段階ではHTML5の仕様は確定していないので、これから無くなる可能性もあるのでセレクタに新要素はあてずにclass、idをつけるのが無難すので今回のサンプルもそのようにしました。

したがって、後ほどダウンロードしたCSSファイルを見ていただけると分かりますが、ほとんど同じ記述でレイアウトが作れています。CSSを設定する場合に直接classやidをセレクタにしているサイトはHTMLをちょっとタグを変えるだけでHTML5のコードになるというのが分かるかと思います。

ただ今回のxhtmlとHTML5の設計を作成してみましたが、見てもらえるとわかりますが、HTML5のタグの方が複雑というかタグの囲いが多くなりました。

これだったら今まで通りxhtmlでいいんじゃないかなと考える人も多いと思いますが、セマンティックWebを意識して、今後検索エンジンが新要素のマークアップを重視していく流れになるかもしれませんので、HTML5でのマークアップもただの新要素を使うだけでなく、その意味合いを理解してマークアップする必要が出てくるのかもしれません。

●新しい要素には直接スタイルをあてないでclassやidをつけました

id="logogroup"を設定

このようにhgroupタグを使う場合には上記のようにid="logogroup"を記述します。xhtmlでは<div id="logogroup>としました。そして、この要素にスタイルを宛てる際には下記のようにします。

このようにすれば<div id="logogroup">でも<hgroup id="logogroup">でもどちらにもスタイルを適用できます。もし仮に<hgroup>タグが非推奨になった場合でも、HTMLタグの方だけを変えればCSSはそのまま適用できるという形で変更箇所を少なくすることが可能です。

●ロゴなどのナビゲーションを左右に分ける部分はfloatを使用しました

HTML5の新要素のheader要素は下のグローバルナビゲーションを含めてheaderとしたかったので、floatをclearさせるためにid="header" class="clearfix"を使いましたので、HTML5ではheader要素の中にdiv要素を入れました。

●更新情報のマークアップの違いを比較します

xhtmlでは定義リストを使用しシンプルなマークアップでしたが、HTML5では新要素の「section」「article」「header」を使用してマークアップしました。

【xhmltでの更新情報のマークアップ】

【HTML5での更新情報のマークアップ】

比較してみるとHTML5の方が複雑なマークアップになっていますが、更新情報という括りをひとつのセクションとしてとらえ「section」要素を使用し、各更新情報を一つの独立したフィードとして考え「article」を使用し、更新内容の見出しを「header」を使用してマークアップしてあります。このようにマークアップすることで明示的にアウトラインを出すことができます。

スタイルの方は同じようなidやclassを使うことによって対応しています。

【xhmltでの更新情報のCSS】

【HTML5での更新情報のCSS】

あとは特別な部分はありませんのでそれぞれの全体の要素の設計を見てみます。

●今回作成したxhtmlでのタグの使い方

▲クリックで拡大します

●今回作成したHTML5でのタグの使い方

▲クリックで拡大します

なお、完成したページはこちらになります。

●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る

パッとソースを比較するとHTML5の方がコードが長くなっていますが、原稿内容に応じて使用する要素の意味を正しくマークアップすることによってセマンティックなWebサイトになると思います。実務レベルでどこまで正しくしなければいけないかなどは、googleやyahooの検索エンジンの動向によって制作の現場では変わっていくと思われます。

今回で「ゼロからはじめるHTML5でのサイト制作」は基本編として最終回になりますが、これからも日々勉強していきたいと思います。引き続きブログの方で勉強した情報などを更新してまいりますので宜しくお願いします。

●HTML5でサイトをつくろう
http://www.html5-memo.com/

【林豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している
HTML5でサイトをつくろう：http://www.html5-memo.com/
Webデザインクリップ：http://webdesignmatome.com/

デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。
HTML5入門講座：http://online.dhw.co.jp/course/html5/