レスポンシブデザインとは?

【解説!!】今さら聞けない!「レスポンシブ」って何?

最近よく聞く「レスポンシブ」とは、どんなページのことを言うのか、ここで一旦おさらいしてみます!

レスポンシブデザインとは、閲覧する人のデバイス(パソコン、iPad等のタブレット、スマートフォン)等の画面サイズに応じて、 同じURL(一つのHTML)を最適化して表示するページのことです。

例えば、パソコンの画面でページをご覧になっていて、ブラウザの画面サイズ幅をどんどん縮めていくと

●3列構成だったバナーが縦1列に並び変わったり、
●5列構成だったオススメ商品が2列構成に並び変わったり、
●横並びだったヘッダーのメニューボタンが消えて、右上に3本線のボタンが設置され、タップするとメニューがパッと表示されるようになったり、

のように、画面が小さくなった時に、コンテンツもそのまま縮小されてしまわず、並び替えや表示変更を自動的に行い、見やすい表示サイズを維持することが出来るのです。

例えば、PCで見るとこんな風に見えるページが、スマホで見るとこのように自動調整されるのです。

1ファイルの更新だけなので、管理や更新も1度で済みます。
「PCだけ更新して、スマホを忘れてた!」といったミスも、軽減出来ますよね?