コピペで使えるfloatレイアウト（可変リキッド・固定幅（2段組・3段組）

CSSにてレイアウトを組む時に良く使われる
基本的な構築方法をサンプルコードと共に解説します。
サンプルコード、そのままコピペにて使用出来る様にしていますので、
ホームページ立ち上げの際に、基本的な枠組みとしてお使い下さい。
サンプルコードを基準として、肉付けしていくイメージですね。

今回は、一般的に良く使用されているレイアウトとして、
CSSのfloatプロパティを使用した二段組レイアウトと三段組みレイアウト、
それぞれにおいて、固定幅のものと、リキッドレイアウト（可変）についても
解説致します。

サイトレイアウトの方向性によって、お好きなサンプルコードをご使用下さい。

幅を固定した簡単な二段組レイアウトの構築方法

まずは基本的なレイアウトとして幅固定の二段組レイアウトです。
現在公開中のホームページでは、一番多いレイアウトではないでしょうか。

余計な要素をなくして、シンプルに表現すると、下記の様なHTMLになります。



ヘッダー
 

メインコンテンツ
 

サイドバー
 

フッター

サイトの表示領域を定義し、その中にヘッダー、メインコンテンツ、サイドバー、フッターと
それぞれ作成し、IDをふっておきます。
ポイントは、入れ子になるのが『id="main"』だけで、その中身は全て並列な点です。

このままですと、単純な１カラムレイアウトになってしまうので、
上記HTMLに対し、スタイルを適用させて二段組みレイアウトにしましょう。

実際のCSSは下記の通りです。

/*
 領域の表示幅と位置
*/
#main{
 width:900px;
 margin:auto;
}

/*
*
*/
#header{
}

/*
 メインとなる領域を幅指定。floatで右か左か選択出来る
*/
#content{
 width:700px;
 float:left;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar{
 width:200px;
 float:right;
}

/*
 floatを解除する
*/
#footer{
 clear:both;
}

『#main』は表示領域を定義しますので、表示領域の幅と表示位置を指定します。
この場合ですと、横幅900pxで中央表示となります。

そして、『#header』は、いわゆるヘッダーを定義する所です。
今回はレイアウトに対して影響が無いので、空にして定義だけ用意しています。
実際にサイトへ導入する際に、中身を設定して下さい。

そして、メインとなるコンテンツとサイドバーです。
『#content』ではメインとなるコンテンツの横幅と位置を指定し、
『sidebar』ではサイドバーの幅と位置を指定しています。
それぞれの位置指定には『float』を使用し、
floatのleftとrightで左右に表示位置を指定しています。
サンプルではサイドバーが右側に表示されますが、
floatの指定方向を逆にする事で、サイドバーを左に持ってくる事も可能です。

この様に、サイドバーを左右どちらかに変更する際も、
CSSを少し修正するだけで変更出来てしまいますので、とても保守性に優れているかと思います。

次に『#footer』ですが、フッターでは『clear:both;』としています。
これは、『float』による影響を終了する働きがあります。
サイドバーとメインコンテンツで左右にふった指定を
フッターにて終了させる事によって、他への影響を防いでいます。

ブラウザサイズによって変動する可変幅！二段組リキッドレイアウトの構築方法

ブラウザのサイズによって、メインコンテンツの幅が変動する可変式二段組レイアウト（リキッドレイアウト）
の構築方法について解説します。

基本的には先程の幅固定の二段組みレイアウトの応用となります。

実際のHTMLは下記の通りです。



ヘッダー
 


メインコンテンツ
  


サイドバー
 

フッター

幅固定の二段組レイアウトと異なる点は、『id="content_wrap"』で更にメインコンテンツを包む形になっています。
その他は変更ありません。
今回は、基本的な二段組レイアウトに加え、可変幅としたい要素を更に包むという事を覚えていて下さい。

では実際にCSSにて可変幅を定義してみましょう。

/*
 領域の表示幅と位置
*/
#main{
 width:100%;
 margin:auto;
}

/*
*
*/
#header{
}

/*
 100%幅だが、サイドバーの分だけ領域を削減する
*/
#content_wrap{
 width:100%;
 float:left;
 margin-right:-200px;
}

/*
 サイドバーとコンテンツが重ならない様に、サイドバー分余白を作る
*/
#content{
 margin-right:200px;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar{
 width:200px;
 float:left;
}

/*
 floatを解除する
*/
#footer{
 clear:both;
}

『#main』では、今回は可変幅とするので、画面領域一杯まで表示領域とする為に
幅を『100%』としています。
『#header』は、ヘッダー領域で、今回はレイアウトに影響がないので定義を省いています。

『#content_wrap』は、メインコンテンツを包んでいる要素の定義です。
メインコンテンツは可変で目一杯広げるので幅を『100%』としています。
そして、表示する位置を『float』にて『左』と指定しています。
そして、余白を定義する『margin』の右側をマイナス値で定義しています。
これは、通常ですと余白が外側へ広がっていくのに対し、マイナス値ですので、
コンテンツの内側へ向かって領域が狭まっていきます。

そのまま幅を100%とすると、サイドバーが入り込む隙間がありませんので、
マイナス値を使ってサイドバーが入る『隙間』を作り上げています。
『100%-200px』の様な幅指定が出来れば問題ないのですが、
CSSではこのような定義が出来ないので、『margin』プロパティを使用する事で
可変は幅指定を可能としています。

続いて『#content』にてメインコンテンツを定義しています。
ココでは先程の『#content_wrap』とは逆に、プラス値にて『margin』を指定しています。
これは、サイドバーが入り込んできた領域に対して要素が重ならない様にする為です。
余白をサイドバー幅分つくる事で、メインコンテンツの余白の部分にサイドバーが表示される
状態となります。

後は『#sidebar』でサイドバーの幅と表示位置を指定します。
固定幅レイアウトと同じ様に、『float』要素の左右を書き換えるだけで
大幅なレイアウト変更が可能なので保守性も良いですね。

『float』の他への影響を防止する為に、『#footer』で『clear:both;』にて
『float』を解除する事を忘れないで下さい。

纏めますと、
ネガティブマージンを使用する事で、隙間にサイドバーを入れ
中身のmarginで重ならない様に制御するのがポイントです。
固定幅なのはサイドバーだけで、後は基本的にwidthが100%なので、ブラウザサイズによって調整されます。

情報量の多いサイト向き！固定幅３段組みレイアウト

いよいよ、大規模サイトで人気の3段組レイアウトの構築方法です。
コミュニティサイトでも良く見かける3段組レイアウトは、
両脇にサイドバーを用意したものや、片側に二つサイドバーを並べたものまで
簡単に対応出来るようにサンプルを作成しました。

まずは下記のHTMLをご確認下さい。



ヘッダー
 


メインコンテンツ
  

サイドバー1
  


サイドバー2
 

フッター

基本的な考え方は、二段組レイアウトを二つ作るイメージです。
『id="wrap"』内にて二段カラムを作り、『id="wrap"』と『id="sidebar2"』で
もう一つ二段カラムを作ります。
二段カラムのメインコンテンツが二段カラムになっている状態です。

それではCSSの定義を見てみましょぅ。

/*
 領域の表示幅と位置
*/
#main{
 width:900px;
 margin:auto;
}

/*
*
*/
#header{
}

/*
 包む事で、一つの領域とみなし、二段組レイアウトと同じ様に処理する
*/
#wrap{
 width:700px;
 float:left;
}

/*
 メインとなる領域を幅指定。floatで右か左か選択出来る
*/
#content{
 width:500px;
 float:right;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar1{
 width:200px;
 float:left;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar2{
 width:200px;
 float:right;
}

/*
 floatを解除する
*/
#footer{
 clear:both;
}

サイドバーとメインコンテンツを包む事で一つの領域とみなし、
二段組レイアウト構築時と同じ様に扱える様にします。
二段組レイアウトが入れ子になっているイメージですね。

一つづつ見てましょう。

まず、『#main』では全体の領域幅と位置を指定しています。
続いて、『#header』は、今回はレイアウトに関係ないので省きます。
そして『#wrap』ですが、メインコンテンツとサイドバーの一つを纏める為の要素で、
メインコンテンツとサイドバーを足した幅を指定し、纏めた要素を左右のどちらに表示するか
指定しています。

『#content』でメインコンテンツの幅と表示位置を指定し、
『#sidebar1』ではサイドバーの幅と表示位置を指定しています。

『#sidebar2』も同様に、もう一つのサイドバーの幅と位置を指定しています。

『#footer』でfloatを解除する事を忘れないで下さい。

あまりピンと来ない方は、基本の二段組みレイアウトの構築方法を
もう一度確認し、三段カラムは二段組の入れ子で表現すると言う事を
イメージして下さい。

少し複雑に見えますが、二段組の応用ですので、
考え方さえ身に着ければ、いくらでも応用が利きます。

次は、同じく二段組の応用として、3カラムレイアウトにおける
リキッドデザインの実装方法について解説致します。

可変幅の３段組リキッドレイアウト構築方法

左右にサイドバーがあり、真ん中のメインコンテンツを画面幅に合わせて
可変とする3段組リキッドレイアウト。
勿論、floatする方向を変えるだけで左右どちらかにサイドバーを二つ並べて、
メインコンテンツを可変にする事も可能です。

これまた二段組みリキッドレイアウトの応用で、
二段組リキッドレイアウトが入れ子になっている状態です。

まずは実際のコードを見てみましょ。



ヘッダー
 



メインコンテンツ
   


サイドバー1
  


サイドバー2
 

フッター

イメージとしては、二段組カラムの中に二段組みリキッドレイアウトが入っている状態です。
中のリキッドレイアウトの可変によって、そとの二段組レイアウトも押し広げられる事で、
メインコンテンツを画面領域と共に可変する事を可能にしています。

少し複雑になってきましたが、基本的な事は二段組みリキッドデザインと同じですので、
不安な方は二段組リキッドデザインから読み直して下さい。

それではCSSの実装です。

/*
 領域の表示幅と位置
*/
#main{
 width:100%;
 margin:auto;
}

/*
*
*/
#header{
}

/*
 100%幅だが、サイドバーの分だけ領域を削減する
*/
#wrap{
 width:100%;
 float:left;
 margin-right:-200px;
}

/*
 100%幅だが、サイドバーの分だけ領域を削減する
*/
#content_wrap{
 width:100%;
 float:right;
 margin-left:-200px;
}

/*
 サイドバーとコンテンツが重ならない様に、両脇のサイドバー分余白を作る
*/
#content{
 margin-left:200px;
 margin-right:200px;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar1{
 width:200px;
 float:left;
}

/*
 サイドバーを幅指定。floatで右か左か選択出来る
*/
#sidebar2{
 width:200px;
 float:right;
}

/*
 floatを解除する
*/
#footer{
 clear:both;
}

ポイントとしては、メインコンテンツを表す『#content』が、
両脇のサイドバー分『margin』にて余白をつけている点、
そして、『#wrap』と『#content_wrap』で、
それぞれにサイドバー分のネガティブマージンを設定している点です。

HTMLと見比べると分かりやすいと思いますが、『#wrap』と『#content_wrap』は
それぞれ可変となるメインコンテンツを中に持ち、サイドバーと同階層になっています。
同階層のサイドバー分だけネガティブマージンを設定し、隙間に滑り込ませています。
勿論、floatの方向を変える事で、自由にレイアウト変更を行う事が出来ます。

また、レイアウト変更に際し、HTMLを触る必要が無いのは保守性以外にも
SEO的に最適化しやすいといった利点があります。

今回の例ですと、左右にサイドバーを設けますが、
初めに出てくるのはメインコンテンツです。
位置はCSSで指定できますので、HTMLではSEO的に重要な部分を上部に配置する事によって
SEO対策を可能にしてくれます。

CSSによるfloatレイアウト構築のメリット

今回は良く使われるCSSのfloatを使ったレイアウトについて解説いたしました。
ホームページを作成する際の、スタートラインとして
今回のサンプルコードから肉付けしていく形で製作すると楽かも知れません。
また、こういったCSSで作るレイアウトは、HTMLを触れる事なるデザインを変更出来る
保守性でのメリット以外にも、HTML構造をデザインに捕らわれる事無く構築出来ますので、
SEO対策にも集中しやすいメリットがあります。

一旦身に着けてしまえば、実は考え方は単純ですので、
しっかりと身に着けて、いざ必要な時に悩まないようにしたいですね。

コピペで使えるfloatレイアウト（可変リキッド・固定幅（2段組・3段組）