ホーム > タグ > css

css

実験:GIFとPNG

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

実際の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デザイン, アールプリモの業務案内

関連する投稿

FireFox

090801_1655~001

ウェブデザインにおいてややこしい問題に

Webブラウザの問題があります。

ウェブページを閲覧するソフトの種類が多く

それぞれ微妙な違いがあり

どのソフトでも同じように見せることが意外と難しい点です。

普段実はエクスプローラー6を使っているので

そろそろ古くなりつつあることを感じて

昨日FireFoxを入れてみたところ

会社のサイトがところどころ変な表示に…

とくに凝ったデザインのページが

おかしくなるみたいで

ずいぶんと格闘してしまいました。

実際にはIE6とIE7で80%を超えるシェアを

持っているようですのであまり気にしなくてもよいのかもしれませんが

それでもMacintosh(印刷の世界ではまだまだ多いです)

のSafariで見たときには気になる部分だけは直すようにしていましたが

これほど違うとは…

CSSの解釈の違いが主な原因のようですが

英語と日本語、ほどは違わないのですが

一種の方言のようなものでしょうか?

沖縄の「うちなー口」 と 「津軽弁」ぐらいの違いは

ありそうな気がしますね。

タグ: css, html, Webデザイン

関連する投稿

ものすごい弱点!

wordpressにおけるウェブサイト構築において
ものすごい弱点を発見しました。
それは「印刷ができない」ということです。
厳密に言うと
印刷をするとレイアウトが崩れる
ということです。

通常、有益なホームページなど
プリントアウトしてちょっと持ち出してみたり
旅先で利用したりするものですが
その点を充分に考慮していかなければいけないと思います。

おそらく…印刷用のCSSを準備することになるのか?
あるいはプラグインで対応ということになるのでしょう。

昔のHTMLで作られたHPの時代はこういう心配はあまりなかったのですが
CSS特有の問題、ともいえますね。

タグ: css, プリントアウト

関連する投稿

CSS

090624_0335~001.jpg

5〜6年ぐらい前は

ホームページを作成するとき

htmlのテーブル(表)を使って

画像や文字をレイアウトしていましたが

これらの手法は現在ではかなり

ダメなものとされています。

その理由はアクセシビリティとSEO対策と思われます。

先ずアクセシビリティ、

これは普通のパソコンだけではなく

視覚に障がいを持つ方、高齢者などが用いる

読みあげ機能を持つ音声ブラウザや

その他にも携帯などさまざまな機器でも滞りなく

読めて情報を共有されるべき

という考え方です。

というのもhtmlでテーブルを作成すると一見美しく

レイアウトされているように見えますが

htmlのソースを上から読んで行くと

バラバラで意味が通じなかったりします。

つまりこれが第二のポイントの

SEO対策の問題に繋がります。

これはYahoo!やgoogleなどの

検索エンジンはhtmlを探索して

その情報が有益か有益でないかを

判断するので文章がシンプルで単純なものを

好むという理由です。

そこで現在ではCSSを用いるデザインへと

大きく変化してきました。

htmlはあくまでも単純に、
そして見た目はCSSでカッチリ仕上げる

それが現在のwebデザイン…

なのですが

これが非常に難しいのです!

ビジュアル要素を司る書類が

全てプログラム言語で作られている…

この大きな壁の前で自分をはじめ

多くの人がイバラの道を苦行僧のように

歯をくいしばって頑張っているのでしょう。

…多分。

タグ: css, html, デザイン, ホームページ

関連する投稿

Home > Tags > css

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

トップへ戻る