メディアクエリ実践

f:id:web-0818:20161208112520j:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブWebデザイン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>メディアクエリ</h1>
<p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素の書式を変更できるようになります。なお、スマートフォンでは、端末画面の幅（ピクセル数）が「ブラウザのウィンドウ幅」に相当します。</p>
<div id="wrapper">
<img src="img/morning.jpg" alt="" class="photo">
<ul class="nav">
<li><a href="#">リンクA</a></li>
<li><a href="#">リンクB</a></li>
<li><a href="#">リンクC</a></li>
</ul>
</div>
</div><!-- /#container -->
</body>
</html>

@charset "utf-8";

html, body, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul { list-style: none; }
img { max-width: 100%; }

body { background-color: #CCC; }
#container {
  width: 80%;
  margin: 0 auto;
  padding: 3%;
  background-color: #FFF;
}
h1 {
  font-size: 1.8em;
  margin-bottom: 10px;
}
p {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 1.0em;
}
#wrapper {
  overflow: hidden;
}
.photo {
  float: left;
  width: 78%;
  margin-bottom: 10px;
}
.nav {
  float: right;
  width: 20%;
  height: 100%;
}
.nav li a {
  display: block;
  margin-bottom: 4px;
  line-height: 2.6;
  text-align: center;
  background-color: #7D3C17;
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
}

@media screen and (max-width: 767px) {

body { background-color: #3C9; }
h1 {
  font-size: 1.6em;
  color: #924D14;
}
p {
  font-size: 0.875em;
}
.photo {
  width: 100%;
}
.nav {
  width: 100%;
}
}

f:id:web-0818:20161208112959j:plain