低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

IE5.5・IE6で半透明PNGを使いこなす

IE5.5・IE6が半透明PNGに対応してないために、半透明を使用したデザインのコーディングを諦める(または妥協)という苦い経験をしたことはないでしょうか。
そんな人のため(私のためでもありますが・・・)に、IE5.5・IE6で半透明PNGを使う方法をまとめました。
半透明PNGの使い方を覚えて頼れるコーダーを目指しましょう。

※サンプルを確認するためにはIE6でご覧ください。

IE独自拡張のfilterを使う

サンプル(使用前)

不透明PNG

サンプル(使用後)

不透明PNG
◇良いところ
・Java Scriptを使わず手軽に使用できます。
◇悪いところ
・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。
・div などのタグで対象画像を囲うため、場合によっては無駄なタグを追加する羽目になります。
◇使用時の注意点
・対象画像の幅・高さをCSSプロパティの width と height で必ず指定しましょう。

◆サンプルを表示する
◆サンプルデータをダウンロードする

iepngfix.htcを使う

サンプル(使用前)

不透明PNG

サンプル(使用後)

不透明PNG
◇良いところ
・Java Scriptを使わず手軽に使用できます。
・HTMLソースに無駄なコードを書かずに使用できます。
◇悪いところ
・CSSで背景に指定したものには使えません。
・クリッカブルマップが使えません。
◇使用時の注意点
・不透明にならなかった場合は iepngfix.htc へのパスを確認しましょう(CSSではなくHTMLからのパスになります)。
・画像のリンク切れアイコンが表示されたら iepngfix.htc の15行目にある blank.gif へのパスを確認しましょう。

◆サンプルを表示する
◆iepngfix.htc をダウンロードする
※iepngfix.zip というリンクからダウンロードできます。サンプルも同封されているようです。

iepngfix.jsを使う(CSSの背景に対応できます!)

これまでの2点はCSSの背景に指定した不透明PNGには対応していませんでしたが、これを使うことで解決できます。

サンプル(使用前)

iepngfix.jsを使うことで背景も不透明PNGに対応できます。

サンプル(使用後)

iepngfix.jsを使うことで背景も不透明PNGに対応できます。

◇良いところ
・Java Script一つで動きます。
・HTMLソースに無駄なコードを書かずに使用できます。
◇悪いところ
・背景のリピートができない。
※背景を指定した要素の大きさに背景画像がフィットします。
◇使用時の注意点
・Java Scriptがオフだと機能しません。
・背景を指定した要素に画像の width と height を指定しましょう。

◆サンプルを表示する
◆iepngfix.js をダウンロードする

——

どれもクリッカブルマップが使えなかったり、Java Scriptがオフだと機能しなかったりと、完璧とはいえない部分があります。そのため、それぞれの良い点・悪い点を把握して状況に応じた使い方をしましょう。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ