CodeZine(コードジン)

特集ページ一覧

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

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

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

CSSで段組みレイアウトの方法はいろいろ

 CSSで段組みレイアウトを行う方法はいろいろあります。コンテンツを先に記述するには、以下の項目1と項目3で実現できます。

  1. 段組み全体を相対配置、サイドバーを絶対配置
  2. サイドバーをメインコンテンツセクションに回り込ませる
  3. メインコンテンツとサイドバーをそれぞれ左または右に回り込ませる

1. 段組み全体を相対配置、サイドバーを絶対配置

 メインコンテンツを先に記述するのにレイアウトが崩れにくい一番手っ取り早い方法かもしれません。ただし、コンテンツよりサイドバーのほうが高い場合、メインコンテンツを先に記述したときに、その下のフッターセクションがサイドバーに隠れてしまいます。基本的に、メニューコンテンツを高くするように配慮する必要があります。

 たとえば、段組み全体を一つのDIV(id="container")で囲み、そのDIVを基準にして左側に200ピクセル幅のサイドバー(id="sidebar")を配置するには、以下のCSSが考えられます。

sample1.css のソース
#header{
	background-color: #CCC;
}

#container{
	position: relative;
	width: 100%;
}

#sidebar{
	width: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#page_content {
	margin-left: 200px;
}

#footer {
	background-color: #CCC;
}

 相対/絶対配置を指定するにはpositionプロパティを使用します。値は、相対配置の場合にはrelative、絶対配置の場合にはabsoluteを指定します。絶対配置するには、対象となるモノ(相対配置されているもの)からの座標で位置を決定します。そのため、上から0ピクセル、左から0ピクセルの記述があるのです。

 一方、HTMLファイルは以下のようになります。HTMLファイルからCSSファイルにリンクするには、linkタグのhref属性に、そのCSSファイルへのパスを指定します。

<link href="sample1.css" rel="stylesheet" type="text/css">
属性
href 外部CSSファイルへのパスを指定
rel stylesheet
type text/css
sample1.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>sample1</title>
<link href="sample1.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
ヘッダー
</div>
<div id="container">
<div id="page_content">
コンテンツ
</div>
<div id="sidebar">
サイドバー
</div>
</div>
<div id="footer">
フッター
</div>
</body>

</html>

2. サイドバーをメインコンテンツセクションに回り込ませる

 一方、メインコンテンツとサイドバーの高さに関係なく、フッターを段組みの下に配置するには、サイドバーをメインコンテンツセクションに回り込ませるように記述します。このようにすることにより、段組みの回り込みを解除してフッターを表示することができます。ただし、サイドバーを先に記述する必要があります。

 たとえば、サイドバーを段組みの左側に200ピクセル幅固定して回り込ませ、右側にコンテンツを配置して、これらの段組みの回り込みを解除してフッターを配置するには、以下のCSSが考えられます。段組みをきれいに配置するために、bodyのマージンとパディングを0にします。ここでは、メインコンテンツ部分において最小幅を600ピクセルに指定しています。

sample2.css のソース
body {
	margin: 0;
	padding: 0;
}

#header{
	background-color: #CCC;
}

#container {
	min-width: 600px;
}

#sidebar {
	width: 200px;
	float: left;
}

#page_content {
	margin-left: 200px;
}

#footer {
	clear: both;
	background-color: #CCC;
}

 一方、HTMLファイルは以下のようになります。ここでは、「sample2.css」にリンクします。

sample2.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>sample2</title>
<link href="sample2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
ヘッダー
</div>
<div id="container">
<div id="sidebar">
サイドバー
</div>
<div id="page_content">
コンテンツ
</div>
</div>
<div id="footer">
フッター
</div>

</body>

</html>

3. メインコンテンツとサイドバーをそれぞれ左または右に回り込ませる

 では、フッターをサイドバーで隠れることなく、メインコンテンツを先に記述したい、これら2つの願いをかなえたい場合は、メインコンテンツとサイドバーをそれぞれ左または右に回り込ませるとよいでしょう。筆者のサイトのほとんどが、このレイアウトを採用しています。ただし、基本的にすべてのDIVの幅を指定してあげたほうが無難でしょう。

 全体を760ピクセル幅に固定されたDIV内でヘッダー、サイドバー、コンテンツ、フッターを格納する場合、CSSでは以下のように記述します。

sample3.css のソース
body {
	margin: 0;
	padding: 0;
}

#header{
	background-color: #CCC;
}

#container {
	width: 760px;
}

#sidebar {
	width: 200px;
	float: left;
}

#page_content {
	width: 560px;
	float: right;
}

#footer {
	clear: both;
	background-color: #CCC;
}

 一方、HTMLファイルでは以下のように記述します。ここでは、「sample3.css」にリンクします。

sample3.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>sample3</title>
<link href="sample3.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="container">
<div id="header">
ヘッダー
</div>
<div id="page_content">
コンテンツ</div>
<div id="sidebar">
サイドバー
</div>
<div id="footer">
フッター
</div>
</div>
</body>

</html>

  • 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