レスポンシブWeb

レスポンシブWeb †

• 旧来の閲覧するOSやブラウザ（ユーザエージェント）を判別して表示するHTMLを振り分けるのでなく、閲覧しているブラウザの横幅サイズを判断基準にCSSを切り替える手法。
• メディアクエリを使う。

メリット/デメリット †

メリット †

• HTMLをワンソース管理できる。
• 特定の実装に依存しないので、環境の変化への対応が即時である必要がない
• 開発チームを環境毎に分けない点では、人的および管理面でのコストを削減できる

デメリット †

• HTMLに大きい画像向けの、画像を表示するコード（imgタグ）があると、スマホでは不要なのにロードはしてしまうので、重くなる。
• 構築が複雑。切り替えるレイアウト毎にデザインを用意する。工数増。

実装の特徴 †

• アイコン画像の画素密度を大きくする。

検証のコツ †

• あらゆる環境での検証は現実的に不可能なので、検証する単位を細かくすることで、変更の影響範囲を絞る。
• ページ内のコンポーネントの単位で開発、検証のサイクルを繰り返す。

関連用語 †

• デザイン
• マルチデバイス
• モバイルファースト
• レスポンシブデザイン
• アダプティブデザイン
• グリッドシステム