ブラウザによる表示の違い

インターネット上のサイト（HP）を回覧するには、ブラウザが必要となります。

ブラウザとは、htmlやcssなどのプログラムを解析して画面に表示させるソフトです。

通常パソコンを買うと、ウインドウズであればインターネットエクスプローラー（IE）が入っているので、特に意識せずにインターネットを利用しているかと思います。

ブラウザの種類としては

などがあります。

HP作成で頭を悩ますのは、ブラウザにより表示の違いが生じることです。

全ての人がIEを利用しているわけではないので、HP作成には複数のブラウザで表示をチェックしなければいけません。

例えばIEでは意図通りの表示がされているが、他のブラウザで見るとレイアウトがぐちゃぐちゃなHPを運営していれば、IE以外のブラウザを使用しているユーザー様に良い印象を与えないので、ビジネスチャンスを逃してしまう可能性が高くなります。

同じhtmlとcssでも、IEならOKで、Firefoxだとレイアウトが崩れるということが多々あります。逆の場合もあります。

しかも、同じIEでもIE6とIE7では仕様が違うため、IE6ではOKなのに、IE7だとレイアウトが崩れるということもあります。

これらブラウザの表示違いの対策としては、

が挙げられます。

１．適切なhtmlとcssで記述する

これは、htmlで見た目のデザインを行わず、cssでデザインを調整することです。

例えばhtmlのtableタグで細かくデザインしているHPを見かけますが、これだともし表示違いが発生したときに、修正が大変になります。

IEで複数のバージョンを1台のパソコンで確認するには、IE tester
※英語(http://www.my-debugbar.com/wiki/IETester/HomePage)がおすすめです。

Firefoxなどのブラウザは、各配布元からダウンロードできます。

もしブラウザによる表示違いを見つけたとしても、これを修正するのがとても大変です。

トライ& エラーで何度も確認しながら修正することになりますが、一朝一夕で完璧に直せるようにはなりませんので、経験の中からノウハウを蓄積していく地道な作業となります。

ここでおすすめしたいのは、FirefoxアドオンのWeb Developer
(http://lab.tubonotubo.jp/tools/webdeveloper/)です。

これは、ブラウザ上でcssなどを修正でき、その結果がすぐにブラウザに反映されます。

Firefoxはモダンブラウザと呼ばれる分類に入りますので、Firefoxさえチェックすれば、他のモダンブラウザもだいたいOKです。

このWeb Developerは他にも様々な使用用途がありますので、HP作成にはとても便利なツールです。

ちなみに、カラーナビのユーザー様の使用ブラウザtop5の割合ですが、

となっています。

私の場合は、IE7,IE6とFirefoxで表示チェックをしています。

気のせいか、ウインドウズvistaとxpでは、同じIEのバージョンでも若干表示が違う場合があるような・・・

これからも新しいブラウザが開発されたり、ブラウザのバージョンアップがされたり、cssのバージョンもアップされたりするので、まだまだブラウザチェックは続きそうです。

【著者】八幡優
カラーナビ企画・サイト作成と運営責任者カラーナビは、ユーザー様にとって面白く、有益な情報を提供することにより、より多くの「カラーとの出会い」を創り出すことがテーマです。この「カラーナビ for school and consultant」では、これからプロとして活動する方・現在プロとして活動している方への情報を発信することにより、個々のカラーコーディネーター様の活躍にお役立てできればと思っています。
カラーナビへの広告掲載
info@colornavi.net
AISホームページ
http://www.ais-ais.co.jp