1. HOME > 
  2. ブログ・お知らせ > 
  3. HTML/CSS > 
  4. CSS3 PIEでIEでも背景に複数の画像を使用する

ライラックミモザのブログ・お知らせ

2012年5月14日

CSS3 PIEでIEでも背景に複数の画像を使用する

仕事でHTML5/CSS3を本格的に使用しはじめました。
HTML5にしても、CSS3にしても、まず悩ましいのがIEへの対応。もちろん、IEを対応させないわけにはいかず、CSS3をIEで使用するために、コリスさんの「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で紹介されていた「CSS3 PIE」というスクリプトを利用しました。
下記はCSS3 PIEの簡単な使用法と備忘録です。

CSS3 PIEでできること

CSS3 PIEは、現在CSS3のすべての機能を実現できるわけではありませんが、下記の機能に対応しています。
・border-radius(角丸)
・box-shadow(シャドウ)
・border-image(境界線に画像を使う)
・multiple background images(背景画像を複数指定できる:最大4つまで)
・linear-gradient as background image(グラデーション)

角丸やシャドウ、グラデーションは、デザイン上で使用しないことはほとんどないといっていいほどなので、とてもありがたいのですが、個人的に便利で一番うれしい機能は、背景画像を複数指定できる「multiple background images」かもしれません。
今まで少し複雑な背景画像を使用する場合、その目的だけのために、divが増え、ソースコードがむやみに長くなってしまうことがあったので、とても便利です。

CSS3 PIEを使用するには

CSS3 PIEは、こちらの「CSS3 PIE: CSS3 decorations for IE」サイトにある「Download」からファイル一式をダウンロードします。
解凍したフォルダ内には、いくつかファイルが格納されていますが、使用するのは「PIE.htc」のみです。

CSSへの適用の準備

ダウンロードした「PIE.htc」をサーバにアップします。アップ先の指定はとくにありません。

CSSへの記述と注意

まず、CSS3 PIEを適用したい箇所に、例えば、
.box {

behavior:url(“/PIE.htc”);
}
上記のように記述します。
このとき、注意しなければならないのは、「PIE.htc」のパス。PIE.htcを記述したCSSからのパスではなく、CSSが適用されるHTMLからのパスになります。そのため、どの階層からも適用されるよう、相対パスではなく、「/(スラッシュ)」ではじまる絶対パスで指定します。http://からはじまる絶対パスでの指定が可能なケースもあるようですが、私の場合は適用されませんでした。

multiple background images

複数の背景画像を指定するときは、例えば、以下のように記述します。
.box {
background:url(“images1.jpg”) repeat-x left top, url(“images2.jpg”) no-repeat right bottom;
behavior:url(“/PIE.htc”);
-pie-background:url(“/images1.jpg”) repeat-x left top, url(“/images2.jpg”) no-repeat right bottom;
}
指定する背景画像の順番は、上(の画像)から下(の画像)へ(重なり)順に記述していきます。
このとき気をつけなければならないのは、通常の背景画像(background)は、CSSからの相対パスで問題ないのですが、CSS3 PIEを適用させる背景画像(-pie-background)は相対パスではなく、「/(スラッシュ)」ではじまる絶対パスで指定しないと、表示されません(それに気付くまでに、私は結構時間がかかりました)。

CSS3 PIEが効かない

CSS3 PIEが適用されない場合は、下記で解決できる場合があります。

position:relative;を記述する

behavior:url(“/PIE.htc”);を記述した箇所に、あわせて「position:relative;」を記述します。
背景色やボーダーが消えてしまうことを避けるためで、ちょっとした「おまじない」のようなもののようです。

.htaccessへの記述

サーバによっては「PIE.htc」の.htcを解釈できず、動作しない場合があるそうです。
.htaccessに、「AddType text/x-component .htc」を記述します。

私はロリポップサーバを使用していますが、こちらは上記を記述しなくても問題ありませんでした。

参考にさせていただいた記事

今回、参考にさせていただいた記事です。みなさまありがとうございます。
CSS3PIE(PIE.htc)が効かないと思ったら
CSS3×PIE.htcの記述ルール
「CSS3 PIE」がうまく動かなかった時の対処法

CSS3によって、少しずついろいろな効果が実現できるようになっているのは、とてもうれしいです。
今回は自分自身への備忘録として「multiple background images」を取り上げましたが、機会があったら、他の機能についても書いてみたいと思います。

ブログ・お知らせトップへ