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

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」

他のところに影響を与えるといけないので、<div>でくくられているところだけにスタイルを設定します。（デザインテンプレートによって「main」であるとは限りません。）

.main table{
border-collapse: collapse;
border:none;
}

.main table th,
.main table td{
border:solid 1px #333333;
padding:5px;
}.main table thead th{
background-color:#008FC8;
color:#FFFFFF;
}

.main table tbody th{
background-color:#E4EEFF
}

見出しセル（th）の背景色は、適当にこのブログ内に有る色をフォトショップのスポイトで抽出して使用。
列の見出しと行の見出しの色を変えるために、「theadのth」と「tbodyのth」の背景色をそれぞれに設定します。（theadの方は背景色が暗いので文字を白くします。）

で、テーブルの隙間を生める方法
通常、tableのスタイルを設定せずにth、tdのスタイルだけを設定し、テーブルを作ると、セル間に変な隙間が出来ます。

↑こんな感じ

それを埋めるのが
border-collapse: collapse;
です。
border-collapseは、隣接するボーダーを重ねる（collapse）か、間隔をあける（separate）かを設定できます。
特に離す必要が無い場合は、collapseを設定しましょう。