幅と枠線やパディングを同時に設定しないのがポイント
IE6とその他のブラウザとでは、枠線やパディングの解釈が異なります。まだまだIE6のシェアはそれなりにあるので、IE6対応は欠かせない存在となっています(ちなみに、2009年6月現在の筆者のWebサイトのアクセス解析によると、IE6はまだまだ5割程度占めています)。しかし、IE6で正常に見れていたとしても、Firefoxではレイアウトが崩れてしまった、という経験はありませんか?
たとえば、全体幅を560ピクセルとしたボックスにボックス内余白(パディング)上下左右それぞれ10ピクセルにしたいという場合、IE6では全体幅は560ピクセル内でパディングが10ピクセル分差し引かれますが、Firefoxでは560ピクセルにパディング左右それぞれ10ピクセルを合計した580ピクセルに伸びてしまうのです。どのブラウザでもレイアウトが崩れないようにするには、一度に設定せずに、それぞれ分けてマージンもしくはパディングを設定する必要があります。また、どのブラウザでも対応するためには、heightプロパティを使わないほうが無難です。
![](http://cz-cdn.shoeisha.jp/static/images/article/3969/img01.gif)
具体的には、以下のように定義するのは好ましくありません。
#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; }