webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

rwd 2 column layout その1

  • 色と、幅、高さを指定して、#wrapperで囲んで、中の#mainと#side をfloat で並べた状態。
  • #main はfloat: left; #sideはfloat: right; にしておく。rwdの時は両方ともfloat: left; にするよりも、この方が都合がいいのかもしれない。

f:id:ohta-felica:20160525205135p:plain

  • (本日の気付き)#containerを#headerなど、下に続く要素と幅を同じにすると、上のようになる。ここで、#container にpadding: 10px; すると、あら簡単。

f:id:ohta-felica:20160525205659p:plain

  • 最後に#header, nav, #wrapper にmargin-bottom: 10px;をつけるだけ。
  • こんなに簡単だったか?

f:id:ohta-felica:20160525210134p:plain

#container{
width: 940px;
margin: 0 auto;
background: #fff;
padding: 10px;
}
#header{
height: 200px;/*widthは指定しなければ親要素と同じになる。だから指定しない。*/
background: #C74747;
margin-bottom: 10px;
}
#nav{
height: 50px;
margin-bottom: 10px;
}
#wrapper{
overflow: hidden;
margin-bottom: 10px;
}
#main{
width: 570px;/*#mainと#sideで併せて930pxにする。間が10px*/
height: 400px;
background: #C7A747;
float: left;
}
#side{
width: 360px;
height: 400px;
background: #4747C7;
float: right;
}
#footer{
height: 100px;
background: #C747C7
}