ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみよう【MdN連載第12回目】

前回までの記事で簡単なレイアウトを作成して、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をつけました

<hgroup id="logogroup">
<h1><img src="images/header_rogo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>

このようにhgroupタグを使う場合には上記のようにid=”logogroup”を記述しました。xhtmlではdiv id=”logogroup”としました。

そしてこの要素にスタイルを宛てる際には下記のようにしました。

#logogroup{
width:740px;
float:left;
}

#subnav{
width:200px;
float:right;
margin-top:15px;
}

このようにすればdiv id=”logogroup”でもhgroup id=”logogroup”でもどちらにもスタイルを適用できます。

もし仮にhgroupタグが非推奨になった場合でもHTMLタグの方だけを変えればCSSはそのまま適用できるという形で変更箇所を少なくすることができます。

ロゴやサイトマップなどのナビゲーションを左右に分ける部分はfloatを使用しました。

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

<div id="header" class="clearfix">

<hgroup id="logogroup">
<h1><img src="images/header_rogo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>


<ul id="subnav" class="clearfix">
<li class="sitemap"><a href="#">サイトマップ</a></li>
<li class="rss"><a href="#">RSSフィード</a></li>
</ul>

</div>

#logogroup{
width:740px;
float:left;
}

#subnav{
width:200px;
float:right;
margin-top:15px;
}

更新情報のマークアップの違い

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

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

<div id="news">
<h2>更新情報</h2>
<dl>
<dt>お知らせタイトル01<span>2012年01月01日</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt>お知らせタイトル02<span>2012年01月01日</span>　</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt>お知らせタイトル03<span>2012年01月01日</span></dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</div>

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

<section id="news">
<h2>更新情報</h2>
<article class="newstopics">
<header class="clearfix">
<h3>お知らせタイトル01</h3>
<time datetime="2011-09-01">2011年09月01日</time>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article class="newstopics">
<header class="clearfix">
<h3>お知らせタイトル02</h3>
<time datetime="2011-09-01">2011年09月01日</time>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article class="newstopics">
<header class="clearfix">
<h3>お知らせタイトル03</h3>
<time datetime="2011-09-01">2011年09月01日</time>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>
</section>

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

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

xhmltでの更新情報のCSS

/*更新情報*/

#news dt{
font-size:1.3em;
font-weight:bold;
background:url(../images/icon_02.gif) no-repeat 0 2px;
padding:0 0 0 18px;
margin:20px 0 10px 0;
}

#news dt span{
font-size:80%;
font-weight:normal;
padding-left:20px;
}


#news dd{
padding-bottom:12px;
border-bottom:1px dashed #ccc;
margin-right:26px;
}

HTML5での更新情報のCSS

/*更新情報*/

#news h3{
font-size:1.3em;
background:url(../images/icon_02.gif) no-repeat 0 2px;
padding-left:18px;
margin:-3px 17px 10px 0;
float:left;
}

.newstopics{
padding-bottom:12px;
border-bottom:1px dashed #ccc;
margin:20px 26px 0 0;
}

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

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

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

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

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

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

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

今回でMdNさんで連載させていただいた「ゼロからはじめるHTML5でのサイト制作」は基本編として最終回になりますが、これからも日々勉強していきたいと思います。

引き続きブログの方で勉強した情報などを更新してまいりますのでよろしくお願いいたします。