3カラムデザイン

3カラム。つまり、3行の段組をCSSで実現します。

以下、コピーしてお使い下さい。
（*今回はカラムの紹介ということで、カラー設定などは、センス無しというか、全く考えてません。その辺は、また別の記事で。）

********HTMLソース。BODYタグの間に入れて下さい。********


<div class="container">

<div class="sub_container">


<div class="leftside">
左側のカラムは、カラム１・２を含んでいます。

<div class="left_leftside">
カラム１の内容はこちら

</div>


<div class="right_leftside">
カラム２の内容はこちら

</div>


<div class="leftside_end">
カラム３はここまでです

</div>


</div>


<div class="rightside">

<p>カラム３の中味はここです。</p>
<p> </p>
<p> </p>
<p> </p>

</div>


</div>

</div>

*********CSS 部分*******************
スタイルシートは、HTMLと別ファイルで準備します。
Webの構成が
/public_html/
┣/htm/
┃ ┗***.htm
┗/css/
┗cssdesign.css

となっていた場合は、***.htmに

<link href="../css/cssdesign.css" rel="stylesheet" type="text/css" />

と記入し、CSSへのリンクを張って下さい。

********CSS source*******************

/* CSS Document */
/* Author:George */
/* version: Oct.13 2004 */

body{
margin:0;
text-align:center; /*IE 5.5以前用センタリング*/
}

/*大外を囲む枠はcontainer
その内側にsub_containerをおく。
これをすることで、外側を囲うDIVからなかにはいるDIVが
はみ出さないようにするため。
本体の幅はcontainer内のwidthで設定。変更したい場合はwidthを変更する。
カラム本体の幅の変更については
カラム１・２の合計幅＋カラム３の幅で構成されているので
カラム３の幅を変更したい場合は
カラム３：rightsideのwidthを希望値に変更後
カラム１・２を囲っているカラム　leftsideの幅を変更。
合計で96％位になるように設定すること（100％にするとデザインが崩れる場合がある）
その上で、カラム１・２の幅を変えたい場合は
カラム１：left_leftside
カラム２：right_leftside
内の幅を変更。*/

.container{
width:80%;
margin:0 auto; /*新しいWebブラウザ用センタリング*/
text-align:left; /*centerを左揃えに戻す*/
background-color:#000000;
background-width:thin;
}
.sub_container{
width:100%;
float:left;
background-color:#CCCCCC;
}

/*3カラム用CSS*/
/*左側の二つのカラムをひとまとめにする*/
/*floatでまず、左の二つをまとめたカラムをleftに設定。
右のカラムをrightに設定。
そうした上で、カラム１をleft、カラム２をrightと設定。*/
.leftside{
width:67%;
background-color:#FF0000;
float:left;
background-width:thin;
}

.left_leftside{
width:27%;
background-color:#009966;
float:left;
background-width:thin;
}
.right_leftside{
width:70%;
background-color:#99CC99;
float:right;
background-width:thin;
}

/*右側のカラムの設定*/
.rightside{
width:30%;
background-color:#FF00FF;
float:right;
background-width:thin;
}

******************************************

これで、3カラムデザインが完成。
詳しいことは、次回にて。

ここ、デザインあんまり変えられないのかな・・・
早くもブログ変更の予感！？