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

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

初めてのメディアクエリ

レスポンシブWebデザイン

初めてのメディアクエリ

  • 1月開講クラス(2カラムまとめ)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Layout</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* reset
----------------------------------------------------------*/
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: sans-serif;
}

/* body
----------------------------------------------------------*/
body {
  font-size: 16px;
  background-color: #CCC;
  text-align: center;
}

/* layout
----------------------------------------------------------*/
#container {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
}
#header {
  margin-bottom: 20px;
  height: 80px;
  background-color: #DDEDEE;
  line-height: 80px;
}
#nav {
  margin-bottom: 20px;
  height: 50px;
  background-color: #FFCCFF;
  line-height: 50px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}
#content {
  float: right;
  width: 530px;
  height: 300px;
  background-color: #F5FCC9;
  line-height: 300px;
}
#sidebar {
  width: 200px;
  height: 300px;
  background-color: #CAF5C7;
  line-height: 300px;
}
#footer {
  height: 50px;
  background-color: #F9E1C6;
  line-height: 50px;
}
.border {
  border: 4px solid #666;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  #container {
    width: 100%;
  }
  #content {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #sidebar {
    width: 100%;
  }
</style>
</head>
<body>
<div id="container" class="border">
<div id="header" class="border">#header</div>
<div id="nav" class="border">#nav</div>
<div id="wrapper">
<div id="content" class="border">#content</div>
<div id="sidebar" class="border">#sidebar</div>
</div><!-- /#wrapper -->
<div id="footer" class="border">#footer</div>
</div><!-- /#container -->
</body>
</html>


f:id:web-0818:20170304095335p:plain

  • 文字の上下のセンターに入る設定に、ボーダーの上下分の8pxが影響して、本来の位置から8px下がって見えます
  • line-heightから8pxを引けば、本来の位置に配置されます

スマートフォン対応

ビューポート
<meta name="viewport" content="width=device-width,initial-scale=1">
メディアクエリ
  • 767px以下の表示を設定
@media screen and (max-width: 767px) {
  #container {
    width: 100%;
  }
  #content {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  #sidebar {
    width: 100%;
  }


f:id:web-0818:20170304095808p:plain