詳細な使用法と注意点を追加エントリーしました。6)ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。・CSSでfloatしたブロックのmarginが倍になる。・後方互換モードの場合、text-alignが子要素にまで影響する。・透過png画像が透過されない。上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。いくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。有名なIE6透過png対応策1.AlphaImageLoaderこれはJavaScriptを使わず、CSSだけで対応させる場合に有効な方法です。JavaScriptはどうしても使いたくなかったり、CSS以外いじれない状況の場合は、この方法がベストかもしれません。IE6には透過png表示の為に、独自のCSSフィルターとして「AlphaImageLoader」というものがあります。これはDirectXを使用して、背景と画像の間に画像を配置する事で透過を再現するというものです。この「AlphaImageLoader」フィルターをpng画像に適用することで、他ブラウザと同様に透過png画像を表示させます。ある意味、最も仕様に忠実な対応方法ですが、使い勝手や汎用性を考えるとあまりオススはできません。詳しい使い方を紹介しているサイト:Amentiウノウラボウェブネタブログこの方法の特徴:描画処理が遅くメモリも大きく消費するので、ページ全体が重くなる。ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる。IE6のみに適応させるためのCSSハックが必要。適応させたい箇所に、都度記述しなければならない。背景にリピート描画(background:repeat)ができない。2.iepngfix.js導入や使用に関する情報も多数あり、さまざまなサイトで使用されている実績も持つ、IE6透過png対応策の王道ともいえるこの方法。原理としては、前述の「AlphaImageLoader」を、JavaScriptを用いて必要箇所に適応させるものです。詳しく書くと、AlphaImageLoaderフィルターを使用した「iepngfix.htc」というスクリプトを、JavaScriptを用いて使用するものになります。AlphaImageLoaderフィルターを直接使用する際の欠点、「ブロック要素の背景画像に使用すると、そのブロック内のリンクが機能しなくなる」という部分を補い、JavaScriptとして独立しているため、新規サイト制作時にも流用できるというスグレモノ。CREATIVEこの方法の特徴:AlphaImageLoaderフィルターを使用するので、描画処理自体は遅く、メモリも大きく消費する。AlphaImageLoaderフィルター使用時の致命的バグである「適応ブロック内のリンクが機能しない」問題を回避できる。導入が簡単なうえ、解説サイトなども多数ある。CSSに都度フィルターを適応させるカタチではないので、既存サイトにIE6透過png対応をする時にも導入が容易。背景にリピート描画(background:repeat)ができない。3.ie7.jsこちらは今後主流になっていきそうな薫香プンプンの方法です。このJavaScriptを導入し、pngの画像名を「○○-trans.png」とするだけで、IE6でも綺麗に透過されます。このスクリプトは透過pngの対応をはじめ、前述のIE6独自のCSS諸問題を解決するためのもので、いうなれば「IE6がマトモになるように改造しちゃうぉ☆」というコンセプトのスクリプトです。CSSなどでIE6対応ハックを使用している場合、このスクリプトが影響してしまい、表示がおかしくなる場合があります。hourTPLH.netこの方法の特徴:画像名を「○○-trans.png」とするだけで対応できるので、導入がとても簡単。透過png問題だけじゃなく、CSSのバグにも対応しているので、新規サイト制作時には利便性が高い。AJAXやiframeでページ内にこのスクリプトを使用したページを読み込むと、たまにIEごと落ちる。やっはり背景にリピート描画(background:repeat)ができない。その他の透過png対応策これら以外にもたくさんの透過png対応策があります。ここからはいくつか箇条書き系形式で紹介します。Alpha配布先・制作者様のサイト:TwinHelix詳しい使い方を紹介しているサイト:チバのブログちぷろぐアイビーネットblogこの方法の特徴:背景のリピート描画(background:repeat)に対応(ただし当方の環境だと、異常に重かったです)。ライセンスがLGPLと明記されているので、使い方によっては少し勝手が悪い。DevelopRapidWeaverで簡単HP作成この方法の特徴:JavaScriptの容量が約2kbと、とても軽い。背景にpng画像を指定できない。Library詳しい使い方を紹介しているサイト:tenkaoのはてなダ...メモこの方法の特徴:jQueryを使用しているのが前提なので、そうでない場合は導入に手間がかかる。背景にリピート描画(background:repeat)ができない。上記の対応策は基本的にAlphaImageLoaderフィルターを使用しており、そのシステム上どうしても描画が重くなる。背景リピートに対応していなかったり、余計なファイルをいくつも用意しなければいけなかったりと、「IE6憎し」の感情ばかりが高ぶってしまう。belatedPNG.js」である(やっと本題にたどり着いた...)。これは前述の「AlphaImageLoader」ではなく、「VMC」というものを利用して透過png画像を描画するものである。belatedPNG.js」には存在しないのである。導入も簡単で、ライセンスもMIT。個人的にはこれで透過png問題の最終回答としました!7.DD_belatedPNG.js配布先・制作者様のサイト:DillerDesign詳しい使い方を紹介しているサイト:CSS-EBLOGUnderstandardYuki@エクスブリッジこの方法の特徴:描画処理がAlphaImageLoaderと比べて断然高速なので、ページをすぐに表示できる。背景にリピート描画(background:repeat)が可能。ブロック内の背景にpngを配置しても、ちゃんとリンクが機能する。これから新規サイトを制作する方も、既存のサイトに透過png対応策を導入する方も、ぜひこの「DD_belatedPNG.js」を検討してみてはいかがでしょーか。「DD_belatedPNG.js」の詳細な使用法と注意点を追加エントリーしました。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。