レスポンシブWebデザインでは、「メディアクエリ」を使って画面幅に応じてCSSを切り替える。メディアクエリとは、「画像解像度」「ウィンドウの幅」「デバイスの向き」などを条件にして、スクリーンサイズに応じたCSSにスタイルを切り替えることができる機能。
　
まずは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決め、それぞれの条件に沿ったスタイルシートを記述していく。

ブレイクポイントの決定

ブレイクポイントとは、レスポンシブWebデザインにおいて「表示するレイアウトを切り替える画面サイズ」のことで、ブラウザのウィンドウ幅（px）で考える。ユーザーが使うであろう様々なデバイスを念頭に決定する。例えば、以下のようなブレイクポイントを参考にしてほしい。

　
一般的に、480pxと768pxのブレイクポイントが多い傾向にある。しかしブレイクポイントをいくつに設定しようが、何カ所にしようが決まりはない。どのデバイスでも柔軟なフィット性も持っていればいいのである。TRIAINAでは、520pxと920pxの2カ所に設定する。これは「Adobe HTML5 特設サイト」の設定と同じであり、大変ユニークな値であると言える。しかし、今はPC向けの固定レイアウトを「グリッドシステム」に沿って、完成させなくてはならないので、920pxのところは960pxとしておく。「フリードグリッド」を完成させた後、960pxを800pxに変更するのだが、この説明はまだ先に出てくるので、今は気にしなくてもいい。
　

●ブラウザ幅520px以下ではカラム2段

●ブラウザ幅521px以上ではカラム3段に

●ブラウザ幅961px以上ではカラム6段に

　
前回、ヘッダーのトップ画像のみ指定した「style.css」に「メディアクエリ」のテンプレートとなる記述を足していってほしい。黒枠右上の「ソースを表示」からコピー。
　
「style.css」

@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 body
===========================================*/
body {
  width: 100%;
  background-color:#FFF;
  font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color:#000;
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header {
  text-align:center;
  margin:0 auto;
}
header img {
  width:100%;
  height:auto;
  max-width:960px;
}

/* タブレット向けレイアウト指定：521px～960px */
@media only screen and (min-width: 521px) {
/* ここに521px～960pxまでのCSSを記述 */
}

/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
/* ここに961px以上のCSSを記述 */
}

　
最初に記述されているのが「スマートフォン向けレイアウト指定」なのである。次に「タブレット向けレイアウト指定：521px～960px」となり、最後に「PC向けレイアウト指定：961px以上では固定レイアウト」がくる。「モバイル」→「タブレット」→「PC」の順にCSSが記述されている。これが「モバイルファースト（Mobile First）」の考え方である。

それでは実際に「メディアクエリ」を体感していただこう。さきほどの「style.css」の31行目「/* ここに521px～960pxまでのCSSを記述 */」を削除して、そこに

header img {
  max-width:200px;
}

を記述する。
　
続いて36行目の「/* ここに961px以上のCSSを記述 */」のところに、

header img {
  max-width:500px;
}

を上書きする。
　
それでは確認してみよう。PCで以下のサイトを開き、ブラウザ幅を広げたり狭めたりしてほしい。
　
【メディアクエリ】
　
画像の大きさが切り替わっているのが分かるだろうか。これが「メディアクエリ」なのである。

メディアクエリ内に上書きする

CSSは性格上、先述したコードよりも後から記述したコードの方が優先される。TRIAINAでは「モバイルファースト」の視点から、「モバイル」→「タブレット」→「PC」の順にCSSを記述していく。最初は「モバイル」から考えて、「520px以下」のブラウザ幅では画像幅「max-width:960px;」が適応されるが、ブラウザの幅が960pxよりも狭いので、100%表示になる。次に「タブレット」用メディアクエリ指定「521px〜960px」のブラウザ幅では、画像幅「max-width:200px;」と小さくなり、幅は固定される。最後は「PC」用メディアクエリ指定「961px以上」では、「max-width:500px;」に上書きされ、ブラウザ幅の方が画像の横幅よりも大きいため、画像は固定される。
　
まずは「モバイルファースト」の考え方により、「モバイル」用のCSSを書くのだが、ここには「全デバイス共通のスタイル」も記述する。次にブラウザ幅を広げた「タブレット」用の「メディアクエリ」指定内に、「モバイル」用のスタイルの変更部分を、上書きしていくのである。「PC」用の「メディアクエリ」指定内も同様である。そうすることで、「モバイル」→「タブレット」→「PC」とデバイス幅により、違ったスタイルを提供できるのだ。

モバイルファーストの利点

スクリーンが大きくなるに従い、スタイルの記述も複雑になるものである。「モバイルファースト」の考えは、小さなスクリーンサイズから記述していくので、効率よく作業が勧められるのだ。この上書きしていく方法で記述すれば、全てのデバイスに共通で適用されるスタイルと、各デバイス特有のスタイルを明確に分けることができるので、コーディングの効率化だけでなく、コードの可読性も向上するのだ。
　

Tweet