テクノロジ
レスポンシブWebデザインとは
読み方：れすぽんしぶうぇぶでざいん
ひとことで言うと：画面幅などに応じてレイアウトを変化させ、同じWebページを様々な端末で見やすくする設計手法。
意味をわかりやすく解説
レスポンシブWebデザインでは、PC・タブレット・スマートフォンなどの表示領域に応じて、列数、文字サイズ、画像、メニューなどを柔軟に変化させます。
一般にCSSのメディアクエリや可変レイアウトを利用し、端末ごとに別ページを用意するのではなく、同一のコンテンツを適切に表示します。
具体例
PCでは3列の商品一覧を、スマートフォンでは1列に切り替えて表示する。
似た用語との違い
アダプティブデザイン
アダプティブデザインはあらかじめ用意した複数の固定レイアウトを条件に応じて選ぶ方法があります。レスポンシブは表示幅に合わせて柔軟に変化させます。
モバイル専用サイト
モバイル専用サイトは別URLや別HTMLを用意する方式があります。レスポンシブWebデザインは同一ページを画面条件に応じて変化させます。
覚え方
responsive＝応答する、から「画面幅に応答してレイアウトが変わる」と覚えます。
基本情報技術者試験の試験ポイント
端末の種類そのものではなく、表示領域などの条件に応じてレイアウトを調整する点を押さえます。
CHECK QUESTION
同じHTMLを使い、画面幅に応じて3列表示を1列表示へ切り替える設計手法は何ですか。
答えを見る
レスポンシブWebデザインです。
この説明は分かりやすかったですか？
基本情報技術者試験を勉強中ですか？
この用語を含む重要用語を、単語帳や4択テストで学習できます。