FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ - EC studio デザインブログ
2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。 あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、 みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。 私は「みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜」というお題で プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。 今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。 ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。 PNGの書き出しは実はFireworksのほうが軽量！？ PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。 実はそのチャンクデータ
透過pngを表示する-CSS TIPS
透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。 IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります 記述するcssコード div.alpha{ width:100px; height:200px; background:url("alpha.png"); } * html div.alpha{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; } サンプル div.alphaの記述はすべてのブラウザに対して適応されます。 その後にスターハックを使用して透過pngをサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィ
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
IE PNG Fix Alpha 2を使ってみた。 | ちぷろぐ
透過をきれいに使ったウェブデザインいろいろ - DesignWalker ↑を見ていて、いいな！私も透過PNG使いたいな！と久しぶりにデザインがえを考えてます。 上のサイトの中でも特にSilverbackの画面の横幅を変えた時の葉の重なり具合が凄いキュートだと思って、こういうので何かできないかしら？と。 あんまり気付かれない感じの仕事なんだけど、なんかそこに萌えを感じます。 The portfolio of Bryan Katzelにいたっては、神業！！としか思えない！！ 頭良いなあ、考えた人！ で、こういうサイトの透過PNGを使った効果ははIE6以下ではちゃんと見えないのよね。 もったいない。 なのに、IE6のシェアはまだまだぶっちぎり1位なんよね。 そこで、リニューアルに向けての勉強がてら、IE6でも透過PNGを使えるようになる「IE PNG Fix」を試しに使ってみた。 一
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
