レスポンシブWebデザイン（レスポンシブ・ウェブデザイン）

レスポンシブWebデザイン（レスポンシブ・ウェブデザイン）とは、デバイスごとに複数のデザインを用意するのではなく、ブラウザのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法。

レスポンシブWebデザインを構成する3つの要素技術

フルードグリッド（Fluid Grid）

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

フルードイメージ（Fluid Image）／Flexible Images

レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装できる。

メディアクエリー（Media Query）

画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術。

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

• 現在の主流は、CSS3のMedia Queriesを使った手法
• 従来のようなUAによる切り替えも可能
• Media Queriesとサーバサイドを組み合わせる「RESS（REsponsive + ServerSide）」もある
• レイアウト幅は、可変をベースに「%」や「em」で→リキッドレイアウト（Flexible grid）

Media Queriesを利用したレスポンシブWebデザインの実装

ブレークポイントの設定

PC、タブレット、スマフォ（縦、横）等、デバイスの種類によってディスプレイサイズが異なる。
ディスプレイサイズやウィンドウサイズに応じてレイアウトを切り替える境界をブレークポイントと呼ぶ。
ブレークポイントによって使用するcssを分ける設定は下記。
（例）ウインドウサイズが480px〜768pxの場合にtablet.cssを読み込む

• link要素のmedia属性

<link rel="stylesheet" media="screen and (min-width:480px) and (max-width: 768px)" href="tablet.css" />

• @import

@import url("tablet.css") screen and (min-width:480px) and (max-width: 768px)

• @media

@media screen and (min-width:480px) and (max-width: 768px){
    /* style */
}

viewportの設定

viewportはPCにおけるブラウザのウィンドウサイズに該当する概念。
例えばiPhoneのviewportのデフォルト値は980pxなので、
設定をしないと980pxのウインドウでアクセスしてると捉えられてしまい
スマートフォン用にcssを用意していても適応されない。
なのでレスポンシブwebデザインでスマートフォンにも対応させるのであればviewportの設定は必須となる。

<meta name="viewport" content="[プロパティ]=[値](, [プロパティ]=[値])">

設定項目は下記。

プロパティ	内容	デフォルト値	許容範囲
width	Viewportの横幅	980px	200〜10,000px
height	Viewportの縦幅	横幅とアスペクト比から計算される値	200〜10,000px
device-width	デバイスのスクリーンの幅	–	–
device-height	デバイスのスクリーンの高さ	–	–
initial-scale	倍率の初期値	表示範囲から計算される値	minimum-scale〜maximum-scale
minimum-scale	倍率の最小値	0.25	0〜10
maximum-scale	倍率の最大値	1.6	0〜10
user-scalable	拡大縮小の可否	yes	–

現在のところデバイスサイズのwidth=device-width（デバイスの幅）の指定が一番無難？

<meta name="viewport" content="width=device-width,initial-scale=1">

"width=content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味。
参考：
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

フルードイメージ（Fluid Image）の設定

画像もウインドウサイズに合わせて可変するようにする。

img{
    max-width: 100%;
    height: auto;
    width /****/:auto;  /*IE8のみ適用*/
}

IE8ではmax-widthで横幅しか縮小されないバグがる。
対策としてはimgタグのwidth属性を記述しないか、
IE8にはwidth:100%を指定する。
また、IE 7以下では縮小された画像が粗く見える。
この問題はimgSizer.jsというjsで対処できる。
背景画像はcssのbackground-sizeを使用するとウインドウサイズに合わせて可変できる。

#content{
  background-size:cover;/*背景画像で全体を覆う*/
}

または、

#content{
  background-size:100% auto; /*背景画像を横幅いっぱいに表示*/
}

画像はPCでもきれいに表示される大きさの解像度の画像なのでスマートフォンには容量が大きく最適ではない。
スマートフォン用の容量の小さい画像を用意するのが理想。
そこでスマートフォンには容量の小さい画像を表示させるresponsiveimgs.jsというスクリプトがある。
ただしそれぞれの画像につき2つの画像を用意しなければならないというデメリットも。

CSSのリセット

ブラウザの初期設定のスタイルシートが反映されているのが原因でブラウザの種類によりスタイルが異なることがある。
クロスブラウザ間でスタイルを統一させる場合、ブラウザデフォルトのCSSをリセットする方法がある。

文字コードの指定

ブラウザ標準スタイルのリセットの前に文字コードを指定。
文字コードはutf-8で、@charsetの「t」と“utf-8”;の「”」の間に「半角スペース」を忘れないように。

@charset "utf-8";

marginとpaddingのリセット

「*（全称セレクター）」を利用して、marginとpaddingを「0」に設定。

*{margin: 0; padding: 0}

a要素の下線、ul、ol要素の「・」のリセット

a要素の下線と、ul、ol要素の「・」をオフに指定。

a { text-decoration : none}
ul, ol { list-style : none}

img要素の余計な余白（ディセンダー）のリセット

「ディセンダー」と呼ばれる余計な余白がある。
ディセンダーとは、欧文小文字の「g」「j」「p」「q」「y」で、ベースラインの下にはみ出す部分のこと。
ディセンダーは文字だけではなくimg要素にも適用されるので、img要素の下に隙間ができてしまう。
img要素のディセンダーは、img要素に対してvertical-align : middleを指定することで削除できる。

img{ vertical-align : middle}

vertical-alignの値には、表のようにmiddleだけでなく、topやbottomも指定できる。

値	意味
top	line-heightの上端揃え
text-top	font-sizeの上端揃え
middle	font-sizeの中央揃え
baseline	baseline揃え（初期値）
text-bottom	font-sizeの下端揃え
bottom	line-heightの下端揃え
super	上付き文字
sub	下付き文字
%指定	要素のline-heightに対する割合を%で指定（baselineが揃った状態が0、値が正ならばbaselineの上、値が負ならばbaseline下へ移動）
数値＋単位	数値にem、ex、pxなどの単位をつけて指定（baselineが揃った状態が0、値が正なら上、値が負なら下へ移動）

■サンプルcss

@charset "utf-8";
  
/* @group reset */
  
*{margin: 0;padding: 0}
  
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}
  
/* @end */

★CSSリセット以外のアプローチ★

CSSの挙動をクロスブラウザ間で合わせる「normalize.css」がある。
http://necolas.github.com/normalize.css/
normalize.cssは、クロスブラウザ対応で問題となる箇所だけに修正スタイルを適用して有用なスタイルはそのまま活かすアプローチをとっている。
CSSのリセットによる標準スタイルを全て無効化することで均一な状態を作るアプローチとは反対の位置づけと言える。

Media Queriesに非対応の環境をどうするのか

IE8以前はMedia Queriesに（というかCSS3に）非対応である。
以下の２つの対応方法がある。

• 「Respond.js」や「css3mediaqueries.js」を用いる
• IEのみにスタイルシートをわけて提供する

respond.js

https://github.com/scottjehl/Respond
CSS3に対応していないIE6〜8といったブラウザでもメディアクエリを実装できるようにするjsプラグイン。
内にrespond.jsを読み込むだけのシンプル実装。（※IE8以下でのみ読み込む指定をすると良いと思われ）

css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js/
Googleコードで公開されているCSS3に対応していないIE6〜8といったブラウザでメディアクエリを実装できるようにするjsプラグイン。
こちらもrespond.js同様に内に読み込むシンプル実装。

環境によってCSSのロードを切りかえる手法

• Media Queriesでの切り替えではなく、JavaScriptによってロードするCSSを切り替える
• eCSSential
  • https://github.com/scottjehl/eCSSential

レスポンシブWebデザインにおける画像の扱いの課題

• レスポンシブ・ウェアデザインでの一番の問題
• 同一画像をすべてで使い回すことは現実的ではない
• パフォーマンスを考慮すると、画面サイズなどで配信画像を切り替える方が理想的
• Retinaディスプレイへの対応はどうする？

環境に合わせた画像配信、現時点での対処方法

• jQueryなどのJSライブラリを使って切りかえる
• サーバサイドでCookieや.htaccessを使って切り替える
• サーバサイドで動的に画像を生成し、それをブラウザ側に配信する形で実装する

JavaScriptを使った画像の切り替え

• Responsive-Images
  • https://github.com/filamentgroup/Responsive-Images
• responsive_image_tag
  • https://github.com/futurechimp/responsive_image_tag
• Retina.js
  • http://retinajs.com/
• Retina Images
  • http://retina-images.complexcompulsions.com/

レスポンシブWebデザインの確認ツール

Responsive.is

　　http://responsive.is/

The Responsinator

　　http://www.responsinator.com/

ScreenSueri.es

　　http://screenqueri.es/

Aptus

　　http://itunes.appple.com/gb/app/aptus/id510487565?mt=12

Responsive Checker

　　http://www.lifehacker.jp/2013/11/131110responsive_checker.html

その他便利サイト・ツール

Responsive Web Design Test Tool

http://designmodo.com/responsive-test/

Responsive Design Test Bookmarklet

http://responsive.victorcoulon.fr/
レスポンシブWebデザインを確認できる便利なブックマークレット。
お気に入りのブックマークバーに追加してサイト閲覧時にクリックするとデバイスのサイズごとに検証ができ、非常に便利。

responsivepx

http://responsivepx.com/
URLを入れてバーを動かしてサイズを変更するとレスポンシブWebデザインの検証ができる。

Yet Another Window Resizer（Add-ons for Firefox）

https://addons.mozilla.org/en-US/firefox/addon/yet-another-window-resizer/
FireFoxのアドオンで、ウインドウサイズをリサイズするアドオン。
SafariやChromeと違いスマートフォンブラウザの検証には不向きだが、Firebugを見ながら確認したい際などに便利かも。

Media Queries

http://mediaqueri.es/
海外のメディアクエリを使用したレスポンシブウェブサイトをまとめたギャラリーサイト。
たくさんのサイトが紹介されているでレイアウトやデザインの参考になる。

参考

レスポンシブウェブデザインについて
http://design-spice.com/2011/09/22/responsive-web-desig/

viewport
http://ipn3g.com/web/study3.html

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
http://kachibito.net/web-design/responsive-web-design-resource.html

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました
http://www.html5-memo.com/html5/responsive/

ゼロから始めるレスポンシブWebデザイン入門
http://ascii.jp/elem/000/000/700/700611/

レスポンシブWebデザインに関しての備忘録
http://www.nxworld.net/tips/responsive-web-design.html

レスポンシブwebデザインの作り方とSEOとUXを考察
http://programmerbox.com/2013-02-18_responsive_design_seo_ux/

レスポンシブWebデザインに対応した「jquery.heightLine.js」
http://blog.webcreativepark.net/2013/10/21-112000.html

レスポンシブウェブサイトのパフォーマンス向上
http://wazanova.jp/items/852