>

IE-winで透過PNGを利用する方法

  • 2010年2月20日

via IE-winで透過PNGを利用する方法

バージョン6までのIEはPNGのアルファチャンネル(半透明)に対応していないので、普通に使うと透過部分が灰色っぽくなり、期待はずれな結果に終わる。IE6でも透過PNGを表示するには、次のように記述する。

  1. #overlay {
  2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
  3. }

これは「AlphaImageLoader Filter」という指定。元は「要素」と「要素の背景」の間に画像を配置する指定で、IEの独自拡張。Direct Xで実現してます。画像にアルファチャンネル(透過度情報を保存するデータ領域)が設定してある場合、これを有効にします。

ただ、このままだとIE以外だと画像が表示されません。実際使うなら、以下のように指定すると良いでしょう。

  1. #overlay {
  2. background: transparent url(./overlay.png) no-repeat left top !important;
  3. background: none;
  4. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./overlay.png", sizingMethod="scale");
  5. }

まず普通にPNG画像を背景画像として指定。次にIEで解除。そしてIE用にPNG画像を指定する。このようにすればIEでも、その他のモダンブラウザでも、概ね同じように「overlay.png」が表示されます。

memo: IE6-win以下は、同一プロパティ内の!important指定に問題があり、常に後に書いたほうが優先される。

Data

属性 説明
enabled フィルターの有効、無効を指定します。
1(true)で有効、0(false)で無効。デフォルト値は1
sizingMethod 画像の貼り付け方を指定します。
cropはそのまま。imageは要素を画像の大きさに合わせ、scaleは要素の大きさに合わせて画像を拡大(縮小)します。デフォルト値はimage
src 画像のURLを指定します。
デフォルト値は無し。

「AlphaImageLoader」が有効なのは、IE5.5からです。IE5.01や、それ以前のレガシーブラウザに配慮する必要はあります。

あと、「AlphaImageLoader」を指定した要素が<a>タグを含む場合は注意しましょう。リンク領域がクリックできなくなる可能性があります。解決の鍵は「position: relative;」と「z-index」。たとえばAlphaImageLoderを指定した要素の内側に<div>でも作って指定してやれば良いでしょう。ただ残念ながら、全ての状況で有効な訳ではありません。隣り合い、重なり合うレイヤに対していろいろ試してみましょう。

おまけ_1 (2007.02.14)

いちおこういう方法もある。

  1. #wrap {
  2. background-color: #fff;
  3. filter:alpha(opacity=80);
  4. -moz-opacity: 0.8;
  5. opacity: 0.8;
  6. }

3行目がIE。4行目がMozilla系。5行目がモダンブラウザ用。
注意すべきなのは、要素の背景っていうか要素自体を透明化する点。使いどころが難しいけど、単色の透明度調節なら(画像を用意しなくても良い分)管理も更新も楽です。

参照: QuirksMode, CSS/Declarations/opacity

おまけ_2 (2007.03.30)

ここまでは背景画像に透過PNGを使う方法だったけど、HTML上に透過PNG画像を直接置きたい場合は、PNG Behaviorを利用してみてはどうでしょう?

PNG Behaviorは、AlphaImageLoaderとHTCファイルを利用して(IEで)透過PNG画像を使うスクリプト。流れとしては、以下みたいな感じ。

  1. 画像のsrc属性から「.png」を検出
  2. src属性を透過gifのものに置き換える
  3. PNG画像のパスでAlphaImageLoaderを適用

実装は.htcファイルをアップロードし、CSSに一行追加するだけです。

  1. img {
  2. behavior: url("pngbehavior.htc");
  3. }

behaviorはIE 5.0からサポートされた機能で、HTMLやJavaScript等によって構成されるHTC(HTML Component)ファイルをHTML上で使用するプロパティです。このプロパティに対応しているのはIEのみなので、PNG BehaviorのスクリプトはIEにだけ読み込まれることになります。

cssハック

  • 2010年2月20日

CSSハック一覧(via CSSハック一覧:HTML│CSSタグ辞書

IE6以下用

スターハック

* html #hack { color:#000000; }
対応ブラウザ:IE4~6、MacIE4~5

セレクタの前に【* html 】をつける。

アンダースコアハック

#hack { _color:#000000; }
対応ブラウザ:IE4~6

プロパティの前に【_】アンダースコアをつける。

IE7用

*:first-child+html #hack { color:#000000; }
対応ブラウザ:IE7

セレクタの前に【*:first-child+html】をつける。

IE6、IE7用

#hack { /color:#000000; }
対応ブラウザ:IE6、IE7

プロパティの前に【/】をつける。

IE6のみ除外

#hack { color /**/:#000000; }
対応ブラウザ:IE7、IE8、Firefox、Safari、Opera、Chrome

プロパティの後ろに【/**/】をつける。

Firefox用

#hack { color:#000000; }
#hack, x:-moz-any-link { color:#333333; /* Fx 1.0 以降に適用される */}
#hack, x:-moz-read-only { color:#666666; /* Fx 1.5, 2.0 以降に適用される */}
#hack, x:-moz-broken { color:#999999; /* Fx 3.0 以降に適用される */}
#hack, x:x{ color:#000000; }
対応ブラウザ:Firefox

「グループ化されたセレクタの中に、対応していないものがあるとすべてが無効化される」という性質を利用したハックです。 一番最後の指定(x:x)では、一部ブラウザが未対応セレクタが含まれているグループを無視しないことがあるため、一番最初のデフォルト指定と同じ指定をします。

参考サイト:「Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット」
http://www.yomotsu.net/lab/css/csshack_firefox

IE7以外のモダンブラウザ用

html>/**/body #hack { color:#000000; }
対応ブラウザ:Firefox、Safari、Opera、Chrome、IE8

セレクタの前に【html>/**/body】をつける。

html[xmlns] #hack { color:#000000; }
対応ブラウザ:Firefox、Safari、Opera、Chrome、IE8

セレクタの前に【html[xmlns]】をつける。

Safari3用

body:first-of-type #hack { color:#000000; }
対応ブラウザ:Safari3

セレクタの前に【body:first-of-type】をつける。

Safari2用

/* hogehoge \*/
html:\66irst-child #hack { color:#000000; }
対応ブラウザ:Safari2

【/* hogehoge \*/】でコメントアウトをした後、セレクタの前に【html:\66irst-child】をつける。

XHTML側の指定(条件分岐コメント)


IEの特定のバージョンにのみ、そのCSSを適用させることができる。
↑は、「IE7未満(IE5~6)にだけ外部CSSを読み込ませる」という指定。

clearfix

.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
} /*IE7以外のモダンブラウザ向け*/

.clearfix{display:inline-block;} /*IE7およびMacIE5向け*/

/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/ /*IE6以前向け*/
もはや説明不要な「clearfix」。 使わないでもなんとかなりますが、便利なことには変わりない。

リンク

  • 2007年9月16日

文脈セレクタ

  • 2007年9月16日

CSS1 では文脈セレクタは要素の木構造に対して先祖、子孫

全称セレクタであるワイルドカード * (アスタリスク)

div * p { font-size: 10.5pt }

* 前後の半角スペースに注意

子供セレクタ

子要素だけを指定したい場合、「大なり」不等号記号

IEはだめ。

隣接セレクタ

或る要素の共通の子要素であり、且つ相前後して隣接する要素にマッチ

h1 + h2 { margin-top: -5mm }

height100%のボックス

  • 2007年9月16日
  • コメント(0)
  • トラックバック(0)

イメージ無しのblockquoteで引用を表示するCSSサンプル

  • 2006年11月27日

イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザイン BLOG:より。

blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。

WEBデザイン BLOG」は恥ずかしながら最近知ったのですが、内容もデザインも素晴らしいサイト。思いっきり影響受けました。

blockquoteに関しては僕も長い事悩んでいまして、最近A List Apart: A List ApartのCSSを参考に(……というかほとんどそのまま)利用する事に落ち着いたばかり。こちらはオーソドックスに画像での処理。

一方紹介してくれているひとつは画像ではなく文字を<span></span>でくくる方法ですが、やはりちょっと美しくはないですよね。普通に、

<blockquote><p>引用文</p></blockquote>

で行きたい所。

CSS疑似要素要素(:beforeと:after)を利用するのがやはりいいのかな。IEでは適用されませんけれど、htmlソースをデザインのためにいじるのは最後の手段かなあと思います。インクルードしているヘッダやフッタなどはOKだと思いますけれどね。

カテゴリ