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

table内に記述しているaタグに、角丸とドロップシャドウをかけてボタンっぽくしたのですが、なぜかIE9でドロップシャドウが効かない状態になりました。

スタイルの記述はこんな感じ

table a{
position:relative;
z-index:1;

background-color:#FFF;
display:inline-block;
text-decoration:none;
padding:3px 8px;
margin:5px 5px 5px 0px;

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

-moz-box-shadow: 1px 1px 3px #777; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #777; /* Safari and Chrome */
box-shadow: 1px 1px 3px #777; /* Opera 10.5+, IE */

behavior: url("/PIE.htc");

}

「position:relative」も「z-index」もちゃんと記述しているのに効かない。

というか角丸はちゃんと効いてるのに、なぜドロップシャドウだけ効かない？

他の場所で使っているドロップシャドウはちゃんと効いてるのに。

・・・もしや、と思い該当のaタグをtableから出してみたところ、

・・・効いた！

tableタグ内に記述したタグにはドロップシャドウをかけられないのかな？と思い調べてみると、こちらのサイトを発見しました。

IE9でborder-collapse: collapse指定要素内でbox-shadowが表示されない！ | ブログデザイン

どうも、tableのスタイルを「border-collapse:collapse;」にしているとダメみたい。

なんでやねん・・・

その部分のtableのみスタイルを「border-collapse: separate;」とし、解決しました。

【追記】　というかtable自体にではなく、ドロップシャドウをかけるタグのスタイル（この場合aタグ）に「border-collapse: separate;」と書けばよいみたい。

トラバをくださった方のブログで気づいたんですが、PIEのバージョンが４月にアップしたみたいです。

前バージョンのbeta3で発生していた、印刷プレビューでスクリプトエラーのウィンドウが立ち上がる問題が解決していました。（.htcで実行させたとき）

印刷でCSS3が実行されないという点は変わらずですが、とりあえず支障なく使えるようになりました。

他は何か変わったのかなぁ・・・

PIEダウンロードサイトへ

【追記】

beta5使ってたら、スクリプトエラーが復活しとる・・・。

とりあえず解決方法はありますので、こちらのサイトをご参照ください。

PIE.htc 使用時のIEでの印刷プレビュー【(x)html】

いつくらいに更新されたのか正確にはわからないんですが、去年の年末あたりにPIEが更新されていたようです。

具体的な変更点はまだ調べてませんが、レイアウトの崩れがなくなった代わりに、印刷ではCSS3が表現されなくなりました。

というか、印刷プレビューを開くとスクリプトエラーが・・・（でも出ない場合もある、この差がわからない・・・）※beta4でこの問題点は改善されました。

それでもレイアウトが崩れない分、beta3の方が使えそうなので、当ブログのPIEはこちらに差し替えました。

ついでにbeta2の印刷時のレイアウト崩れがどれくらいひどかったかというと、こちら

• PIE version1.0 beta2の場合のサンプル
• PIE version1.0 beta3の場合のサンプル

上記のサンプル画面で印刷プレビューを見てみてください。

PIEのダウンロードはこちらから

「IEでもCSS3　その２（PIE）」で「Multiple background images」のやり方がわからないと書いたのですが、ようやくやり方がわかりました。サンプル

PIEにて「Multiple background images」を実行させる方法は以下の通りです。

.multiple_box{
background-color:#FFFFFF;
width:640px;
height:480px;

/*Firefox等用*/
background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

/*PIE用*/
-pie-background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

behavior: url(PIE.htc);
}

「background」ではなく「-pie-background」と記述しなければならなかったわけです。

グラデーションの記述方法にヒントがあったのに、今の今まで気づかなかったのは我ながらアホとしか言いようがありませんが、とりあえず解決！

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

先日ノートパソコンが手に入り、それのOSがwindows7だったので早速IE9ベータ版をダウンロードしてインストールしてみました。

IE9ベータ版のダウンロードページ

で、CSS3の動作をチェックしてみたのですが、以下がその結果画像です。

実際にIE9ベータ版をインストールしている方はこちら：サンプル

見事にIE9ではCSS3に対応していますね～

ただし！対応しているのは

• 角丸
• ドロップシャドウ
• マルチプルバックグラウンドイメージ

のみで、以下のスタイルには対応できていません。

• グラデーション
• ボーダーイメージ
• テキストシャドウ

単に記述方法が違うだけかもしれませんが。

ともあれ、まだまだベータ版ということなので今後に期待します。

複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。

例）

<div class="box_outer">
    <div class="box">
        PIEではIEでも<br />
       角丸・ドロップシャドウ・グラデーションを<br />
       実行できます。
   </div>
 </div>

この要素の各スタイルは以下の通り

.box_outer{
   padding:20px;
   background-color:#FFF;
}
 
.box {
   padding:20px;
   background-color:#EEE;
   border:solid 1px #000;
  
   /*角丸*/
   -moz-border-radius: 15px; /*FireFox*/
   -webkit-border-radius: 15px; /* Safari and Chrome */
   border-radius: 15px; /* Opera 10.5+, IE */
  
  
   behavior: url(PIE.htc);
}

これを実行すると、以下のようになります。

サンプル

サンプルをFireFoxなどで見ていただければわかると思いますが、白い部分の中に灰色の角丸ブロックが表示されます。

しかしIEでみると角丸にならないどころか、background-colorの設定が無効になってしまっています。

どうやら外のタグでbackground-colorを設定するとこのようにバグるようです。（他にも原因なるかもしれませんが）

解決方法としては、角丸にするタグのスタイルで「position:relative;」を設定してください。

.box_outer{
   padding:20px;
   background-color:#FFF;
}
 
.box {
   padding:20px;
   background-color:#EEE;
   border:solid 1px #000;
   position:relative;
  
   /*角丸*/
   -moz-border-radius: 15px; /*FireFox*/
   -webkit-border-radius: 15px; /* Safari and Chrome */
   border-radius: 15px; /* Opera 10.5+, IE */
  
  
   behavior: url(PIE.htc);
}

これでとりあえず解決するようです。

サンプル

今回の方法では、ドロップシャドウ・テキストシャドウができます。

「css3shadow」を利用する方法。（参考サイト：ppBlogさんのサイト）

css3shadowでできるCSS3機能は以下のとおりです。

• -moz-box-shadow または -webkit-box-shadow ： ドロップシャドウ
• text-shadow ： テキストシャドウ

css3shadowのIE用ドロップシャドウでは「box-shadow」ではなく、「-moz-box-shadow」または「-webkit-box-shadow」で記述します。もちろん両方書いていても大丈夫です。

手順

１．まずはこちらのサイトから「css3shadow」をダウンロードしてください。（リンク先の下のほうにある「添付ファイル：css3shadow.htc」をクリックしてください。）

２．htmlファイルに以下を記述し、「css3shadow.htc」を呼び出してください。（css3shadowではbehaviorで呼び出しても有効になりません）

<!--[if IE]>
<script type="text/javascript" src="css3shadow.htc"></script>
<![endif]-->

３．スタイルシートを設定してください。なお、css3shadowではinsetによる内部シャドウが使用できます。
（ie-css3とPIEでは現在確認したところ、できませんでした）
通常のドロップシャドウにする場合はこの「inset」を削除してください。

.box{
padding:20px;
background-color:#FFF;
border: solid 10px #999;
width: 500px;
  
font: 18px Arial; color: #555;
-moz-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
-webkit-box-shadow: inset 0px 0px 12px rgba(10, 10, 10, 0.95);
text-shadow: 0px 2px 3px rgba(10, 30, 100, 0.3);
}

４．スタイルは、ドロップシャドウ・テキストシャドウともにclass「box」という名前にしていますので、body内にそれぞれを含んだタグを記述してください。（以下例）

<div class="box">
<p>「css3shadow」では、insetによる内部シャドウが使用できます。</p>
<p>「css3shadow.htc」を呼び出す場合は、behaviorではなく、scriptタグで呼び出してください。</p>
</div>

これで、IEでも対応できるようになります。

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

※サンプルではinsetによる内部シャドウを使用しています。

注意事項

シャドウを設定しているクラスで「text-align:center;」を使うと、「こちら」のようにとんでもない結果になります。使う場合はそのクラスの中にもうひとつタグを入れてそちらで「text-align:center;」を使ってください。

上記の問題、ご対応いただけたようです。製作者様ありがとうございました^^

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

ppBlog ： 該当記事「IEでCSS3のドロップシャドウを使いたい」

今回は、角丸・ドロップシャドウ・グラデーションを行います。

※印刷にて重大なバグあり。使用にはご注意を！

※印刷バグは「version1.0 beta4」においてある程度解消されましたが、その代わり、印刷においてPIEは実行されません。（試しに当サイトをIEで印刷プレビューをご覧ください。角丸の効果がなくなっています。）

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

PIEでできるCSS3機能は以下のとおりです。

• border-radius：角丸
• box-shadow：ドロップシャドウ
• linear-gradient：グラデーション
• border-image：ボーダー画像
• multiple background images：１つのクラス・IDに複数の画像を設定

※「ボーダー画像」について、あまりピンとこない方はこちらのサイトをご参照ください。非常にわかりやすく説明されています。 「PXT255;さん」のサイト

手順

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

２．次にスタイルにて、各設定を行います。（今回ははじめからbehavior: url(PIE.htc);を入力しておきます。）

.box {

padding:10px;

/*角丸*/
-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 */

/*グラデーション*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#999999));
background: -moz-linear-gradient(#FFFFFF, #999999);
-pie-background: linear-gradient(#FFFFFF, #999999);

behavior: url(PIE.htc);
}

/*border-image*/
.bi_text{

padding:10px;

border: 1px solid #a3a3a2;
-moz-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
-webkit-border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;
border-image: url(img/scotch-tape.png) 2 8 2 8 / 2px 8px 2px 5px;

behavior: url(PIE.htc);
}

/*Multiple background images*/
.multiple_box{

width:600px;
height:400px;

/*Firefox等用*/
background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

/*PIE用*/
-pie-background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

behavior: url(PIE.htc);
}

※2010/11/09 : PIE用のMultiple background imagesの記述を追記しました。

各クラスの最後に、１．でダウンロードした「behavior: url("PIE.htcへのパス");」を記述するのを忘れないよう注意してください。

※なおグラデーションは、Firefoxの場合3.6以上でないと表示されませんのでご注意ください。

３．スタイルの設定は

• 「角丸」「ドロップシャドウ」「グラデーション」はclass「box」
• 「border-image」はclass「bi_text」
• 「Multiple background images」はclass「multiple_box」

というclass名にしていますので、body内にそれぞれを含んだタグを記述してください。（以下例）

<h2>border-radius/box-shadow/linear-gradient</h2>
<div class="box">角丸とドロップシャドウ、グラデーション</div>

<h2>border-image</h2>
<p class="bi_text">border-imageとはボーダーに画像を適応させるもの</p>

<h2>multiple background images</h2>
<div class="multiple_box"></div>

これで、IE8でも対応できるようになります。

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

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

※サンプルの「border-image」の背景に使用している画像「scotch-tape.png」は「2xup.org blog」さんのサイトから借用しました。正常に表示されればなかなかかっこいい背景になります。

と言いたいところなんですが、「border-image」と「multiple background images」（※１）はなぜか、IEで正常に動作しませんでした。できるはずなんですけどねぇ・・・;

こちらについてはもうしばらく調べてみます。

• PIEバグレポートを追加しました。（上記の件ではありませんが・・・）
• （※１）multiple background imagesのやり方、わかりました！

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

• コリス ： 該当記事「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」
• 2xup.org ： 該当記事「border-image を利用したボックスデザイン」
• PXT255; ： 該当記事「【CSS3】 border-image を試してみた。」

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」