メディアクエリ

メディアクエリは、CSSの機能の1つで、Webページのコンテンツをさまざまな画面サイズや解像度に合わせて調整できます。レスポンシブWebデザインの基本的な要素であり、複数のデバイスに合わせてWebサイトの表示をカスタマイズするために使われます。

メディアクエリは、WebページのHTML内に記述したり、Webページから参照する別の.CSSファイルに記述したりできます。以下は、単純なメディアクエリの例です。

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

上のメディアクエリは、ユーザーのブラウザーウィンドウの幅が768ピクセル以下になると有効になります。デスクトップコンピューターでウィンドウを縮小した場合や、タブレットなどのモバイルデバイスでWebページを表示している場合に起こります。

レスポンシブWebデザインでは、メディアクエリはさまざまな画面サイズに対応するフィルターとして機能します。カスケーディングスタイルシート内のすべてのモジュールと同様に、一覧の下に記述されたものが上にあるものを上書きします。そのため、通常はCSSドキュメント内でデフォルトのスタイルを最初に定義し、その後にさまざまな画面サイズ用のメディアクエリを記述します。たとえば、最初にデスクトップ用のスタイルを定義し、その後にタブレットユーザー用のスタイルを指定したメディアクエリを記述し、さらにスマートフォンユーザー向けのメディアクエリを記述できます。スタイルを逆の順番で定義することもでき、これは「モバイルファースト」開発と呼ばれます。

min-widthはメディアクエリで使われる機能として圧倒的に一般的ですが、ほかにも多くの機能があります。例として、min-device-width、min-device-height、aspect-ratio、max-color-index、max-resolution、orientation、resolutionなどがあります。たとえば、resolutionの値を使うと、HiDPIディスプレイ(Retinaディスプレイなど）を検出し、標準的な画像の代わりに高解像度のグラフィックを読み込むことができます。