HOME > ウェブデザイン > 【CSS3】CSS3 PIEを入れてみた
公開日:2010.7.26
この記事は約3分で読めます。

【CSS3】CSS3 PIEを入れてみた

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

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

SIRIUSレビューイメージ画像

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

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

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

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

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

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

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

 

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

このほかにも(shadow)がほしいという要求もありました。

前者は今まではドロップダウンにするほどのメニュー項目もなかったので実装を控えていました。

後者はCSSの設定作業が面倒なので敬遠していたという事情があったんです。

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ではどちらも問題なく正常に表示されるんですけどね。

以上になります。

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)