HTML5 の新要素を使うための準備

HTML5 の新要素を使うための準備

HTML5から新しく使える要素が追加されましたが、古いブラウザ(IE8以下)は新要素に対応していない為、思ったように表示ができません。それを解決する為に、リセットCSSとJavascriptを読み込む必要があります。

HTML5のリセットCSS

古いブラウザでは、新要素のブロックレベル要素をインラインとして読み込んでしまう為あらかじめdisplay:block のスタイルを指定しなくてはいけません。

例)
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

こちらのページ「HTML5 Reset Stylesheet | HTML5 Doctor」で公開されているHTML5 のリセットスタイルシートを使わせて頂くと便利です。

HTML5を認識させるJs

古いブラウザでは、新要素を認識出来ない為に、認識させる事ができるJavescript html5.jsを読み込む必要があります。IE8以下に適用するように、公開されているものを直接読み込むか、ダウンロードして読み込みます。

CDN で読み込むには下記のように記入します。

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

ダウンロードして読み込むには下記のように記入します。

ダウンロード先:html5shiv – HTML5 IE enabling script – Google Project Hosting

<!--&#91;if lt IE 9&#93;>
<script src="dist/html5shiv.js"></script>
<!&#91;endif&#93;-->

HTML5の構文チェック

正しく書けているか、下記のページで構文チェックできます。
(X)HTML5 validation results for about:blank

ブックマークレット版もあるようです。便利ですね。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能