レスポンシブWebデザイン(れすぽんしぶうぇぶでざいん)

詳細解説

技術的には、CSS（Cascading Style Sheets）の仕様の一つであるメディアクエリや、画面幅に対する割合で要素の寸法を指定する流動的なグリッドレイアウト、伸縮可能な画像などを組み合わせて実装します。メディアクエリでは、レイアウトを切り替える境界となる画面幅（ブレークポイント）を定め、その条件ごとに段組みの列数や文字の大きさ、メニューの折り畳み方といったスタイルシートの規則を記述します。

従来のようにパソコン用とスマートフォン用で別々のHTMLファイルやURLを用意する方式と異なり、1つのHTML文書と同一のURLで全端末に対応できるため、コンテンツを更新する際の手間や修正漏れを減らせる利点があります。なお、アクセスしてきたWebブラウザのUser-Agentヘッダをサーバ側で判定して異なるHTMLを配信する仕組みは動的な配信（ダイナミックサービング）と呼ばれ、同一のHTMLを送りブラウザ側でCSSによって見た目を変化させる本手法とは区別されます。