ホームページを見るとき絶対に必要なのが閲覧ソフト、ブラウザだ。
このブラウザ、Windowsユーザーが一般的に使っているのがインターネットエクスプローラー(IE)、そして次に利用されているのが元祖のネットスケープ(NE)になる。その他にもMozilaやOperaなどそれぞれ特徴をもったブラウザがいろいろある。
HPを見る側にはとってもとっても便利なブラウザだが、HPを”作る側”にはとっても困った問題が実はある。それはブラウザの種類によって皆さんのHPの見え方が違う場合があることだ。せっかく苦労して作ったHPもその意図に反して見にくくなっていたりする。だから少なくとっもメジャーなIEとNEではその点を認識しておいた方がいい。 IEとNEで一番大きな点、ダイレクトに影響を受けるのは文字の大きさの表示が違うこと。これは意外と無視できない!
下のテーブルにいろいろなフォントサイズでテキストを表示してみた。
| フォントサイズ1 |
ハワイが大好き! |
| フォントサイズ2 |
ハワイが大好き! |
| フォントサイズ3 |
ハワイが大好き! |
| フォントサイズ4 |
ハワイが大好き! |
| フォントサイズ5 |
ハワイが大好き! |
| フォントサイズ6 |
ハワイが大好き! |
| フォントサイズ7 |
ハワイが大好き! |
今度はこのページをIEで見ている人はNEで、NEで見ている人はIEで見て文字の多きさを比べて欲しい。明らかにNEで表示される文字の方が小さいことに気が付く。つまりページのデザインを考えていろいろなフォントサイズを使って仕上げた美しいページも違ったブラウザでみると、オーマイガッってことがある。特にフォントサイズ1の文字はNEでは判読が難しいし、テーブル内の表示文字サイズが変わればレイアウトも変わってきてしまう。
そこで昔の人は考えた。IEとNEで文字サイズが違ってしまう問題を解決する方法はないものか・・・・ もうお気づきの人もいると思うがこのページ、テーブル内のテキスト以外はIEでもNEでも同じサイズで表示されている。これはCSSスタイルというのを使っているのだ。CSSスタイルを使って上のフォントサイズをつくると
| ハワイが大好き! |
| ハワイが大好き! |
| ハワイが大好き! |
| ハワイが大好き! |
| ハワイが大好き! |
| ハワイが大好き! |
| ハワイが大好き! |
となり、IEとNEでほぼ同等のサイズで文字が表示される。CSSスタイルについてはお手持ちのHP作成ソフトの取り説や書店でチェックしてほしい。
IEとNEでは文字サイズだけでなく、ページ余白やテーブルの表示や色、背景画像、フォームの入力フィールドのサイズなど、他にもいろいろとHPの見え方が違ってくる。IEとNEの表示を完全互換にするのはかなり大変な作業になるが、HPを”作る側”の人は”見る側”のブラウザ環境もある程度考えて、最低限文字サイズやレイアウト崩れぐらいは対応した方がいいかもしれない。