2015年1月22日木曜日

レスポンシブルサイトの原型

レスポンシブルサイトを作る際の基本概念と設計。

●HTML






 
レスポンシブル









container
left

スマホのみ表示

●CSS

body{
 margin:0;
 padding:0;
 text-align:center;
}



.clearfix{
 overflow:hidden;
 }
* html .clearfix{
  height:1%;
  overflow:visible;
}


.section{
 width:80%;
 margin:0 auto 0 auto;
 background:#FFF;
}


#header{
 width:100%;
 background:#CCC;
 margin-bottom:20px;
 padding:10px;
}

#container{
 width:100%;
 background:#FFC;
 margin-bottom:20px;
 padding:10px;
}


#left{
 width:80%;
 float:left;
 background:#ff0000;
 color:#FFF;
 height:250px;
}

#left span{
 display:none;
}



#right{
 width:20%;
 float:right;
 background:#06C;
 color:#FFF;
 height:250px;
}

#footer{
 width:100%;
 background:#CCC;
 margin-bottom:20px;
 padding:10px;
}



/******************/
/* for SP    */
/* 1px-320px    */
/******************/

@media only screen and (min-width: 1px) and (max-width: 320px) {

#header{
 padding:10px 0 10px 0;
}

#container{
 padding:10px 0 10px 0;
}


.section{
 width:300px;
 margin:0 auto 0 auto;
}

#left{
 width:100%;
 float:none;
}

#left span{
 display:block;
 font-weight:bold;
}


#right{
 width:100%;
 float:none;
}

#footer{
 padding:10px 0 10px 0;
}



 
}

0 件のコメント:

コメントを投稿