レスポンシブWebデザインとは、1つのHTMLファイルでPCやスマートフォン、タブレットといった、あらゆるデバイスに最適化し、実現させる制作手法のことを言います。ブラウザのスクリーンサイズを基準に、CSSを使ってレイアウトを調整していくので、新しいデバイスなどが出てもHTMLを修正する必要もなく、デバイスごとにサイトを作成するよりもメンテナンスの負担も軽減することができます。
ここでは、レスポンシブWebデザインの基本的な作り方を紹介していきます。

レスポンシブWebデザイン制作の流れ

通常、Webサイトを制作する際は、Photoshopなどを使用してデザインカンプを作成し、決定したデザインに従ってHTMLやCSSでコーディングしていくという流れが基本だと思います。レスポンシブWebデザインでWebサイトを制作する際も、もちろんデザインカンプを用意しても構わないのですが、各デバイスごとにカンプを用意するとなると結構な時間と手間を費やしてしまうこともあります。それなので、レスポンシブWebデザインの場合は、ラフスケッチを用意するかイメージが付きにくい場合は、1つだけ基本となるカンプを用意して、あとはブラウザ上で直接HTMLやCSSを使用してデザインしていく方法をとることもあります。ちなみにこのような手法をデザイニングブラウザと呼ばれたりします。

レスポンシブWebデザインで使う技術

レスポンシブWebデザインを利用してサイトを制作していく場合に必要となってくる技術は概ね以下のようなものが挙げられます。

  • ビューポート（Viewport）の設定
  • メディアクエリーの使用
  • 可変グリッド設計（Fluid Grid）
  • 可変イメージ（Fluid Image）

HTMLの準備

HTMLは特別な事情がない限り、HTML5を使用してコーディングしていけば良いと思います。

Viewportの指定

スマートフォンに搭載されているブラウザには「Viewport」というウインドウサイズが設定されているので、設定されたViewportのサイズの応じてページを縮小して表示しています。実際にViewportを指定するには、以下のようにhead要素内に指定します。

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

「width=device-width」と指定しているのは、Viewportの幅をデバイスのスクリーンサイズに合わせるという意味になります。「width=320px」といったように数値で直接指定することもできますが、「device-width」としたほうが、様々なデバイスに対応することができます。その他にも、以下のようなプロパティが用意されています。

プロパティ内容
width任意の幅をpxで指定する
height任意の高さをpxで指定する
device-widthデバイスのスクリーンサイズに幅を合わせる
device-heightデバイスのスクリーンサイズに高さを合わせる
initial-scale最初に表示される表示倍率を指定する（0～10.0の範囲）
user-scalableユーザーによる表示の拡大・縮小を指定する（有効ならyes、無効ならno）
minimum-scale最小の縮小率を指定する（0～10.0の範囲）
maximum-scale最大の拡大率を指定する（0～10.0の範囲）

CSSの記述

レスポンシブWebデザインでは、メディアクエリーというものを使ってデバイスのスクリーンサイズに応じてCSSを切り替えていきます。

ブレイクポイントの指定

実際にCSSをスクリーンサイズごとに切り替えるには、ブレイクポイントというものを決めて、それぞれに合ったCSSを記述していきます。基本的には、どのようなデバイスにも依存しないようにするのが一番ですが、一般的に多くのユーザーが使うであろうサイズは以下のような感じです。

デバイスブレイクポイント
iphone4、5系（縦向き）320px
iphone4系（横向き）480px
iphone5系（横向き）568px
Android系（縦向き）360px
Android系（横向き）640px
タブレット768px
デスクトップPC1024px

どこをブレイクポイントにするかは制作するサイトの内容に応じて決定すれば良いでしょう。

メディアクエリーの使い方

メディアクエリーを使う方法は、HTMLのlink要素にメディアタイプを指定する方法と@mediaを利用してCSS内に記述する方法がありますが、link要素で複数のCSSファイルを読み込むよりも@mediaを利用したほうが、HTTPリクエスト回数も少なく、読み込みも早いので@mediaを利用するほうが良いでしょう。
以下は、ブレイクポイントを480px、768px、1024pxに設定した場合のCSSの記述例となります。

@charset "utf-8";
/*全体にかかるスタイルを記述*/
@media screen and (min-width:480px) {
/*最小幅480px以上のスクリーンサイズにかかるスタイルを記述*/
}
@media screen and (min-width:768px) {
/*最小幅768px以上のスクリーンサイズにかかるスタイルを記述*/
}
@media screen and (min-width:1024px) {
/*最小幅1024px以上のスクリーンサイズにかかるスタイルを記述*/
}

また、例えば768px～999pxの間で適応させたい場合や767px以下のサイズに適応させたい場合は、以下のように設定をします。

@charset "utf-8";
/*全体にかかるスタイルを記述*/
@media screen and (max-width:999px) and (min-width:768px) {
/*768px～999pxのスクリーンサイズにかかるスタイルを記述*/
}
@media screen and (max-width:767px) {
/*767px以下のスクリーンサイズにかかるスタイルを記述*/
}

また、PCサイトをコーディングしていく際と同じく、レスポンシブWebデザインの場合でもリセットCSSは使用したほうが良いでしょう。代表的なリセットCSSとしてはnormalize.cssとYUI Libraryがあります。

可変グリッド設計

レスポンシブWebデザインを用いる場合は様々なデバイスを対象として設計していきますので、そのウィンドウサイズに合わせてコンテンツの幅が可変していくように作る必要があります。したがって、PCサイトを作るときのようにpx単位では作らず、％など相対的な値で設計していきます。

可変イメージの使用

可変イメージもレスポンシブWebデザインにする場合には必要になってくる技術で、これはウィンドウ幅に合わせて画像サイズが変わっていく手法です。以下のように指定すると可変イメージにすることができます。

img {
  width: 100%;
}

以上が、レスポンシブWebデザインで作成する際の基本的なポイントとなります。

おすすめの記事