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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作

レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリーンで見やすく操作しやすいレイアウトを、大きいスクリーンに対しては大きいスクリーンに適したレイアウトを提供します。


f:id:yachin29:20150520224634p:plain


レスポンシブWebデザインは、「フルードグリッド(Fluid Grid)」「フルードイメージ(Fluid Image)」「メディアクエリー(Media Query)」の3つの技術的な要素で構成されます。

●フルードグリッド

 フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン(Fluid Design)」を合わせたものです。レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を%に変換してフルードデザインに変更します。

●フルードイメージ

 フルードイメージは、レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できます。イギリスのコンサルティングファームClearleftのリチャード・ルター(Richard Rutter)氏によって提唱されました。

●メディアクエリー

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

●ブレイクポイント

 ブレイクポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

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

ブレイクポイントは決まった数や値がある訳ではありません。
例えばBootstrap3ではブレイクポインが4つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px以下がスマホ
に分かれていましたが、

バージョンアップしたBootstrap4ではブレイクポイントが5つあり、
1200px以上がPC(大画面)用
1199px~992pxがPC用
991px~768pxがタブレット
767px~544pxがスマホ
543px以下がスマホ(小さいサイズ)用
に分かれました。これによって例えばiPhone 5, 6のポートレートランドスケープ時に、表示を切り替えることができるようになり、より柔軟にモバイル最適化が行えるようになりました。



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

ブレイクポイントは絶対的に決まった数値ではなく、その時々の要件や主要のデバイスサイズによって変わっていくので、数字を暗記するのではなく、意味を理解する必要があります。

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

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

@media (max-width:959px){

}


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

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

}

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


}


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムをRWDにする</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1><img src="img/header.png" alt="#"></h1>
</header>
<nav>

</nav>
<div id="wrapper">
<div id="main"></div>
<div id="sub"></div>
</div>

<footer></footer>
</div>
</body>
</html>

style.css

/* 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, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: none;
  vertical-align: bottom;
}


/* PCレイアウト */
body {
  background: #9CF;
}
#container {
  width: 940px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}
header {
  height: 200px;
  background: #FF0099;
  margin-bottom: 10px;
}
nav {
  height: 50px;
  background: #FFCC00;
  margin-bottom: 10px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
#main {
  width: 600px;
  height: 400px;
  background-color: #0099FF;
  float: left;
}
#sub {
  width: 330px;
  height: 400px;
  background-color: #FF6600;
  float: right;
}
footer {
  height: 100px;
  background-color: #666666;
}

@media screen and (max-width:959px) {
 /* Mサイズのレイアウト*/
#container {
  width: 98%;/*940÷960=98%*/
  padding: 1%;/*10px÷960px =1%*/ 
}
header {
  margin-bottom: 1%;
}
nav {
  margin-bottom: 1%;
}
#wrapper {
  margin-bottom: 1%;
}
#main {
  width: 64%; /*600px÷940px=63.82.....%*/
}
#sub {
  width:35%;

}
header img {
  max-width:100%; /*フルードイメージの設定*/
}
}
@media screen and (max-width:767px) {
#main {
  float: none;
  width: 100%;
  margin-bottom: 1%;
}
#sub {
  float: none;
  width: 100%;
}

nav {
  height: 100px;
}

}