レスポンシブWeb の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• レスポンシブWeb へ行く。

#author("2017-08-04T15:01:58+09:00","default:k1rou","k1rou")
*レスポンシブWeb [#y0358528]
-旧来の閲覧するOSやブラウザ（ユーザエージェント）を判別して表示する[[HTML]]を振り分けるのでなく、閲覧しているブラウザの横幅サイズを判断基準にCSSを切り替える手法。
-メディアクエリを使う。

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

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

**実装の特徴 [#yc2c660c]
-アイコン画像の画素密度を大きくする。

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

**関連用語 [#j4213cbb]
-[[デザイン]]
-[[マルチデバイス]]
-[[モバイルファースト]]
-[[レスポンシブデザイン]]
-[[アダプティブデザイン]]
-[[グリッドシステム]]