PNG ちょっと裏技 (4)

Windows版 IE 5以降の VMLレンダラで
半透明、透過PNGを表示する

　どうしたら Windows IE5で半透明透過や、アルファチャネルPNGを透過させる事ができるのだろう？

　Operaや、Netscape 6/Mozillaや、Safari、Mac IE 5は、PNGを完全にサポートしているのに、最新の Internet Explorer 6 for Windows は、見かけ上 PNGを完全サポートしていません。

　しかし、IMG要素(タグ)の変わりにとある方法(VML)で表示させることも可能です。

　背景に表示する方法は、別ページのVMLレンダラで半透明、透過PNGを背景表示するをご覧ください。

　今から行う方法は、W3Cに深い人にとっては邪道かな？と思いますが、Win IEしか使用しないユーザーに、PNGの半透明を見てもらえる様にする為には、一つの選択肢となるでしょう。

　解説は、まず下の画像を見た後で...。

24Bit + Alpha-Chanel PNG (11.4KB)

8Bit Index-Palette PNG (5.11KB)

24Bit + Transparent PNG (9.7KB)

PNG 裏技(3)で使われた、24ビットPNGに透過(tRNS)指定した画像です。

Gray256 + Alpha-Chanel PNG (13.5KB)

8ビットグレースケールPNGに、アルファチャネルを追加しています。

　....何だこれは ? 新手のHTMLかな ?

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<!--[if gte vml 1]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<![endif]-->
<title></title>
</head>
<body>
<p>
<!--[if !gte vml 1]><!--><img src="*.png" width="*" height="*" alt="*" /><!--<![endif]-->
<!--[if gte vml 1]><v:image src="*.png" style="width: *px; height: *px; behavior: url(#default#vml)" alt="*" /><![endif]-->
</p>
</body>
</html>

このページでは、Windows版 MS IE 5以降で追加された特殊なコメント期間である Conditional Comments (英語情報)を使用して、VML対応ブラウザとその他のブラウザとの表示区分処理を行っています。

いわゆるVMLサポートしない Windows版 IE 5.0以降の場合、IMGタグ(要素)が、有効になります。

　このページの情報に関するご意見、ご質問等がありましたら掲示板までどうぞ。

追加情報

IE 5.0 及び、IE 5.5の VMLサポートについて (2002.12.8)

　IE 6 付属の vgx.dll(6.00.2800.1106)では、正しいPNG表示となります。

　IE 5 及び 5.5 (5.50.4133.200)の vgx.dll(Microsoft Vector Graphics Rendering(VML))は、Beta バージョンですから半透明系は、以下の画像の様に擬似半透明表示(ディザリング)されます。 (元絵 : 24Bit+アルファ)

IE 6.0での VMLの挙動について (2004.07.10)

　IE 6.0 の標準準拠モード VML要素を動作させる場合は、スタイルでブロック要素として明示するか、floatで廻りこみを指定する必要が有ります。

　そのような対策を取らなかった場合、単なる空領域(スペーサー)となって画像が見えません。
　IE 6.0のVMLレンダラでのボックスモデル計算法でのブラウザ互換性を取っていない事によって起きるバグな感じです...。

履歴

初版: 02.10.13: 初公開
ニ版: 02.11.26: 他の(古い)ブラウザで styleシート指定等で問題を起す可能性が有るので念のために  のゲートマークで囲んだ。(IE 5以降以外は、通常コメントとなる)
三版: 02.12.8: 　IE 5.0及び、5.5の実験情報を追加透過PNGをディザ表示するなんて無理矢理だ...。無いよりは、良いか...。
四版: 03.04.30: 　XHTMLに準拠するために  コメントマークで、XML:NAMESPACE区間(xml:namespace)を全て囲んだ。
五版: 03.07.12: 　VMLに未対応な Win IE 5-6時に、IMG要素を有効にするハック・コメントマークを追加しました。
<img src="*.png" ... />

このページのブラウザテスト解析
ブラウザ名	バージョン	結果/期待?	実験済みか?
MS Internet Exploer (Win)	6.0	VML で透過する	o
	5.5	VML でディザリング透過する	o
	5.01	VML でディザリング透過する	o
	4.01	IMG で表示する	o
Netscape (Win)	7.0	IMG で表示する	o
	6.23
	6.01
	4.78
	4.04
Mozilla (Win)	1.7
	1.0
	m18
Opera (Win)	7.23
	7.02
	6.05

サイトナビ

VMLに関連するページ

IMG から、VML:IMAGE へ一括置換えする PNG Behavior (for VML Render)
MSDN Reference VML : How to Use VML on Web Pages (英語)
MSDN Online-VML : Image Element (英語)

Windows版 IE 5以降の VMLレンダラで半透明、透過PNGを表示する