レスポンシブWEBデザインで使われるメディアクエリについて

ブラウザの画面幅によってデザインを切り替える

レスポンシブWEBデザインは、1つのHTMLを使って、PCブラウズ・タブレット・スマートフォンでデザインを切り替えています。
デザインを切り替える手段としては、「〇〇のブラウザでアクセスしています」「iPhoneからアクセスしています」などの利用者がどんな環境でアクセスしているのかを判断する「ユーザーエージェント」を使う方法と、表示している画面幅を使う方法のどちらかを使います。
レスポンシブWEBデザインは、画面幅によってページデザインが可変する方法を利用してデザインの切り替えを行います。

メディアクエリを使って画面幅ごとのデザインを切り替える

CSSへ画面幅ごとのデザインを記述して、レスポンシブWEBデザインを構築します。
CSSの記述は以下のようにします。

この書き方でブラウザの幅が770px以下の時、適応させるCSSを変更させることができます。
max-width:770pxの部分を480pxや380pxなどへ指定を変更する事で様々な画面幅ごとに適応させるCSSを変えることができます。
「max-width」となっている部分からわかるように、max-width:770pxとは、画面幅が0から最大770pxまでという考え方になります。

画面の最小幅を指定する場合

min-width:1100pxという指定をすることで、画面幅が1100px以上になった時に適応れるCSSを指定できます。
「min-width」となっていることからわかるように、最小1100pxから画面幅いっぱいまでという指定方法です。

画面幅の範囲を指定する場合

@media screen and (min-width:770px) and ( max-width:1100px)と最小と最大の両方を書き込むことで、画面幅が770pxから1100pxの間だけに適応されるCSSを指定できます。
先ほど説明した様に、最小幅770pxから最大幅1100pxの間を指定する方法です。

link要素に追記して指定する場合

CSSに直接書き込む方法以外でも、外部CSSファイルを読み込むlink要素へ適応させる画面幅を指定することもできます。

このように記述することで横幅770pxまではtablet.cssを読み込み、横幅630pxまではphone.cssを読み込むという指定ができます。
1つのCSSに全てを書いてもいいですが、それでは記述が長くなるので管理が少し面倒です。
読み込ませたい画面幅ごとにCSSファイルを作成し、切り替えていく事で管理が簡単になる場合もあります。

印刷に対応するには

PCの時は画面幅を1100px以上にして、タブレットは770px、スマートフォンは560pxにして、それぞれをメディアクエリで切り替えて作りこんで完成！！
と思って印刷すると、画面で見たまま印刷されない！！どうして！！！

となる方も多くいらっしゃるかと思います。
レスポンシブWEBデザインを制作した当初は私もそうなりましたから・・・

Webページを印刷する場合には、画面をそのまま印刷出力するのではなく、プリンタ側でWebページを判断して出力します。
メディアクエリでは画面幅の指定はできますが、印刷用紙のサイズを指定できないんです。
もちろん、印刷用にデザインを指定する書き方もありますが、なかなか面倒です。

なので、PC画面の指定にはメディアクエリを使わないという方法を採用してみましょう。
PC画面を想定した横幅で見た場合のCSSはメディアクエリを使わず、普段通りに記述するんです。
こうする事で印刷出力にも簡単に対応できるようになりますよ。

各端末ごとの画面幅について

メディアクエリを使ってCSSを適応させる方法についてはわかったけれど、タブレットやスマートフォンの画面幅っていったいどのくらいに指定したらいいの？
という疑問がありませんか？
メーカーを見ても、画面のインチは出ていても、px数は1024など、PC画面幅と同等、もしくはそれ以上になります。
これは小さな画面にパソコンなどのモニタ以上のpxを詰め込んで、高解像度化を実現している事が原因なんです。
モニタや画面は細かな点をそれぞれ発光させることで色を出したり、形を表現しています。印刷物でも同様で、ずーっと拡大していくと、小さな点の集まりだという事がわかります。
点の密度が濃くなるほど、細部を再現できますし、色合いも細かくすることができます。こうして高解像度モニタができているんですね。
なのでそれぞれの端末について、画面幅が分かりにくいんです。

画面幅の参考資料

パソコンのブラウザは使う人の操作次第で大きくも小さくもなります。
なのでタブレットの幅以上を想定しておけばあまり問題にはなりません。

タブレット端末は、横幅768px、高さ1,024px程度で想定してみてください
スマートフォンは、横幅320px、高さ568pxを最小が最小でしょう。

タブレットやスマートフォンは様々な画面サイズのものが発売されているので、一概に「この数値です！」と断言できませんが、スマートフォンに限っては横幅320pxを最小幅として考えて大丈夫です。
ちなみにこの横幅320pxは、iPhone5シリーズの数値です。iPhoneSEも同じ筐体を使っているので、まだまだ需要のあるサイズです。

デザインをする上で、ある程度の画面幅が分かっていないと作りこむ作業が大変ですよね。なので私の使っている指定幅について書いておきます。
タブレット：770px以下
スマートフォン：620px以下、320px以上
スマートフォンの数値に限っては、制作するデザインによって都度変わる事がありますが、この程度の値をタブレット、スマートフォンの最大幅として考えて制作をしています。
参考になれば幸いです。

スマートフォンとタブレットの境界線について

スマートフォンの画面が大型化しているのは、スマートフォンユーザーの方にとっては実感されていることと思います。
私が初めて持ったのはiPhone4なのですが、以前から使っていたフィーチャーフォン（ガラケー）と比べると「画面が大きいな」と思ったものです。
ですがiPhone5C、iPhone6Sと代を重ねる毎に画面幅が更に大きくなり、今になってiPhone4を見るととても小さく見えるほどです。
スマートフォンとタブレットの中間サイズとしてファブレットなんて商品もあるくらいで、境界線が曖昧になっているように思います。なので画面幅の指定をする時に困ってしまうんですよね。
そんな時には、レスポンシブWEBデザインとは、画面幅によって最適なデザインを適応させる技術であるという事について考えてみてください。
するとパソコン・タブレット・スマートフォンの3種にこだわる必要が全くないことに気が付きます。

メディアクエリは3種しか指定できないのではありません。必要に応じて3種よりもっと多く書いても大丈夫なんです。
表示する画面幅がいくつになっても最適化されたデザインを表示する為に、メディアクエリを使って細かくデザイン指定をしていけばいいので、画面幅は問題にならないんです。

まとめ

・レスポンシブWEBデザインは表示画面幅によってCSSを切り替えている
・@media screen and (max-width:770px){}のように書き込むことで横幅0から最大770pxまでのデザインを指定できる
・@media screen and (min-width:1100px){}のように書き込むことで1100px以上のデザインを指定できる
・@media screen and (min-width:770px) and ( max-width:1100px) {}のように書き込むことで770pxから1100pxの間でデザインを指定できる
・画面幅の指定は3つ以上になっても問題ない