【CSS3】CSS3 PIEを入れてみた

この記事の所要時間は約 3分です。

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

スポンサーリンク


 

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

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

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

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

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

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

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

 

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

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

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

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

区切り画像

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

以上になります。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




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