CodeZine(コードジン)

特集ページ一覧

コンテンツのみ印刷するようにCSSで制御してみよう

CSSレイアウトとメディアタイプ

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/06/19 14:00
目次

幅と枠線やパディングを同時に設定しないのがポイント

 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の要素にのみ適用されます。

コンテンツ部分とパディングが指定されたDIVのスタイルを別指定
#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スタイルとクラススタイルの違い

 IDスタイルは、セレクタの先頭に#がついたものであり、HTMLファイル内に1度だけ使用できます。一方、クラススタイルは、セレクタの先頭に.(ピリオド)がついたもので、何度でも使用することができます。また、IDスタイルとクラススタイルを同時に指定すると、IDスタイルが優先されます。

  セレクタ タグの属性
IDスタイル #style id="style"
クラススタイル .style class="style"

既定のマージンとパディングはブラウザによって異なる

 段組みレイアウトを作成後、異なるブラウザで確認してみると、たとえばInternet ExplorerとFirefoxとでは見出しの上マージンが異なります。下の図は、IE7とFirefox 3で「sample4.html」を開いた画面です。

「sample4.html」をInternet Explorer 7で表示
「sample4.html」をFirefox 3.0.10で表示

 どのブラウザでも同じように表示するには、見出しのトップマージンをゼロにするとよいでしょう。

見出しにトップマージンをゼロにするようにする
h1{
	margin-top: 0;
}
すべてのマージンとパディングをリセットするには

 ブラウザによって、既定のマージンとパディングの値が異なります。すべてのブラウザで同じように表示するには、まず、以下のCSSブロックを定義して、一つ一つ個別にマージンとパディングを指定するとよいと思います。

すべてのマージンとパディングを0にする
*{
	margin: 0;
	padding: 0;
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5