レスポンシブとは？
れすぽんしぶ
レスポンシブとは、画面サイズに応じてWebページのレイアウトが自動的に最適化される設計手法のことです。
レスポンシブ（responsive）は、主にWeb制作において「レスポンシブWebデザイン（Responsive Web Design：RWD）」の略として使われます。スマートフォン・タブレット・PCなど、さまざまな画面幅に応じて、1つのWebページのレイアウトが自動的に適した表示に切り替わる設計手法です。
かつてはPC向けサイトとスマートフォン向けサイトを別々のURLで管理するケースが多くありましたが、2010年代以降はCSSの メディアクエリ を活用したレスポンシブデザインが主流となりました。Googleも単一URLのレスポンシブデザインをSEO観点から推奨しています。
レスポンシブデザインの主な特徴は以下のとおりです。
- CSSのメディアクエリ（@media）で画面幅ごとにスタイルを切り替える
- フレキシブルグリッドやフレキシブルイメージで柔軟なレイアウトを実現する
- 1つのHTMLで複数デバイスに対応できるため管理コストが低い
- BootstrapやTailwind CSSなどのフレームワークが対応を容易にしている
モバイルファーストの考え方では、スマートフォン向けのデザインを基本とし、画面が大きくなるにつれて表示を拡張する方向でCSSを設計します。現代のWeb開発においてレスポンシブ対応は標準的な要件となっています。
使い方・例文
スマートフォンで横並びのナビゲーションメニューが表示されないとき、レスポンシブデザインによってハンバーガーメニューに自動切換えされる仕組みがその典型例です。
この用語をシェア
最終更新: