CSSレイアウト
レイアウト手法
フロート（回り込み）を用いたレイアウト（２）
次は・・・２カラム構成のレイアウトを考えます。何が変わっているかと言うと、左のカラム幅は固定で、残り（？）の部分が右カラムです。
ソースは以下のようになります。
<html>
<head>
<title>片側固定の２カラム構成</title>
<link rel="stylesheet" href="sample2.css" type="text/css" />
</head>
<body>
<div id="left-column">
<p>左側のカラムです。</p>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
</body>
</html>
* { padding: 0; margin: 0; }
#left-column {
width: 200px;
float: left;
background: #9af;
color: #fff;
font-weight: bold;
}
#right-column {
margin-left: 200px;
background: #ccf;
color: #fff;
}
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル２（ZIP）
何をやっているかと言うと、左カラムを右カラムのマージンに回り込ませています。イメージは下の図のような感じ。
さて、気が付いた人もいるかと思いますが、この方法を使って両側可変・両側固定のレイアウトを作ることも出来ます。試してみてください。どちらを使うかは、自由に選択してください。
フロート（回り込み）を用いたレイアウト（３）
次は・・・両側固定の２カラムをやってみましょうか。左カラム幅：150px、右カラム幅：250px、あわせて：400px。ソースは以下の通りです。
<html>
<head>
<title>両側固定の２カラム構成</title>
<link rel="stylesheet" href="../sample3.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="left-column">
<p>左側のカラムです。</p>
</div>
<div id="right-column">
<p>右側のカラムです。</p>
</div>
</div>
</body>
</html>
* { padding: 0; margin: 0; }
#wrapper { width: 400px; }
#left-column {
width: 150px;
float: left;
background: #fc0;
color: #fff;
font-weight: bold;
}
#right-column {
width: 250px;
background: #ffc;
color: #555;
float: right;
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル３（ZIP）
両側可変と違うのは、親要素の幅をピクセルで指定してあり、左右のカラム幅を親要素の大きさに合わせてピクセルで指定を行っているということです。別に、ピクセル以外でもOKですが。
縦方向のレイアウト
横方向のレイアウトは、以上で終わりです。次は、縦方向のレイアウトをやってみましょう。
では、一番基本のレイアウトは下の図のようになります。
ソースは以下の通りです。
<html>
<head>
<title>縦方向のレイアウト</title>
<link rel="stylesheet" href="sample4.css" type="text/css" />
</head>
<body>
<div id="first-box">
<p>上の段のブロックです。</p>
</div>
<div id="second-box">
<p>真ん中の段のブロックです。</p>
</div>
<div id="third-box">
<p>下の段のブロックです。</p>
</div>
</body>
</html>
* { padding: 0; margin: 0; }
#first-box {
background: #fcf;
color: #666;
}
#second-box {
background: #fef;
color: #999;
}
#third-box {
background: #f9f;
color: #fff;
}
上のサンプルソースは、スペースの関係から本文の文字数を減らしてあります。
コピペが面倒な人用に、ファイルをまとめた物を用意しました。ZIPで圧縮してあります。CSSレイアウトサンプル４（ZIP）
HTML・CSSのコードは非常にシンプルです。CSSでは、基本的に背景色と文字色しか指定していません。何も指定しなくても、ブロック要素は親要素の幅いっぱいに広がり、縦に並ぶという性質があります。縦方向に並べるのは、この性質を利用したものです。今回は、自動的に指定されるマージン・パディングを無くし、後は分かりやすいように色付けを行っているだけになります。
