4/4 IE6～8でも一部のCSS3が使える！「CSS3 PIE」の使い方 [ホームページ作成] All About

CSS3 PIEを使ってうまくいかない場合

CSS3 PIEを使ってもうまく表示されない場合は、以下の点を試してみて下さい。

■positionプロパティを一緒に指定してみる
behaviorプロパティを使って「PIE.htc」ファイルを指定した結果、背景色や枠線など一部のスタイルが無効になってしまうことがあります。その場合は、behaviorプロパティを記述した箇所に、下記のようにpositionプロパティを加えてみて下さい。

position: relative;

※positionプロパティは、表示位置を指定するプロパティです。値に「relative」を指定した場合は、(topプロパティやleftプロパティと組み合わせて)本来表示される位置から相対的に表示位置をずらせます。ここでは、位置を指定するプロパティを何も使っていないので、表示位置は何も変わりません。「CSS3 PIE」を使った際の、表示上の不具合に対処するためだけに記述しています。

■PIE.htcファイルのパスを確認する
behaviorプロパティで指定した「PIE.htc」ファイルの位置を、「/」で始まる絶対パスで記述しているか確認して下さい。相対パスになっていると、(CSSからの相対パスではなくHTMLからの相対パスでないと認識されないため)うまく表示されないことがあります。また、「http://」で始まるURLでも認識されませんので注意して下さい。

■.htaccessファイルに記述を加える
ウェブサーバによっては、.htaccessファイルに以下の1行を追記しておかないと、うまく動かないこともあるようです。

AddType text/x-component .htc

■対応しているCSS3プロパティ
今のところ(Ver 1.0 beta3で)対応しているCSS3のプロパティは、border-radius、box-shadow、border-image、backgroundの複数画像指定、backgroundのグラデーション指定です。今後のバージョンで、他のプロパティもサポートされるようになるかもしれません。

IE6～8のシェアはまだまだ高い

今回は、IE6～8でも一部のCSS3プロパティを使用可能にする「CSS3 PIE」をご紹介致しました。サポートされているプロパティは少数ですし、完全にサポートされているわけでもありません。しかし、IE6～8で元々サポートされていなかった一部のCSS3プロパティが表示可能になるメリットは大きいでしょう。

さすがにIE6のシェアはずいぶん減ったとはいえ、IE8も含めれば、まだまだ旧バージョンのシェアはそこそこあります。CSS3でのデザインを使う際には、ぜひCSS3 PIEの活用も検討してみて下さい。

【関連記事】