レスポンシブWebデザインの実装

HTML5

viewport

  • それぞれのデバイス幅にあわせた表示を可能にする記述
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
  • デバイスの表示領域の幅を指定します
  • これを指定することで、デフォルトの状態で自動的に縮小される動作をおこなわないようにします
initial-scale=1.0
  • デバイスの表示領域の幅を指定します
  • この記述では、拡大・縮小をおこなわずに表示するという意味になります

Flexible images（Fluid images）

  • 画像は、挿入されたスペースの左上から100%の大きさで読み込まれることが基本です
  • PCで閲覧用の画像は、そのままの大きさではスマートフォンの中でははみ出た状態になってしまいます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Responsive Web Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="fluid_img"><img src="img/coffee.jpg" alt="ブレンドコーヒー"></p>
<p>「ブラジル」や「コロンビア」など、単一の産地の名前がついているコーヒー豆を「ストレート」といい、産地ごとの特徴や個性を味わうことができます。それに対し、複数の産地のコーヒー豆を、割合を決めて配合したものを「ブレンド」といい、ストレートコーヒーだけでは出せない風味を作り出します。</p>
</body>
</html>

@charset "UTF-8";

p.fluid_img > img {
  max-width: 100%;
  height: auto;
}

f:id:web-design-lesson:20160819180329p:plain

max-width: 100%;
  • 「最大で幅を100%にする」という表現です
  • この場合、img要素の親要素であるp要素の幅に対してのパーセンテージです
  • img要素の幅を超えた場合には、それ以上拡大しないという挙動になります
height: auto;
  • 高さを自動的に調整する
@charset "UTF-8";

p.fluid_img {
  width: 50%;
}
p.fluid_img > img {
  max-width: 100%;
  height: auto;
}


《親要素がデバイス幅の50%の場合》

@charset "UTF-8";

p.fluid_img {
  width: 50%;
}
p.fluid_img > img {
  max-width: 100%;
  height: auto;
}


f:id:web-design-lesson:20160819192359p:plain