レスポンシブなサイトをつくりたい！実装方法はじめの一歩フラップイズム

どうも、くーへいです。

ここ数年は、「レスポンシブデザイン」のウェブサイトが流行していますよね。
ある意味、作りこまれたウェブサイトの代名詞にもなっているように感じます。

今回は「レスポンシブデザイン」の実装について、フロントエンドエンジニア目線で記事にしてみます。
今さら「はじめの一歩」？と思われるかもしれませんが、「セオリー」が固まりつつある今だからこそ、確認する必要があると思います。

そもそも「レスポンシブデザイン」とは？

「レスポンシブデザイン」が流行する前は、スマホ用のウェブサイトはディレクトリを変えて、別サイトとして構築することが多かったと思います。

「レスポンシブデザイン」では、サイトは同じなのですが、デバイスやブラウザサイズによって適用するCSSを変更することにより、PC向け、タブレット向け、スマホ向けのデザインを適用することができるウェブサイトを指します。

つまり、同一のHTMLで、複数のデバイスに対応できるようになるわけですね。
まずは、「レスポンシブデザイン」のメリット・デメリットを見て行きましょう。

「レスポンシブデザイン」のメリットとデメリット

くーへいの考えるメリット・デメリットは以下のようなものです。

メリット

「HTML」部分は共通なので、工数が削減できる。
上記に関連して、CMSとの相性がいい。（PC版とスマホ版の2つの「HTML」を更新する必要がない）

デメリット

「HTML」を変更できない分、実現できるデザインが限られる。（フレキシブルボックスが導入できれば解決できる）
画像等が大きい場合など、スマホでの表示速度が遅くなる。

案件にもよりますが、「レスポンシブデザイン」を導入するメリットは非常に大きいと感じています。

それでは、どのように実装するのかを見て行きましょう。

「レスポンシブデザイン」を実装するために必要なこと

「レスポンシブデザイン」は、CSS3における「メディアクエリ」を使用することで実現しています。
「メディアクエリ」は、CSS3になって、初めて実装された技術ですので、古いブラウザ（IE8以下）では対応していません。
しかし、「メディアクエリ」を必要とするのはスマホやタブレットなので、その辺りはCSS3に対応しており、問題はありません。（実装方法により、異なります）

古いブラウザ（IE8以下）で対応するには、以下の「JavaScript」を読み込むことで対応できます。

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

その他、「respond.js」等もありますが、その辺りは各自で使いやすいものを使用してください。

「viewport」を設定する

「メディアクエリ」を詳しく見て行く前に必要な作業として、<head>に以下の一文を入れてください。

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

「viewport」は、表示領域を指定するためのもので、上の表記はスマホやタブレットに対応するために必要です。

細かく見て行くと、nameで「viewport」とすることで、「viewport」の設定であることを定義しています。

content内には、細かい設定が入力されています。

width

「width」は、ウェブサイトの幅をどのように認識するかを設定します。
何も設定しないと、ウェブサイトの幅は980pxと設定されます。（初期値はブラウザによって異なるようです）
これによってなにが起こるかというと、例えば、「width」を指定しなかったウェブサイトを横幅490pxのデバイスで表示すると、デバイスはウェブサイトを1/2に縮小して表示するため、文字の大きさから画像の大きさまですべてが半分の大きさになってしまいます。
スマホ対応しないウェブサイトでは、その方がかえって都合がよいときもありますが、「レスポンシブデザイン」を実現するうえでは障害となってしまいます。

「width」を「device-width」としていますが、これはデバイスの横幅に合わせてください、という指示になります。例えば、デバイスの横幅が480pxならば、ウェブサイトも480pxの横幅だと認識されます。
もちろん、「width」には固定値も設定できます。

initial-scale

「initial-scale」は、初期表示時の表示倍率を指定しています。
初めてそのウェブサイトを表示した際は、拡大表示せずに、1.0倍で表示してください、と指示しています。
他にも、「minimum-scale」、「maximum-scale」が存在し、それぞれ最小倍率、最大倍率を指定できます。

user-scalable

今回の例では指定していませんが、「user-scalable」も指定できます。
つまりは、ユーザーが拡大できるかどうかを指定する値です。
スマホでいうと、ピンチアウトでウェブサイトを拡大する機能が大抵のブラウザで実装されているかと思いますが、「user-scalable」に「no」を指定することで、その機能をオフにすることができます。
最近では、画面の小さいスマホでは見づらい画像もあったりするので、ユーザーが自由に拡大縮小できるようにしておくことが一般的ですので、今回は指定していません。

まずは普通にPC向けのサイトを構築する（コーディングの場合）

「レスポンシブデザイン」を実装する際、PC向けのサイトを最初に構築することを「PCファースト」、スマホ向けのサイトを最初に構築することを「モバイルファースト」と言ったりしますが、コーディングに関しては「PCファースト」を絶対的におすすめします。（デザインに関しては該当しない可能性もありますので、ご注意ください。この記事ではあくまでもコーディングに関してのみ述べています。）

理由としては、古いブラウザでは「メディアクエリ」に対応していないために、その記述を全て”無視”するためです。
「PCファースト」で構築していれば、スマホ用の「メディアクエリ」で設定したCSSを無視されてもPCの古いブラウザでの表示は崩れません。
一方で、スマホの場合は最新ブラウザを搭載し、CSS3に対応済みのケースが圧倒的に多くなりますので、多くの場合「メディアクエリ」で設定したCSSを読み込めるはずです。

「メディアクエリ」でデバイス別にCSSを適用させる

普通にPC向けサイトを構築したら、いよいよ「メディアクエリ」の出番です。
スマホ向けの構築では、以下のように設定することが多いです。
あくまで、くーへいが使いやすいと感じた設定ですので、参考までにどうぞ。
Android 4.0、iPhone 4で動作確認しています。

@media screen and (max-width: 599px) and (orientation: portrait), screen and (min-width: 361px) and (max-width: 767px) and (orientation: landscape){
CSSの内容・・・
}

意味合いとしては、（”画面表示”かつ”幅が599px以下”かつ”画面が縦長”）もしくは（”画面表示”かつ”幅が361px以上767px以下”かつ”画面が横長”）の場合に以下のCSS適用させる、ということになります。
かなり細かい分岐点を作成できるので、それぞれの案件に合わせた設定を行うといいと思います。

これは蛇足かもしれませんが、「メディアクエリ」を「入れ子」にすると、正常にCSSが読み込まれないという事態がありました。
現状では、入れ子にせずに並列に記載していくことを心掛けた方がいいでしょう。

「メディアクエリ」の仕様

媒体型

上記の例でいうと、「screen」にあたります。
何も設定しないと、「all」を設定したと仮定されます。
「all」、「screen」、「print」あたりを覚えておけば問題ないかと思います。

all・・・すべての媒体
print・・・印刷
screen・・・一般的なディスプレイ
braille・・・点字ディスプレイ
embossed・・・点字プリンタ
handheld・・・モバイル機器
projection・・・プロジェクタ
tty・・・文字幅固定のデバイス
tv・・・テレビ
speech・・・音声

width

対象表示域 (viewport) の幅を示します。ちなみに、幅にはスクロールバーを含みます。
対象表示域とは、PCで言うとブラウザのウインドウサイズと同じになります。ウインドウを最大化していなければ、画面の横幅とは異なりますのでご注意ください。
「min-width」とすることで「～以上」、「max-width」とすることで「～以下」を表せます。

height

対象表示域 (viewport) の高さを示します。こちらも高さにスクロールバーを含みます。あくまで、対象表示域の高さです。
対象表示域については上のwidthの項を参照してください。
「min-height」とすることで「～以上」、「max-height」とすることで「～以下」を表せます。

device-width

デバイスの表示域の幅を示します。
デバイスの表示域とは、PCで言うと純粋にディスプレイに表示できるサイズです。例えばブラウザのウインドウを最大化していなくても、値は変化しません。
「min-」や「max-」を付けることができます。

device-height

デバイスの表示域の高さを示します。
デバイスの表示域については上のdevice-widthの項を参照してください。
「min-」や「max-」を付けることができます。

orientation

「portrait」もしくは「landscape」が指定できます。
上記の「width」と「height」の関係性を示すもので、「height > width」の場合は「portrait」、「width > height」の場合は「landscape」が該当します。

aspect-ratio

「width」と「height」の比率が指定できます。
例えば、幅が 1280 ピクセル、高さが 720 ピクセルのウインドウは「aspect-ratio: 16/9」で、該当することになります。
「min-」や「max-」を付けることができます。

device-aspect-ratio

「device-width」と「device-height」の比率が指定できます。
「min-」や「max-」を付けることができます。

color

各カラーチャンネルのビット数を指定できます。
カラーデバイスでない場合は「0」です。
各色の最小ビットを取るので、赤が3ビット、緑が3ビット、青が2ビットの場合は、「2」になります。
「min-」や「max-」を付けることができます。
現状では用途が思いつかない「メディアクエリ」かもしれませんね。

color-index

カラーテーブルのエントリ数、つまり、出力できる色の数を指定できます。
256色が表示できるスクリーンであれば、「color-index: 256」となります。
「min-」や「max-」を付けることができます。

monochrome

モノクロームフレームバッファにおける階調数が指定できます。
モノクロデバイスでない場合は「0」となります。
「min-」や「max-」を付けることができます。

resolution

出力デバイスの解像度を指定できます。
「min-」や「max-」を付けることができます。

scan

媒体型「tv」でのみ使用できます。
出力デバイスの走査処理方法が指定できます。（プログレッシブ等）

grid

出力デバイスがグリッドであるかビットマップであるかを指定できます。
グリッドデバイスは「1」、それ以外は「0」もしくは「-0」です。
グリッドデバイスは一握りで、ほとんどがビットマップデバイスです。
この設定を使用することは、まずないでしょう。

単位について

数値で指定するものについては、CSSと同様の単位が使用できます（gridを除く）。
「aspect-ratio」および「device-aspect-ratio」は例外で、2つの数字を「/」で区切ります。

まとめ

「viewport」と「メディアクエリ」を把握していれば、レスポンシブデザインを実装するのは難しくありません。
1つのスマホサイトを制作するよりも、工期を短くできるケースが多くなるかと思いますので、覚えておいて損はないと思いますよ！