| ブログトップ | CSS関連 | HTML関連 |

IEでもCSS3 その1(ie-css3)

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

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

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

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

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

手順

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

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

.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;

}

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

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

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

そこで、1.でダウンロードしてきた「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へのパス");
この一行をそれぞれの最後に付けるだけでOKです。これで「box-shadow」や「text-shadow」の記述が有効になります。

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

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

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

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

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

通常ではtext-shadowの設定は

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

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

Firefoxでの結果

IEでの結果

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

自分がいろいろと調整した結果、すべて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
    ※ただし、当然ですがすべてのドロップシャドウ(ボックス)に適応されるので、ボックスごとに濃さの調整をするというのはこの方法では無理です。

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

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年07月21日 | コメント(0) | トラックバック(6) | CSS関連 | HTML関連

トラックバック

トラックバックURL

トラックバック一覧

[...] 「IEでもCSS3」シリーズの記事で「PIE.htc」「ie-css3.htc」「css3shadow.htc」を紹介しましたが、サーバによっては効かない場合があります。 [...]

[...] IEでもCSS3 その1(ie-css3) [...]

[...] IEでもCSS3 その1(ie-css3) | ダリの雑記:WEBプログラム版 [...]

4. CSS3をIEにも適用 » 家の中でリア充 | 2011年03月18日 4:50 PM

[...] ダリさんのページを [...]

[...] ダリさんのページを [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記