ホームページ作成/CSS3とは

IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方(4ページ目)

IE6~8でも一部のCSS3プロパティが表示可能になる「CSS3 PIE」をご紹介。この「CSS3 PIE」を使えば、すべてのIE6~8ユーザに対して(一部の)CSS3プロパティを使ったデザインを見せることができます。ボックスの角を丸くしたり、ボックスに影を付けたり、背景色に透明度を付加したりするなど、CSS3で実現できるデザインを活用しているなら、それらを古いIEでも表示可能にしてみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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の活用も検討してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
【編集部からのお知らせ】
・「20代男性俳優」について、アンケート(2024/5/31まで)を実施中です!(目安所要時間5分)

※抽選で30名にAmazonギフト券1000円分プレゼント
※回答上限に達し次第、予定より早く回答を締め切る場合があります
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます