メディアクエリーの設定 - WEBサイト制作の勉強

レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決め、それぞれの条件に沿ったスタイルシートを記述していきます。

今回のブレイクポイントは

PCサイズ　960px以上
タブレットサイズ　737px～959px
スマートフォンサイズ　736px以下

IE8ではメディアクエリーが使用出来ないので、「css3-mediaqueries.js」というスクリプトを使用し、IE8でもメディアクエリーが使用出来るようにします。

https://code.google.com/p/css3-mediaqueries-js/

<!--[if lt IE 9]>
    <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

さらに、HTML5用のIE8対策として、「HTML5 Shiv」も一緒に付けましょう。
http://html5shiv.googlecode.com/svn/trunk/html5.js

レスポンシブデザインサイトの基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
    <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  menu, nav, section { display: block; }
</style>
<script src=""></script>
</head>
<body>
	
</body>
</html>

CSSメディアクエリーの書き方

今回は１つのCSSファイル内にブレイクポイント毎にメディアクエリーを設定する方法で記述します。

@media (max-width:959px){

}

モダンブラウザーでは上記のように「@ media」のみでも動きますが、IE8にも対応させるには下記のような記述がひつようです。

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

}

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


}

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<meta name="viewport" content="width=device-width" >
<link rel="stylesheet" href="css/style2.css">
<!--[if lt IE 9]>
    <script src="css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>
<div id="container">
<header></header>
<nav></nav>
<div id="wrapper">
<section></section>
<aside></aside>
</div>
<footer></footer>
</div>
</body>
</html>

style2.css

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

/*レイアウト*/
body {
  background: #666;
}
#container {
  width: 960px;
  margin: 0 auto;
  border: 10px solid #FFF;
  box-sizing:border-box;
  background: #FFF;
}
header {
  width: 940px;
  height: 300px;
  background: #F3C;
  margin-bottom: 10px;
}
nav {
  width: 940px;
  height: 50px;
  background: #FF0;
  margin-bottom: 10px;
}
#wrapper {
  width: 940px;
  overflow: hidden;
  margin-bottom: 10px;
}
section {
  width: 700px;
  height: 400px;
  background: #09F;
  float: left;
}
aside {
  width: 230px;
  height: 400px;
  background: #F90;
  float: right;
}
footer {
  width: 940px;
  height: 50px;
  background: #CCC;
}

@media screen and (max-width:959px){
#container {
  width: 100%;
}
header {
  width: 100%;
  margin-bottom: 10px;
}
nav {
  width: 100%;
  margin-bottom: 10px;
}
#wrapper {
  width: 100%;
  margin-bottom: 10px;
}
section {
  width: 100%;
  height: 300px;
  float: none;
  margin-bottom: 10px;
}
aside {
  width: 100%;
  height: 200px;
  float: none;
}
footer {
  width: 100%;
  height: 100px;
}

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

header {
  width: 100%;
  height: 200px;
}
section {
  height: 500px;
}
aside {
  height: 300px;
}
}

PC・タブレット、共に2カラムの場合

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


body {
  background: #666;
}

#container {
  width: 940px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}
header {
  width: 940px;
  height: 300px;
  background: #F3C;
  margin-bottom: 10px;
}
nav {
  width: 940px;
  height: 50px;
  background: #FF0;
  margin-bottom: 10px;
}
#wrapper {
  width: 940px;
  overflow: hidden;
  margin-bottom: 10px;
}
section {
  width: 700px;
  height: 400px;
  background: #09F;
  float: left;
}
aside {
  width: 230px;
  height: 400px;
  background: #F90;
  float: right;
}
footer {
  width: 940px;
  height: 50px;
  background: #CCC;
}

@media screen and (max-width:959px){
#container {
  width: 98%;
  margin: 0 auto;
  padding: 1%;
}
header {
  width: 100%;
  height: 200px;
}
nav {
  width: 100%;
  height: 50px;
}
#wrapper {
  width: 100%;
}
section {
  width: 74.47%; /*700px ÷ 940pxを四捨五入*/
  height: 400px;
  border-right: 10px solid #FFF;
  box-sizing: border-box;
}
aside {
  width: 25.53%;
  height: 400px;
}
footer {
  width: 100%;
  height: 100px;
}
}
@media screen and (max-width:736px){ 
section {
  width: 100%;
  border-right: none;
  box-sizing: content-box;
  margin-bottom: 10px;
  float: none;
}
aside {
  width: 100%;
  float: none;
}

}