2d0232e2ed9dbfbbc3eb129d2f921281_s

CSS3を使うときのIE対策法まとめ


「windows XPのサポートが終了したのに、IE対策の必要性があるの?」と
思われるかもしれませんが、IE8はwindows vistaでも使われておりますし、
vistaのサポートは2017年まで延長されました。


中にはブラウザのバージョンアップをしていない方もいるかもしれません。
ですので、CSS3を使うときには、IE8以前のブラウザーの対策法をしっかりしておきましょう。

 

 

javascriptで必要なものだけ対応させる

IEでCSS3はどこまでタイプされているか
http://fmbip.com/

まず、HTML5とCSS3はどのブラウザで使えるか調べてみましょう。
IE8以前のブラウザではCSS3がほとんど対応していないことがわかります。

HTML5で追加された要素は、対応していないブラウザで表示しようとすると、
設定したCSS3も合わせて無視されて表示されてしまいます。

ですが、javascriptを記述する事によって、ある程度はフォローする事が出来ます。

■記述方法
<script type=”text/javascript”>
document.createElement(“HTML5のタグの名前“);
(以下、HTML5の認識させたいタグだけ追加する)
</script>

これを記述することで、head内に記述することでCSSも認識されるようになります。
ただし、このままだとインライン要素として処理されてしまうので、レイアウトが崩れてしまう場合があります。
そこで、CSSに下記の記述を追加してください。

(認識させたいHTML5のタグの名前) {
display: block;
}

 

IE特有のバグや解釈を修正する

ちゃんとCSSで設定していても、IEになると表示が崩れてしまった経験はありませんか?

IEには特有のバグがあります。
都度バグ確認しながら、構築するのは手間暇かかるので、
IE特有のバグを回避するライブラリを導入しましょう。

■ダウンロードはこちらから

IE特有のバグや解釈を修正するライブラリie7-js
http://code.google.com/p/ie7-js/

 

ダウンロードしたライブラリを任意の場所に保存し、header内にライブラリを
読み込むよう記述を追記しましょう。

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

 

IE8でもHTML5で追加された新要素を認識させるhtml5shiv.js

html5shiv.jsは、IE8以下のブラウザにhtml5で追加された要素を
ブラウザに認識させるためのライブラリです。

■オフィシャルページはこちらから

IE8以下のブラウザでもHTML5で追加された新要素を認識させるライブラリhtml5shiv.js

https://code.google.com/p/html5shiv-printshiv/

 

header内にライブラリを読み込むよう記述を追記しましょう。
<!–[if lt IE 9]>
<script src=”http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js”></script>
<![endif]–>

 

スマートフォンタブレットで開いた時、デザインを最適化するreapond.js

スマートフォン表示対応させてますか?

スマートフォンやタブレットでホームページにアクセスしたとき時に、

自動的に画面幅を調節するための仕様がありますが、IE8は対応しておりません。

「うちのターゲットは、スマホでホームページ見ない」という
クライアントがいらしゃるかもしれませんが、今後スマートフォン対応が、
googleの検索評価を左右する可能性があります。

今後のことを考えた上で、きちんと対応させましょう。

■ダウンロードはこちらから

スマートフォンタブレット用にデザインを最適化するreapond.js
https://github.com/scottjehl/Respond

 

ダウンロードしたライブラリを任意の場所に保存し、header内にライブラリを読み込むよう記述を追記しましょう。

<!–[if lt IE 9]>
<script src=”./respond.min.js”></script>
<![endif]–>

 

IE8以下のブラウザでもCSS3セレクタを使えるようにするSelectivizr.js

IE8以下のブラウザでCSS3を使えるようにする便利なライブラリがあります。

■ダウンロード

IE8以下のブラウザでもCSS3セレクタを使えるようにするライブラリSelectivizr.js
http://selectivizr.com/

 

http://selectivizr.com/からデータをダウンロードし、解凍します。

<head>~</head>内にライブラリを読み込むため、以下のコードを記述します。

<!–[if lt IE 8]><script src=”selectivizr.js”></script><![endif]–>

 

CSS3のプロパティに対応するCSS3 PIE

CSS3すべてのプロパティが使えわけではないですが、
CSS3PIEを導入することで、いくつかのCSS3のプロパティが使えるようになります。

■CSS3Pieで使えるようになるプロパティ

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

■ダウンロード

CSS3のいくつかのプロパティに対応させるCSS3 PIE
http://css3pie.com/

 

「PIE-1.0.0.zip」をダウンロードして解凍します。
PIE.htcのみ、サーバーにアップします。
サーバーアップ後、CSS3のプロパティを使ったスタイルシートの末尾に、
下記のプロパティを記述します。
behavior: url(“/PIE.htc”);

■記載例
セレクタ {
CSS3プロパティ : 値 ;
behavior: url(“/PIE.htc”);
}

 

まとめ

CSS3を使うときのIE対策法をいくつかまとめてみましたが、
「これ全部導入しなくちゃいけないの?」と思ったかもしれません。

結論から言いますと、全部を導入する必要はありません。
ホームページのデザインを見て、必要な要素はどれか考えた上で導入しましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleWeb制作で役立つ無料ベクター素材サイトまとめ