はね丸のＷＥＢ工房

劇的にWEBサイトの表現力を上げることができるCSS3ですが、ブラウザのトップシェアを誇るIEはCSS3が未対応…。
私などはブラウザによって切り分けるのが面倒ということもあり、CSS3は今まで使ったことがありません。

ところが、今回発見した「CSS3 PIE」を使用すればIEでもCSS3が適用できることを知り、早速使ってみることにしました。
この「はね丸のWEB工房」でも使用してます。

かなり簡単に適用できるのも魅力の１つですね。

残念ながら、CSS3全てを網羅しているわけではなく、一部の機能に限定されている。

・border-radius

・box-shadow

・border-image

・CSS3 Backgrounds

・Gradients


まぁ欲しいと思う機能はほぼ実装しているため、適用する価値は十分あると思います。

CSS3 PIEを準備する

CSS3 PIEの配布元である「CSS3 PIE」へ行き、



「download」をクリックして、CSS3 PIEの本体をダウロードします。
zipで圧縮されているので、フリーの解凍ツール等を使用して解凍、いくつかファイルがありますが「PIE.htc」のみをFTPを使用してサーバへアップします。

URLでアクセスできるのであれば、格納場所はどこでもかまいません。
ご自身の設置ルールに従って設置してOKです。

CSS3 PIEを適用する

CSS3 PIEを有効にするには、基本的には適用したいCSSの宣言に１行追加するだけです。

適用前：

適用後：

PIE.htcのパスですが、相対パスにした場合はCSSファイルからのパスではなく、このCSSを適用するファイルからのパスになります。
サイトに階層がある場合、絶対パス(behavior: url(http://www.hoge.com/PIE.htc);のように)にしてしまった方が面倒がなくて良いです。

CSS3 PIEを使う上での注意点

CSS3 PIEを使う上で、いくつか注意点があったので書いておきます。

１．backgroundは独自プロパティである
グラデーションなどbackgroundに関連するものは、「background」ではなく「-pie-background」という独自のプロパティを使う必要があります。

適用前：

適用後：

２．背景やボーダーが消えるケースがある
バグなのかもしれませんが、IEで見た場合にCSS3 PIEを適用した部分で、背景やボーダーが消える現象が出ることがあります。
その際は「position:relative;」を記述すると回避できるようですね。

適用前：

適用後：

もちろん「position:relative;」そのものにも意味はありますので、むやみに追加すると他の弊害が出る場合があります。
ご自身のサイト構造に合わせて調整してください。


３．PIE.htcのパスは適用するファイルからのパス
上にも書きましたが、PIE.htcのパスを相対パスにした場合はCSSファイルからのパスではなく、このCSSを適用するファイルからのパスになります。


以上がCSS3 PIEの使い方です。