Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

レスポンシブ Web デザイン

Web の利用者が Web サイトやアプリの利用でますますモバイルデバイスを使うようになるのにつれて、Web デザイナーや開発者は自身の制作物が従来のデスクトップコンピュータと同様にモバイルデバイスでも見栄えよく、また良好に動作するようにしなければなりません。著名なデザイナーである Luke Wroblewski 氏は、デスクトップ向けデザインの後付けではなく "Mobile First" なデザインを提唱しています。モバイルデバイス向けのデザインを第一のターゲットとするか親切なおまけにするか、いずれにしても同一のコンテンツを携帯電話から大画面・高解像度のディスプレイまで、あらゆるハードウェアプラットフォームで利用できるようにするために CSS の力を活用できます。

この手法は "レスポンシブ Web デザイン" として知られています。その方策には以下のようなものがあります:

  • リキッドまたはフルードレイアウト: すべてのコンテナの幅をブラウザのビューポートに対するパーセンテージとして定義することで、コンテナはブラウザのウィンドウサイズの変化に応じて広がったり縮んだりします。
  • メディアクエリ: 使用しているディスプレイの特性、例えばサイズ、解像度、アスペクト比、色深度などをもとに、別々のスタイルシートを適用します。
  • フルードイメージ: 画像が最大でもディスプレイの幅全体を占めるように設定します。

リソース

概要

技術

ツール

実例

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,