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

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

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

例えば、枠の内側に余白を設ける「padding」ですが、IEでは指定した枠の幅は変わらず内側に余白を作ることができますが、Firefoxでは、指定した余白の分だけ幅が広がってしまいます。（CSSレイアウト崩れの原因 - ブラウザによる「padding」の解釈の違い参照）

また、枠に線をつける「border」も、IEでは線の太さの分だけ内側のスペースが小さくなりますが、Firefoxでは逆に線の太さ分だけ幅が広がるようになっています。（CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い参照）

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

※イラスト＝IEはOK、Firefoxでは崩れている例

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

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

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

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