Published 2月 15th, 2012 by

IEでもCSS3を実現する方法

css3は大変便利なんですが、IEではまったく効かないため、実際に使用できなかったんですが、なんとIEでも使用できるようになる方法があるそうです。

対応しているプロパティは、

・角丸:border-radius

・ボックスシャドウ:box-shadow

・グラデーション:linear-gradient

・複数の画像を背景に指定:multiple background images

・ボーダーに画像を表示:border-image

です。

 

実際に試してみたので、ご覧いただければ幸いです。

◆まずは、必要なデータをダウンロードします。

CSS3 PIE: CSS3 decorations for IE

◆ zipでダウンロードして、解凍すると、いろんなファイルがありますが、必要なのは、「PIE.htc」だけです。

◆PIE.htcを任意の箇所にディレクトリに入れる

あとは、

実際にcss3を使用している要素に以下の記述を追加

behavior: url(/任意のパス/PIE.htc);

そして注意点があるそうで、

・css3の記述は、ベンダープレフィックス無しのものを書かないといけない。(-moz- や -webkit- 等が付いてないもの)

・色は16進数で指定しないといけない。

・うまくいかない場合は「position : relative;」を追加する。

・グラデーションの場合は、さらに「-pie-background」を追加しないといけない。

 

実際のソースとデモを見たほうがわかりやすいと思いますので、

以下をご覧ください。

角丸:border-radius

cssソース

width: 400px;
height: 30px;
border: 1px solid #999999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;	/* PIE用にこれを忘れない */
behavior: url(../PIE.htc); /* ←これを書く */

デモ

ボックスシャドウ:box-shadow

cssソース

width: 200px;
height: 200px;
border: 1px solid #999999;
-webkit-box-shadow: 5px 5px 10px #999;
-moz-box-shadow: 5px 5px 10px #999;
box-shadow: 5px 5px 10px #999; /* PIE用にこれを忘れない */
background-color: #ffffff;
behavior: url(../PIE.htc);　/* ←これを書く */

デモ

グラデーション:linear-gradient

cssソース

width: 200px;
height: 200px;
background: -moz-linear-gradient(top, #ffeaaa, #f5bf16);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ffeaaa), color-stop(1.0, #f5bf16));
-pie-background: linear-gradient(#ffeaaa, #f5bf16);	/* PIE用にこれを忘れない */
behavior: url(../PIE.htc);　/* ←これを書く */

デモ

複数の画像を背景に指定:multiple background images

cssソース

.box1
{
	-pie-background: url(../images/try1.png), url(../images/try2.png), url(../images/try3.png);
	behavior: url(../PIE.htc);　/* ←これを書く */
	position: relative;

}
.box2
{
	-pie-background: url(../images/try2-1.jpg) no-repeat left 10px, url(../images/try2-2.png) no-repeat right 20%, url(../images/try2-3.png) no-repeat 40px 50px;
	behavior: url(../PIE.htc);　/* ←これを書く */
	position: relative;

}

デモ

 

ボーダーイメージは、上手くいかないため無視しました・・・

書いてみて思ったのは、便利だなと思いつつも、

お気づきの方もいらっしゃると思いますが、

css3を効かせたい要素にいちいち、「PIE.htc」の記述をしなくてはいけません。bodyやアスタリスクに記述してもダメってことです。

ちょっとめんどくさいですが、角丸なんかは実際つかってみてもいいかもしれないと思いました。

以下参考にさせていただいたサイトです。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス
IEでもCSS3
ほんっとにはじめてのHTML CSS3PIE

HTML5,css3