いろいろ方法はあるようですが、
こじょblogでは DD_belatedPNG を使わせていただいています。
単にアルファチャンネル付き(半透明)のpng画像を表示できるだけでなく、
他の方法では対応できない背景画像への使用や、リピート配置も可能な点が素晴らしいです。
DD_belatedPNG は JavaScript なのですが、読み込んで実行するのはブラウザがIE6以下の場合だけでよいため、
それを振り分けるために、 IEの独自仕様である「条件付きコメント」も併用しています。
こじょblogでは DD_belatedPNG を使わせていただいています。
単にアルファチャンネル付き(半透明)のpng画像を表示できるだけでなく、
他の方法では対応できない背景画像への使用や、リピート配置も可能な点が素晴らしいです。
DD_belatedPNG は JavaScript なのですが、読み込んで実行するのはブラウザがIE6以下の場合だけでよいため、
それを振り分けるために、 IEの独自仕様である「条件付きコメント」も併用しています。
条件付きコメントについては、
All About に詳しい説明があります。
All About に詳しい説明があります。
具体的な使用方法は簡単で、こじょblogの例では、
透過png画像を使用した要素の class 属性に iepngfix を設定してあり、
html のヘッダ部分(<head> ~ </head>)に
「条件付きコメント」(<!--[if lte IE 6]> ~ <![endif]-->)は IE以外のブラウザではただのコメントと解釈されるので実行されず、IE6以下の場合のみ、DD_belatedPNG が読み込まれて、class 属性が iepngfix の要素に適用されます。
うーん、スマート!
尚、「$(document).ready(function(){ ~ })」という書き方は、
これは、独学WEBデザイナーの覚書 さんが書かれている DD_belatedPNG のバグ(?)
こじょの環境では、100% で再現しましたが、この処置で回避できました(;´Д`)
jQuery を使わない場合は</body>タグの直前で実行するとよいかも知れません。
透過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>タグの直前で実行するとよいかも知れません。

ゲームと Web と PC 全般同カテゴリの前後記事
Commentあなたのコメントをぜひ書き残してください!
だめでざいな。
>pngを背景に使用してposition:relativeにすると
背景が30%ぐらいの確率で表示されない
上記の件、こちらの記事の方法で直ったです!
ありがとおおおおおおおゴザイマス!
グーグルマップのような読み込みの遅い物があると、
読み込み終わるまで処理されませんが、
まぁie6使ってるの5%以下なんで…って納品してしまうま('A`)
背景が30%ぐらいの確率で表示されない
上記の件、こちらの記事の方法で直ったです!
ありがとおおおおおおおゴザイマス!
グーグルマップのような読み込みの遅い物があると、
読み込み終わるまで処理されませんが、
まぁie6使ってるの5%以下なんで…って納品してしまうま('A`)
2011/05/24 Tue 16:55
Trackback あなたのウェブページをリンク!
Trackback URL |