【CSS3】CSS3 PIEを入れてみた

HTML5やCSS3もぼちぼち勉強していった方がいいかなと思うこの頃ではあるんですが、依然として利用者の多いIE側の対応がなってないので折を見てやればいいかなと思っていたところ、突然、私が任されている会社のホームページの全面リニューアルの命が下りました。

CSS3への興味が尽きない今日この頃

時をさかのぼること約3ヵ月前。

どうも私の目指すデザインと会社の要求するイメージが相容れないことがわかり、デザインは別の人にお願いしたいと自ら申し出ました。

つまり今後はデザインを考えることから解放されるわけで、メインの仕事の合間を縫ってウェブサイトを作成する身としては幾分身軽になったというわけです。

言い換えれば、渡されたデザインに対し忠実にコーディングしていくだけでよし、というか機械的な没個性の作業に変わったというだけのことなんですけどね。

私としても、必死に考えたデザインに何度もダメ出しをくらうのに嫌気がさしていたのでちょうどよい機会ではあったんです。

それに実のところデザインまで考えているとかなり時間を取られてきつかったという裏事情もありましたし。

で、新しいウェブサイト用に渡されたデザインなんですが、今までと大きく異なる点がドロップダウンメニューと角丸枠を要求してきたこと。

このほかにも影（shadow）がほしいという要求もありました。

CSS3 PIEとは

これらをCSS3で実現するとしてIEの問題があります。

そこでわがままブラウザのIEでも擬似的にCSS3を表現できるCSS3 PIEなるものを使ってみます。

CSS3 PIEについては、どのウェブサイトを見ても「非常に簡単」と書いてあるので試しに簡単なテストページを作ってアップしてみました。

ところがですよ。
全く持ってページに変化がないじゃないですか。

「あれ？」って感じですよ。

CSS3のコードに関してはジェネレータを使ってコピペしたんで間違えようがないはずなんですけど。

そもそもダウンロードしたCSS3 PIEフォルダの中には3つのファイルがあってそれらを全部アップするのか、それとも一部のファイルだけでいいのか、どの位置にファイルをアップするのかといったことが全くわからなかったんです。

これについては原文ドキュメントを読むことでなんとなく理解はできたんですが、こういったことに関してはどのブログも「そこまで教える必要はないだろう」と言わんばかりに一切の記述がないんですよね。

素人同然の私にはいつもこういうのがキツいんですわ。

結論としては「PIE.htc」というファイルのみをアップすればいいんです。

そしてアップする場所はどこでも大丈夫です。

ただしリンク付けする際はCSS3 PIEを使用しているHTMLファイルから見た相対パスになります。

CSSファイル位置から見た相対位置ぢゃぁありませんよ。

そのためCSSファイルは別ディレクトリにあるけどHTMLファイルとPIE.htcは同じディレクトリにある場合、パスはurl(PIE.htc) となります。

なおIE6では角丸がどうやっても表現されず、ついでにPNGファイルの透過処理もできませんでした。

IE7ではどちらも問題なく正常に表示されるんですけどね。

以上になります。