ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】

xhtmlとHTML5で簡単なページレイアウトを作成し、コーディングのタグ違い、新要素（タグ）の説明、アウトラインの説明してきましたが、今回が最終でCSSでレイアウトまでを作成させました。

【前回のまでエントリー】
HTML5は難しくない!?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】

HTML5は難しくない?　HTML5から追加された新要素を理解しよう！【初級編 ：HTML5のマークアップ】

HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！【初級編 ：HTML5のマークアップ】

HTML5では要素やCSSの設定の仕方でいろいろな考えがありますので今回のソースも一つの例と思っていただければとおもいます。

また気になるポイントも書いてみましたので、もっと効率的な書き方やおかしな部分などお気づきの方は気軽にコメントいただけれるとうれしいです。

ソースコードもダウンロードできるようにしておきましたので、興味がある方や初めてHTML5で作ってみようという方の参考になれば幸いです。

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

現段階ではHTML5の仕様は確定していないので、これから無くなる可能性もあるのでセレクタに新要素はあてずにclass、idをつけるのが無難であるとどこかの本かサイトで書いてあったのと、以前のエントリーでHTML5の国内のサイトを色々見ていたらclassやidをつけていたサイトが多かったので今回のサンプルもそのようにしました。

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

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

これだったらいままで通りxhtmlでいいんじゃないかなと思う人も多いとおもいますが、流れはHTML5の方に向いているので勉強していかないとなと思っています。

今回のコーディングでのメモ

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

<hgroup id=”logogroup” >

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

【 CSSコード】

/*今回このような記載はしないで*/

hgroup{
color:#f00;
}
や
hgroup#logogroup{
color:#f00;
}

/*このようにclassやidで指定しております*/

#logogroup{
color:#f00;
}

このようにすれば<div id=”logogroup”>でも< hgroup id=”logogroup”>でもどちらにも適用できますよね。

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

ただブラウザの方はもう<hgroup>を識別してるので非推奨だから見た目が壊れるってことはないとおもうんですけどね。

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

このため、floatをclearさせるためにclass=”clearfix”を使いましたのでHTML5では余分なdivタグを入れることになりました。

皆さんはこのような左右に分ける場合はfloatを使用するか？positionを使用するか？どちらが多いのでしょうか？

僕は単純にロゴが左、右に今回のようなリンクを設定する場合は今まではすべてfloatを使っていました。

【 HTMLコード】

<div class="clearfix">

<hgroup id="logogroup">
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<h2>HTML5とCSS３の勉強のためのブログ</h2>
</hgroup>

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

</div>

【 CSSコード】

#logogroup{
	float:left;
	margin:15px 0 0 20px;
}

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

ただfloatを使うとclearをする必要があって、今回はclearfixを使うためにdivタグを使ってしまいました・・。

次はpositionのサンプルを作ってみます。

ナビゲーションのリストタグを横にするのには今回はdislay:inlineを使用しました

いつも僕はliタグのfloat:leftを使う場合が多いのですがclearさせるのにさらにdivが増えてしまうのでdislay:inlineを使用しましたが皆さんはどちらを使っていますでしょうか？

【2011.9.20 修正】
ナビゲーションのリストタグを横にするのをdislay:inlineを辞めてfloat:leftにしました。

今回のレイアウトでは気がつきにくかったのですがdisplay:inline;を使用すると画像と画像の間にスペースができてしまうのでfloat:leftに変更いたしました。

【 CSSコード】

#subnav li{
	display:inline; →　float:left;
	margin-right:15px;
}

#nav li{
	display:inline; →　float:left;
}

更新情報の部分はどのタグを使うか悩みました・・

xhtmlでは定義リスト（dl,dt,dd）を使って更新情報をマークアップしました。更新情報はリストタグや定義リストを使う場合が多いとおもいますが、今回HTML5ではどのようにしようか悩みまして、いつも勉強するのに参考にさせていただいている『HTML5.jp』さんのサイトを参考にして作成しました。

【 HTMLコード】

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

更新情報はRSSとして配信したいと考えると、新しい要素の<article>を使えるのでサンプルとしても丁度よかったので今回はこのようにさせていただきました。

各お知らせには更新ページのタイトルがありますのでこの部分を<header>要素を使い、<h3>見出しと<time>を更新日の表示として使いました。

これも定義リストの方が簡単ですね。ただHTML5では定義リストの使い方が変わったようなのでこのように既存タグで変わった要素など次回まとめてみようとおもいます。

一部のブラウザで原因不明の余白がでております

HTML5の方でヘッダー部分に< header>タグをつけるとfirefoxで余白ができてしまうのを確認しておりますが、今回ここの調整までは行っておりません。

今度floatではなくpositionを使って試してみようと思いますのでできましたらまた追記いたします。

【2011.9.20 修正】
firefoxでの余白ですが< header>タグを外すとでていなかったのでこちらが原因かとおもいましたが、実際は#navにつけた上のマージンがなぜかロゴの上の余白の原因になっていました。この部分を外すことによってfirefoxでの余白をでなくすることができました。

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

※クリックで拡大してみれます
xhtmlでコーディングしたタグ

【 HTMLコード】※一部の仮テキストを削っています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTMLでコーディングサンプル</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" />
</head>

<body>
<!-- container -->
<div id="container">

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

<div id="logogroup">
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<p>HTML5とCSS３の勉強のためのブログ</p>
</div>

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

</div>
<!-- /header -->

<ul id="nav">
<li><a href="#"><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー01" /></a></li>
<li><a href="#"><img src="images/nav_02.jpg" width="137" height="30" alt="メニュー02" /></a></li>
<li><a href="#"><img src="images/nav_03.jpg" width="137" height="30" alt="メニュー03" /></a></li>
<li><a href="#"><img src="images/nav_04.jpg" width="137" height="30" alt="メニュー04" /></a></li>
<li><a href="#"><img src="images/nav_05.jpg" width="137" height="30" alt="メニュー05" /></a></li>
<li><a href="#"><img src="images/nav_06.jpg" width="137" height="30" alt="メニュー06" /></a></li>
</ul>

<!-- contents -->
<div id="contents">

<!-- event -->
<div id="event" class="clearfix">
<h2>イベント情報</h2>

<div class="topics">
<h3>イベントタイトル01</h3>
<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</div>

<div class="topics">
<h3>イベントタイトル02</h3>
<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</div>

</div>
<!-- /event -->

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

</div>
<!-- /contents -->

<!-- sidebar -->
<div id="sidebar">

<!-- sideinfo -->
<div id="sideinfo">
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /sideinfo -->

<ul id="bnrarea">
<li><a href="#"><img src="images/bnr_01.jpg" width="228" height="57" alt="" /></a></li>
<li><a href="#"><img src="images/bnr_02.jpg" width="228" height="57" alt="" /></a></li>
<li><a href="#"><img src="images/bnr_03.jpg" width="228" height="57" alt="" /></a></li>
</ul>
</div>
<!-- /sidebar -->

<!-- footer -->
<div id="footer">
<address>サイトへのお問い合わせ：<a href="mailto:sample@html5-memo.com">sample@html5-memo.com</a></address>
<p class="copyright">COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</p>
</div>
<!-- /footer -->

</div>
<!-- /container -->

</body>
</html>

xhtml1.0で作成したサンプルを見る

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

※クリックで拡大してみれます
HTML5でコーディングしたタグ

【 HTMLコード】※一部の仮テキストを削っています

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5でコーディングサンプル</title>
<link rel="stylesheet" type="text/css" href="styles/html5reset.css"  />
<link rel="stylesheet" type="text/css" href="styles/layout5.css"  />

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

</head>

<body>

<!-- container -->
<div id="container">

<!-- headerエリア -->
<header>

<div class="clearfix">

<hgroup id="logogroup">
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<h2>HTML5とCSS３の勉強のためのブログ</h2>
</hgroup>

<nav>
<ul id="subnav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">RSSフィード</a></li>
</ul>
</nav>
</div>

<nav>
<ul id="nav">
<li><a href="#"><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー01" /></a></li>
<li><a href="#"><img src="images/nav_02.jpg" width="137" height="30" alt="メニュー02" /></a></li>
<li><a href="#"><img src="images/nav_03.jpg" width="137" height="30" alt="メニュー03" /></a></li>
<li><a href="#"><img src="images/nav_04.jpg" width="137" height="30" alt="メニュー04" /></a></li>
<li><a href="#"><img src="images/nav_05.jpg" width="137" height="30" alt="メニュー05" /></a></li>
<li><a href="#"><img src="images/nav_06.jpg" width="137" height="30" alt="メニュー06" /></a></li>
</ul>
</nav>

</header>
<!-- /headerエリア -->

<!-- maincontents -->
<div id="contents">

<!-- event -->
<section id="event" class="clearfix">

<h2>イベント情報</h2>

<section class="topics">
<h3>イベントタイトル01</h3>
<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</section>

<section class="topics">
<h3>イベントタイトル02</h3>
<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</section>

</section>
<!-- /event -->

<!-- news -->
<section id="news">
<h2>更新情報</h2>

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

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

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

</section>
<!-- /news -->

</div>
<!-- /maincontents -->

<!-- sidebar -->
<div id="sidebar">

<section id="sideinfo">
<h1>サイトからのお知らせ</h1>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<aside>
<ul id="bnrarea">
<li><a href="#"><img src="images/bnr_01.jpg" width="228" height="57" alt="" /></a></li>
<li><a href="#"><img src="images/bnr_02.jpg" width="228" height="57" alt="" /></a></li>
<li><a href="#"><img src="images/bnr_03.jpg" width="228" height="57" alt="" /></a></li>
</ul>
</aside>

</div>
<!-- /sidebar -->

<footer id="footer">
<address>サイトへのお問い合わせ：<a href="mailto:sample@html5-memo.com">sample@html5-memo.com</a></address>
<p class="copyright"><small>COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
</footer>

</div>
<!-- /container -->

</body>
</html>

HTML5で作成したサンプルを見る

今回作成したサンプルをダウンロードする

記事だけですと見にくいので、xhtmlとHTML5でのサンプルを一式ダウンロードできるようにしました。

今回のフォルダ構成は下記のようになっています。

サンプルファイルディレクトリ一覧

HTML5のリセットの関係で全く同じ見た目になるまで作成できていませんがご了承ください。

サンプルデータをダウンロードする

【2011.9.20 修正】
本日の記事の修正分を変更してサンプルをアップしております。

終わりです

まずはこのようにシンプルな構成で作成してみました。

まだでてきていない新要素などもたくさんありますので、勉強して定期的にサンプルを作成したいとおもいますので間違いや気になる点がありましたら是非コメントください。

【初級編：HTML5のマークアップ：全4回】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事