IE5.5/IE6で透過png画像を表示させる方法 new

いろいろ方法はあるようですが、
こじょblogでは DD_belatedPNG を使わせていただいています。

単にアルファチャンネル付き(半透明)のpng画像を表示できるだけでなく、
他の方法では対応できない背景画像への使用や、リピート配置も可能な点が素晴らしいです。

DD_belatedPNG は JavaScript なのですが、読み込んで実行するのはブラウザがIE6以下の場合だけでよいため、
それを振り分けるために、 IEの独自仕様である「条件付きコメント」も併用しています。
条件付きコメントについては、
All About に詳しい説明があります。
具体的な使用方法は簡単で、こじょblogの例では、
透過png画像を使用した要素の class 属性に iepngfix を設定してあり、
html のヘッダ部分(<head> ~ </head>)に
<!--[if lte IE 6]>
<script type="text/javascript" src="/DD_belatedPNG.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ DD_belatedPNG.fix('.iepngfix') });
</script>
<![endif]-->
と書いてあります。
「条件付きコメント」(<!--[if lte IE 6]> ~ <![endif]-->)は IE以外のブラウザではただのコメントと解釈されるので実行されず、IE6以下の場合のみ、DD_belatedPNG が読み込まれて、class 属性が iepngfix の要素に適用されます。
うーん、スマート!

尚、「$(document).ready(function(){ ~ })」という書き方は、

ブラウザ内部でページの構築が完了した時点で「~」部分の処理を実行する

という jQuery の機能です。

これは、独学WEBデザイナーの覚書 さんが書かれている DD_belatedPNG のバグ(?)
pngを背景に使用してposition:relativeにすると
背景が30%ぐらいの確率で表示されない
を回避するための処置です。
こじょの環境では、100% で再現しましたが、この処置で回避できました(;´Д`)
jQuery を使わない場合は</body>タグの直前で実行するとよいかも知れません。
この記事をツイツイする tweetSearch

Commentあなたのコメントをぜひ書き残してください!

だめでざいな。
>pngを背景に使用してposition:relativeにすると
背景が30%ぐらいの確率で表示されない

上記の件、こちらの記事の方法で直ったです!
ありがとおおおおおおおゴザイマス!

グーグルマップのような読み込みの遅い物があると、
読み込み終わるまで処理されませんが、
まぁie6使ってるの5%以下なんで…って納品してしまうま('A`)
2011/05/24 Tue 16:55
こじょ
コメントありがとうございます><
この世からIE6を消し去るスイッチとか ないですかねw
2011/05/28 Sat 13:58 [編集]
新しいコメント

※設定しておくとあとからコメントを編集できます
管理者にだけ表示を許可する
※公開されません

Trackback あなたのウェブページをリンク!

Trackback URL

© こじょらぼ all rights reserved.

旧 すぐへこたれるこじょblog

Guild Wars 2 © 2010-2014 ArenaNet, LLC. and NC Interactive, LLC. All rights reserved. Guild Wars, Guild Wars 2, ArenaNet, NCSOFT, the Interlocking NC Logo, and all associated logos and designs are trademarks or registered trademarks of NCSOFT Corporation. All other trademarks are the property of their respective owners.

Back to Top