サイトリニューアル(html5編)

サイトリニューアル(html5編)

さてさて、Movable Type 5にしてからは、サイトがMTデフォルトなデザインで放置してましたが、ようやくリニューアルです! サイト全体を右寄せにしたり、ロゴを右上、PAGE TOPを右下に固定したり、今までとちょいと違うことをやってみてます。

まあデザインに関してはさておき、今回はhtml5でコーディングすることをメインテーマにしていました。トップページはdivを1つも使わないという逆div厨風を吹かしています。あやしい所はまだありそうですが、とりあえずやってみることが大事! ざっくりとした構成を以下にまとめてみました。

html5でのサイト構成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<header>
	<hgroup>
		<h1></h1>
		<h2></h2>
	</hgroup>
</header>
<nav>
	<ul>
		<li></li>
		<li></li>
	</ul>
</nav>
<article>
	<section>
		<h1></h1>
		<p></p>
	</section>
</article>
<aside>
	<section>
		<h2></h2>
	</section>
	<section>
		<h2></h2>
	</section>
</aside>
<footer>
	<p><small></small></p>
</footer>
</body>
</html>

html5でのサイト構成図

「article」の使い方にちょっと迷いました。これについてW3C(日本語訳)では以下のように記述。

article 要素は blog エントリや新聞記事など、文書の中で独立した一片の内容を表します。
HTML 5 における HTML 4 からの変更点

独立っていう概念が分かりづらい感じがしましたが、上記のとおりエントリ部分を囲んでみました。

IE用にhtml5.jsを読み込み

Internet Explorerは現在最新版の8でもhtml5には対応していません。これはJavaScriptを1つ読み込ませれば簡単に解決。
HTML5 を IE や Firefox 2 でも使えるようにする方法 – html5doctor – HTML5.JP
上記サイトの中ほどにあるhtml5.jsを使ってhead内に以下を入れてやればおkです。

<!--[if IE]>
	<script type="text/javascript" src="html5.js"></script>
<![endif]-->

cssのリセット

html5は今までなかった要素が増えたので、cssをリセットするのも盛りだくさん。これもHTML5.JPさんを参考に。
HTML5 のリセット・スタイルシート – html5doctor – HTML5.JP

バリデート

文法チェックしたら一応OK出ました。ただWeb制作者おなじみのFirefoxアドオンHtml Validatorは、なぜかhtml5になると&amp;&copy;のような&の付く特殊文字がエラー扱いになって、ちょっと残念なかんじに…。Another HTML-lintも未対応ですね。

html5にしてみて

というほどでもないんですがね。まあ基本的なところで

<div id="header">
</div>

みたいにやっていたところを

<header>
</header>

にしていって、あとは時間を<time>でくくったくらいなんで。
「form」はtype要素が増えたり、「canvas」で何かしら描いたり、「audio」やら「video」やら…とまだまだ試してないことが多すぎるので、たまにアウトプットしていければいいかなと思ってます。
サイトリニューアル(css3編)に続く…