HTML5 Boilerplateを使ってベーステンプレートを作る

HTML5 Boilerplateとは、フロントエンドテンプレートです。多くの製作者の知恵を元に作られました。これを利用すれば、ウェブサイト・ウェブアプリの製作の製作・開発が効率的に進みます。

→HTML5 Boilerplate

HTML5 Boilerplateの特徴

Google、Microsoftなど多くの企業用サイトに利用されています。HTML5 Boilerplateは、以下のような特徴をもっています。

• ・IEのバージョン別クラス
• ・Chrome Frame対応
• ・IE6以下向けメッセージ
• ・Normailze.css使用
• ・HTML5・CSS3のブラウザ判定対応にModernizrを使用
• ・JQueryを使用
• ・JQueryやJavaScriptのプラグインは1つのファイルにまとめる
• ・フォントサイズの指定

解説

IEのバージョン別クラス

IEの条件付コメントを利用し、htmlタグにIE用のクラスを設置しています。

Chrome Frame対応

Chrome FrameレンダリングエンジンをIEで使用するには？そのためには「Google Chrome Frame」というプラグインが必要です。「HTML5 Boilerplate」にはこのプラグインへ対応するためのコードが設置されています。

IE6以下向けメッセージ

IEの条件付コメントを利用し、以下のようなコメントを表示します。「新しいブラウザにアップグレードするか、Chrome Frameをインストールしてお試し下さい。」

Normailze.css使用

CSSは、どんなに正確に記述してもブラウザ同士の表示の差が出てしまいます。「Normailze.css」は、できるだけこの差を統一するために使うスタイル集です。

→Modernizr

また、ブラウザのデフォルトを活かしてCSSが記述されています。そのため、二重上書きが少なくなります。リセットするスタイルが、Typography、Lists、Fromsといったようにモジュール化されています。プロジェクトに合わせて、一部を簡単に使うことができます。

例）HTML5 Boilerplate 4.0.1ではNormailze.css v1.0.1を使用しています。

HTML5・CSS3のブラウザ判定対応にModernizrを使用

Modernizrとは、JavaScriptライブラリです。
ブラウザのHTML5・CSS3対応状況を判定し、htmlタグにクラスを設置してくれます。このクラスを使用し、特定の要素ごとに対応することができます。

JQueryを使用

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

JQueryをGoogleのCNDから読み込みます。CNDに接続不可能な場合、ローカルファイルを読み込みます。
※URLが//なのは、http//とhttps//の両方のプロトコルに対応するためです。

JQueryやJavaScriptのプラグインは1つのファイルにまとめる

JQueryなどのプラグインは可能な限りplugins.jsに設置します。
すると、読み込むJavaScriptファイルの数を減らすことができます。

フォントサイズの指定

body { 
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
}

body { 
	font-size: 1em;
	line-height: 1.4;
}

ベースとなるフォントサイズをあらかじめ指定します。main.cssのbodyタグにem単位を指定してIE7以下で起こるバグを修正します。

→emはレスポンシブで使うべき単位

em単位は、親要素のフォントサイズがベースとなります。多くのブラウザでは、16pxがベースのサイズです。