はじめてのHTML5 第3回『HTML5の新要素をIEでも対応させる方法』

HTML5とIE

HTML5で新規に追加されたsectionやarticle要素はIEではサポートされていないため、新規要素にスタイルが適応されない問題があるようです(確認済み)。

IE9からはサポートされるようになりますが、IE9以上が一般的に備わるのは当分先になると思いますので、この問題はHTML5で構築を行う場合に必ずクリアしないといけない問題になります。

IEへの対応

IEへの対応を考えた場合、新規要素をIEに認識させないといけません。でも逆に言えば、認識さえしてもらえれば通常通りに使えるという事です(sectionなどはその後、ブロック要素指定をしなければなりませんが)。

そこで、IE対策用に要素を新しく作成するJavaScriptの『document.createElement』を使用します。

例えば、

document.createElement('section');

とすればIEでも

<section style=" color: #ff0000;">
<h1>IEでもフォントの色を赤色にする</h1>
</section>

どうでしょうか?上記ソースを試してみるとIEでも赤い文字が表示されたと思います。

では、各新規要素に同じ事を実行したいので

document.createElement('section');
document.createElement('article');
document.createElement('time');
・
・
・

と各要素毎に記述すればIEへの対応ができますよね。

また、このソースをより短くまとめるために配列に新規要素を入れて、for分ですべての要素に『document.createElement』を実行したいと思います。

var elements=['abbr', 'article', 'aside,audio', 'bb', 'canvas', 'datagrid', 'datalist', 'details', 'dialog',
 'eventsource', 'figure', 'footer', 'header', 'hgroup', 'mark', 'menu', 'meter', 'nav', 'output', 'progress', 
'section', 'time', 'video'];
for ( var i=0; i<elements.length; i++){
   document.createElement(elements&#91;i&#93;);	
}
&#91;/javascript&#93;
これを<span class="aka">HTMLデータが読み込まれる前に実行します。</span>

最後に、第一回目の<a href="http://www.html5-memo.com/first_html5/html5-001/">はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』</a>でも紹介した<a href="http://code.google.com/p/html5shim/" target="_blank">『html5.js』</a>ライブラリについてですが、おそらくHTML5をIEに対応させるJSで一番有名なものになると思います。

<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js" target="_blank">『html5.js』ソース</a>の解説ができればよかったのですが、今のところ正規表現の勉強はあまりしていないので完全に理解することができなくて残念です。勉強することたくさんです!

条件付きコメントを使い
[javascript font_size="90%"]
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

と記述すれば実装可能です。

第3回はここまでになりますが、これまでの『はじめてのHTML5』3回でHTML5での構築前準備はある程度整ってきた気がします。

ここからはHTML5の構築の考え方や、新規要素の理解をより深めていきたいと考えていますので、どうぞよろしくお願いします!

参考サイト:

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事