ひとまずHTML5の開発環境はあきらめて、このブログのHTML5化を進めようかと思います。
まずは、初めにHTML5の新要素である「header」と「footer」を組み込みます。
ちなみに、以下の確認環境を前提にしています。
| Firefox | 3.6.10 |
|---|---|
| Google Chrome | 6.0 |
| Internet Explorer | 8.0 |
さて、ごく一般的なサイトで見かけるレイアウトのコーディングで以下のようなものがあります。
<div id="header"> </div> <div id="footer"> </div>
これをHTML5では以下のように表現することができます。
<header> </header> <footer> </footer>
ただし、ここで問題が２点あります。
一つは、Firefoxではどうもブロック要素として認識してくれないようです。そこで、cssで明示してあげる必要があります。
header{
display: block;
}
footer{
display: block;
}
もう一つの問題は、IEがそもそも要素として認識してくれないということです。したがってcssも一切適用してくれません。めんどくさいですね。
そこで、Javascriptで、これら要素を認識させる必要があります。
document.createElement('header');
document.createElement('footer');
この問題はHTML5になって新規追加された要素すべてに当てはまることで、IEでHTML5を表示させるためにはこのようにしてスクリプトを記述する必要があります。
HTML5.JPさんのサイトで、これらスクリプトを公開しているので、私のブログ導入に参考にさせていただきました。
HTML5 を IE や Firefox 2 でも使えるようにする方法 – html5doctor – HTML5.JP
こちらのページより、html5.jsをダウンロードして読み込ませます。
要素headerとfooterは、サイトの大枠のレイアウトだけではなく、記事内の指定にも繰り返し使用することができます。それについては後述します。
コメントする