chocobit

html5テスト運用中

Search

サイトリニューアル（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内に以下を入れてやればおｋです。

<!--[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編）に続く...

Tag

Message

Message

Trackbacks (0)

TrackBack URL

Page Top