1. PNGなら表現できる透け透け画像の種類

2. PNGを作ることができるソフトウェア

3. 注意事項

「2006年1月の時点でシェア8割」と人口に膾炙されているWindows Internet Explorer 6(WinIE6と略す)は、透過に関する表現を「不透明のグレー色」として描画する。

但し、IEの独自拡張であるAlphaImageLoader Filterを透過PNGに対して適用すれば、「不透明のグレー部分」を透過させることが出来る。フィルターの記述方法は検索サイトで探せば見つかると思うが、「どうしてもわからん」という人は、Angus Turnbull 氏が作られた『IE PNG Alpha Fix v1.0 RC4』というスクリプトを適用すれば比較的簡単に透過させることが出来るだろう。使用方法はこのページの最後を参照。

4. 蛇足

今回纏めてみて、『半透明』と『透過』の認識がごっちゃになっているなと再認識。また正直なところ、これらの分類方法に使用した用語が適切であるか定かでない。

アクセスログの検索キーワードから推察するならば、『半透明+透過』と『透過』に該当するものを、多くの人が『半透明』と呼んでいるのではないかと予想されるが、画像を作る側にしてみれば、『背景色が透過』と『レイヤーの不透明度が50%』とは全くの別物であり、WinIE6対策においては『透過GIFで代用する』のと『スタイルシートで"filter:alpha(style=0,opacity=任意の数値);"を指定する』という違いがある以上、『半透明』で一括りにするべきでは無いだろう。

5. （おまけ）PNGの作り方　Photoshop CS2の場合

1.不透明

1-1 作成時：背景レイヤーを表示。オブジェクトレイヤーの不透明度を1〜100％にする。

1-2 web用に保存時：PNG8又はPNG24、PNG32(Fireworks)にて保存。透明部分のチェックは外しておく。

上へ

2.半透明

2-1 作成時：背景レイヤーを表示。背景レイヤー、オブジェクトレイヤーの不透明度を変える。

2-2 web用に保存時：PNG24(FireworksならばPNG32)にて保存。透明部分にチェックを入れる。

上へ

3.透過

3-1 作成時：背景色を非表示。オブジェクトレイヤーの不透明度を100％にする。

3-2 web用に保存時：PNG8又はPNG24にて保存。透明部分にチェックを入れる

上へ

4.半透明+透過

4-1 作成時：背景レイヤーを非表示。オブジェクトレイヤーの不透明度を変える。

4-2 web用に保存時：PNG24(FireworksならばPNG32)にて保存。透明部分にチェックを入れる。

上へ

6.（おまけ2）Angus Turnbull 氏作の『IE PNG Alpha Fix v1.0 RC4』の使い方

1. iepngfix.htcとblank.gifを任意の階層へアップロードし、必要に応じてiepngfix.htcファイル内のパスを合わせる。パスを合わせるとは、blank.gifがアップロードされているディレクトリ名を追記してやること。

   if (typeof blankImg == 'undefined') var blankImg = 'ディレクトリ名/blank.gif';

2. スタイルシートに以下の記述を加える。必要に応じてパスを合わせる。ここでのパスはiepngfix.htcがアップロードされている場所。

   img, div { behavior: url(ディレクトリ名/iepngfix.htc) }

3. できあがり。WinIE6で見てみよう！

IE PNG Alpha Fix v1.0 RC4の比較

上へ

7. 参考

IE PNG Alpha Fix v1.0 RC4