スキップナビゲーションリンク

HTML5 マークアップ 2010年11月版

動作対象環境

仕様

動作サンプル

サンプルのみを別窓で表示

対策前サンプルを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

2010年11月現在、市場におけるHTML5に対する関心の高さをすでに実感することができる一方、視覚ブラウザの対応は様々です。
W3Cが予定しているHTML5の正式勧告は2012年なので、現時点でブラウザの対応に差があるのは仕方ありません。
コンテンツ制作側には状況に応じて柔軟な対応が要求されます。

このサンプルでは、現在決定されているHTML5仕様通り素直にマークアップしてありますが、そのままではwebkit系以外で意図したレイアウトを実現できません。

【対策前表示例】
従来のマークアップのままでは、IE、FireFox、Operaで表示した場合にレイアウトが崩れます。
Safari 3~、Chromeでは崩れが再現できません。

対策前サンプルを別窓で表示

このIE、FireFox、Operaのために対策が必要になります。

まず、IE8以下はそもそもHTML5の新要素を解釈できませんので、JavaScriptのcreateElementメソッドで要素を追加します。

IEに要素を追加するJavaScript

次に、IE、FireFox、OperaはHTML5の新要素のdisplayプロパティが正しく定義できていないので、補完しておきます。

header,footer,nav,article,section,aside,time,figure{display:block;}
canvas{display:inline-block;}

以上でwebkitとそれ以外のブラウザの出力差が改善されます。

対策後のサンプルを別窓で表示

ただし、canvas要素のグラフィック機能についてはこの方法だけではIE8以下には実装できません。canvasについては別の機会に紹介します。

関連情報