2009.01.29

HTML5の実践

イメージ：HTML5の実践

一歩先のWeb標準 ＃21
ゆう（我的春秋）

バックナンバー

遅ればせながら、新年、明けましておめでとうございます！

少し前にJeffrey ZeldmanとEric Meyer両氏の手によってリニューアルされた、"An Event Apart"（Webサイト制作者向けのオンライン雑誌 "A List Apart"のオフラインライブイベント版）や、今年6月15日-17日にかけてロンドンで開催される、Clearleft社主催のユーザー・エクスペリエンスのワークショップ"UX London"のサイトでは、先月少しだけ紹介した"<!DOCTYPE html>"という新しい文書型宣言が採用されています（→連載 #20をご参照下さい）。

すでに個人レベルでは、可能な範囲でHTML5によるマークアップを試みる事例は見られたものの（事例1、事例2、事例3）、ウェブ業界関係のサイト、しかも実質的に採用したのは文書型宣言だけ（HTML5固有の要素や新ルールの適用は、ひとまず見合わせた感じのおとなしめのマークアップになってる模様）とはいえ、より公共性の高いサイトで実践が試みられそうな雰囲気になってきたのはやや驚きました。

年が明けて、新年最初の当連載は、HTML5の語彙を使ったマークアップの実践について取り上げてみようと思います。

HTML5の新要素はどこまで利用可能か？

さて、実際にHTML5の語彙でマークアップを行う際に、真っ先に頭をよぎるのは、section, article, header, footer, aside, nav, figure, dialog, meter, time...といったHTML5で新たに追加された要素が利用できるかどうかでしょう。

※著者の不注意で、邦訳文書へのリンクを旧版2008年1月22日版にしていましたが、同年6月10日版に修正しました。大変失礼いたしました。

これらの新要素の多くは、Firefox, Opera, Safari, Google Chromeなどでは、過去のバージョンも含めて扱うことができます。ただ「扱う」といっても、今のところブラウザ側でデフォルトスタイルが定義されているわけでも、特別な挙動をするように実装されているわけでもありません。それでも、未知の要素に対してDOM操作を行ったり、CSSを適用することは可能なので、サイトの見栄えを制御するくらいなら、一応、実用には堪えます。

※要素の内容が表示されない場合はdisplayプロパティを利用します。なお、Firefoxは2以下のバージョンで若干の問題を抱えているようです。

IEでHTML5の新要素を適用する方法

一方、気になるIE6, IE7では、未知の要素を、なぜか開始タグ・終了タグそれぞれを空要素として扱ってしまいます。（たとえば、fooという要素なら、fooと/fooという空要素1つずつといった具合。具体的には次項のDOMツリーを参照）この問題に対する処方箋として知られているのが、以下のDOMスクリプトです。

document.createElement("foo");

これをHTML5の新要素に対して、ひとつひとつ指定してあげると、IE6, 7でもHTML5の新要素を扱えるようになります。最近、Remy Sharp氏がhtml5.jsというライブラリを公開しましたので、それを以下のように適用するだけでもOKです（IE8 beta2で問題があるようですが、最新の非公式ビルドで解決済みとのことです）。

<!--[if IE]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
HTML5 elements　HTML5 elements
Bruce Lawson氏のHTML5+CSSの表示テストページ（document.createElement("新要素名");）
によって、右側のIE6でも、左側のFirtefox3と同じように表示できている

「なんだ、結局、JavaScript依存なんじゃないか」ーそんな声が聞こえてきそうですが、残念ながら現状はそんな印象です。詳しくは、次ページにて。

1 2

このエントリーをブックマークする

このエントリーにトラックバックする

このエントリーのトラックバックURL
http://withd.jp/mt/mt-tb.cgi/3327

» 「次世代マークアップHTML5って？」 from takumaの「デザインはあれでアートはそれで」
コーディング最近してませんね。 お仕事だと引退してしまいました。 Takumaです。 　 【HTML5】 HTML 5（エイチティーエムエル・ファイブ）... [続きを読む]

トラックバック時刻: 2009年03月25日 03:40

GREEインタビュー　イマジカデジタルスケープ