Webサイト簡単作成

CSS3 PIEの設定と使用

CSS3 PIEの設定と使用

IEの10以降で有れば必要は有りませんが、10以前のIEも対象とするならCSS3 PIEは便利なツールなので、簡単に設定と使用方法を書いておきます。

CSS3 PIEを設置

１．次のURL http://css3pie.com/ からファイルをダウンロードします。

２．ファイルを解凍すると次のファイルが入っていますが、使うのはPIE.htcだけです。

  • PIE.htc
  • PIE.js
  • PIE.php
  • PIE_uncompressed.htc
  • PIE_uncompressed.js

３．PIE.htcを任意の場所に置きます。

CSS3 PIEがサポートしているプロパティ

  • border-radius
  • box-shadow
  • border-image
  • multiple-backgroud images
  • linear-gradient background images

CSS3 PIEの使い方

１．ベンダープレフィックス無しの標準でCSSを記述し、

background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);

２．その後にPIE.htcファイルのパスを記述します。ファイルパスは絶対パスか呼び出しファイルからの相対パスになります。

３．下記例のようにbackgroundプロパティを扱うときには標準の記述と独自プレフィックス”-pie-"ではじまる記述も必要になります。

 background:linear-gradient(#fff5ee,#ba55d3,#d8bfd8);
 -pie-background:linear-gradient(#d8bfd8,#ba55d3,#fff5ee);
 behavior: url(js/PIE.htc);

CSS3 PIEが機能しない場合

１．positionプロパティを使い下記を付け加えてみる

position:  relative;

２．サーバの仕様によっては動作しないこともあるので、その場合は .htaccess に下記を設定してみる。 

AddType  text/x-component .htc