メディアクエリによるレスポンシブ対応
メデイアクエリによるレスポンシブ対応の前準備
レスポンシブ対応（マルチデバイス対応）させるには、必ずビューポート設定を行っておきましょう。
<meta name="viewport" content="width=device-width">
なんでビューポート設定が必要なのでしょうかという方はこちらを参考にしてみると納得していただけると思います。
表示サイズ調整の要となるViewportの設定 - Webデザイン仕事で役立つ54のアイデア | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive -
メディアクエリによるレスポンシブ対応
今回は、メディアクエリによるレスポンシブ対応の基本をやっていきましょう。
メディアクエリによる、レスポンシブ対応とは、デバイス画面幅に応じて、適用させるスタイルシートを制御することです。
つまり、指定した画面幅に応じて、適用させるスタイルシートを、１つのCSSファイル内で切り替える手法です。
例えば、960px以上の画面幅であれば、960px以上の画面用に用意したCSSを適用させて、959px以下の画面幅のときは959px以下の画面用に用意したCSSを適用させて、767px以下の画面幅の時は767px以下の画面用に用意したCSSを適用させる。といった具合です。
実際には、
@media screen and ( max-width:○○px ){
○○px以下が最大幅として適用させるCSSを記述。
＝つまり、画面幅が○○px以下の時に適用させるCSSを記述
}
重要な特徴として、スタイルシートは上の記述から継承される事を覚えておきましょう。たとえば、PC用のスタイルシートでfloat:left等を行った要素は、メディアクエリでスタイルシートを切り替えても、そのまま設定したプロパティの値が継承されるので、もしタブレット用のCSSでその値を切りたい（floatを解除したい）場合はfloat:none;と指定してプロパティの値をデフォルト値に戻す必要が出てきたりします。
/*
-------------------------------------------------
PC用のCSS(960px以上の時に適用させるcss)
-------------------------------------------------
*/
※ここにPC用のスタイルシートを記述。
/*
-------------------------------------------------
タブレット用のCSS(959px以下の時に適用させるcss)
-------------------------------------------------
*/
@media screen and ( max-width:959px ){
}
/*
-------------------------------------------------
スマートフォン用のCSS(767px以下の時に適用させるcss)
-------------------------------------------------
*/
@media screen and ( max-width:767px ){
}
※これはPC用のスタイルシートから考えるメディアクエリの手法です。次はスマートフォンのレイアウトから考えていく（モバイルファースト）手法をやっていきましょう。
モバイルファーストという考えを用いたメディアクエリ
こちらは、ファイルを分けた場合でご紹介します。
画面サイズが767px以下の時style.cssを読み込んで、画面サイズが768px~959pxの時にさらにstyleTab.cssを読み込んで、画面サイズが960px以上の時にstylePc.cssを読み込んでいく。と言った具合に、スマートフォンのスタイルシートを基準として考える手法もやっていきましょう。
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/styleTab.css" media="only screen and (min-width:768px)">
<link rel="stylesheet" href="css/stylePc.css" media="only screen and (min-width:960px)">
適切なブレイクポイント
画面サイズを切り替えるポイントである、959pxなどと言ったブレイクポイントと呼ばれる数値は、主流となっているスマートフォンや、タブレットの解像度、画面サイズにより適切な値が時代により変化します。なので、最初のうちは書籍などにのっている数値を参考にサイト制作を行っても大丈夫ですが、実際の実務についたら、ブレイクポイントについても考える必要がでてくることも頭に入れておきましょう。
↓こちらにブレイクポイントについて基礎的な部分がわかりやすく記載されています。
【CSS】適切なブレイクポイントを考えてみる（レスポンシブデザイン用）
↓こちらはブレイクポイントをどう決めていくかが非常に参考になります。（主流となっているデバイスをチェックしたりしていますね。）
