IE6で透過PNGを表示

PNG

  • Portable Network Graphic
  • 拡張子「.png」

透過PNG

透過PNG形式の画像は、重なり合ったレイアウトをするときには必須です。
しかし、IE6では「透過png画像が透過されない。」という不具合があります。
それさえ解決できれば、表現の幅が広がるので積極的に利用しましょう。
ただし、データー量は「JPEG」の1.5倍程度になるため、使いすぎには注意しましょう。

透過PNGの場合


PNG（ピング）の特徴
  • フルカラーにも8bitカラーにもすることができる
  • 圧縮率が高く同じ内容のGIF画像より10％〜30％程度ファイルサイズが小さくなる
  • 圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用しているため高画質
  • 複数の透過色を指定できる


PNGの短所
  • フルカラーにするとJPEGよりファイルサイズが大きくなる
  • アニメーションにできない
  • ブラウザ側の対応が完全ではない

html5.js と IE9.js

html5.js
  • Internet Explorer 8以前のように、HTML5の新要素に対応していないブラウザにも一部の新要素を対応させることがメインのJavascript
IE9.js
  • CSS3に対応していないInternet Explorerの5.5〜8にも一部のセレクタやプロパティを対応させることがメインのJavascript
  • HTML5の新要素に対応させる機能も実装されている
  • CSS3では、以下を実装可能にしている
  • 擬似クラスの対応
  • 属性セレクタの対応
  • 透過PNGの対応
  • position fixedの対応
  • margin autoの対応
  • max-heightやmin-heightの対応
条件コメント（Conditional Comments）


IE6のみに適用するCSSを読み込む

<!--[if lt IE 6]>
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->


現在利用されているJavaScriptによる透過PNG対策

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

IE6透過PNG対応策は「DD_belatedPNG.js」

※読み込んで使うだけなので、「mini」を選択します。

条件コメント
  • 「透過PNG」をIE6で表示させるために以下の「JSファイル」を利用します。
  • ダウンロードしたファイルを、「透過PNG」をIE6で表示させたいサイトの「js」フォルダーに入れておきます。


使用したいhtmlのhead部分に、下記のように記入します。

<!--[if IE 6]>
<script src="js/DD_belatedPNG.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->
  1. １行目と６行目の文で「IE6にだけ、このスクリプトを実行するよ」と宣言する
  2. ２行目の「js」は、DD_belatedPNG.jsを入れたフォルダのパスを記述する
  3. ４行目の '.png_bg' の部分に、DD_belatedPNG.jsを反映させる要素名やid名、クラス名を記述する


例では、「img」全体を設定していますが、「img.クラス名」で個別に設定することも可能です。
「.png_bg」は、背景に透過PNGを使用する画像につけるクラス名です。

  • DD_belatedPNG.jsを使用していて、Googlemapの表示場所がDD_belatedPNG.jsの指定範囲内だとGooglemapの表示がされません
  • 画像のある範囲を限定すれば問題ありません

IE Tester

IETesterは、IE5.5, IE6, IE7, IE8, IE9betaの確認が同時にできるアプリケーションです。

ダウンロード

新規テスト


検証したいファイルのアドレスを入力する。

Expression Web 4「SuperPreview」




MultipleIE

  • IE3〜IE6を一括インストール（IE6のためだけにインストールするのは現実的ではありません）