WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

モバイルファーストの記述例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリ</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

/*モバイルファーストの場合
スマホサイズのレイアウト*/
body {
  background: #999;
}
.box {
  width: 300px;
  height: 300px;
  background: #069;
  margin: 10px auto;
  
}

/*768px以上の時に適用(タブレットサイズ)*/
@media screen and (min-width:768px) {
  body {
    background: #C39;
  }
  #container {
    width: 620px;
    margin: 0 auto;
    overflow: hidden;
  }
  .box {
    float: left;
    margin: 5px;
  }
}

/*960px以上の時に適用(PCサイズ)*/
@media screen and (min-width:960px) {
  body {
    background: #000;
  }
   #container {
    width: 1240px;
  }
}