レスポンシブWebデザインとは

レスポンシブWebデザインとはスマートフォンから、タブレット・PCまで、それぞれに合わせて単一のHTMLファイルが自動的に最適を図ってWEBサイトのデザインを調整して表示する手法を指します。
レイアウトが「シングルカラム」から「マルチカラム」に変化したり、ナビゲーションメニューが「ハンバーガーメニュー」から「横並び」に切り替わったりすることで、スマートフォンから、タブレット・PCまで、画面の横幅に合わせて、Webサイトを最も見易い形で表示することが実現できる技術です。画面の横幅で切り替えるピクセル数の基準(ブレイクポイント)でデザインを切り替えます。

※レスポンシブWebデザインで良く使うオーソドックスな手法は「リキッドレイアウト」と「メディアクエリー（Media Query）」です。
ここからは、レスポンシブWebデザインの導入手順を説明していきます。

リキッドレイアウト

リキッドレイアウトとはブラウザの幅に合わせてコンテンツの表示範囲（位置）を変えつつ、解像度の違いでユーザビリティを損なわないように最適化したレイアウトを維持する表示方法です。画面を縮めても横スクロールバーが出ないようにします。リキッドレイアウトは、各列の幅をパーセンテージ（％）で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法です。

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

メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。
ここでは、メディアクエリーを使ってスクリーンサイズに応じたCSSに切り替える方法を説明します。
ヘッダーに記述を追加
まず、メディアクエリーを使うために必要なビューポート（viewport ）を設定します。ビューポートというのは、pc、タブレット、スマホのそれぞれで表示する際のサイトの見え方の指定です。アクセスしているデバイスの横幅を取得するために、ヘッダーに下記のビューポートタグを設置します。

<meta name="viewport" content="width=device-width" />

メディアクエリーの指定方法
次にメディアクエリーの指定を行います。
ここではメディアクエリーを使い画面の横幅で切り替えるピクセル数の基準(ブレイクポイント)を480px、768px、980pxとします。何段階に分けるかは制作者によって様々です。
デフォルトでスマートフォン用のスタイルを定義し、タブレット／PC用のスタイルをメディアクエリーを使って上書きしていく場合の記述が下記です。

/* デフォルト：479px以下用（スマートフォン用）の記述 */
@media screen and (min-width: 480px) {
/* 480px以上用（タブレット／スマートフォン用）の記述 */
}
@media screen and (min-width: 768px) {
/* 768px以上用（タブレット用）の記述 */
}
@media screen and (min-width: 980px) {
/* 980px以上用（PC用）の記述 */
}

その他の技術要素

レスポンシブWebデザインの他の技術要素として「フルードグリッド（Fluid Grid）」「フルードイメージ（Fluid Image）」があります。

フルードグリッド

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

フルードイメージ（Fluid Image）

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

アダプティブ・デザイン

アダプティブ・デザインは、ある特定の画面サイズ（例えば、320px、768px、1280px）のみに対応するようにデザインする制作手法のことで、対応していない横幅になった時はコンテンツが途中で見切れている状態になります。対応する画面サイズが例えば3つなら、HTMLとCSSも3つ必要になります。
レスポンシブWebデザインは1つのHTMLとCSSで画面の幅に合わせてレイアウトを最適化するので、この点が大きく違います。