CSSレイアウト
応用レイアウト
今まで学んできたことを使って、応用的なレイアウトをやってみましょう。
２カラム＋ヘッダー＋フッター
２カラム＋ヘッダー＋フッターの構成は、CSSレイアウトの一番最初のページで例として取り上げています（左の図）。まずは、このレイアウト方法を考えていきましょう。
今回は、右のイメージのレイアウトをやってみましょう。今回は灰色のボーダー部分は無視して作成していきます。
- ヘッダー
- ID：#header
- 高さ：100px
- 背景色：#aaf
- 左カラム
- ID：#left-column
- 幅：150px
- 背景色：#ddf
- 右カラム
- ID：#right-column
- 幅：指定無し
- 背景色：#f0f0f0
- フッター
- ID：#footer
- 高さ：40px
- 背景色：#aaf
まず、DIV要素を４つ用意します。そして、上からIDをheader, left-column, right-column, footer と付けていきます。この順番を守らなければ、この構成を作ることは出来ないでしょう。
そして、左カラムの幅を150pxにし、左への回り込みをさせるために、float: left;を指定します。次に、右カラムの左マージンを150pxに設定します。・・・後は、要素の高さ、色を指定するのみです。カンタンでしょ？
そうそう、フッターのDIV要素には、clear属性を付けるのを忘れないようにしてください。付けないとどうなるか・・・自分で試してみればよく分かります。左カラムの文字を多くして、右カラムの文字を少なくしてウインドウを小さくしていくと・・・？CSS講座 floatプロパティのページを参考に。
以下、ソースコードになります。
<html>
<head>
<title>２カラム＋ヘッダー＋フッター</title>
<link rel="stylesheet" href="../sample5_1.css" type="text/css" />
</head>
<body>
<div id="header">
<p>ヘッダー</p>
</div>
<div id="left-column">
<p>左側のカラムです。</p>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
<div id="footer">
<p>フッター</p>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
#header {
height: 100px;
background: #aaf;
}
#left-column {
float: left;
background: #ddf;
width: 150px;
}
#right-column {
margin-left: 150px;
background: #f0f0f0;
}
#footer {
height: 40px;
clear: both;
background: #aaf;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル５－１（ZIP）
もうちょっと実践的に。
さて、上では２カラム＋ヘッダー＋フッターの構成の大まかなレイアウト方法をやりましたが、これを改良して、もう少し実践的なページにしてみましょう。
では、今回改良することを挙げていきます。
- 左カラムにメニューバーを作成する
- ヘッダーの文字列をもっとタイトルらしくする
- マージン・パディングを適切に指定する
- etc...（文字色とか）
こんなところでしょうか。下のスクリーンショットが、改良後のページになります。
CSS、HTMLは以下のようになります。
<html>
<head>
<title>２カラム＋ヘッダー＋フッター（改良版）</title>
<link rel="stylesheet" href="../sample5_2.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>Page Title</h1>
</div>
<div id="left-column">
<ul id="navi-bar">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="right-column">
<h2>見出し</h2>
<p>本文 本文 ・・・</p>
<p>本文 本文 ・・・</p>
</div>
<div id="footer">
<p>フッター</p>
</div>
</body>
</html>
* { margin: 0; padding: 0; }
#header {
height: 100px;
background: #aaf;
color: #fff;
}
#header h1 {
margin-left: 1.5em;
line-height: 100px;
}
ul#navi-bar { margin: 30px 10px; }
ul#navi-bar li {
list-style: none;
padding: 5px;
text-align: center;
}
ul#navi-bar a {
color: #444;
font-weight: bold;
text-decoration: none;
}
#left-column {
float: left;
width: 150px;
background: #ddf;
}
#right-column {
margin-left: 150px;
padding: 30px;
background: #f0f0f0;
}
#right-column p { margin: 0 0 20px; }
#footer {
height: 40px;
background: #aaf;
color: #fff;
clear: both;
text-align: center;
}
#footer p { line-height: 40px; }
h2 { margin: 0 0 20px; }
ZIPで圧縮された方のソースコードには、省かれた部分・コメントでの補足が含まれていますので、こちらをご利用ください。CSSレイアウトサンプル５－２（ZIP）
さて、まずはヘッダー部分から解説をしていきます。
「ページタイトル」という文字列を一番大きな見出しという意味で、h1でマークアップしてあります。
CSSでは、h1要素にline-heightプロパティを指定してあります。値を、headerボックスの高さ（100px）と同じにすることで、「ページタイトル」という文字列を、headerボックスの（縦方向の）中央に配置しています。
この方法は、縦方向の中央揃えをしたいボックスの高さが決まっている場合に有効です。結構使えると思うので、覚えておくと良いかも。（フッター部分も、同じ指定方法を用いて文字列を中央に配置してあります。）
右カラムは、メインコンテンツを表示させる場所になりますので、見出し（h2要素）を作成しました。また、本文は段落ごとにp要素で囲んであると考えてください。
メニューバーは ul要素, li要素, a要素 で作成しています。
ポイントは、CSSでリストマーカーを非表示にすることです。もし、リストマーカーが表示されていたらカッコ悪いですよね。レイアウトを崩す原因にもなります。
また、さまざまな箇所でマージンやパディングを用いて、空白（間隔）の調整を行っています。
これらを行うことで、かなり見た目は良くなったと感じるでしょう。実際に改良前・改良後を比較してみれば、一目瞭然です。
