今回のイーピーセンターWEBサイトのリニューアルでは透過PNGを使ってます。
コーダーの皆さんご存知のように、HTMLってのは昔から角Rを含むデザインが煩雑。
透過PNGが出てきてから選択肢が広がった感はあったものの、IE6が透過PNGを実装してなくって、なかなか実装できなかった。
AjaxなどによってJavascriptが注目を浴びてきて、いくつか透過PNGに対するアプローチはあったんだけど、実際に使ってみると満足のいくものではなく、現実的ではなかった。
iepngfixってのが割と初期に出てきたアプローチで、ただのimgとかを適用させる場合はこれでもいけるんだけど、実際にちょっと入り組んだ配置とかpositionとか使い始めると色々ボロが出ちゃって微妙だったの。
あと、一番致命的だったのがその重さ。
詳しい事はわからんのだけど、AlphaImageLoader系は大きい画像使ったり、複数使うととにかく処理が重い。
実際に透過PNGを使いたいシチュエーションってのはもっと細かい事だったりする事も多いんだよね。
なので、必然的に量も増える。
ググると未だにAlphaImageLoader系の記事も多いけど、最近記事が増えてきたのがDD_belatedPNGってやつ。
今回実装しているのはこれ。
色々やってみた結果、ダメな要素はいくつかある。
・fix指定
・body要素に配置
・jsによるロールオーバー等のエフェクト
この辺がダメ。
それでもiepngfixよりも使える幅は全然広いし、ほとんど問題のない要素なので採用。
あとは軽い、ってのが一番ですね。
実際問題、自分のように「Javascriptはコピペレベルですー」ってな人にとっては詳しい技術解説なんかよりも、こういった「実戦レベルでどうなの？」って紹介で十分かなー、と。
まぁ、「解説して」って言われても出来ないんでしないですけど。
とりあえず透過PNG、DD_belatedPNGは実戦で使えるレベルだと思うのでオススメ。
細かいとこ自分で調整する必要があったり、組み方に今までと違うノウハウが必要だったりはするけど、こういう事に興味を持つ人ならば乗り越えられると思われ。
寧ろデザイナー側の方に、透過になる事によってどういったアイデアが使えるようになるか？みたいな発想力が必要かもね。この辺はもう紙レベルの知識しかないデザイナーでは厳しいし、WEBデザインする人もどういった事やったら面白くなるかを貪欲に追っかけて勉強してもらわないと技術が生かされないかと。
あ、とりあえず参考リンク貼りますね。
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/
コーダーの皆さんご存知のように、HTMLってのは昔から角Rを含むデザインが煩雑。
透過PNGが出てきてから選択肢が広がった感はあったものの、IE6が透過PNGを実装してなくって、なかなか実装できなかった。
AjaxなどによってJavascriptが注目を浴びてきて、いくつか透過PNGに対するアプローチはあったんだけど、実際に使ってみると満足のいくものではなく、現実的ではなかった。
iepngfixってのが割と初期に出てきたアプローチで、ただのimgとかを適用させる場合はこれでもいけるんだけど、実際にちょっと入り組んだ配置とかpositionとか使い始めると色々ボロが出ちゃって微妙だったの。
あと、一番致命的だったのがその重さ。
詳しい事はわからんのだけど、AlphaImageLoader系は大きい画像使ったり、複数使うととにかく処理が重い。
実際に透過PNGを使いたいシチュエーションってのはもっと細かい事だったりする事も多いんだよね。
なので、必然的に量も増える。
ググると未だにAlphaImageLoader系の記事も多いけど、最近記事が増えてきたのがDD_belatedPNGってやつ。
今回実装しているのはこれ。
色々やってみた結果、ダメな要素はいくつかある。
・fix指定
・body要素に配置
・jsによるロールオーバー等のエフェクト
この辺がダメ。
それでもiepngfixよりも使える幅は全然広いし、ほとんど問題のない要素なので採用。
あとは軽い、ってのが一番ですね。
実際問題、自分のように「Javascriptはコピペレベルですー」ってな人にとっては詳しい技術解説なんかよりも、こういった「実戦レベルでどうなの？」って紹介で十分かなー、と。
まぁ、「解説して」って言われても出来ないんでしないですけど。
とりあえず透過PNG、DD_belatedPNGは実戦で使えるレベルだと思うのでオススメ。
細かいとこ自分で調整する必要があったり、組み方に今までと違うノウハウが必要だったりはするけど、こういう事に興味を持つ人ならば乗り越えられると思われ。
寧ろデザイナー側の方に、透過になる事によってどういったアイデアが使えるようになるか？みたいな発想力が必要かもね。この辺はもう紙レベルの知識しかないデザイナーでは厳しいし、WEBデザインする人もどういった事やったら面白くなるかを貪欲に追っかけて勉強してもらわないと技術が生かされないかと。
あ、とりあえず参考リンク貼りますね。
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/
