HTML5へのリニューアル　覚書

2012/8/1

kunugi design のサイトを何段階かでリニューアルする予定です。
第一弾として、ひとまずさくっと、デザインはそのままにソースをHTML5に変更しました。
実務ではまだHTML5の案件を行ったことがないので、勉強も兼ねて。
検索で色んなブログを拝見して調べてみると、これは間違いと書かれている内容が別のサイトでは正になっていたり、、迷いながらの作業でした。
tableレイアウトからWeb標準へ移行した頃の戸惑いを思い出しました。

header内の記述

1.DOCTYPE宣言

<!DOCTYPE html>

「DOCTYPE」は大文字、「html」は小文字。標準準拠モードでレンダリングされる。

2.ie過去バージョンに対するCSSハック

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

参照：Conditional stylesheets vs CSS hacks? Answer: Neither! by.PAUL IRISH
ieのバージョン毎にCSSを切り替えることが可能。↓こんな感じで。

div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

ちなみに、html要素はlang属性のみ。

3.文字コード

<meta charset="utf-8">

HTML5では、UTF-8を推奨。
JavaScriptもUTF-8以外だと正しく動かない場合があるらしい。

4.meta要素のhttp-equiv属性

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IEの最新のレンダリングを表示させる。
「content=”IE=edge,chrome=1″」とすると、GoogleのChrome frameが入っていればそちらで表示される。

5.html5を古いブラウザでも表示させる「html5shiv」

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

参照：html5shiv
Google Codeのソースを直接読み込んでいるので、jsのダウンロードは不要。

6.type属性

CSS、JavaScriptのtype属性は、html5では不要。

7.リセットCSSの代用「normalize.css」

<link href="css/normalize.css" rel="stylesheet" />

参照：normalize.css
ブラウザごとのCSS表示の差異やバグをなくす。
リセットCSSのように全ての要素を０にするものではないので注意。
最近配布されているフレームワークではこちらがよく使われているそう。

body内の記述

1.構造化のための主要な要素

section: セクション。通常、見出しを含む。sectionの中にsectionを入れ子にできる。
article: 独立した記事。ブログのエントリーなど。articleの中にarticleは入れ子にできない。
aside: あまり重要ではない内容。広告やバナーなど。
nav: ナビゲーション。グローバルナビゲーションなど、主要なものだけに使う。
header: ヘッダー。section内でも使用可。
footer: フッター。section内でも使用可。

2.リニューアル後のアウトライン

上記のようにアウトラインを設定しました。
コンテンツ部分全体を囲むのはsection？article？
sectionの入れ子は問題なさそうだけど、articleの入れ子はだめなの？などなど。。
迷いながら検索すると、異なる意見があったりして、更に迷いました。。
本格的にHTNL5を導入されている制作会社さんなんかでは、自社でアウトラインのレギュレーション設定されているのかな？

HTML5のソースチェック

Validator.nu (X)HTML5 Validator

http://html5.validator.nu/

参考

1.ブログ

はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
by.Web Design RECIPES
http://webdesignrecipes.com/semantic-html5-with-outline/

HTML5で制作された国内企業サイト20から現状の制作状況を知る!!
by.HTML5でサイトを作ろう
http://www.html5-memo.com/html5-site/links/

2.書籍

HTML5基礎

レスポンシブ・ウェブデザイン標準ガイドあらゆるデバイスに対応するウェブデザインの手法

Web Designing (ウェブデザイニング) 2011年 11月号 [雑誌]

最後に

今回のリニューアルはHTML5に書き換えたのみで、かなり単純な作業でしたが、HTML5の基礎の基礎に触れることができ、勉強になりました。
ひとまず次の作業としては、レスポンシブに表示できるように改善したいと思います。