IE対応済み！今すぐコピペして使えるHTML5テンプレート

HTML5が流行り始めて結構経ちました。
個人的にもHTML5でサイト制作したいなーと思っていたので
まずはHTML5のテンプレートを用意しました。
最近のサイト制作ではjQueryを使うことが多いようなので
jQueryも対応しています(ハイライト部分)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!--[if lt IE 7]>
        <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
        <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
    <![endif]-->

    <!-- page content -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="js/script.js"></script>
  </body>
</html>

解説

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

Google Chrome Frameという色々な制限によってアップデート出来ない環境にあるIEのためのプラグインです。
ユーザーがGoogle Chrome Frameを入れている場合に対応するためのmetaタグです。
Chrome Frame: Developer Guide - The Chromium Projectsによるとchrome=1では常にChromeとして表示し、
Chrome=IE6と指定するとIE6以下だけChromeとして表示し、それ以外のブラウザではそのまま表示するそうです。
参考：Google Chrome Frame FAQ - The Chromium Projects
Google Chrome Frame plugin - Google Chrome ヘルプ

<meta name="viewport" content="width=device-width">

iOSでページ幅と初期倍率などを設定する場合に指定します。
詳しい指定の仕方はSafari HTML Reference: Supported Meta Tagsを参照。

<!--[if lt IE 9]>
    <script src="js/html5.js"></script>
<![endif]-->

まず、11, 13行目はバージョンベクタと言ってIE判別に使うコードです。
12行目はIEでもHTML5の新要素に対応するためのJavaScriptです。
他にも印刷で崩れないようにしたり、新要素のデフォルトのスタイルを指定したりしているようです。
html5shiv - HTML5 IE enabling script - Google Project Hostingからダウンロードすることができます。
設置場所は<body>より前(例えば<head>内)でなければならず、パフォーマンス上CSSの後がオススメだそうです。
参考：CSSでIEの特定バージョンだけに対応する簡単な方法 | 某氏のたわごと NEXT
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ | コリス
HTML5入門－html5.jsでIE対応－｜mayy

追記(2012/06/28 7:27)

html5.jsはZIPをダウンロードしてdist/html5.jsを使ったほうが良いとされていましたのでコードを変更しました。
理由はコチラが詳しいです→IE対応でよく利用するhtml5shivの使用方法変更について｜Blog｜Skyward Design

<!--[if lt IE 7]>
    <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
    <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
<![endif]-->

つまり何が言いたいかってのはクラス名の通り。むしろ[if IE]でもいいんじゃないですかね。
IEだけCSSがちゃんと動かないとかIEのためのCSSハックとかファックですよね。

教訓。IE9とか結構モダンなブラウザになってるんでしょ？とか思って安請け合いしてはいけない。IE対応入ったら工数に1.6かけること。IE8以下対応入ったら2.2かけぐらいにすること。IE6対応入ったら3.5かけくらいにすること。
— わかめさん (@vvakame) 5月 14, 2012

個人的には切り捨てちゃうんだけど仕事だとそんな事言ってられないので工数いっぱい欲しいですね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

Initializr - Start an HTML5 Boilerplate project in 15 seconds!で生成されるHTML5テンプレートにあった書き方。
23行目でCDN(コンテンツデリバリネットワーク - Wikipedia)から読み込んでいる。
CDNはなんか最適化されていて高速らしいし、ブラウザのキャッシュが効くのでロード時間の短縮が期待できるとか。
24行目で読み込めているかチェック＆読み込めてなかったら自分のを読み込む処理を書いているらしい。
参考：jQueryをロードする際のナイス！と思った書き方

一応これで今すぐ使えるはず。HTML5/CSS3対応のリセットCSSやノーマライズCSSについては今度まとめたい。

追記(2012/06/30):<meta name="format-detection" content="telephone=no">について

@wada811 ご丁寧にご連絡ありがとうございました。<meta name="format-detection" content="telephone=no">　とかいれておくと良いかなーと思ったりはしていますが、そこはお任せいたします。
— Minoru Hayakawaさん (@eriver) 6月 28, 2012

アドバイスを頂いたのですが知らなかったのでググってみました。
iPhoneのSafari用のメタタグで、電話番号リンクに自動変換するのを制御するものだとか。
この電話番号への自動変換が結構アホの子らしくてIPアドレスとか小数が誤認識されるので付けたほうがいいみたいです。
参考：iPhone向けSafari、HTML拡張属性を使いこなす | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報