幅と枠線やパディングを同時に設定しないのがポイント
IE6とその他のブラウザとでは、枠線やパディングの解釈が異なります。まだまだIE6のシェアはそれなりにあるので、IE6対応は欠かせない存在となっています（ちなみに、2009年6月現在の筆者のWebサイトのアクセス解析によると、IE6はまだまだ5割程度占めています）。しかし、IE6で正常に見れていたとしても、Firefoxではレイアウトが崩れてしまった、という経験はありませんか？
たとえば、全体幅を560ピクセルとしたボックスにボックス内余白（パディング）上下左右それぞれ10ピクセルにしたいという場合、IE6では全体幅は560ピクセル内でパディングが10ピクセル分差し引かれますが、Firefoxでは560ピクセルにパディング左右それぞれ10ピクセルを合計した580ピクセルに伸びてしまうのです。どのブラウザでもレイアウトが崩れないようにするには、一度に設定せずに、それぞれ分けてマージンもしくはパディングを設定する必要があります。また、どのブラウザでも対応するためには、heightプロパティを使わないほうが無難です。
具体的には、以下のように定義するのは好ましくありません。
#page_content {
width: 560px;
float: right;
padding: 10px;
}
もし、コンテンツのDIV内の要素との間隔を10ピクセル開けたい場合、その中でパディングが指定されたDIVに適用するスタイルを定義するか、そのセクション内の見出しや段落などにそれぞれパディングやマージンを指定します。たとえば、コンテンツセクション用に.articleという名のクラススタイルを作成して、メインコンテンツ内にそのDIVを挿入する例を以下に記します。ちなみに、#page_content.articleと指定すると、IDスタイルのpage_contentの要素にのみ適用されます。
#page_content {
width: 560px;
float: right;
}
#page_content.article {
padding: 10px;
}
実際のHTMLでは以下のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>パディングをコンテンツ内に指定する</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#container {
width: 760px;
}
#header{
background-color: #CCC;
}
#footer {
clear: both;
background-color: #CCC;
}
#sidebar {
width: 200px;
float: left;
}
#page_content {
width: 560px;
float: right;
}
#page_content.article {
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
ヘッダー
</div>
<div id="page_content">
<div class="article">
コンテンツ
</div>
</div>
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</div>
</body>
</html>
IDスタイルは、セレクタの先頭に#がついたものであり、HTMLファイル内に1度だけ使用できます。一方、クラススタイルは、セレクタの先頭に.（ピリオド）がついたもので、何度でも使用することができます。また、IDスタイルとクラススタイルを同時に指定すると、IDスタイルが優先されます。
| セレクタ | タグの属性 | |
|---|---|---|
| IDスタイル | #style | id="style" |
| クラススタイル | .style | class="style" |
既定のマージンとパディングはブラウザによって異なる
段組みレイアウトを作成後、異なるブラウザで確認してみると、たとえばInternet ExplorerとFirefoxとでは見出しの上マージンが異なります。下の図は、IE7とFirefox 3で「sample4.html」を開いた画面です。
どのブラウザでも同じように表示するには、見出しのトップマージンをゼロにするとよいでしょう。
h1{
margin-top: 0;
}
ブラウザによって、既定のマージンとパディングの値が異なります。すべてのブラウザで同じように表示するには、まず、以下のCSSブロックを定義して、一つ一つ個別にマージンとパディングを指定するとよいと思います。
*{
margin: 0;
padding: 0;
}
