ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

CSS3では、ブロックの角丸やグラデーション、ドロップシャドウなど非常に便利なスタイルがあるのですが、残念なことにIEでは対応しておりません。

しかし、IEでもそれらのスタイルを使用できるプログラムがいくつか存在しています。

「ie-css3」を利用する方法。（参考サイト：コリスさんのサイト）

「ie-css3」でできるCSS3機能は以下のとおりです。

• border-radius：角丸
• box-shadow：ドロップシャドウ
• text-shadow：テキストシャドウ

手順

１．まずはこちらのサイトから「ie-css3」をダウンロードしてください。

２．次にスタイルにて、角丸・ドロップシャドウ・テキストシャドウの設定を行います。

.box{

padding:10px;
background-color:#FFFFFF;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

}

３．ブロックの角丸・ドロップシャドウについてはclass「box」、テキストシャドウについてはclass「text」という名前で設定しています。これらのclassを含んだ内容をbodyタグ内に記述してください。（以下例）

<h2>border-radius/box-shadow</h2>
<div class="box">角丸・ドロップシャドウ</div>
<h2>text-shadoww</h2>
<p class="text">テキストシャドウ<p>

４．これでFirefoxやSafariで正常に表示されるようになります。しかし、IEではまだ角丸・ドロップシャドウが表示されません。

そこで、１．でダウンロードしてきた「ie-css3.htc」をbehaviorで呼び出します。

.box{

padding:10px;
background-color:#FFFFFF;

/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */

/*ドロップシャドウ*/
-moz-box-shadow: 5px 5px 15px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 15px #000; /* Safari and Chrome */
box-shadow: 5px 5px 15px #000; /* Opera 10.5+, IE */

behavior: url(ie-css3.htc);

}

.text{

/*テキストシャドウ*/
text-shadow: 2px 2px 2px #000000;

behavior: url(ie-css3.htc);

}

behavior: url("ie-css3.htcへのパス");
この一行をそれぞれの最後に付けるだけでＯＫです。これで「box-shadow」や「text-shadow」の記述が有効になります。

サンプル [新しいウィンドウで開く]

※サンプルでは見やすいようにタグのスタイルをあらかじめ設定しています。

なお、テキストシャドウ（text-shadow）を扱う場合は注意が必要です。

text-shadowの３番目の値を10pxにしてみてください。

text-shadow: 2px 2px 10px #000000;

通常ではtext-shadowの設定は

text-shadow:x軸 y軸 ぼかし値 色

となっているので、３番目の値を増やすと影のぼやけ方が広がるはずなのですが（現にFirefoxなどはそうなります）、IEの場合はなぜか右斜め上に影が飛んでしまいます。

Firefoxでの結果

IEでの結果

どうやらIEでは、ぼかし方があらかじめ設定されていて、３番目の値は別の役割を果たすようです（なんの役割かはわからないんですが^^;）

自分がいろいろと調整した結果、すべて2pxが、どのブラウザでみてもバランスが取れているように感じました。

text-shadow: 2px 2px 2px #000000;

ie-css3のバグレポート

• 角丸にしたブロックの中で、さらにブロックを角丸にしようとしても効果がなく、しかもbackground-colorの効果がなぜか無くなる。
  before / after
  beforeは「ie-css3.htc」適応前、afterは適応後。本来ならグレーのブロックも角丸になるはずが、ならないどころか背景色が無効化してしまっている。
  解決方法
  どうやら後ろに隠れてしまっているようなので、内部の角丸のブロックのスタイルに

  position:relative;
  z-index:1;

  を追加してください。after2

• ドロップシャドウ（ボックス）の色が設定できない。
  サンプルのドロップシャドウの記述は
  box-shadow: 5px 5px 30px #000000;
  ですか、仮に
  box-shadow: 5px 5px 30px #FF0000;
  としても、影の色が変わりません。after3
  
  色はともかく、せめて影の濃さだけでも変更したい場合は「ie-css3.htc」の86行目
  shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';
  の部分の「opacity」を
  shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity=0.5)';
  という風に調整してみてください。（有効数値：0～1.0）
  とりあえず濃さだけは何とかなります。after4
  ※ただし、当然ですがすべてのドロップシャドウ（ボックス）に適応されるので、ボックスごとに濃さの調整をするというのはこの方法では無理です。

今回参考にさせていただいたサイト

• コリス ： 該当記事「[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3」