きまぐれ事典

ウェブデザイナーがあれこれきまぐれにつづる日々のくらしの百科事典。

透明になる薬

Posted on | 2008年 1月 14日 | Permalink

【透明】
(1)物体が光をよく通し、その物を通して向こうが見える・こと(さま)。
(2)にごりがなく、すきとおっていること。また、そのさま。澄明。
——————————————————————

ちょっと困った事態が発生しました。が、なんとかクリアしました(?)

少し受けれる仕事を増やそうと、ただいまとある実験中。それで現在、仕事の合間を縫ってプライベートなサイトをちまちま作ったりしているのです。仕事の空き時間を利用して…という割には、意外と凝ったデザインになってしまったかもしれませんが。

Fireworksでレイアウトして、せっせとパーツをスライス。それぞれの素材に最適な形式で画像ファイルを書き出すのですが、今回はちょっと部分的に透過PNGを採用してみることにしたのですね。PNG32という形式で書き出すと、多少サイズは重いけれど、透明も表示できる上、非常にきれいなパーツを書き出せるのです。

ところが、コーディングも大概終わり、各ブラウザでテストをさせてる段階で致命的な問題に遭遇しました。なんとWindowsのIE6でPNGが透過しない!透過してくれるはずの部分が白っぽい一色に表示。これじゃデザインがめちゃくちゃです。現在一番大きいシェアのブラウザだけに痛い問題です。その他のほとんどのモダンブラウザでは問題なく表示できるのにー。ホント毎回IEには泣かされてます(涙)。

ところがところが、放心状態でPNGについて調べていると、なんと解決方法がいくつかあるらしいのです。私が試した方法は「alphafilter.js」というJava Scriptのライブラリを使用する方法。詳細は割愛しますが、なんと奇跡的にIE6のPNGが透過しました!Java Scriptを読み込むのにワンテンポかかるのですが、きちんとデザインに忠実に表示してくれます!ありがたや?!開発者に感謝感激雨あられでございます。

関連する(かもしれない)記事

コメント

2 コメント - “透明になる薬”

  1. N@LI
    2008年 1月 15日 @ 13:06

    TACAさん、また進化しようとしてるぅ?!!!
    うまくいった時の感動といったらないよね!
    問題点を解決する人達って、ハッキリ言って天才だよね。
    私も天才方のお世話になりっぱなしでございます。

  2. TACA
    2008年 1月 15日 @ 15:47

    >N@LIさん
    ウェブの世界は進歩がめまぐるしいですからね。
    少しでも学んで付いて行かないとヤバそうです。
    最近はウェブ上に解決策がたくさん公開されていて
    ほんとありがたい時代ですよね。
    インターネット無しには生きられない。
    NO LIFE NO WEB.だわ。

コメントをする





CAPTCHA


書いてる人

taca

taca。1978年生まれのB型。ウェブ制作のお仕事をしています。MacユーザーでiPhoneユーザー。写真を撮るのが好き。BBQをこよなく愛しますが、やむを得ない場合はホットプレートでの焼肉でも可。[profile...]

Instagram

リンク

PAGE TOP