レスポンシブ対応（web）デザインとは同じHTMLコードで書いているのにパソコンで見た時とタブレットやスマホで見た時のレイアウトが違うデザインのことを指します。

仕組みは複数のHTMLを書くのではなく、スマホ・タブレット・パソコンのそれぞれの画面サイズに合わせてCSSを切り替えることでデザイン・レイアウトの最適化を可能にしています。

レイアウトが画面サイズで決まるためスマホやタブレットなどのモバイル端末に非常に有効なデザインと言われています。

基本的な作り方としてはまず初めにスマホやタブレットで見る場合どこまでを表示するかを決めるビューポートと呼ばれるものを作成します。

次に閲覧する端末の幅でデザインを変更するためにCSSを２つの条件に分けて作ります。

最後に表示させたいことを書いて完成です。

レスポンシブ対応webサイトを作るメリットとしては、今まではスマホやタブレットとパソコンはURLを別に設定していましたが、レスポンシブ対応デザインの場合URLを統一することができるのでシェアされやすいことや、PHPを使ったサイトやレスポンシブ対応デザイン、パソコン用とスマホやタブレット用の両方のHTMLを用意するサイトがありますが、このなかでもgoogleがレスポンシブ対応デザインの使用を推奨しているため検索上位に出やすいこと、1つしかHTMLファイルを使わないので制作が楽、また制作後のメンテナンスが簡単など制作者にとって嬉しいことが多いです。

しかしパソコン用のHTMLやCSSを読み込むため表示や読み込みに時間がかかったり、使うHTMLファイルが１つで良くてもそれを作るのが大変だったり、せっかく苦労して作っても解像度が違うデバイスなどが開発・発売された際にまた新しく書き直す必要があるなどデメリットも多く、またデメリットの一つ一つが重要なことです。

そのためレスポンシブ対応デザインでwebサイトを作る際はメリットとデメリットの両方をしっかりと理解してから作成することが大切です。