見出しスタイルをどのブラウザでも同じバランスで表示する方法

スタイルシート

Internet Explorerとその他のブラウザを比較すると、既定の見出しの上マージンが異なります。そこで、同じバランスで配置する方法について説明します。

はじめに

段組レイアウトにおいて、Internet ExplorerとFirefoxでは、既定の見出しスタイルが異なります。

以下の例は、見出しにマージンとパディングを指定しない、デフォルトの状態でメインコンテンツエリア内に挿入して作成したサンプルWebページをExpression Web SuperPreviewでIE6とFirefox 3.6を比較しています。

IE6側の「見出し１」をクリックすると、それぞれ対応したサイズと座標が表示されます。IE6とFireFox 3.6を比較すると、上マージンは22ピクセルの差が発生しています。

見出しの文字の高さとサイドバーの高さをそろえるには、上マージンを指定する必要があります。

対処方法はいくつかあります。

すべてのマージンとパディングの値をリセットするには、すべての要素のマージンとパディングを0にするとOKです。そのあと、見出し、段落などのタグ、その他のスタイルでマージンとパディングを指定していきます。

すべてのマージンとパディングの値をリセットするには、最初に以下のコードを記述します。

*{
  margin:0;
  padding:0;
}

たとえば以下の方法でスタイルを設定するとよいでしょう。もし、ブラウザ側で文字サイズを変更する場合にバランスよく表示させるには、マージンを19pxではなく、1文字（1em）にするとOKです。

h1 {
    margin-bottom: 19px;
}

h2,h3,h4,h5,h6 {
    margin: 19px 0px 19px 0px;
}

見出し2以下と同様、上下19ピクセルにする、もしくは、上下1文字分のマージンを設定します。

p {
    margin: 19px 0px 19px 0px;
}

リスト全体の左マージンを40ピクセル、下マージンを19ピクセルにします。

ul, ol {
    margin: 19px 0px 19px 40px;
}

このページだけ、他のWebページとマージンとパディングを変えたい場合、そのWebページに直接スタイルを指定します。たとえば、トップページにおいて、Webサイトのタイトルロゴを「見出し1」とし、見出し2だけ上マージンを0にする、といったケースが考えられます。

臨機応変に調整していきましょう。