IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
[IE][CSS]IEで透過PNGを扱う為のまとめ | 技術雑記
透過PNG と IE と IE7 まとめ IE6以前では透過PNG（背景部分が透けてるPNG）の扱いが不適切なままでおかしな画像になります。 IE7ではある程度直ってるみたいですが。 ソレを回避する為のテクニックが色々ネット上に散らばってたので、まとめて見ました。 まぁいまさらな感はありますが、自分がWebサービスの開発中にこの問題に今頃直面したってことで（^^） ポイントはIE6のフィルタ機能のAlphaImageLoaderという機能を使うようです。 IEと透過PNG http://amenti.usamimi.info/ie6png.html こちらは色々なパターンでAlphaImageLoaderの使い方がのってます。 ただソースの書き方に一工夫がいるのでこのサイトの方法だと既存のサイトに適用するのは少々手直しがいるので手間が要りそうです。 ウノウラボ Unoh Labs: IE6
![[IE][CSS]IEで透過PNGを扱う為のまとめ | 技術雑記](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3e2b8417b06f5eecc47c2291e3afbee04a4454b/height=288;version=1;width=512/http%3A%2F%2Fmozshot.nemui.org%2Fshot%3Fhttp%3A%2F%2Fblog.l-xs.com%2Fyungsang%2F2007%2F02%2Fpng_ie_ie7.html)
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
透過PNGをIE6以下のバージョンで綺麗に表示する方法 - DesignWalker
lllcolor.com
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
