レスポンシブサイトが多くなってきた昨今。どうしても問題が出てくるのがIEへの対応です。
レスポンシブサイトを作る場合、どうしても必要な機能があります。
個人的に一番必要な機能は・・・max-widthとmin-widthが使えること。
この時点でIE6は非対応になってしまいます。
先日IE6まで対応した案件が有りましたのでその際のノウハウをメモしたいと思います。
HTMLの文法はHTML5とします。CSS3はメディアクエリ以外利用しません。角丸とかは無視させる仕様です。
理由は最後に書きます。
通常のレスポンシブサイトの作り方はこちらを参考にして下さい。
HTML5を利用しCSSのみでレスポンシブサイト作る
目次
まずはレスポンシブサイトで使う技術を知る
レスポンシブで必要な知識と技術をまとめてみました。
サイトの仕様で内容は変わりますが「これだけ知っていれば…」というものを掲載します。
- メディアクエリで画面サイズの条件分岐。[IE6,7,8非対応]
- CSS2のmax-width,min-widthプロパティを使う。[IE6非対応]
- CSS3のbackground-sizeプロパティを使う。[IE6,7,8非対応]
- PNGの透過(24bit)が使えるようにする。[IE6非対応]
- IE6,7,8と各CSSの調整が必要。
- jQueryのバージョンは1.9シリーズまで。
- スマホ、タブレット用にビューポートを設定。
- 可変部分の要素の幅は%で指定する。画像も。
CSS3のbackground-sizeとPNG透過は絶対ではありません。サイトデザイン次第です。
今回は除外します。
JS3つを読ませIE用の下準備する
「html5.js」「respond.js」「minmax.js」が必須になります。
そのうち「minmax.js」だけはIE6用です。下記で各JSの説明。
注意！：サーバーへファイルをアップして確認しなければなりません。ローカルでJSが動かないのです。
仮想サーバーを使えば確認はできました
作業PC：MAC
仮想サーバー：MAMP
IEチェック：VMの仮想Win7にてIEテスターを使用
IE8以下でHTML5を使えるようにする「html5.js」
これを対応しないと何も始まりません。
対処法は簡単です。JavaScriptを読み込むだけで対応できます。
以下のソースを<head>内に記述しましょう。ハックでIE8以下だけに読み込ませます。
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE8以下でメディアクエリを使えるようにする「respond.js」
今回はCSS3へ対応はさせていません。レスポンシブの対応なのでメディアクエリだけ使えるようにしました。
以下のソースを<head>内で読み込みましょう。ハックでIE8以下だけに読み込ませます。
ファイルはこちらからダウンロードして下さい。github
右サイドバーに「Download ZIP」とあります。
<!--[if lt IE 9]><script src="☆ディレクトリ指定☆/respond.min.js"></script><![endif]-->
IE6でmax-widthとmin-widthを使えるようにする「minmax.js」
IE6はmax-widthやmin-widthを入れても何も反応しません。IE6だけに「minmax.js」を読み込ませましょう。
以下のソースを<head>内で読み込みましょう。ハックでIE6だけに読み込ませます。
ファイルはこちらからダウンロードして下さい。Doxdesk
ページ下部に「module」とあります。
<!--[if IE 6]><script src="☆ディレクトリ指定☆/minmax.js"></script><![endif]-->
IEの各バージョンごとにCSSで調整する
IE6,7,8はそれぞれ違った癖があります。憎らしいほどに。
今回作成していて気づいた点としてはIE6だけは別に記述したほうが早い。ちょっと修正しただけではうまくレイアウトできないのですね。
IE7,8はプロパティをちょっといじるだけで対応可能でした。
IE6だけスタイルを別記述にしる！
単純な箇所は共通のスタイルを利用して構いません。positionやfloatなどで複雑に組んでいる箇所は結構レイアウトずれます。
「* html」とセレクタの頭に書くことでIE6用のハックとなります。
/*IE6ハック*/
* html p{font-size:10px;}
IE7,8はスタイルを微調整しよう！
だいたい思ったようにレイアウトできるのでスタイル記述の中で微調整のハックをかけましょう。
/*IE8以下へハック*/
p{font-size:10px\9;}
/*IE7以下へハック*/
p{*font-size:10px;}
/*おまけ IE6以下へハック*/
p{_font-size:10px;}
IE6,7,8をレスポンシブさせることのまとめ
上記の方法で旧IEへもレスポンシブが対応させることができます。今回はHTML5でしたが別にXHTMLでも問題ありません。その場合は「html5.js」の読み込みを無くせます。実際、案件対応はXHML文法を利用しました。少しでも軽くするために。
コーダーへの負担が半端ない
まずテスト環境が仮想的になります。確認のたびファイルを上げたりOS変えたりしなければなりません。
しかも完成したとしても激重で誰も見ないページだとわかって作るのでやる気でません。
時間と予算が２倍ならまだやれますが、そうでないでしょうし。
CSS3を対応させなかった訳
特にCSS3を対応させるJSは重いです。これ以上入れるとプレビューもままならなかったので非対応にしました。
無理に対応させるメリットもないので…デザイン？崩れてもカッコイイデザインにすればいい。
IE6,7,8へレスポンシブ対応する場合の問題
激重サイトになります。見れますがユーザーは見ないと思います。
そもそも現在IE6を使用しているようなPCは低スペックのはずです。クラッシュするのではないでしょうか。
旧ブラウザのユーザーを対象にするメリットある？
恐らくの話です。実際は違うかもしれません。OSをバージョンアップできない理由のある環境だと思います。
中小企業のPC、行政のPCとか。
そんな人にサイトを見せてコンバージョン上がりますか？
未だに旧ブラウザーへレスポンシブ対応するのはなぜ？
ぶっちゃけ制作会社の見栄だと思います。それ一点。
クライアントとユーザーの事を考えたら専用ページを設けるはずです。
旧ブラウザへの処置の提案
対応させようとなると時間とコストが掛かります。なので切り捨てる。
切り捨てるのがまずい場合の提案です。
旧ブラウザではレスポンさせないor専用ページを作る
IE6,7,8へ対応させるのには時間とコストがかかります。ですがその同じ時間で専用ページ作れます。
ページも軽いし機会損失もなくなるのでは。
「可変させない」それだけでいいのです。
