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

webかたつむり

WEB制作会社のフォトグラファー

rwd 2 column layout その2

  • その1 のCSS に以下のコードを書き足します。
  • containerの幅はbodyに対しての割合。
  • containerの中にある要素の幅は、containerの幅=940pxに対する割合で指定する。
  • 要素の上下につくpadding marginの大きさも、親要素の横幅に対する割合で指定する。つまりpadding: 1%と指定すれば、上下左右均等にpaddingが付く。
  • リセットを除いた、CSSの全文を、@media screen and (max-width: 960px){、以下に貼り付けて、不要な箇所、つまり継承する部分を削っていくのが効率的。
  • タブレットは、小型PCという意識で使われるから、PCと見栄えが変わらない方がいい、とのこと。

@media screen and (max-width: 960px){
#container{
width: 98%;
padding: 1%;
}
#header{
margin-bottom: 1%;
}
#nav{
margin-bottom: 1%;
}
#wrapper{
margin-bottom: 1%;
}
#main{
width: 60%;/*#containerの幅はbodyの98%,#mainの親は#container(この幅が=100%=940px)*/
}
#side{
width: 39%;
}
#footer{
}

}

 

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