3カラムレイアウトの作成
#05 3カラムのレイアウト (可変幅)
http://dotinstall.com/lessons/website_html/9005
を参考に
可変の3カラムレイアウトを作成
最初にHTMLを編集しておく
<div id="main">
の中で
<div id="center">center</div>
を追記
CSSのファイルは
最初の画面にでているような状態にするなら
#container{
width:70%;
margin:0 auto;
}
#header{
background-color:red;
}
#main{
background-color:blue;
overflow:hidden;
}
#footer{
background-color:green;
}
#left{
background-color:pink;
}
#center{
background-color:orange;
}
#right{
background-color:purple;
}
となる
これをカスタマイズしていく
ここから、まず left を編集
#left{
background-color:pink;
float:left;
width:30%;
}
とすることで
float:left;
で左に回りこみ
width:30% で大きさを４０％に設定
#center{
background-color:orange;
float:left;
width:40%;
}
これで
float:left;
で左に回りこみ
width:40% で大きさを４０％に設定
#right{
background-color:purple;
float:left;
width:30%;
}
ここでの注意点は
footer がまわりこまないように
#container
で
overflow: hidden;
を設定しておくこと
とりあえず、これで3カラムができる
この使い道は、CSSの設定とHTMLで
テンプレが作成できるということ
これは wordpress テンプレとかでも
MT4 とかでも同じ
現状は可変だけど、固定幅にすることも可能
例えば
left を固定で100px
right も固定で１００px
そして、center は left ぶんだけ開けるとするなら
#left と #right では
width=100px
として
#center では
margin-left:100px;
とする
こうすれば、left のぶんだけあけることが可能
ちなみに、HTMLで
left
right
center
の順番だとOKだけど
left
center
right
だとレイアウトが崩れるので注意