はね丸のWEB工房

「CSS3 PIE」でIEでも楽々CSS3対応にと題して、情報共有をします

はね丸のWEB工房便利ツールやサイト>投稿記事を個別表示

このエントリーをはてなブックマークに追加

CSS3 PIEでCSS3未対応のIEにもCSS3を利用可能に


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

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

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



スポンサーリンク


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

・border-radius

・box-shadow

・border-image

・CSS3 Backgrounds

・Gradients


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


CSS3 PIEを準備する

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

CSS3 PIEをダウンロード

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

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


CSS3 PIEを適用する

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

適用前:

.hoge {
  -moz-border-radius: 6px / 6px;
  -webkit-border-radius: 6px / 6px;
}



適用後:

.hoge {
  -moz-border-radius: 6px / 6px;
  -webkit-border-radius: 6px / 6px;
  behavior: url(PIE.htc);
}



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


CSS3 PIEを使う上での注意点

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

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

適用前:

.hoge {
  background: linear-gradient(#8Fd537, #6Fb517);
  background: -moz-linear-gradient(#8Fd537, #6Fb517);
  background: -webkit-gradient(linear, left top, left bottom, from(#8Fd537), to(#6Fb517));
  behavior: url(PIE.htc);
}



適用後:

.hoge {
  background: linear-gradient(#8Fd537, #6Fb517);
  background: -moz-linear-gradient(#8Fd537, #6Fb517);
  background: -webkit-gradient(linear, left top, left bottom, from(#8Fd537), to(#6Fb517));
  -pie-background: linear-gradient(#8Fd537, #6Fb517);
  behavior: url(PIE.htc);
}



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

適用前:

.hoge {
  background: linear-gradient(#8Fd537, #6Fb517);
  background: -moz-linear-gradient(#8Fd537, #6Fb517);
  background: -webkit-gradient(linear, left top, left bottom, from(#8Fd537), to(#6Fb517));
  -pie-background: linear-gradient(#8Fd537, #6Fb517);
  behavior: url(PIE.htc);
}



適用後:

.hoge {
  position:relative;
  background: linear-gradient(#8Fd537, #6Fb517);
  background: -moz-linear-gradient(#8Fd537, #6Fb517);
  background: -webkit-gradient(linear, left top, left bottom, from(#8Fd537), to(#6Fb517));
  -pie-background: linear-gradient(#8Fd537, #6Fb517);
  behavior: url(PIE.htc);
}



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


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


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



スポンサーリンク
hanemaru_comをフォローしましょう このエントリーをはてなブックマークに追加
カテゴリー 便利ツールやサイト
キーワード CSS3,IE,角丸,グラデーション,ボックスシャドウ

イイネ!

リーダー 2011-03-15 20:46:16

ありがとうございます。

はね丸 2011-03-27 14:39:17

CSS3 PIEのダウンロードはかなり時間がかかるんでしょうか?
だいたいの目安を教えてください。

やはり、div要素を角丸にできれば見栄えがかなり違いますね。

私も趣味でWEB作成をしています。まだHTMLとCSSの基本を学んだところです。また、WEBに関する知識もあまりありません。
http://toeic4listening.web.fc2.com/  (まだ未完成)

まだまだド素人です。またセンスもないような・・・・゚(゚´Д`゚)゚

これに新たなページを作り、そこでいろいろCSS3の小技を試しながら作っていこうと考えています。


なんとかCSS3 PIEでホームページを進化させたいです!!


最後に、このサイトは非常に役にたちました。
ありがとうございます。

麻生 2012-12-22 22:35:57

麻生さん、こんばんは。
サイトを褒めていただき、ありがとうございます。
サイト運営の励みになります。

ダウンロード時間ですが、私のところでは1秒程度でした。
ファイルサイズもかなり小さいですので、瞬間で終わるはずです。

仰るとおり角丸になるだけでかなり印象が違いますので、是非この機会にマスターしてください。

はね丸 2012-12-23 01:35:47









※コメントは管理人の承認後、表示されます。

コメントを受け付けました。
コメントは管理人の承認後、表示されます。

表示順:新規順 | 投稿順 | 人気順 | 注目順