Home > アールプリモ日誌 > 実験:GIFとPNG

実験:GIFとPNG

12
27
2010年

先月納品したウェブサイト用のアイコンが

実際のWEBページ上での見え方におかしい点があるのではないか?

というご指摘を受けていろいろと検証してみました。

最初から感づいていた点はウェブブラウザーでの見え方の違い、

とくに圧倒的多数の人が使用している

インターネットエクスプローラー(IE)の独自仕様、又はバグの問題があるのではないか、

という点です。

このウェブサイトで使用しているオープンソースのウェブシステム

WORDPRESSを使っていてもIEとファイヤーフォックスで

見え方に違いが大きかったりして困ったことがありますが

私の先輩方(歳は全然若いひとびとw)から

「IEはバグがありますからファイヤーフォックス(FF)で検証した方が良いです」

というご忠告を頂いたのでそれ以来
CSSのデザインの確認はまずは、FFで行い、その後IEで確認するということにしています。


WEBデザインというのはなかなか奥深いというか
(別な言い方だとメンドクサイとも言いますが)
難しい問題があって
見る人によって環境がバラバラなのです。

印刷物なら紙の上に定着してしまえば
あとはその「紙」を届ければ情報も漏れなく伝えられるのですが
ウェブデザインの場合は様々な環境
携帯、iPod、iPad、などの最新機器から
Windows95を使った古ーいPCまで…
すべての情報がきちんと伝わるように
様々な工夫をしなければなりません。
CSSを使ってHTMLを正規表現の核に設定し、
CSSの方をデザイン要素として
分離しているのもその中から生み出されてきたものなのでしょう。

【透過GIFの例】

【透過PNGの例】

今回のトラブルはIE6でのバグのようで
透過PNGがうまく透過されないということのようです。

それを回避するいわゆるCSSハックのようなものもあるようですが
こちらはあくまでも画像のみの納品だったのでこういう事態になったのでしょう。

ならば、

透過しなければ良いんでしょうね。

【透過しないPNG】

バックに白いオブジェクトを敷いているものです。
ただ、バックに色が来た場合にはこれは使えないですね。

…と画像を並べてみても
私の環境ではほぼ同じ画像が並ぶばかりなり。

タグ: css, Webデザイン, アールプリモの業務案内

関連する投稿

コメント数:0

コメントする
情報を保存しますか?

Trackbacks:0

Trackback URL for this entry
http://www.artprimo.net/2010/12/27/3883.html/trackback
リンクのないトラックバックは受信されません。
実験:GIFとPNG from アールプリモ 文京区白山印刷グラフィックデザイン

Home > アールプリモ日誌 > 実験:GIFとPNG

検索
Feeds
Meta
印刷のご用命はアールプリモへ

トップへ戻る