[IE]IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」
スポンサード
※IE-CSS3.htc との大きな違いは、
※その他の利用可能なプロパティは、以下の参考ページも合わせてご覧下さい。
スポンサード
IE下位バージョンでも CSS3 の border-radius
や box-shadow
、linear-gradient
などを利用できる便利な「PIE.htc」。
今回はこの PIE.htc ファイルの基本的な設置方法から「動かない時の対処法」まで簡単にまとめて紹介いたします。
目次
PIE.htc で利用できるプロパティ
PIE.htc を使うことで、以下の有名どころの CSS3 プロパティがIE下位バージョンでも利用できるようになります。 ・border-radius
・box-shadow
・linear-gradient
・box-shadow
・linear-gradient
※IE-CSS3.htc との大きな違いは、
text-shadow
が利用できない分、グラデーション(linear-gradient
)を利用できる、という感じでしょうか。※その他の利用可能なプロパティは、以下の参考ページも合わせてご覧下さい。
PIE.htc ファイルのダウンロード
以下のページより PIE.htc ファイルをダウンロードします。CSS 内への PIE.htc の設置例
以下のコードは「角丸のborder-radius
」と組み合わせた例ですが、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。1 2 3 4 5 6 7 8 | .box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*PIE.htc を利用*/ behavior: url(./PIE.htc); } |
behavior
には PIE.htc ファイルへのパスを記述します。
PIE.htc が動かない場合の対処法
上記例のような記述だけでは動かないことがよくあります( ´,_ゝ`) ので、その場合は以下の3つのポイントに注意してソースを見直すなどしてみましょう。(1)PIE.htc を絶対パスにする
behavior
で指定する PIE.htc ファイルへのパスを「絶対パス」にする方法です。1 2 3 4 5 6 7 8 | .box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*絶対パスで記述*/ behavior: url(http://www.sample.com/PIE/PIE.htc); } |
相対パスで階層がズレていると「IEだけページが見れない(404 Not Found)」なんて事態に陥る場合がありますので、個人的な経験則から、出来れば「絶対パス」で指定した方が安全かなと思います。
(2)PIE.htc を適用する要素に position:relative を適用
PIE.htc ファイルを使う要素内でposition:relative
を指定します。position:relative
を置く事でレイアウトが崩れる問題がなければ概ねこの方法で解決します。1 2 3 4 5 6 7 8 9 | .box { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; /*position:relative の指定*/ position:relative; behavior: url(http://www.sample.com/PIE/PIE.htc); } |
(3)htaccess ファイルの編集
サーバによっては「.htc の拡張子を認識しないがために PIE.htc が動かない」場合があるようですので、.htaccess ファイルに以下のコードを記述してサーバにアップし、1 | AddType text/x-component .htc |
.htc の拡張子をテキスト形式であることを示してあげます。
PIE.htc を使ったサンプル
PIE.htc を利用したIE8 以下向けのサンプルは、border-radius
、box-shadow
、linear-gradient
に絞ってこちらの記事に掲載していますので、合わせて参考にしてみてください。 スポンサード
コメント