【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは

レスポンシブ・ウェブデザイン（レスポンシブ・レスポンシブデザイン）とは、スマートフォンでもパソコンでもタブレットでも、一つのページで見ることができるウェブデザインです。

WEBサイトやブログを見る端末が多様化したために、それに合わせてできた単語です。
（ほとんどパソコンでしかまともにインターネット接続できなかった昔は、こんな単語はありませんでした）

スマートフォン出現前の話

昔は、WEBサイトやブログを見ようとすると、ADSLなどの電話回線からパソコンで見ることしかできませんでした。
でも、そのうち携帯電話でWEBサイトやブログを見ることができるようになりました。

でも、携帯電話でWEBサイトやブログを見るのは大変でした。
なぜなら、携帯電話は機能が低すぎて、表示できることが限られていたからです。

しかも、解像度も画面も本当に低く、使える画像ファイルの種類もほんのちょっと。

さらには、WEBサイトやブログを見るたびにパケット料金が発生してしまうので、画像たっぷりのWEBサイトやブログを見ると、パケット料金が大変なことになっていました。
（定額制のパケ放題もありましたが、月額利用料はかなりの高額でした）

そんなわけで、アイコンの多くが1kb以下の極軽いもので、タイトル画像も小さいもので、ページ内の画像もできるだけ使わないようなサイト作りが必要でした。

でも、これではPCサイトの方が閲覧に耐えられません。
そこで、通常はPC用のサイトと携帯サイトは別に作り、携帯サイトは携帯サイトで見てもらう形にしていました。

でも、時代が変わり、スマートフォンが出回るようになりました。
スマートフォンは色んなことができました。
スタイルシート（CSS）も色々と指定でき、スクリプトも使えるようになっていました。

また、解像度も高く、ほとんどの形式の画像が使えるようになりましたし、動画まで見ることができるようになりました。

しかも、月額使用料が定額制のものだと月額料金は高くなってしまいますが、どんなに重い画像や動画でも上限があるため、気軽にインターネットをすることができます。

このように、スマホではほとんどパソコンと同じようにインターネットを楽しめるようになりました。

このように便利なスマートフォンが出現してからと言うもの、徐々にパソコンを使う人々が減り、スマートフォンに置き換わっていったのでした。

ただ、ユーザーから見ると便利になった反面、WEBサイトの製作者サイドから見ると、悪夢の始まりでした。

なぜなら、スマートフォンのような縦長の小さな端末でも、パソコンのような横長の大きな端末でも見れるようにしないといけなかったからです。
（ここにさらにタブレット端末や横向きのスマートフォンも加えると、本当に大変なことになります）

じゃあ、また携帯サイトを作っていた時のように、スマートフォン用のページを別に用意して、スマートフォンからのアクセスはその専用ページにリダイレクトすればと言う話が出てくるわけですが、実は、スマートフォンとPCでの閲覧は、上手くデザインすれば、両方の専用ページを作成せず、一つのページだけで両方の端末に対応させることができるということを知りました。

スマートフォンで表示される画面

PCで表示される画面

そんなわけで、うちのWEBサイトやブログでも、スマホでもPCでもタブレットでも見ることができるようにするための試行錯誤の日々が始まりました。

次ページ

【CSS3編】 サルでもわかるレスポンシブの基本の基本