読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

CSSで基本的なレイアウトの練習

HTML・CSS

cssの基本的なレイアウトの枠組みを記述してみます。

①float layout

f:id:p_and_a_fam:20170226190822p:plain

#container{
  background-color:#eee;
  width:700px;
  height:550px;
}
#header{
  color:#fff;
  height:100px;
  background-color:#000;
}
#side{
  height:450px;
  width:180px;
  float:left;
  border-right:1px dotted #000000;
}
#cont{
  height:450px;
  width:500px;
  float:right;
}
#footer{
  color:#fff;
  background-color:#000;
  clear:both;
  height:50px;
  width:700px;
}

②3column layout

f:id:p_and_a_fam:20170226201020p:plain

#container{
  background-color:#ddd;
  width:700px;
  height:550px;
}
#header{
  color:#fff;
  height:100px;
  background-color:#000;
}
#cont1{
  background-color:#eee;
  float:left;
  height:400px;
  width:200px;
  margin-right:50px;
}
#cont2{
  background-color:#eee;
  float:left;
  height:400px;
  width:200px;
}
#cont3{
  background-color:#eee;
  float:right;
  height:400px;
  width:200px;
}
#footer{
  color:#fff;
  background-color:#000;
  clear:both;
  height:50px;
  width:700px;
}

③grid layout
f:id:p_and_a_fam:20170226201130p:plain

#container{
  background-color:#ddd;
  width:700px;
}
#header{
  color:#fff;
  height:100px;
  background-color:#000;
}
#cont1{
  background-color:#eee;
  float:left;
  height:400px;
  width:200px;
  margin-right:50px;
}
#cont2{
  background-color:#eee;
  float:left;
  height:400px;
  width:200px;
}
#cont3{
  background-color:#eee;
  float:right;
  height:400px;
  width:200px;
}
#footer{
  color:#fff;
  background-color:#000;
  clear:both;
  height:50px;
  width:700px;
}
.box li{
  background-color:#eee;
  height:100px;
  width:170px;
  float:left;
  margin:0 50px 50px 0;
}
.box li:nth-child(3n){
  margin:0;
}
.box{
  margin:50px 45px 0 45px;
}