@ RWD

Media Queries:メディアクエリ

メディアクエリはデバイスのスクリーンサイズなどの条件(クエリ)によって、読み込むスタイルが切り替えられる CSS3 の機能です。CSS2 では「print」や「screen」などを指定して、印刷向け、スクリーン表示向けといった「media types(メディアタイプ)」で各メディア向けにスタイルを指定することができました。メディアクエリはこれを拡張した CSS3 の仕様で、「media types(メディアタイプ)」に加え「width」「height」「color」などの「medhia featuers(メディア特性)」の条件に当てはまる場合スタイルが適用される機能です。

メディアクエリの使い方

format

@media screen and (width: 480px) {
  /* 480px のスクリーン向けスタイル*/
  body {font-size: 100%;}
}
  • @media でメディアクエリの記述を開始します。
  • 「screen」部分でメディアタイプを指定します。「only screen」として、scree のみに限定することも可能です。デフォルトは「all」で、すべてのメディアタイプに適用されます。
  • ( ) 内にメディア特製を記述します。
  • { } 内に、クエリ条件に当てはまる際のスタイルを記述します。

以下のようなメディア特性を条件に指定して、レスポンシブ Web デザインでのサイトを構築する際に使います。中でも、一番よく使うのは max-width と min-width です。

代表的なメディア特性
メディア特性 説明 接頭辞
width 出力デバイスの表示領域(Viewport)の幅
デスクトップ・ブラウザーの場合は、スクロールバーを含むウィンドウ幅です。※Viewportはスクロールバーを含む幅
max / min max-widht
min-width
height 出力デバイスの表示領域(Viewport)の高さ
デスクトップ・ブラウザーの場合は、スクロールバーを含むウィンドウ幅です。※Viewportはスクロールバーを含む幅
max / min max-height
min-height
device-width 出力デバイスの描画面の幅
たとえば iPhone なら 320px になります
max / min max-device-widht
min-device-width
devaice-height 出力デバイスの描画面の高さ
たとえば iPhone なら480px になります
max / min
orientation 出力デバイスの縦(Portrait)、または横(Landscape)の方向が幅より大きい場合は Portrait、逆の場合は Landscape として認識される
device-pixel-ratio 出力デバイスのピクセル率
Retine ディスプレイのような高密度画面のCSSピクセル率を表します。たとえば、iPhone4 の場合、1.5 倍になります。

メディアクエリの幅指定にはその数値も含まれます。

メディアクエリに指定する数値は、min- でも max- でもその数値を含むサイズが条件に含まれます。

下記のソースコードでは、表示領域を 480px にした際には全てのスタイルが読み込まれます。

mediaquery-02

<!DOCTYPE html>
<html lang="ja">

<head>
<title>sample</title>
<style>
p {
  padding: 1em;
}
@media screen and (min-width: 480px) {
  .min-width-480px {
    background: red;
    color: white;
  }
}
@media screen and (width: 480px) {
  .width-480px {
    background: green;
    color: white;
  }
}
@media screen and (max-width: 480px) {
  .max-width-480px {
    background: blue;
    color: white;
  }
}
</style>
</head>

<body>
  <div>
    <p class="min-width-480px">Viewport(表示領域)が<strong>480px以上</strong>の際に背景が赤になります。</p>
    <p class="width-480px">Viewport(表示領域)が<strong>480px</strong>の際に背景が緑になります。</p>
    <p class="max-width-480px">Viewport(表示領域)が<strong>480px以下</strong>の際に背景が青になります。</p>
  </div>
</body>

</html>

demo

モバイル・ファーストなメディアクエリの指定方法

モバイルデバイス向けのスタイルの指定をデスクトップで引き継ぐように記述する方法です。

大きい画面では小さい画面のスタイルを引き継ぐので、重複がなくなり CSS をよりスリムの記述できます。

小さい画面向けのスタイルの記述の方が少ないと仮定すると、理にかなった記述方法です。min-width を使って 下記のように幅を指定します。

mediaquery_03

<!DOCTYEP html>
<html lang="ja">

<head>
<title>sample</title>
<style>
/* モバイル端末向けスタイルを記述 */
.row {
  width: 100%;
}
p {
  padding: 1em;
  background:lightgray;
}
@media screen and (min-width:480px) {
  /* 480px 以上の画面向けスタイル */
  .width-480 {
    background:green;
  }
}
@media screen and (min-width:768px) {
  /* 768px 以上の画面向けスタイル */
  .width-768 {
    background:red;
  }
}
@media screen and (min-width:1024px) {
  /* 1024px 以上の画面向けスタイル */
  .width-1024 {
    background:orange;
  }
}
</style>
</head>

<body>
  <div class="row">
    <p><strong>モバイル端末向けスタイルで背景がグレイになります。</strong></p>
    <p class="width-480">Viewport(表示領域)が<strong>480px</strong>の際に背景が緑になります。</p>
    <p class="width-768">Viewport(表示領域)が<strong>768px</strong>の際に背景が赤になります。</p>
    <p class="width-1024">Viewport(表示領域)が<strong>1024px</strong>の際に背景がオレンジになります。</p>
  </div>
</body>

</html>

demo

デバイスのスクリーンサイズ例

デバイス スクリーンサイズ
スマホ縦 320px〜479px
スマホ横、タブレット 480px〜767px
タブレット 768px〜1023px
PC 1024px〜