IE7～8に対応したHTML5＋CSS3サイトを制作してみよう～IE7～8のブラウザ対応をするための便利な方法をまとめました～

HTML5でつくられたサイトというと、Flashのような大掛かりなギミックをHTML5で実現したサイトを連想するかもしれませんが、HTML5＋CSS3でサイト制作をすることは、スマートフォン対応だけでなく、ソースの最適化や軽量化、SEO、将来的なサイトのあり方を考えて、有効な手段となります。

また、CSS3を使用すればページ数の多い企業サイトやブログ、ユーザーの管理画面を必要とするようなサイトを制作する上でも、ボタンやコンテンツ部分に汎用的で統一したスタイルを使うことができ非常に便利です。

しかし、HTML5＋CSS3を使ったサイトを制作する上で課題となるのが、IE7～8をはじめとする未対応ブラウザへの対応です。

そこで今回は、HTML5＋CSS3サイトを制作する上で、JSやハックを使用したIE7～8のブラウザ対応をするための便利な方法をまとめました。

IE7～8に対応した代表的なHTML5の国内企業サイト

例として、国内のIE7～8に対応した代表的なHTML5の企業サイトとして、以前「HTML5で制作された国内企業サイト20から現状の制作状況を知る!!」でも紹介した、「ローソン」と「スペースシャワーTV」のサイトがあげられます。

ローソン

http://www.lawson.co.jp/index.html

スペースシャワーTV

http://www.spaceshowertv.com/

どちらもHTML5で実装されながら、IE7～8で機能面での問題がない表示を実現しており、IE対応を前提としてdiv要素でマークアップするなどの考え方が参考になります。

HTML5をIE7～8に対応させる方法のまとめ

はじめてのHTML5 第3回『HTML5の新要素をIEでも対応させる方法』

http://www.html5-memo.com/first-html5/html5-003/
以前紹介したIEでHTML5の新要素を対応させる記事で、JavaScriptの『document.createElement』を使用した方法と、『html5.js』を使用した方法についてまとめております。

HTML5.jsの中身を見てみよう

http://prog.re-d.net/demo/slide/20101218/index.html
上の記事で紹介できなかったHTML5.jsの中身について詳しい説明が書かれています。
実装の際のJSの内容を知っておくために非常に参考になります。

HTML5の新要素にidやclassを設定する理由

http://code-life.net/?p=1895
<header>などのHTML5の新要素に<header id=”header”>などとしておくことで、未対応のブラウザでのCSSの設定を#headerというような指定で可能にできる考え方の参考になります。

div 要素-HTML5タグリファレンス

http://www.html5.jp/tag/elements/div.html
<article>や<section>などが要素としての意味を持つのに対し、<div>はスタイルを重視した要素となることが説明されています。
IE7～8対応を前提とすると、<article>や<section>などHTML5での新要素を<div>要素で置き換える方法も考えられるので、適切な使い分けのために参考になります。

CSS3をIE7～8に対応させる方法のまとめ

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html
IE6～8で角丸、ボックスのシャドウ、画像ボーダー、グラデーション、複数の背景画像を実装する『PIE.htc』の実装方法が紹介されています。

[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3

http://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html
IE6～8で角丸、ボックスのシャドウ、テキストシャドウを実装する『ie-css3.htc』の実装方法が紹介されています。

htcが効かないサーバの場合

http://www.nandani.sakura.ne.jp/web_all/server/756/
.htc拡張子を有効にするサーバーでの設定方法が紹介されています。

CSS3PIE（PIE.htc）が効かないと思ったら

http://css.microrza.com/csstips/iecss_css3pie/
PIE.htcを使う際にCSSにパスを書く場合、CSSから見た相対パスではなく、PIE.htcを効かせたいファイルからのパスになります。そういった注意やバグがわかりやすくまとめられています。

IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット

http://kojika17.com/2011/02/css3-for-ie.php
IEのfilterを利用してOpacity（透過）やテキストシャドウを実装する方法が紹介されています。

IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」

http://weboook.blog22.fc2.com/blog-entry-267.html
IE6～8でCSS3セレクタを利用可能にする『Selectivizr.js』の実装方法が紹介されています。

CSS3のアニメーションに関してはIE7～8で対応する確定的な方法がまだ見つかりませんでしたが、機能面での表示を優先し、あまりCSS3のアニメーションに依存したサイトを制作しないことがIE7～8を考慮したサイト制作方法のひとつになると思われます。

【2012.06.06　16：09追記】
今回はIE6特有のバグを考慮してIE7〜8としましたが、HTML5.jsやPIE.htcはIE6にも対応はしています。また、CSS3はIE6では使わずにjsでIE6専用スタイルシートを読み込ませる方法もあるかもしれません。

HTML5のマークアップをゼロから勉強するまとめ作りました

またHTML5のマークアップの基本としてMdNさんで執筆させていただいた内容をこちらにまとめました。

新要素の使い方からコンテンツ・モデル、アウトラインの考え方などを勉強することができます。

http://webdesignmatome.com/web-tips/mdn-matome