レスポンシブデザインの基本！簡単な設定方法

こんにちは。フローラです。
私が以前ウェブ制作のお仕事をしていた時は「レスポンシブデザイン＝Responsive Web Design、RWD（以下RWDと記載します）」という言葉も一般的には使われておらず、携帯電話（いわゆるガラケーです）とPCサイトを別HTMLで作成していた時代でした。
皆様と一緒にRWDについておさらいしてみたいと思います。
「日々ウェブサイト制作しているけど、基本について考えていなかったかも～・・・」なんて方もぜひお付き合いくださいませ。

RWDって何？

レスポンシブデザイン＝Responsive Web Design、RWD（以下RWDと記載します）。
htmlワンソースで多様なデバイス対応できるデザインのことです。
CSS3（Media Queries）で各デバイスに合わせたサイズに調整します。まずは参考サイトを見てみましょう。

参考サイト

参考サイトです。

無印良品

https://www.muji.net/store/

Starbucks Coffee Japan

http://www.starbucks.co.jp/

ブラウザのデベロッパーツールを使っても画面の確認ができます。
WindowsのChromeだと右クリックして「検証」を選択します（ショートカットキーはCtrl Shift Iです）。「Toggle device toolbar」ボタンを押すと各デバイスサイズに合わせて確認することができます。

デバイスのサイズに合わせてカラムが柔軟にレイアウトされたり、画像サイズが画面にフィットされた大きさに変わったりしたかと思います。様々なデバイスがある今の時代、優秀なウェブサイトはどのデバイスでも見やすいウェブサイトだと言えます。

RWDのメリット・デメリット

htmlワンソースで多様なデバイス対応できるため、メンテナンスの工数が減ります。
ワンソースで作るため、どのデバイスで閲覧しても同じデザインとなるため統一感のあるウェブサイトを作ることができます。
URLも1ページにつきひとつです。
検索エンジンからも推奨されています。

その反面、CSSで各デバイスのデザインを調整するためCSSが複雑になりがちです。ターゲットが多いほど複雑になりやすいため、ターゲットのデバイスを見極め絞ることも必要かもしれません。また、新しいデバイスによりサイト全体の改変が必要になることも覚えておきましょう。

具体的に何をすれば良いの？

大雑把にご説明するとやることは2つです。

CSS3（Media Queries）の設定
ビューポートの設定

以上です。
まずCSS3からご説明しましょう。

CSS3の設定

今回はターゲットをPC、タブレット、スマートフォンの3つに絞って見ていきたいと思います。
PCを1024px、iPadなどのタブレットを768pxから1024px、スマートフォンを480pxとします（これは絶対ではないです。お好みでどうぞ・・・）。

CSSファイルに以下の記述をします。

/*
共通スタイル
*/
要素 {
}

@media screen and (min-width:480px) {
/*　画面サイズ 480px　*/
要素 {}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/*　画面サイズ 768pxから1024px　*/
要素 {}
}
@media screen and (min-width:1024px) {
/*　画面サイズ 1024px　*/
要素 {}
}