用語集：レスポンシブ Web デザイン とは
ブラウザのウィンドウ幅に合わせて表示を最適化する技術
更新日：
Web ページを閲覧者のブラウザのウィンドウの幅に合わせて、表示を最適化する技術です。近年のスマートフォン・タブレット端末の急速な普及により注目されるようになりました。
Web ページのコンテンツ部分の幅を可変にしてウィンドウの幅にあわせ追随させるリキッドレイアウトと似ていますが、リキッドレイアウトがどのような場合にもひとつのスタイル設定で対応するのに対し、レスポンシブ Web デザインはウィンドウ幅に対して最適化されているスタイル設定を複数持ち、幅をドラッグなどで変更した場合でもリニアにスタイル設定を切り替えるものを指します。
大まかには幅の広いPC向け、中間のタブレット向け、幅の狭いスマートフォン向けの3種類のスタイル設定を用意しておき、ウィンドウ幅を狭めた場合には前述のリキッドレイアウトでのスタイルを書く場合が多いです。
※逆に、スマートフォン向けをメインにする考え方もあります。
このページのウィンドウ幅を狭めてみて下さい。レイアウトが幅によって変化するのがわかると思います。
※IE8以前はメディアクエリー（後述）に対応していませんので変化しません。
- レスポンシブ Web デザインのメリット
- レスポンシブ Web デザインのデメリット
- レスポンシブ Web デザインの基本的な仕組み
- レスポンシブ Web デザインの実装
- レスポンシブ Web デザイン実装時の注意点
関連リンク
レスポンシブ Web デザインのメリット
デバイス環境により複数のHTMLを用意する必要がないので、HTMLメンテナンスが楽
一般的にはPC用のページとスマートフォン用のページで別々に HTML とその HTML 専用の CSS スタイルを用意しますが、レスポンシブ Web デザインの場合は1つの HTML で複数の CSS スタイル設定を用意しますので、更新時も複数の HTML に更新を掛ける必要がありません。
Google の推奨する1つのURLですべての環境に最適化するという考え方に合致する
Google の Webマスター向け公式ブログに以下のようなエントリーがあります。
レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
こちらにあるように、 Google は1つの URL ですべての環境に最適化することが望ましく、それを実現するための手法としてレスポンシブ Web デザインをあげています。
1つの URL にて複数の環境に対応するため、環境により別のページに遷移させる（リダイレクトさせる）必要もありません。
※スマートフォン向けサイトが不要になるという話も見かけますが、Google はリソースの一元化のためにレスポンシブ Web デザインを推奨しているだけで、スマートフォン向けサイトの存在を否定しているわけではない、という以下のブログエントリーもあります。確かに、そんなことは言ってないですね。
レスポンシブ Web デザインのデメリット
設計が大変
前述のとおり HTML は1つとなりますから、初めからある程度レスポンシブ Web デザインに対応させることを念頭に置いて HTML の構造を考える必要があります。
また、各ウィンドウ幅に応じた CSS スタイルを複数用意する必要がありますので、これもまた大変ですし、さらには、各端末での確認も必要です。
新たなレイアウトのページが必要になった場合にも、CSS スタイルの定義が余計に増える可能性も十分考えられます。
ファイルダウンロードについてはPC向けと同じ
いくらレスポンシブ Web デザインにしたからといっても、HTML は共通ですから読み込むファイル群はスマートフォンであろうとPC向けと変わりません。PC向けで表示されていたものがスマートフォン向けで表示されないという場合においても、表示上見えなくしているだけで読み込んでいるファイルの数は変わらないのです。
PC向けの Web ページは回線がある程度太いことを前提としてかなり容量の大きい画像ファイルが使われているケースが多いですが、同じファイルをスマートフォンなどの決して太いとは言えない3G回線などでダウンロードさせる事を考えると、スムーズに表示が進まない可能性も考えられます。
レスポンシブ Web デザインの基本的な仕組み
- HTML は1種類のみ。ウィンドウ幅によって複数用意することはしない
- ウィンドウ幅ごとに用意した CSS スタイルを、 CSS3 のメディアクエリーという機能で適応することで表示を変更する
基本的にはこれだけです。
レスポンシブ Web デザインの実装
HTML コードの head タグ内に
<meta name="viewport" content="width=device-width" />を挿入すると、スマートフォン・タブレット端末においてはその端末において設定されている幅を実際のウィンドウ幅として認識します。iPhone では縦持ち時にはウィンドウ幅が横320pxと認識されます。
CSS においては「メディアクエリー」を利用します。メディアクエリーとは、デバイスのさまざまな環境（幅、解像度、向きなど）により別の CSS を定義する機能です。
@media only screen and (max-width:649px) {
ここにCSSスタイルを定義
}などと書くことで、デバイス環境に応じた CSS を記述します。
上記の場合はウィンドウ幅が649px以下の場合にカッコ内のスタイルが適応されます。
上記では @media により直接 CSS ファイル内に記述していますが、 @import によって外部 CSS ファイルを読み込むこともできます。
通常時のWebページ全体の横幅の規定として
body {
width:960px;
}とあったとしましょう。続けて記述を以下のように加えます。
@media only screen and (max-width:649px) {
body {
width:100%;
}
}通常時には960pxで固定幅の内容が、649px以下のウィンドウの横幅の環境では横幅いっぱいにコンテンツが表示されるようになります。このように、HTML タグにそれぞれのスタイル時に最適な CSS を記述することで、ウィンドウの幅が変わった場合の表示を変更します。
レスポンシブ Web デザイン実装時の注意点
あくまでも CSS による切り替えのため、JavaScript で何か動かしている場合に JavaScript で別途対応する必要が出る可能性がある
レスポンシブ Web デザインは CSS3 のメディアクエリーによってスタイルの振り分けを行なっています。JavaScript で制御しているわけではないので、例えば JavaScript によるスライダーのようなプラグインが動いていて、そのスライダーがリキッドレイアウトに対応していなかった場合に JavaScript の方でどのように対応するかを考える必要が出てきます。
当サイトのトップページについては、JavaScript で別途ウィンドウの幅を取得し、幅によってスライダーなどの動作を制限しています。リニアなウィンドウ幅の変更については考慮していないので、レイアウトが崩れたらリロードして下さい。
CSS の複雑化に注意
基本となる CSS スタイルを全てコピーして定義されている全てのプロパティを書き換えるのであれば問題はないかもしれません。が、やはり無駄なコードは省きたいもの。カスケードにより必要な部分だけを書き換えたいと考えるのが通常かと思いますが、気づかない部分で結構基本の CSS スタイルに引っ張られる事があります。
!import でスタイルを強制するのもひとつの手ですが、!import は無造作に使うと柔軟性を失い、スタイルの変更で思わぬトラブルが発生することもあるので慎重に使いたいところです。
052-711-1200