CSSレイアウト
レイアウト手法
さて、いよいよCSSレイアウトの本題に入っていきます。
一番基本的なボックスレイアウト
ボックスレイアウト・・・インライン要素のレイアウト（右・左・中央揃え）とはっきりと区別するために、ボックスレイアウトと表記しました。まずは、ブロック要素の左・右・中央揃えのやり方を学びましょう。
これらは、センタリングなどを行いたいブロック要素にマージンを指定することで行うことができます。下の表を参考にしてください。
| 左揃え | margin-right: auto; |
|---|---|
| 右揃え | margin-left: auto; |
| 中央揃え | margin-left: auto; margin-right: auto; |
.centering-box {
margin-left: auto;
margin-right: auto;
width: 3.5em;
height: 3.5em;
line-height: 3.5em;
text-align: center;
background: #ccc;
color: #fff;
font-size: 10pt;
}
要するに、左揃えなら右の空白、右揃えなら左の空白、中央揃えなら左右両方の空白を自動で調節することで、ボックスが配置されています。
ただし、揃え位置を指定する要素には、必ずwidth: 3.5em;のように、要素の幅も同時に指定する必要があります。
フロート（回り込み）を用いたレイアウト（１）
フロートって何だっけ？とお思いの方はまずはfloatプロパティ解説ページを。
floatプロパティの解説ページでは、画像に文字を回り込ませたり、チョッとしたブロック要素を回り込ませたりしていますよね。実は、ホームページの大まかなレイアウトは、このfloatプロパティを利用することで、作成することができます。
では、簡単な例からいきましょう。まずは、以下のようにシンプルな２カラム構成のレイアウトをやってみましょう。イメージは下の図です。
ただ、このままだと、ボックスとボックスの間に隙間やボーダーがあったりして、わかりにくいので、下の図のようにように別々の背景色を設定し、隙間を無くした状態を考えます。
left-columnとright-columnは、それぞれdiv要素のidを指しています。
ちなみに、配色は以下の通りです。
- Left Column Background
- #cf0
- Left Column Fonts
- #fff
- Right Column Background
- #ef9
- Right Column Fonts
- #666
まずはHTMLのソースから。
<html>
<head>
<title>両側可変の２カラム構成</title>
<link rel="stylesheet" href="sample1.css" type="text/css" />
</head>
<body>
<div id="left-column">
<p>左側のカラムです。</p>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
</body>
</html>
CSSのソースです。
#left-column {
width: 30%;
float: left;
background: #cf0;
color: #fff;
font-weight: bold;
}
#right-column {
width: 70%;
float: right;
background: #ef9;
color: #666;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル１（ZIP）
おそらく、以下のスクリーンショットのように表示されるかと思います。
・・・イメージ図と違う？周りに変な余白があるし、文字の部分しか背景色が付いていない！・・・一応、これで正しいのです。周りの余白は、bodyが勝手に付けてくれたものなので、
body { margin: 0; padding: 0; }
とCSSファイルに付け加えてみてください。余白は無くなります。
文字の部分しか背景色が付いていないのは・・・ブロック要素の特徴を思い出してください。ブロック要素は、横は親要素の幅いっぱいまで、縦は含んでいる要素（文字列）にあわせて調節されます。
・・・というわけで、左右のカラムを上下いっぱいに広げたいのならば、CSSを以下のようにしてください。（参考：heightプロパティ）
body , html {
margin: 0;
padding: 0;
height: 100%;
}
#left-column {
width: 30%;
float: left;
background: #cf0;
color: #fff;
font-weight: bold;
height: 100%;
}
#right-column {
width: 70%;
float: right;
background: #ef9;
color: #666;
height: 100%;
}
これでイメージ通りのレイアウトが完成です。ただし、今回はイメージ通りのものを作成するという目的でheightプロパティを使用しました。しかし、画面の下まで要素の高さが足りないのは、文字をたくさん書くことで回避できますので、わざわざheightプロパティを使用してまで、高さを指定必要はないかと思われます。文字をたくさん書いた場合は、右の図のようになります。
