IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。
-
Impressive Webs
今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します。
1. CSS3 Pie
CSS3 Pie というライブラリを利用すれば、border-radius（丸角）、box-shadow（ボックスシャドウ）、とグラデーションが使えるようになります。
-
progressive internet explorer CSS3 Pie
使い方は簡単で、ダウンロードした PIE.htc ファイルをアップして、CSS3 を使いたい部分に、behavior: url(PIE.htc); と行った感じで、ライブラリへのパスを追加するだけです。グラデーションの時だけは、PIE独自の書き方をするので注意が必要ですが、丸角とボックスシャドウの場合は、通常通り CSS3 の記述をすれば OK です。
CSS : 丸角 / シャドウ
.box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px #777;
-moz-box-shadow: 0 1px 4px #777;
box-shadow: 0 1px 4px #777;
behavior: url(PIE.htc);
}
上記は border-radius と box-shadow の記述例です。いつも通りに記述して、最後に behavior: url(PIE.htc) としてライブラリを読み込むだけです。
グラデーションのときは、Pie 独特の書き方 … というか、専用のプレフィックスを記述します。
CSS : グラデーション
/* 背景グラデーションの指定 */
.gradient{
background: -webkit-gradient( linear, left top, left bottom, from(#f0f0f0), to(#dddddd));
background: -moz-linear-gradient( top, #f0f0f0, #dddddd);
-pie-background: linear-gradient(#f0f0f0, #dddddd);
behavior: url(PIE.htc);
}
公式サイトでは、たくさんのグラデーションのデモもアップされています。いろんなグラデーションが作れるんですねー …。
CSS3 Pie のデモ
Next>>
2. ie-css3.htc
ie-css.htc は、border-radius、box-shadow に加えて、text-shadow も IE で使えるようにするライブラリ。
-
ie-css3.htc
こちらも CSS Pie と使い方は同じ。ダウンロードした ie-css3.htc をアップして、CSS内でファイルへのパスを指定するだけです。
CSS
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 3px 3px #777;
-webkit-box-shadow: 0 3px 3px #777;
box-shadow: 0 3px 3px #777;
text-shadow: 0 1px 1px #777;
behavior: url(ie-css3.htc);
}
どちらのライブラリも CSS で読み込むだけなので、簡単に利用できますねー。でも万能っていうわけではなくて、例えば a要素など、もともとブロックレベル要素ではない要素を、display: block でボックスにした場合などは、上手く丸角とかにならないこともありました。なのでクロスブラウザで … ということなら、やっぱり画像で丸角やシャドウを作った方がいい部分もでてきます。
また、今回紹介したライブラリの他にも、色々なリソースが以下のリンクにまとめられてます！
3. IE 独自の filter でできる表現
IE には filter っていう IE 独自の実装があって、これら filter を使えば、CSS3 と似たような表現ができるものがいくつかあります。上記のようなライブラリを使う必要もないので、一番手軽ですねー。難点は、ちょっとコードが長くて覚えきれないことくらいかな？
3.1. ボックスにシャドウを加える filter
CSS
.shadow{
-webkit-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=120, strength=3, enabled=true);
}
- 5.
filter: progid:DXImageTransform.Microsoft.Shadow(color=#777777, direction=120, strength=3, enabled=true);
長くて覚えきれないのでコピペですねー。color はもちろん色を指定します。direction では角度、strength は強さ … ぼかし具合っていう感じになります。モダンブラウザでの CSS3 のシャドウほど繊細な感じはでませんが、私は結構使っています。
3.2. 要素を透過させる filter
IE 以外では、要素を透過させる opacity プロパティーが使えますよねー。
CSS
.opacity{
opacity: 0.4;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
これも長いですねー X(
- 3.
filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 40);
opacity の値に、不透明度を指定してあげます。CSS3 の場合は小数点での指定ですが、IE の filter では % で指定します。
3.3. グラデーションをつけるフィルター
filter では、グラデーションも指定できます。CSS3 のような、円形のグラデーションは指定できませんが、ボタンなどに使う普通のグラデーションは表現できるので、このブログでも使っています。
CSS
.gradient{
background: -webkit-gradient( linear, left top, left bottom, from(#ffd1e8), to(#ff69b4));
background: -moz-linear-gradient( top, #ffd1e8, #ff69b4);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffd1e8', endColorstr='#ff69b4');
}
これもとっても長いですね X(
- 4.
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffd1e8', endColorstr='#ff69b4');
startColorstr には開始色、endColorstr には終了色を指定します。
IE の filter については、下記ページが参考になると思います！
-
Web Design kojika17
Comments
Thank you for the comment.