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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

メディアクエリ実践

レスポンシブWebデザイン

メディアクエリ実践

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