HTML/CSS

[css3]ie6,ie7,ie8でもcss3を使う方法

[css3]ie6,ie7,ie8でもcss3を使う方法

最近css3のプロパティを使用することが増えてきました。
css3を使うことで角丸やboxshadowなどが簡単に使用でき
画像を使用するよりもメンテナンスが用意になります。

しかし、気になるのがcss3が対応していないインターネットエクスプローラへの対策です。
ie6,ie7,ie8のシェアもまだまだ高く無視できない存在であります。

そこでie6,ie7,ie8でもcss3を使う方法をご紹介します。

CSS3 PIEを使う

「CSS3 PIE」はcss8のプロパティをie6,ie7,ie8で実現するためのスクリプトです。
シンプルかつcss3の仕様に準拠した指定方法で実装することができます。

実装できる機能

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image
などです。

使い方

http://css3pie.com/

上記のサイトから「PIE.htc」をダウンロードします。

ダウンロードしたファイルを解凍し
アップドードします。

cssでcss3のプロパティの記述する所に記述しファイルを読み込みます。パスは指定してください。

[css] img{ -moz-border-radius: 10px; -webkit-border-radius: 10px; -border-radius: 10px; behavior: url(../PIE.htc); } [/css]

とても簡単なので是非使ってみてください。