コーディングメソドロジー

第10回 透過PNG対策

デザイン性の高いページをコーディングをする際、PNG画像に透過属性を設定する「透過PNG」の扱いに困ったことはありませんか?
透過PNGを使えば背景色や模様に左右されず自由に配置できるので、非常に便利な形式ではあるのですが、Internet Explorer 6.0では、PNG画像のアルファチャンネル※(透明度)に対応していないため、通常の方法では透過PNGを表示させることができません。かといって現在のIE6のシェア率を見る限り、表示推奨ブラウザから外してしまうのも現実的ではありません。
そんな、デザイナーとコーダーとの争いの火種(?)になりがちな、透過 PNG対策が今回のテーマです。

※アルファチャンネル:本来は「直接表示されない色のデータ」全般を指しますが、ここではWEBデザイン上問題になりやすい透明度についての話に限定しています。

デザインの流行とコーディング技術の新たなる戦い

透過PNGを使う際のソースコード例 A

透過PNGを使う際のソースコード例 A

左上からリピートで敷き詰めている背景と、ドロップシャドウがかかったコンテンツエリアの場合、ウインドウサイズによって重なる位置が異なるため、模様のある背景とドロップシャドウをまとめて1枚の画像として切り出すことができません。

iPhoneの流行あたりからでしょうか?最近、背景が透けて見える画像やドロップシャドウを使った透明感のあるデザインのコーディングをご依頼いただく機会が増えました。通常通りのコーディングであれば、透過している画像やドロップシャドウは気にせず、背景ごと切り出せば何も問題はありません。


しかし、ページ全体が可変する場合、コンテンツエリアがどんな位置にあっても、きれいに背景と重なるようにしなければなりません。それを実現するために、透過PNGを使う必要がでてくるのです。


たとえば、模様のある背景の上にドロップシャドウがかかるようなデザインの場合、ほとんどのモダンブラウザでは、ソースコードAのように、単純に背景と透過PNGを重ねるだけできれいに表示できます。しかしIE6では透明度を認識せず、透過すべき部分が表示されなかったり、グレーになったりします。

マイクロソフトの独自仕様にも対応

これを解決するためにマイクロソフト社から提示されている対策が、DirectXのAlphaImageLoaderを使って表示させるというものです。
「iepngfix」や「alphafilter」といったJavaScriptを利用し、IE6でも透過PNGを実現できるのです。

それだけでは解決しないおそるべし、透過PNGの罠

透過PNGを使う際のソースコード例 B

そのほかにも、透過PNGを使うと、予期しない挙動をすることがあります。たとえば、ソースコードBのように、サイト全体にline-height(例の場合は18px相当)を指定していることは多いですが、高さがそれ未満の小さい透過PNG画像の場合、IE6では、そのline-height分まで画像の高さを勝手に引き伸ばしてしまいます。


このような「文法的には正しいのに、ブラウザに正しく表示されない」という問題を1つ1つ解決していくことが、コーディングの苦労でもあり、逆に、コーダーの腕のみせどころ・醍醐味にもなっています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム