検索結果: 大阪 ホームページ制作 Signature! - STUDY STYLE -

タグ「png対策」 の検索結果(1/1)

2009年11月 6日

IE6用透過png対策 DD_belatedPNG(背景画像リピート可)

WEBデザインをする上で非常に自由度を広げてくれるpng形式の画像。

jpgと違い、アルファチャンネルを利用した透明や半透明の表現を可能としているため、複雑な背景の上に切り抜き文字や画像を配置する場合や、半透明を活かしたレイヤーデザインなど飛躍的にデザイン、レイアウトの幅が広がります。

が、このpng、比較的新しい画像形式のため、IE6ではサポートされておらず透明部分がグレーになってしまいます(IE7以降、その他、firefoxなどのモダンブラウザでは問題ありません)。

まだまだ、最近の統計でもIE6のユーザーは全体の1~2割はいると思われるのでこれを無視するわけにもいきません。

そこで様々な「対IE6用のPNG対策」が用意されています。

様々な方法を探して使ってみましたが、使い勝手が良さそうだったのが

「DD_belatedPNG」
ダウンロード先↓
Drew Diller's blog

JAVASCRIPTファイルなのですが、特長としては
「背景の繰り返し(バックグラウンドリピート)に対応」
「指定が簡単」
「a要素のロールオーバーにも対応・・・ただしCSSでの指定に限る)」
なことです。

細かい使い方等は
ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点
に書いてくださっています。

ヘッダーに下記を読み込み。適応させたい「タグ」「クラス」「ID」を指定します。
下記でいうと「img」と「class=png_bg」に指定が効いています。

<!--[if IE 6]>
    <script src="○○○/DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('img, .png_bg');
    </script>
<![endif]-->
と非常に簡単。

その他でpng対策として手軽で優れているのが

「alphafilter.js」
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

です。

これもJAVASCRIPTファイルなのですが、特長としては
「指定が簡単。要素に(class="alphafilter")とつけるだけ」
「a要素のロールオーバーにも対応・・・ただしimg要素の置換指定に限る)」
「背景の繰り返しに未対応」
なことです。

ケース バイ ケースで使い分けですね。
ただ、alphafilter.jsのほうは、とあるサイト制作に使ったのですがa要素の挙動が若干不安定です。

で、これらが正しく動作するのかどうか?を調べるのに必須が

「multiple ie」
http://tredosoft.com/Multiple_IE

です。IE6がない環境下でも仮想でIE6を立ち上げて検証することができます。
ただし、このMultipleIEはVISTAでは動作しません。xpでないと立ち上がりません。

似た趣旨のソフトで「スタンドアローンIE6」がありますが、「png関連の検証」は仕様により、できません。あくまで「CSS関連の挙動を検証」する事しかできないようです。