2007年05月02日
テーブルを使わない可変幅＋固定幅2カラムレイアウト
CSSレイアウトの特徴であるfloatプロパティですが、この指定をする際に必要なのがwidth指定です。このwidthに、「px」のような固定値ではなく「％（パーセンテージ）」で指定すれば、ウィンドウサイズに依存する幅可変式の複数カラムレイアウトができます。
HTMLサンプル =========================================
<div id="leftbox">
左ボックス
</div>
<div id="rightbox">
右ボックス
</div>
CSSサンプル =========================================
#leftbox{
width:70%;
float:left;
}
#rightbox{
width:30%;
float:right;
}
何てことはないですね。それでは次に片方のボックス幅が固定される場合はどうなるでしょうか。こうなると一筋縄ではいかなくなりネガティブマージンを使うことになります。ネガティブマージンとはmarginにマイナス値を設定することです。以下のサンプルを見てください。
HTMLサンプル =========================================
<div id="leftbox">
<div id="leftbox1">
左ボックス
</div>
</div>
<div id="rightbox">
右ボックス
</div>
CSSサンプル =========================================
#leftbox {
width:100%;
margin-right:-200px;
float:left;
}
#leftbox1 {
margin-right:200px;
}
#rightbox {
width:200px;
float:right;
}
このサンプルでは左ボックス幅は可変式、右ボックスは200pxで固定となります。２カラムレイアウトなのですが、３つのボックスで構成されているところがミソなのです。
まず、leftboxで幅を100％にして、固定幅分のネガティブマージンを記述します。こうすることで、可変幅を維持したまま、200pxの余白を作ることができます。そして、その余白にrightboxを回り込ませます。見た目ではこれで２カラムレイアウトになるのですが、左ボックスにテキストを並べてみると、右ボックスに入り込んで重なってしまいます。これは左ボックス内の要素にはネガティブマージンがきいていないという事です。
そこで、leftbox内にさらにdivボックス（leftbox1）を追加します。そして右ボックスに重ならないように、margin-right:200px;と記述するわけです。これで可変＋固定幅の２カラムレイアウトの出来上がりです。
凝ったデザインを可変幅にするのは厄介ですが、機会があればチャレンジしてみてはいかが？
<div id="leftbox">
左ボックス
</div>
<div id="rightbox">
右ボックス
</div>
CSSサンプル =========================================
#leftbox{
width:70%;
float:left;
}
#rightbox{
width:30%;
float:right;
}
何てことはないですね。それでは次に片方のボックス幅が固定される場合はどうなるでしょうか。こうなると一筋縄ではいかなくなりネガティブマージンを使うことになります。ネガティブマージンとはmarginにマイナス値を設定することです。以下のサンプルを見てください。
HTMLサンプル =========================================
<div id="leftbox">
<div id="leftbox1">
左ボックス
</div>
</div>
<div id="rightbox">
右ボックス
</div>
CSSサンプル =========================================
#leftbox {
width:100%;
margin-right:-200px;
float:left;
}
#leftbox1 {
margin-right:200px;
}
#rightbox {
width:200px;
float:right;
}
このサンプルでは左ボックス幅は可変式、右ボックスは200pxで固定となります。２カラムレイアウトなのですが、３つのボックスで構成されているところがミソなのです。
まず、leftboxで幅を100％にして、固定幅分のネガティブマージンを記述します。こうすることで、可変幅を維持したまま、200pxの余白を作ることができます。そして、その余白にrightboxを回り込ませます。見た目ではこれで２カラムレイアウトになるのですが、左ボックスにテキストを並べてみると、右ボックスに入り込んで重なってしまいます。これは左ボックス内の要素にはネガティブマージンがきいていないという事です。
そこで、leftbox内にさらにdivボックス（leftbox1）を追加します。そして右ボックスに重ならないように、margin-right:200px;と記述するわけです。これで可変＋固定幅の２カラムレイアウトの出来上がりです。
凝ったデザインを可変幅にするのは厄介ですが、機会があればチャレンジしてみてはいかが？
