レスポンシブWebデザイン - web-0127のブログ

レスポンシブWebデザインの誕生

Responsive Web Design は、2010年イーサン・マルコッテ氏が提唱した制作手法です

A List Apart

レスポンシブWebデザインのデメリット

CSSの記述が複雑になる
無駄な処理が生じる恐れがある
PCサイトに切り替えられない
IE8以前の古いブラウザをサポートできない

メディアクエリを使った指定

CSSの指定を行う際、条件を付加できる機能

メディアクエリの記述方法

@media メディアタイプ and（条件）{
　　セレクタ（プロパティ：値； プロパティ：値；・・・・・）
}

メディアタイプは「screen（画面）」「print（印刷時）」「projection（プロジェクター）」「all（すべて）」などを指定できます
条件を幅で指定するときは「max-width」または「min-width」を指定し、「：コロン」の後に「単位付きの数値」で条件を記述します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアクエリ</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
#container {
  width: 760px;
  margin: 0 auto;
}
h1{
  margin-bottom: 16px;
  padding-top: 20px;
  border-bottom: solid 3px #F00;
}

@media screen and (max-width:480px) {
  #container {
    width: 100%;
  }
  h1{
    font-size: 2.0rem;
    background: #63A484;
    color: #FFF;
    padding: 5px 0 4px 0;
    border: none;
    text-align: center;
  }
  p{
    margin: 0 1.6rem;
    color: #947F44;
  }
}
</style>
</head>
<body>
<div id="container">
<h1>メディアクエリ</h1>
<p>メディアクエリを使うと、ブラウザのウィンドウ幅に応じて各要素の書式を変更できるようになります。なお、スマートフォンでは、端末画面の幅（ピクセル数）が「ブラウザのウィンドウ幅」に相当します。</p>
</div><!-- /#container -->
</body>
</html>

画像をレスポンシブに

ブレイクポイント「640px」までが「スマートフォン用の指定」
それを超えると、PC用の指定が適用されます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メディアクエリ：画像</title>
<style>
/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
}

/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 20px; font-size: 2.0rem; }
p { font-size: 16px; font-size: 1.6rem; }

/* layout */
body {
  padding: 20px;
}
  img {
  width: 320px;
  vertical-align: middle;
  }

@media (max-width:640px) {
  body{ padding: 0; }
  h1 {
    font-size: 2.0rem;
    padding: 10px;
    background: #333;
    color: #FFF;
  }
  img{
    width: 100%;
  }
}
</style>
</head>
<body>
<h1>メディアクエリ：画像</h1>
<p><img src="img/01.png"><img src="img/02.png"></p>
</body>
</html>