レスポンシブウェブデザイン - オンラインパズル

レスポンシブウェブデザイン

レスポンシブウェブデザイン (英: responsive web design、 RWD) はウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、そのタスクに含まれる点を理解しておくことが重要である。また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」をRWDの延長部分と見なしている。ニールセン・ノーマン・グループは、「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと満足を確保するために必要である」と述べた。

RWDでデザインしたサイトは、比率ベースのフルードグリッド（英語）、フレキシブルイメージ @mediaルールの拡張であるCSS3メディアクエリを以下のように使用することで、レイアウトを表示環境に適応させる。

フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。

可変サイズの画像もコンテナ要素の外にはみ出さないように、相対単位を使用して表示する。

メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用できる。今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めるため、RWDはますます重要になっている。そのためGoogleは2015年にモバイルゲドンを発表し、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。これには、モバイル機器に優しくないサイトが最終的に不利になる効果がある。RWDは、ユーザーインターフェースプラスティシティの一例である。