Index

レスポンシブデザインとは

Web デザインの初期には、特定の画面サイズを対象とするページが作成されていました。ユーザーの画面がデザイナーの予想よりも大きかったり小さかったりした場合、結果は望ましくないスクロールバーから、過度に長い行長、そして中途半端なスペースにまで及びました。より多様な画面サイズが利用可能になると、レスポンシブ Web デザイン （responsive web design、RWD）の概念が登場しました。

レスポンシブデザイン - ウェブ開発を学ぶ | MDN

どんなデバイスからでも見やすく、使いやすいページレイアウトにするための技術です。

現在PC、スマホ、タブレットなど、ユーザーがインターネットのページにアクセスする端末は多様化しており、Webサイトにレスポンシブデザインを導入することで、同じ内容の情報をアクセスする側の端末に合わせた表示に自動で切り替わるようになります。

※Webサイトの文書は、HTMLなどのマークアップファイルを使って配信します。

同時に、各デバイスに合わせたページレイアウトはCSSというファイルを使ってそれぞれ用意し、アクセスする側の画面幅に応じ適切なレイアウトで出力するシステムとなっています。

メディアクエリー

メディアクエリーを使用すると、一連のテスト（例えば、ユーザーの画面が特定の幅または特定の解像度より大きいかどうか）を実行し、CSS を選択的に適用して、ユーザーのニーズに合わせて適切にページをスタイルできます。

レスポンシブデザイン - ウェブ開発を学ぶ | MDN

レスポンシブデザインは、メディアクエリー（media query）を使用して実装します。