スタイルシートでのレイアウトもテーブルでのレイアウトも
考え方は四角をどういう風に組み合わせるか。。。これだけです。
左側にメニューバーを作りたければ、左に来るように四角を作れば
それで終わりです。
スタイルシートで四角（枠）を作るためには、以下のようにします。
.box{
border: 1px solid #000;
}
こういうスタイルを用意しておいて、ＨＴＭＬ側で以下のように
記述してみます。
＜p class=”box”＞
今日は雨です。
＜/p＞
こうすると「今日は雨です」という部分のテキストが、黒い
枠で囲まれます。
今日は雨です。
試してみて頂くとすぐに分かりますので、イメージが湧かない人
はやってみて下さい。
さて、四角の作り方はわかりました。
あとはこれを組み合わせる方法が分かれば、スタイルシートで
ページのレイアウトができるようになります。
例えば、ヤフーのトップページのように、ページが２つに分割
された、２カラムのページを作成する場合には・・・
body{
text-align: center;
margin: 0;
padding: 0;
}
#wrap{
width: 750px;
margin: 0 auto;
text-align: left;
}
.main{
width: 500px;
float: right;
}
.menu{
width: 220px;
float: left;
}
これだけ書けば枠組みはとりあえずできちゃいます。
ＨＴＭＬには以下のように記述します。
（head内の記述は省略）
ここにメインコンテンツを記述