|
===================================== 〔語彙分解〕的な部分一致の検索結果は以下の通りです。
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。〔Marcotte, Ethan (May 25, 2010). 〕〔"Ethan Marcotte's 20 favourite responsive sites" . .net magazine. 〕〔 RWDでデザインしたサイト〔〔Pettit, Nick (August 8, 2012). 〕は、比率ベースのフルードグリッド、〔"Core concepts of Responsive Web design" . 〕〔Marcotte, Ethan (March 3, 2009). 〕 フレキシブルイメージ〔Marcotte, Ethan (June 7, 2011). 〕〔Hannemann, Anselm (September 7, 2012). 〕〔Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design" . .net Magazine. 〕 @mediaルールの拡張であるCSS3メディアクエリ〔Gillenwater, Zoe Mickley (December 15, 2010). 〕〔Gillenwater, Zoe Mickley (October 21, 2011). 〕〔"Responsive design—harnessing the power of media queries" . 〕 を以下のように使用することで、レイアウトを表示環境に適応させる。〔W3C @media rule 〕* フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、百分率等の相対単位を使用する。〔 * 可変サイズの画像も、コンテナ要素の外にはみ出て表示されるのを防ぐため、相対単位を使用する。〔Marcotte, Ethan (June 7, 2011). 〕 * メディアクエリにより、サイトを表示しているデバイスの特徴 (ブラウザの幅が最も一般的) に基づいて、ページに異なるCSSスタイルを使用することができる。 今やモバイルトラフィックがインターネットトラフィック全体の半分以上を占めているため、レスポンシブウェブデザインはますます重要になっている。〔"Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper" . 〕 この傾向はかなり定着しており、Googleは、モバイル機器から検索した場合、モバイル機器に優しいサイトの評価を引き上げ始めた。〔"Official Google Webmaster Central Blog: Rolling out the mobile-friendly update" . 〕 これは、モバイル機器に優しくないサイトが最終的に不利になる効果がある。 == 関連概念 == ; モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメント モバイルファースト、控えめなJavaScript, プログレッシブエンハンスメントは、RWDに先立つ関連概念である。基本的な携帯電話のブラウザは、JavaScriptやメディアクエリを理解しない。そのため、推奨される方法は、複雑で画像を多用したサイトを携帯電話で動作させるためにグレイスフルデグラデーションに依存するのではなく、基本のウェブサイトを制作してから ; ブラウザ、デバイス、フィーチャーディテクションに基づくプログレッシブエンハンスメント ウェブサイトでJavaScript非対応の基本的なモバイル機器のサポートが必須の場合、ブラウザ (ユーザーエージェント) 判定 (ブラウザスニッフィングとも呼ばれる) とモバイル機器判定〔の2つの方法により、HTMLやCSSの特定の機能がサポートされているかが推定される。ただし、こうした方法の信頼性は、デバイス能力データベースを併用しない限り完全ではない。 より高機能な携帯電話やパソコンに対しては、Modernizr, jQuery, jQuery MobileといったJavaScriptフレームワークを使用して、ブラウザがHTMLやCSSの機能をサポートしているかを直接調べる (あるいはデバイスやユーザーエージェントを判定する) 方法が一般的である。ポリフィルを使用して追加機能をサポートすることもできる。たとえば、RWDに必要なメディアクエリのサポート、Internet ExplorerでのHTML5サポートの改善といったことが可能である。フィーチャーディテクションの信頼性も完全ではない可能性がある。判定項目によっては、ある機能が実装されていないか、もしくは実質的に利用不可能なほど実装が不十分であるのに利用可能であると報告される可能性がある。〔"BlackBerry Torch: The HTML5 Developer Scorecard | Blog" . 〕〔"Motorola Xoom: The HTML5 Developer Scorecard | Blog" . 〕 抄文引用元・出典: フリー百科事典『 ウィキペディア（Wikipedia）』 ■ウィキペディアで「レスポンシブウェブデザイン」の詳細全文を読む スポンサード リンク
|