Web資料

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

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

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

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


ブラウザの種類としては

  • ・IE
  • ・Firefox
  • ・Safari
  • ・Opera
  • ・Chrome
  • ・Netscape
  • ・Donut

などがあります。


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

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

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


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

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


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

  • 1.適切なhtmlとcssで記述する
  • 2.HPをアップする前に、複数のブラウザで必ずチェックする

が挙げられます。


1.適切なhtmlとcssで記述する

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

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


2.HPをアップする前に、複数のブラウザで必ずチェックする

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

IE tester日本語パッチ(http://ceo.sourcelab.jp/archives/40)

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


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

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


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

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

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

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


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


  • 【1】IE・・・88.44%(そのうちIE7が59.3%、IE6が39.5%)
  • 【2】Firefox・・・6.16%
  • 【3】Safari・・・3.77%
  • 【4】Opera・・・0.64%
  • 【5】Chrome・・・0.44%

となっています。

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

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

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


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