CSSの@mediaクエリ：初心者向けガイド

CSSの@mediaメディアクエリは、Webページのデザインを閲覧環境に合わせて柔軟に調整する機能です。スマートフォン、タブレット、PCなど、様々なデバイスで最適な表示を実現するために欠かせない技術です。

本ガイドでは、@mediaメディアクエリの基本構文から、具体的な書き方、活用例まで、初心者にも分かりやすく解説します。

メディアクエリとは？

メディアクエリは、ブラウザが以下の条件を満たしているかどうかを判断し、一致する場合のみ指定したCSSスタイルを適用する仕組みです。

• 向き
  縦向き、横向き
• 解像度
  ドット数
• 画面サイズ
  幅、高さ
• デバイスの種類
  スマートフォン、タブレット、PCなど

メディアクエリの基本構文

メディアクエリは、以下の3つの要素で構成されます。

@media メディア条件 {
  CSSスタイル;
}

1 メディア条件

メディア条件は、ブラウザが満たしている必要条件を記述します。主に以下の2種類があります。

• メディア特性
  画面サイズ、解像度、向き、カラーモードなど、デバイスの具体的な特性を指定します。
• メディア種別
  all、print、screen、speechなど、適用対象となるデバイスの種類を指定します。

2 CSSスタイル

メディア条件が満たされた場合に適用されるCSSスタイルを記述します。通常のCSSと同様に、セレクタやプロパティを記述できます。

メディアクエリの書き方

メディアクエリは、様々な方法で記述できます。以下に、代表的な例を紹介します。

1 画面サイズによる切り替え

• スマートフォン向けのデザイン (画面幅が600px未満の場合):

@media (max-width: 600px) {
  /* スマートフォン向けスタイル */
}

• タブレット向けのデザイン (画面幅が600px以上かつ960px未満の場合):

@media (min-width: 600px) and (max-width: 960px) {
  /* タブレット向けスタイル */
}

• PC向けのデザイン (画面幅が960px以上の場合):

@media (min-width: 960px) {
  /* PC向けスタイル */
}

• 高解像度ディスプレイ向けのデザイン (解像度が1.5dppi以上の場合):

@media (min-resolution: 1.5dppi) {
  /* 高解像度ディスプレイ向けスタイル */
}

• 横向き画面向けのデザイン:

@media (orientation: landscape) {
  /* 横向き画面向けスタイル */
}

• プリンター印刷向けのデザイン:

@media print {
  /* プリンター印刷向けスタイル */
}

メディアクエリの活用例

メディアクエリは、様々な用途で活用できます。以下に、代表的な例を紹介します。

• アクセシビリティ
  視覚障がい者向けの補助技術に対応したスタイルを適用します。
• 印刷用スタイル
  プリンター印刷時に異なるスタイルを適用します。
• レスポンシブデザイン
  スマートフォン、タブレット、PCなど、様々なデバイスで最適な表示を実現します。

---

スマートフォン向けのデザイン

以下のコードは、画面幅が600px未満の場合に適用される、スマートフォン向けのデザインです。

/* 通常のスタイル */

@media (max-width: 600px) {
  /* スマートフォン向けスタイル */
  body { font-size: 16px; } /* フォントサイズを大きく */
  h1 { font-weight: bold; } /* 見出しを太字に */
  .image { width: 100%; } /* 画像をフルサイズ */
}

タブレット向けのデザイン

以下のコードは、画面幅が600px以上かつ960px未満の場合に適用される、タブレット向けのデザインです。

/* 通常のスタイル */

@media (min-width: 600px) and (max-width: 960px) {
  /* タブレット向けスタイル */
  body { font-size: 18px; } /* フォントサイズを中程度に */
  h1 { font-size: 22px; } /* 見出しのサイズを調整 */
  .image { width: 80%; } /* 画像の幅を調整 */
}

PC向けのデザイン

以下のコードは、画面幅が960px以上の場合に適用される、PC向けのデザインです。

/* 通常のスタイル */

@media (min-width: 960px) {
  /* PC向けスタイル */
  body { font-size: 20px; } /* フォントサイズを大きく */
  h1 { font-size: 28px; } /* 見出しのサイズをさらに大きく */
  .image { width: 60%; } /* 画像の幅をさらに小さく */
  .sidebar { float: right; } /* サイドバーを右側に表示 */
}

高解像度ディスプレイ向けのデザイン

以下のコードは、解像度が1.5dppi以上の場合に適用される、高解像度ディスプレイ向けのデザインです。

/* 通常のスタイル */

@media (min-resolution: 1.5dppi) {
  /* 高解像度ディスプレイ向けスタイル */
  body { font-family: sans-serif; } /* フォントを sans-serif に */
  img { sharpness: 1.2; } /* 画像のシャープネスを上げる */
}

横向き画面向けのデザイン

以下のコードは、画面が横向きの場合に適用される、横向き画面向けのデザインです。

/* 通常のスタイル */

@media (orientation: landscape) {
  /* 横向き画面向けスタイル */
  .main-content { width: 60%; } /* メインコンテンツの幅を狭める */
  .sidebar { width: 40%; } /* サイドバーの幅を広げる */
}

プリンター印刷向けのデザイン

以下のコードは、プリンターで印刷する場合に適用される、印刷向けのデザインです。

/* 通常のスタイル */

@media print {
  /* 印刷向けスタイル */
  body { font-size: 12pt; } /* フォントサイズを小さく */
  img { visibility: hidden; } /* 画像を非表示に */
  .print-only { display: block; } /* 印刷時にのみ表示する要素を表示 */
}

上記以外にも、様々なメディアクエリを利用できます。詳細は、MDN Web Docsなどのリファレンスサイトを参照してください。

---

CSS関数

CSSには、メディアクエリの機能の一部を代替できる関数min()、max()、clamp() が用意されています。

• clamp(): 要素のサイズを最小値、推奨値、最大値の範囲に制限できます。
• max(): 要素の最大サイズを指定できます。
• min(): 要素の最小サイズを指定できます。

これらの関数は、メディアクエリのようにデバイスのブレークポイントを意識する必要がなく、より柔軟なレイアウトを実現できます。

例：min()関数を使って、スマートフォンでフォントサイズを大きくする

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: min(20px, 1vw); /* 画面幅の1%に対して20pxのいずれか大きい方 */
  }
}

CSS Grid レイアウト

CSS Grid レイアウトは、メディアクエリを使用せずに、デバイスのサイズに応じてレイアウトを自動的に調整できる強力なレイアウトシステムです。

• レスポンシブなブレークポイント設定
• グリッド線のガター調整
• 行と列のフレックスタイブな定義

など、様々な機能により、複雑なレイアウトも柔軟に構築できます。

例：CSS Grid レイアウトを使って、2カラムレイアウトをデバイスごとに調整する

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* デフォルト：2カラム */
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* ブレークポイント以下：1カラム */
  }
}

JavaScript

JavaScript を利用することで、より高度なレスポンシブデザインを実現できます。

• JavaScriptライブラリを活用
• 動的にスタイルを書き換える
• 画面サイズやデバイスの情報を取得

など、様々な方法で、ユーザー環境に合わせた最適な表示を提供できます。

例：JavaScriptを使って、画面サイズに応じて画像を切り替える

const image = document.querySelector('img');

function changeImage() {
  const width = window.innerWidth;
  if (width < 600) {
    image.src = 'mobile.jpg';
  } else {
    image.src = 'desktop.jpg';
  }
}

window.addEventListener('resize', changeImage);
changeImage(); // 初期表示時に実行

注意点

上記の方法にはそれぞれ利点と欠点があります。状況に合わせて適切な方法を選択することが重要です。

• JavaScript: 柔軟性が高いが、複雑なロジックが必要になる
• CSS Grid レイアウト: 高度なレイアウトが構築できるが、習得に時間がかかる
• CSS関数: 比較的シンプルで使いやすいが、複雑なレイアウトには不向き

• 新しいCSS機能: 将来的には、メディアクエリをより便利に代替できる新しいCSS機能が導入される可能性があります。
• CSSフレームワーク: BootstrapやFoundationなどのCSSフレームワークには、メディアクエリをラップした使いやすいユーティリティが含まれている場合があります。