HTML5 と IE
ウェブ・デザインの世界では、そろそろ HTML5 への移行が進みつつあります。まだ主流にはならないけれど、完全に無視するのは もったいない。
HTML5 を学ぶには、下のページが最適です:
さて、HTML5 の世界へ入門するにあたって、最初の難関は IE への対応でしょう。IE8 以下（IE9 未満）は HTML5 の新しい要素を認識できないため、そのままでは CSS で装飾できません。装飾系男子には困った問題だ。（ドヤァ
下で紹介するシンプルな JavaScript を利用することで、オールド・タイプな IE でも HTML5 の新しいタグを CSS でデザインできます。こちらは一般的な解決方法ですが、JavaScript を切られていると効果がない。
そこで今回の目玉として、HTML5 用のタグでマークアップして、なおかつ JS を使わずに IE8 以下でも CSS でスタイリングする方法（※後述）を説明します。
2011-12-17T15:04:37+09:00 追記
中途半端な知識で小生意気なコメントを残したら、あの小飼弾
404 Blog Not Found:備忘録 – 本blogをHTML5にするためにやったこと
ただ、 100 文字以内という制限があるはてなブックマークでは、完全に意図を伝えられません。上の記事と関連しているため、今回の記事を加筆・修正しました。
まずは現状を確認する
まずは問題を確認するため、かんたんなサンプル・ページを作ってみました。Firefox 3.x や 4.x・Google Chrome 10・IE9・Opera 10 などの「モダン・ブラウザ」で確認すると、各要素が色つきの線で囲われて見えます。
ところが、IE8 以下では文字が並ぶだけ……。
JavaScript で解決
世界中を震え上がらせる（不謹慎！）ほどの大問題ですが、あっさりと解決ができます。下で公開されているスクリプトを（可能な限り <head></head> 内に）導入するだけで、じょうよわな人たちの面倒を見られる。
HTML5 enabling script – remy sharp's b:log
では、JavaScript を無効にしてバージョン 9 未満の IE を使っている場合は……？ やはり、この頑固な（あるいはナマケモノの）ユーザの前には、無残なスタイリングのページが表示されます。やれやれ……。
本題: JS なしで解決
もうひとつの解決策はこちらです:
ご覧のとおり、HTML5 の新タグにはスタイル・シートで装飾していません。div や span という慣れ親しんだ HTML タグに CSS を適用しています。
この、なんだか言葉遊び（前述の※の部分）のような方法が、ベストではないけれどベターな解決手段だと思う。
無意味なマークアップでは？
「モダンなブラウザでは不要な HTML タグ」を足しているのだから、言ってしまえばムダなことをしているわけです。「1 つでも多く div 要素を減らし、1 つでも多く class を削る」を日課にしている人からは反感を買いそう。
しかし、次のようなタグのムダ打ちと、上で提案した考え方とでは、根本的に異なります。
<div class="clearfix"></div>（float 解除のためだけに空タグ）<em><span class="red">赤色で強調！</span></em>
サンプルを見せる順番から考えて、「HTML5 の新要素の外側を div や span 要素で覆う」と受け取られたかと思いますが、じつは順番が逆です。
「<div id="content"></div> でマークアップしている部分は、主要なコンテンツである──という意味あいを より強調するために article 要素で内側を囲む」という考え方をして欲しい。
ウェブページの内容に意味を込めるセマンティック・ウェブの思想にも合っているはずです。
IE 対策も Valid なコードで
多くのウェブ・デザイナやコーダから「注目され・愛されている」 IE を、Google Chrome と同等の表示にする。──そんな夢のようなスクリプトやコードが あります！
1 つは Google Chrome Frame という JavaScript のスクリプトで、もう 1 つが X-UA-Compatible タグという。大ざっぱに言えば前者が IE6-8 用・後者が IE9 用です。
具体的なコードは こちら:
<-- <head></head>の中にコレを書く！ -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<![endif]-->
<-- こちらは </body> の直前あたり -->
<!--[if lt IE 7 ]>
<script async="async" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script async="async" type="text/javascript">window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
両方とも IE 用の記述であるため、「条件付コメント」で囲んでいます。こうすると、IE 以外のブラウザはコメントとして無視してくれる。
上のコードのとおり このブログでは、Google Chrome Frame のインストールを勧めるスクリプトを if lt IE 7── IE7 未満・つまりは IE6 のみに表示させています。もっとも対策が面倒なのは IE6 ですからね。
条件付コメント(Conditional Comments)実験ページ
おわりに
実際のところ、「IE9 未満・JS 無効」なユーザは、どれくらいの割合がいるのでしょうかね？
みなさんがご覧になっている このブログのデータを、例として挙げてみます。まず、半数ほどのユーザが IE を利用している。そして、HTML5 に対応している IE9 の利用者は、わずか 3% しかいません。
では、IE9 未満で JavaScript を切っている割合は どれくらいかというと──、分からなかった……。
いまごろ気がつきましたが、自分が利用しているアクセス解析サービスの Google アナリティクスでは、JS を無効にしていると解析できません！（当たり前） しまった、別の解析手段も試しておくべきでした……。
ということで、今回の記事でターゲットにしているユーザ数は不明ですが──、たとえ 1,000 人に 1 人くらいしか該当者がいなくても、気になる人は気になるでしょう。
気にしすぎて、このブログでは CSS を使っていないくらいです（2011/05/15 現在）。しばらく前から CSS も JavaScript も利用するようになりました。今回のテクニックも使っています！
リニューアルの際には HTML5 化を考えているため、今回のアイデアを ひらめいたのは幸先が良い。とっとこハム──じゃなくて、とっとと公開できるようにしよう……。
追記: 余談
ウェブ業界では、イーカゲンなコードが当たり前のように使われています。たとえば、HTML の正当性を確認する Validator のチェックで引っかかっても、知らん顔をして平気でいられる。
ほかの言語では考えられないでしょう。Perl のプログラマで use strict; を使わないプロがいますか？
アマチュアの自分でも余裕でクリアできる条件くらい満たしてから、見栄えの良さを競えば良いと思います。