【Web制作】HTML5タグとCSS3のIE6-8対策方法！FacebookのOGP対応も

ブログやサイトを作成する時に今も悩ましいのがIE(Internet Explorer)など旧タイプのブラウザ対策。特にIE8からはそれなりのアクセスがあるため放置できません。今回はHTML5とCSS3のIE対策について考えてみました。

ゆめぴょんです。こんちはっ(^^)/

企業サイトではまだ以前のHTMLバージョンで作成されたものが多いです。私が開発する立場であってもきっと面倒なHTML5ではなくXHTMLなどの旧バージョンで作ると思います。その方がだんぜん楽ですね。

ただ今回は自分の個人ブログを作ろうと思ってるので、思い切ってHTML5で作るつもりです。以前作ったサイトもHTML5なのですが、その時のIE対策とは変わってきてます。以下では私が採用しようと思う方法を共有します。

IE9未満(主にIE6〜8)でのHTML5のタグ対策

結論から言うと、HTML5のタグを古いInternet Explorerでも動くようにするスクリプト(JavaScript)ファイルを利用する方法が一番楽です。

少し前までは「html5.js」を利用していました。最近はGoogleが配布している「html5shiv.js」を使うのが主流のようです。さすがGoogle、圧縮したJavaScriptファイルはわずか2KB（キロバイト）の超軽量です。

「html5shiv.js」ダウンロード：html5shiv – Google Project

上記からダウンロードして自分のサーバーに入れて使ってください。現在は直リンクは推奨されてないようです。headタグの中に次のように記述してください。フォルダ名は自分のサーバー環境で変えてください。

[html]
<!–[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]–>
[/html]

WordPressの人はまず、「html5shiv.js」ファイルをFTPなどでテーマフォルダ「wp-content/themes/●●/js/」に入れる必要があります。●●はテーマ名です。今の初期設定は「twentytwelve」です。

そして管理画面から「外観」→「テーマ編集」から「header.php」ファイルを見つけて、<title>タグの直後くらいに下のコードをコピペしてください。●●は利用してるテーマ名です。

[html]
<!–[if lt IE 9]>
<script src="wp-content/themes/●●/js/html5shiv.js"></script>
<![endif]–>
[/html]

CSS3に対応させるのも専用のスクリプトやCSSファイルを利用します。ただしこちらはHTML5対応の時よりも選択肢が多いです。CSS3のどの機能を重視したいのかを考えて選ぶ必要がありそうです。

例えばレスポンシブサイトを作りたい場合は、次のどちらかを読みこめば良いでしょう。違いを知りたい方はこのページ下の参考サイトを見てくださいね。個人的にはIEへのレスポンシブ対応は不要だと思ってるので私は使いません。

CSS3を使って角丸やグラデーションなど主に装飾系を利用したい人には「CSS3 PIE」がおすすめです。
⇒CSS3 PIE: CSS3 decorations for IE

IEでは認識できないCSS3タグを補完できる「ie9.js」ってのもあります。margin、position、透過PNGなどに対応してるみたいです。ie7、ie8もあるけど、ie9ならie5.5から8まで対応してます。
⇒ie9.js – Google Project

それぞれの利用方法はJavaScriptの時と同様です。例えば「ie9.js」なら次のように記述します。

[html]
<!–[if lt IE 9]>
<script src="js/IE9.js"></script>
<![endif]–>
[/html]

いろいろ紹介しましたが、実はIEは今のブラウザほど優秀ではないため、スクリプトの実行速度も表示速度もかなり遅いです。だから上で挙げたファイルのうち、多くても2つくらいが限界だと思います。厳選してください。

ちなみに有名ブログやサイトをいろいろチェックしてみたのですが、個人ブログはHTML5で組まれたものが多いです。ただ、IE対応してそうなのは半数くらい。あとはIE9未満は置き去りな感じです。

残りも「html5.js」のみの適用が多いです。あと個別CSSで少しだけ対応してるサイトもあります。WordPressの標準テーマ「twentytwelve」でも「html5.js」を利用して、CSS3については個別CSSで対応してます。

私もその作戦でいくつもりです。

最後におまけとして、FacebookなどのOGPのメタタグのHTML5での書き方です。以前はhtmlタグに次のように書いていました。

[html]
<html xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
[/html]

HTML5からは次のように書くみたいです。headタグです。ブログトップページでは「article」を「blog」に変えた方が良いみたいです。

[html]
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
[/html]

以上、IE対策でいろいろ悩んでみました。もし何か参考になりましたら、SNSなどでシェアお願いします。Facebookページでは全てのメッセージに答えます。もちろん知ってる範囲でですが(^^ゞ

以下参考にしたサイトです。ありがとうございました。

ゆめぴょんでした。ちゃおっ！