HTML5導入前に覚えておきたいこと

2011/12/22

HTML

iPhone・iPad・Androidといったモバイル端末では、HTML5は普通に使われていますが、PCサイトでもInternet Explorer9の登場で無視できない存在になってきました。
今回はPCサイトにおけるHTML5の導入に関して少し書こうと思います。

Keyword：HTML5,DOCTYPE,IE対応,html5.js,IE9.js

HTML5

SafariやFirefoxといったモダンブラウザは以前からHTML5の新要素に対応していましたが、Internet Explorerが対応していなかったため、以前と同じようにXHTMLでサイト制作をすることが多かったのですが、バージョン9の登場でHTML5でサイト制作をするのも珍しくなくなってきました。
ですが、Internet Explorerは一番使用率の高いブラウザですので、前バージョンの7や8等も無視できません。
特にWindows OSのXPを使用している場合、バージョン8までしか入れることができませんので、前バージョンの対策は必要不可欠です。

HTML5の新要素にInternet Explorer8以前も対応させる

Internet Explorer8以前にもHTML5の新要素を対応させることは可能です。
html5.jsといったJavascriptライブラリを読み込ませます。
Javascript API等を含めた全てのHTML5の機能を実装できるわけではありませんが、基本的なHTML5の新要素には対応しています。
HTML5でマークアップしていくには活用したいライブラリの一つです。

htmlのヘッダーに以下を追記します

<head>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

反転表示されている2行目と4行目の記述でIE9未満に適応(IE9は含まない)
ちなみに”lt”→”lte”にするとIE9以下に適応(IE9も含む)
この場合、IE9はHTML5に対応しているので、IE9は含みません。

html5.jsを読み込ませることで、HTML5の以下のような新要素を扱えるようになります。

section･･･汎用的セクションを表す
article･･･独立して配信可能な情報を表す
header･･･セクションのヘッダーを表す
footer･･･セクションのフッターを表す
aside･･･補助的な情報を表す
nav･･･主要なナビゲーションを表す
hgroup･･･h1～h6の見出し要素をまとめる
figure･･･文章中の図を表す

これでInternet Explorer8以前でもHTML5の基本的な新要素を扱うことができます。
他にも新要素はたくさんありますので、各専門サイトを参考にしてみてください。
※HTML5の仕様に関しては、W3CやWHATWGのサイトをご確認ください。
※HTML5の詳細を日本語版で確認したい場合は、羽田野氏が運営されているHTML5.JPがとても参考になります。

CSS3をInternet Explorer5.5から8でも使用できるようにする

次にCSS3をInternet Explorer9以前のバージョン(IE5.5～8)でも扱えるようにします。
Javascriptライブラリで提供されているIE9.jsを読み込みます。

htmlのヘッダーに以下を追記します

<head>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>

反転表示されている2行目と4行目の記述でIE9未満に適応(IE9は含まない)

これで、Internet Explorer5.5から8でもCSS3を扱えるようになります。
ですが、全てを扱えるようになる訳ではありませんのでご注意を。
あくまでもJavascriptライブラリを読み込み、”Internet Explorer5.5から8までのCSS3の互換性を確保する”といった意味合いでとらえたほうがよさそうです。
私は、さまざまな機能を実装できることは間違いありませんので使っています。
※扱えるセレクタやプロパティに関しては、デモサイトが公開されています。

使える機能としては…。

擬似クラスの対応
属性セレクタの対応
透過PNGの対応
position fixedの対応
margin autoの対応(margin: 0 auto;でコンテンツを中央揃え)
max-heightやmin-heightの対応
その他バグ修正など

透過PNG使用時は、PNGのファイル名を”○○○○○-trans.png”としないといけません。
私の場合は、この透過PNG機能をIE9.jsでは使わず、別途透過PNG用のJavascriptファイルを作成し、外部ファイルとして読み込ませることで対応しています。
理由としては、ファイル名を指定しないといけないのと、背景画像のPNGが適応されないことがある等のバグがあるからです。
IE9.jsでPNGのファイル名を変更したり、ファイル名に関係なくPNG画像そのものに適応することも可能ですが、外部サーバーより参照しているファイルですので、IE9.jsを自サイトのサーバーに置き、書き換えることは得策ではないと思っているためです。

html5.jsとIE9.jsは両方必要なの?

html5.jsが”HTML5の新要素に対応させる”ことがメインであるのに対して、IE9.jsは”Internet Explorer5.5から8までのCSS3の互換性を保つ”ことに加えて、”HTML5の新要素に対応させる”ことにも対応しています。
HTML5の新要素のみの対応であればhtml5.jsのみでも構いませんし、両方対応したい場合はIE9.jsのみでも構いません。
ただ私の場合、HTML5の新要素に対して、それぞれのスクリプトで対応･未対応の差が生じる場合もあると思うので、両方を読み込むようにしています(※この2つのスクリプトに関しては、”互いに競合してどちらかが機能しない”といったことはなさそうです)。

新要素はインライン要素として表示しようとするため、ブロック要素を適応する

HTML5の新要素はデフォルト状態ではインライン要素として表示しようとしますので、新要素に関してはブロック要素を適応してあげます。

html5.cssを作成し以下を追記

/* デフォルト状態のインライン要素をブロック要素に指定 */
article, aside, figure, figcaption, details, footer, header, hgroup, nav, section, summary {
        display:block;
}

その他注意事項

html5.jsやIE9.jsのリンク指定は、閉めのbodyタグ直前ではなく、ヘッダーに記述するようにする(反映されない場合の対策)。
html5.cssのリンク指定は、html5.jsより後に記述する(読み込まれない場合の対策)。
jQueryでHTML5の新要素を使用するとCSSのスタイルが適応されない場合がある。
※以下サイトが参考になります
・HTML5の新要素をjQueryでappendとかするとバグる件

HTML5のDOCTYPE宣言とヘッダー

HTML5ではDOCTYPE宣言やヘッダー部分が非常にシンプルになっています。
また、既存のXHTMLのように厳格なマークアップを強制しませんので、互換性も保ちやすくなっているのもHTML5の特徴です。
既存のXHTMLは、各ブラウザベンダー毎の互換性を保つことが難しく、一番使用率の高いInternet Explorerがapplication/xhtml+xmlのMINEタイプに対応しておらず、結局XHTMLで書いたコンテンツをtext/htmlで配信しないといけないため、普及には至らなかったようです。

DOCTYPE宣言とヘッダーのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの概要を記述">
<meta name="keywords" content="キーワードをコンマ区切りで記述">
<meta name="robots" content="all">
<title>サイトのタイトル</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" href="css/html5.css">
</head>

1行目はDOCTYPE(非常にシンプルになっています)。
2行目は言語。
4行目は文字コード。
5～6行目は概要とキーワード。
7行目は検索エンジンの巡回を全て許可。
8行目はサイトのタイトル。
9行目はファビコンのパス。
10～18行目はCSSとJavascriptのパス(HTML5ではCSSの｢type=”text/css”｣やJavascriptの｢type=”text/javascript”｣がデフォルト値で含まれているので省略しても構いません)。

Prev List Next

関連記事(※当記事と関連性が高いと思われる記事)