デバイス対応は急務！レスポンシブWebデザインの仕組み
スマートフォンの台頭など、様々なデバイスでのアクセス対応が必要非可決になっている時代になっています。
レスポンシブWebデザインとは、同一のページ（同一URL）でありながら、レイアウトや操作性を工夫し、デバイス毎に最適化したページを提供をする技術です。
加えて、同一ページですので、更新時の運用負担もPCのみの運用と変わりません。
技術説明
概要
レスポンシブ対応の基本的な仕組みは、デバイスの横幅の画素数を判断基準として、スタイルシート（CSS）によりページ構成を変更することです。この変更するタイミングをブレイクポイントといいます。
ブレイクポイントの数値は時代の流れによって変動する可能性がありますが、現時点では
- スマートフォン：640（縦型での閲覧時）
- タブレット：1024（横型での閲覧時）
- パソコン：1025以上
というのが一般的かと思います。
画像作成
iPhoneをはじめとして、スマートフォンやタブレット、一部のパソコンには高精細表示の液晶を採用されています。
少数派だと考えれば無視することも選択肢ですが、高精細デバイスはiPhoneが主体になっていますので、日本でのスマートフォンシェアも考慮すれば、無視できない対応だと言えます。
高精細対応を具体的に言えば、現在は倍密度での高精細化が主流ですので、倍密度の表示に対応するということになります。
表示範囲を100☓100とした場合、画像データとしては200☓200の画像を作成する必要があります。
この対応により、高精細液晶ではより鮮明な画像で表示することができます。
HTML・CSS
HTML
HTML上に以下を組込みます。
name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, maximum-scale=3.00, minimum-scale=0.5"
指定の内容は、デバイス見せ方（viewport）として、ワイド幅に応じて（content=”width=device-width）変更する。
初期時の倍率は１として（initial-scale=1）、ピンチによるズームを許可し（user-scalable=yes）、ピンチINの際は最大3倍（maximum-scale=3.00）、ピンチOUT時は最小0.5倍（minimum-scale=0.5）という指定をしています。
CSS
スタイルシートには以下の追加をします。ここではタブレットとPCは同一の画面を見せ、スマートフォンのみレイアウトを変更する指定をしています。
@media screen and (min-width: 641px) and (max-width:1279px){適用したいスタイルシート名}
画面幅が641ピクセル以上、1279ピクセル以下の場合は「このスタイルシートを適用」したいという内容です。
適用するスタイルシートはコンテンツの状況に応じて別途作成する必要があります。
