CSSで段組みレイアウトの方法はいろいろ
CSSで段組みレイアウトを行う方法はいろいろあります。コンテンツを先に記述するには、以下の項目1と項目3で実現できます。
- 段組み全体を相対配置、サイドバーを絶対配置
- サイドバーをメインコンテンツセクションに回り込ませる
- メインコンテンツとサイドバーをそれぞれ左または右に回り込ませる
1. 段組み全体を相対配置、サイドバーを絶対配置
メインコンテンツを先に記述するのにレイアウトが崩れにくい一番手っ取り早い方法かもしれません。ただし、コンテンツよりサイドバーのほうが高い場合、メインコンテンツを先に記述したときに、その下のフッターセクションがサイドバーに隠れてしまいます。基本的に、メニューコンテンツを高くするように配慮する必要があります。
たとえば、段組み全体を一つのDIV（id="container"）で囲み、そのDIVを基準にして左側に200ピクセル幅のサイドバー（id="sidebar"）を配置するには、以下の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 |
<!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ピクセルに指定しています。
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」にリンクします。
<!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では以下のように記述します。
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」にリンクします。
<!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>
