ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

IE対策に悩む外人女性

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

企業サイトではまだ以前の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タグの中に次のように記述してください。フォルダ名は自分のサーバー環境で変えてください。

WordPressでの「html5shiv.js」の利用方法

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

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

IE9未満(主にIE6〜8)でのCSS3対策

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

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

css3-mediaqueries.js – Google Project

Respond.js – GitHub

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」なら次のように記述します。

結局どのファイルを利用すればいいのか

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

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

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

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

HTML5でのFacebookのOGP設定

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

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

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

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

IE対策 | HTML5+CSS3でサイトを作ってみる。
レスポンシブWebデザインをIEに対応させる方法
HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】5分で作成!読者をひきつけるアイキャッチやスクショ編集方法【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleに:次記事»
ページ
↑先頭
ホーム