スタイルシートマニア

古いIEをCSS3に対応させる CSS3 PIE | ホームページカスタマイズ Tips

これもかなりの勢いで今更ネタですが・・・。
IEみたいに役に立たないものを作るところもあれば、こんな素敵なプログラムを作ってくれる人もいるという。
まあ、そんなことはおいといて。

CSS3では「角丸」や「グラデーション」等など、様々なハイパー技が使えるようになりました。
しかし!相も変わらずIEはついて来ていません。
っというか独自路線を爆走しそうな勢いですね。
またまた、話がそれそうになりましたが、そんな偏屈でへなちょこなIEにもハイパーなCSS3を少しだけ対応できるようにしてくれるのがこの「CSS3 PIE」
では、使い方!

っといっても本当に使い方は簡単!

まずはダウンロード

下記URLへアクセスしてダウンロードをクリック。
http://css3pie.com/
圧縮ファイルを開いて「PIE.htc」っというファイルをサーバへアップロードしましょう。
この時、アップする場所が意外と重要なのでちゃんとわかる場所へアップします。(適当にアップしたらいけませんよー)
ちなみに僕はCSSフォルダの中に放り込んでいます。

そして、CSSを書きます。
今回はベタベタですがボックスを角丸にしてみます。

.box {
 border: 5px solid #999;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -o-border-radius: 5px;
 behavior: url("/css/PIE.htc");

ポイントは behavior: url("/css/PIE.htc")です。
さきほど、アップロードする場所が意外と重要と書きましたが、ここを失敗するとうまく動いてくれません。
ここでいえばhttp://source-marine.net/css-mania/css/PIE.htcっというのが設置場所になります。(実際のPathはWordPressなので違いますけど。)
そうすると、スタイルシートマニアはSource Marineのサブフォルダの中で動かしているので「/css-mania/css/PIE.htc」っという書き方になります。
要するに、一番上の階層(ウェブ上から見える)からの位置を指定するということです。
僕は、これでかなりはまりました・・・。
WordPressだったのでなおさらはまりました。
それと、どうしても効かない時はpositionをrelativeに入れると効く事が多いです。

さぁ!これでへなちょこIEにもCSS3を取り入れることができます!
だけど、角丸+グラデーションなどの組み合わせはどうやら出来ない様子。
いつになったら、IEの束縛から逃れられる日がくるのでしょうか・・・。

Author:庄野英朗
Comments:0

庄野英朗

Source Marine 代表
デザイン・コーディング・PHPアプリケーションまでこなす。
マルチデザインプログラマ。

コメントを残す