概要 ▶ HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。いや、本当にさすがとしか言いようがない。
HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。
前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。
いや、本当にさすがとしか言いようがない。
Internet Explorerの複数バージョンの対応は面倒
やはりウェブページの制作で難点のひとつは「Internet Explorerの複数バージョンの対応」なのではないでしょうか？（Internet Explorerは以下IEと書きます）なんだかんだで、まだまだIE 6は存在していますし、変にIE 7は残っているし、IE 8はそこそこ良いけどCSS3などの対応は全然だし…みたいな感じで現在のIE 9と合わせて4バージョンの対応を行わなければいけない場合もあるかと思います。
そこでCSSハックなどがあり、バージョン毎の特別なCSSを割り当てるといったことをするのですが、IE用のCSSハックをおぼえてられない！という方も多いのではないでしょうか。
私はそうです（笑）。
InitializrのHTMLテンプレートではIEバージョン対策済み
「Initializr」から書き出されるテンプレートでは、IEのバージョン毎の対応が簡単になるようになっています。それがこの部分です。一番最初の部分です。
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
コメントでifをつかってIEのバージョン判定を行うのは「バージョンベクタ」と呼ばれています。
Windows Internet Explorer では、バージョン ベクタを使用して [ヘルプ] の [バージョン情報] セクションを設定する以外に、条件付きコメントを処理するときにこの値が使用されます。条件付きコメントは、ページの HTML ソース内のコメントのブロックであり、Windows Internet Explorer によってのみ解釈されます。コメントには、1 つ以上の操作、機能、または値が含まれます。
<!--[if gte IE8]>
たとえば、上記のコードは、Windows Internet Explorer Version 8 以上かどうかをチェックするために必要なコメント コードを示しています。"以上" の比較を使用することで、条件が将来のバージョンの Windows Internet Explorer に対応することが保証され、新しいバージョンがリリースされた場合にコードを更新する必要がなくなります。
バージョン ベクタ
Initializrのテンプレートでは、HTMLタグの最初のタグにこのバージョンベクタを適用して、それぞれのバージョン毎に違うクラス（class）を与えています。
<!--[if lt IE 7]>でIE7未満、つまりIE6とかIE5などではクラスに「no-js lt-ie9 lt-ie8 lt-ie7」を割り当てています。lt-ie9は「less than IE9」でIE9未満、lt-ie8は「less than IE8」でIE8未満、lt-ie7は「less than IE7」でIE7未満としています。
<!--[if gt IE 8]>ではIE8より新しいバージョン、またはIE以外のブラウザーではhtmlタグのクラスに「no-js」のみを割り当てています。
こうした書き方をすることで例えば以下の様な書き方をすることができます。
body { ●● }
.lt-ie9 body { ○○ }
.lt-ie7 body { ▲▲ }
これでモダンブラウザーなどはbodyに「●●」のCSSだけが割り当てられ、.lt-ie9 bodyによってIE8・IE7・IE6・IE5のブラウザーに対して特別なCSS「○○」を割り当てられます。
更に、.lt-ie7 bodyによってIE6・IE5のブラウザーに対して特別なCSS「▲▲」を割り当てられます。
これはすごい！
IEのブラウザーのバージョンの対応が簡単に書ける！
htmlのタグの部分にバージョンベクタを適用しようと考えた方は凄いですね。
ここが最初にタグのクラスを割り当てられるところですから。
htmlタグにつけることでクラスの影響をbodyにも適用できるわけです。
そのままでは使いづらかったので修正して使っています
とはいえ、Initializrのテンプレートをそのまま使おうとしても使いづらかったので修正して使っています。まず「lang="en"」は「lang="ja"」に変更しました。
あと、IE7未満と言っても現実的にはIE6まで対応だと思うので「<!--[if lt IE 7]>」を「<!--[if IE 6]>」に変更しました。
そしてIE6・IE7・IE8の各々のバージョンだけにCSSを割り当てられるようにするため、eq-ie6（equal IE6）・eq-ie7（equal IE7）・eq-ie8（equal IE8）を新しくクラスに付けました。
なのでスターハックとか覚えていなくても大丈夫です。
CSSハックを使わなくても次のように書けば良いのですから。
.eq-ie6 body { ××× }
シンプル！
そして何のバージョン対策かわかりやすい！（←これ結構重要）
というわけで実際に使っているコードは以下の通りです。
<!--[if IE 6]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 eq-ie6" lang="ja"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 eq-ie7" lang="ja"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9 eq-ie8" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
CSSハックで悩んでいる方、CSSハックが嫌な方はぜひ使ってみて下さいね。
それでは。
余談
このコードを実際に使っている場所は会社のオンライン印刷ショップのページです。ご参考まで。冊子・パンフレット・ポスターなどの印刷のお仕事があればぜひご利用下さい。