CSS アドバンス

CSS3 メディアクエリ

CSS2 で導入された「メディアタイプ（Media Types）」は、特定のメディア（例えば print や screen）向けに専用のスタイルシートを定義するものでした。CSS3 ではこの概念を拡張し、メディアタイプだけでなく、デバイスの特定の条件（画面の幅、高さ、解像度など）を判定できる「メディアクエリ（Media Queries）」が登場しました。

1. CSS3 メディアクエリ

メディアクエリを使用することで、デスクトップ、タブレット、スマートフォンなど、各デバイスに最適化されたレスポンシブなレイアウトを 1 つの HTML ファイルで実現できます。

1.1 メディアクエリの構文

メディアクエリは、メディアタイプと、特定の条件をチェックするメディア特徴（Media Feature）の式で構成されます。

@media not|only mediatype and (expressions) {
  /* 条件が一致したときに適用される CSS コード */
}

条件が真（True）である場合、波括弧 {} 内のスタイルが適用されます。

2. メディアタイプ（Media Types）

CSS3 では、以下のメディアタイプがサポートされています。

値説明
allすべてのメディアタイプに使用されます（デフォルト）。
printプリンターや印刷プレビュー画面用。
screenコンピュータ、タブレット、スマートフォンなどの画面用。
speech内容を音声で読み上げるスクリーンリーダーなどのデバイス用。

3. メディアクエリの基本的な例

メディアクエリの最も一般的な使い方は、画面サイズに応じたスタイルの切り替えです。

3.1 画面幅による切り替え

以下の例では、画面の幅が 480px 以上の場合、背景色を lightgreen に変更します。

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

3.2 複数の条件を組み合わせる

and 演算子を使用することで、複数の条件を結合できます。以下の例では、画面幅が 480px から 1000px の間にある場合にのみスタイルが適用されます。

@media screen and (min-width: 480px) and (max-width: 1000px) {
  body {
    background-color: lightblue;
  }
}

4. 画面の向き（Orientation）の判定

メディアクエリを使用すると、デバイスが「縦向き（Portrait）」か「横向き（Landscape）」かを判定してスタイルを適用できます。

4.1 Orientation の使用例

以下の例では、画面が横向き（幅が高さより大きい）の場合に背景色を lightblue に設定します。

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

5. デバイスごとのブレイクポイント（Breakpoints）

一般的に、特定のデバイス（iPhone、iPad 等）に合わせてプロパティを細かく設定するのではなく、コンテンツのレイアウトが崩れるポイント（ブレイクポイント）に合わせて設計することが推奨されます。

5.1 標準的なブレイクポイントの設定例

/* モバイルデバイス (スマートフォン) */
@media only screen and (max-width: 600px) {...}

/* 小さなタブレットや大型スマートフォン */
@media only screen and (min-width: 600px) {...}

/* タブレット (ポートレートモード) */
@media only screen and (min-width: 768px) {...}

/* ラップトップやデスクトップ */
@media only screen and (min-width: 992px) {...}

/* 大画面デスクトップ */
@media only screen and (min-width: 1200px) {...}

6. CSS3 メディアクエリのプロパティ一覧

メディア特徴（Media Features）で使用できる主なプロパティです。

プロパティ説明
aspect-ratioビューポートの幅と高さの比率。
color出力デバイスの色コンポーネントごとのビット数。
gridデバイスがグリッドベース（端末など）かビットマップベースか。
heightビューポートの高さ。
max-heightビューポートの最大高さ。
max-widthビューポートの最大幅。
min-heightビューポートの最小高さ。
min-widthビューポートの最小幅。
orientation画面の向き（portrait / landscape）。
resolution出力デバイスの解像度（dpi や dpcm）。
widthビューポートの幅。

モダンなウェブ開発において、メディアクエリは「レスポンシブデザイン」を実現するための最も重要なコア技術です。現在では、画面幅だけでなく、ダークモードの設定（prefers-color-scheme）や、アニメーションを抑える設定（prefers-reduced-motion）などもメディアクエリで制御可能になっており、アクセシビリティへの配慮も欠かせない要素となっています。

この「レスポンシブデザイン」をさらに効率化するために、最近では CSS Grid や Flexbox と組み合わせた実装が主流ですが、特定のレイアウト変更が必要なタイミングを決定するのは依然としてメディアクエリの役割です。