ITパスポート 試験情報＆徹底解説

閲覧するデバイスの画面サイズや表示環境に応じて、Webページのレイアウトやデザインを柔軟に変化させる手法である。パソコン、スマートフォン、タブレットといった異なるデバイスで同じWebサイトを閲覧する際、1つのソースコードでそれぞれの画面に最適な形で情報が表示されるように設計される。

本デザインはCSS(Cascading Style Sheets)のメディアクエリという機能によって、媒体の種類、表示領域の幅や高さ、幅と高さの比率、デバイスの解像度などのメディア特性に応じた画面レイアウトを表示させる。メディアクエリを記述した1つのHTMLファイルを用意すればよいため、スマートフォンの黎明期のようにデバイスの種類ごとにWebページを作成する必要がなく、開発や保守管理の手間を削減できる。たとえば、「パソコンでは横並びに表示していたメニューを、スマートフォンでは縦に折りたたんで表示する」といった設計がされていれば、ユーザーはどの端末からでも快適にWebサイトを利用できるようになる。

レスポンシブWebデザインでは、デバイスの種類が異なっても同一のHTMLファイルで対応できる。つまり、PCで閲覧するWebサイトもスマートフォンで閲覧するWebサイトも同一URLとなり、検索エンジンの評価が分散されることなく一本化されるため、SEO対策にも有利に働く。ユーザーだけでなく、Webサイトの運営者にとっても多くの利点を有する技術である。