メディアクエリの使い方についてわかりやすく解説！

2023 9/28

2023年3月8日 2023年9月28日

ウェブサイトは、デスクトップ、タブレット、スマートフォンなど、様々な画面サイズで表示されます。このため、画面サイズに応じてスタイルを切り替える必要があります。このような画面サイズに応じたスタイルの切り替えに使用するのが、メディアクエリです。

メディアクエリには、メディア型とメディア特性という2つの要素があります。メディア型は、画面の種類を指定し、メディア特性は、画面の情報を指定します。

本記事では、メディア型とメディア特性について解説していきます。

メディア型

all

all は、すべてのメディアに対してスタイルを適用することを指定します。これは、通常のスタイルシートで指定したスタイルが、どのメディアでも適用されることを意味します。all は、メディアクエリで明示的に指定しなくても、自動的に適用されるデフォルトの値です。

/* すべてのメディアに適用される */
h1 {
  font-size: 36px;
}

print

print は、印刷時に適用するスタイルを指定します。これにより、Webページを印刷する際に、適切なレイアウトで印刷されるようになります。

/* 印刷時に適用される */
@media print {
  h1 {
    font-size: 24px;
  }
}

screen

screen は、画面表示時に適用するスタイルを指定します。これにより、画面サイズに応じた適切なレイアウトが表示されるようになります。

/* 画面表示時に適用される */
@media screen {
  h1 {
    font-size: 36px;
  }
}

speech

speech は、音声読み上げブラウザでの表示時に適用されるスタイルを指定します。

/* 音声読み上げブラウザでの表示時に適用 */
@media speech {
  /* スタイルを指定する */
}

メディア特性

width

width は、画面の幅を指定します。この値を使うことで、画面サイズに応じたスタイルの適用を制御することができます。

/* 画面幅が600px以下の場合に適用される */
@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

height

height は、画面の高さを指定します。

/* 画面高さが800px以上の場合に適用される */
@media (min-height: 800px) {
  h1 {
    font-size: 48px;
  }
}

orientation

orientation は、画面の向きを指定します。portrait は縦向き、landscape は横向きを表します。

/* 縦向きの場合に適用される */
@media (orientation: portrait) {
  h1 {
    font-size: 24px;
  }
}

resolution

resolution は、画面の解像度を指定します。これにより、高解像度ディスプレイの場合に、より高品質な画像を表示することができます。

/* 解像度が2倍の場合に適用 */
@media (min-resolution: 2dppx) {
  img {
    background-image: url('image@2x.png');
    background-size: cover;
  }
}

aspect-ratio

aspect-ratio は、画面のアスペクト比を指定します。これにより、縦横比に応じたスタイルを適用することができます。

/* 16:9のアスペクト比の場合に適用される */
@media (aspect-ratio: 16/9) {
  h1 {
    font-size: 36px;
  }
}

color

color は、画面の色数を指定します。これにより、カラーディスプレイとモノクロディスプレイで異なるスタイルを適用することができます。

/* カラーディスプレイの場合に適用される */
@media (color) {
  h1 {
    color: red;
  }
}

/* モノクロディスプレイの場合に適用される */
@media (color: monochrome) {
  h1 {
    color: black;
  }
}

grid

grid は、画面のグリッド表示に対応しているかどうかを指定します。

/* グリッド表示に対応している場合に適用される */
@media (grid) {
  /* グリッドのスタイルを指定する */
}

まとめ

メディアクエリは、デバイスの画面サイズに応じたスタイルを適用するために使用されるCSSの機能です。メディアクエリには、メディア型とメディア特性があります。メディア型には、all、print、screen、speechなどがあり、それぞれの用途に応じて適切なものを選択することができます。メディア特性には、width、height、aspect-ratio、orientation、resolutionなどがあり、これらを組み合わせることで、画面サイズに応じたスタイルを適用することができます。

以下に、メディア型とメディア特性をまとめます。

メディア型：
- screen：スクリーン表示用のスタイルを適用する。例えば、背景色を変えたり、フォントサイズを変えたりする。
- print：印刷用のスタイルを適用する。例えば、余白を調整したり、印刷時に表示されない要素を非表示にしたりする。
- speech：音声支援技術を使用する場合に、スクリーンリーダーが読み上げる内容を指定する。例えば、”display: none” を指定することで、スクリーンリーダーには読み上げられない要素を非表示にすることができます。
メディア特性：
- width：画面の幅に応じたスタイルを適用する。例えば、スマートフォンサイズの場合は文字サイズを小さくし、デスクトップサイズの場合は文字サイズを大きくする。
- height：画面の高さに応じたスタイルを適用する。例えば、高さが低い場合は要素をスクロール可能にし、高さがある場合はスクロール不要にする。
- orientation：画面の向きに応じたスタイルを適用する。例えば、縦向きの場合はメニューを隠したり、横向きの場合はメニューを表示したりする。
- resolution：画面の解像度に応じたスタイルを適用する。例えば、高解像度ディスプレイの場合は高品質な画像を表示する。