CSSレイアウトの注意 − ブラウザによる表示の違い

ブラウザによって異なるCSSの認識 複数のブラウザで確認を



CSSレイアウト実践講座


CSSレイアウトの注意 − ブラウザによる表示の違い

CSSレイアウト一番のウィークポイントはブラウザによる表示のされ方の違いです。一般に9割前後の方が使用していると言われているInternet Explorerと、FirefoxやNetscapeとではCSSの認識のされ方が異なります。

例えば、枠の内側に余白を設ける「padding」ですが、IEでは指定した枠の幅は変わらず内側に余白を作ることができますが、Firefox、Netscapeでは、指定した余白の分だけ幅が広がってしまいます。また、枠に線をつける「border」も、IEでは線の太さの分だけ内側のスペースが小さくなりますが、Firefox、Netscapeでは、逆に線の太さ分だけ幅が広がるようになっています。

どちらが良い・悪いということではなく、どんな環境でも自分が想定した通りに表示させるためには、どのブラウザにも対応したレイアウトの仕方が必要になってきます。(当サイトでは、どのブラウザで見ても崩れの出ない方法を説明しています。)

自分が普段IEを使っているからといって、IEだけで確認し大丈夫だと思っても、Firefox、Netscapeユーザーは満足にサイトを見ることができません。

そこで重要になってくるのが「複数のブラウザによる確認」です。

Windowsパソコンには通常、IEがプレインストールされていますが、それ以外のブラウザは無料でネット上からダウンロードすることができます。

全てのブラウザをダウンロードして確認するようにすれば完璧ですが、少なくともIEとFirefoxもしくはNetscapeで確認しておけば、最低限の崩れは防ぐことができます。









Copyright 2005-2008 CSSレイアウト実践講座 All Rights Reserved. Since 2005.8.19.
[SEO対策用検索エンジン]UKALINKS