CSS/@media

@media

@mediaルールは、CSSでメディアクエリを使用するために使われます。メディアクエリは、異なるデバイスや表示条件に基づいて異なるスタイルを適用する方法を提供します。これにより、レスポンシブデザインを実現し、画面サイズや解像度、向き、デバイスの種類に応じてWebページの表示を最適化することができます。

概要

@mediaは、特定のメディアタイプや条件に基づいてCSSスタイルを適用します。これにより、異なるデバイスや画面サイズに合わせて、Webページのレイアウトやデザインを調整できます。

• 記述場所: @mediaルールはCSSスタイルシート内で使用され、特定の条件が満たされた場合にのみ適用されるスタイルを定義します。

書式

@mediaの基本構文は以下の通りです：

@media <メディア条件> {
  <スタイルルール>;
}

• <メディア条件>: メディアクエリにおける条件を指定します。これには、画面の幅や高さ、解像度、デバイスの種類（画面や印刷など）などが含まれます。
• <スタイルルール>: 条件が満たされた場合に適用されるスタイルのルールです。

複数のメディア条件を組み合わせることもできます。

@media (min-width: 600px) and (max-width: 1200px) {
  /* 画面幅が600pxから1200pxの間のときに適用するスタイル */
}

使用例

以下に、@mediaの使用例を示します。

基本的なレスポンシブデザインの例

/* デフォルトのスタイル */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 24px;
}

/* スマートフォン用のスタイル */
@media (max-width: 600px) {
  h1 {
    font-size: 18px;
  }
}

/* タブレット用のスタイル */
@media (min-width: 601px) and (max-width: 1024px) {
  h1 {
    font-size: 20px;
  }
}

/* デスクトップ用のスタイル */
@media (min-width: 1025px) {
  h1 {
    font-size: 24px;
  }
}

この例では、画面幅が異なるデバイス向けにh1要素のフォントサイズを調整しています。max-widthやmin-widthを使って、特定の幅の範囲においてスタイルを適用しています。

メディアタイプの指定

@mediaでは、メディアタイプを指定して、異なるメディアに対してスタイルを適用できます。例えば、画面表示用、印刷用、音声読み上げ用などです。

/* 画面表示用 */
@media screen {
  body {
    background-color: lightblue;
  }
}

/* 印刷用 */
@media print {
  body {
    background-color: white;
  }
  h1 {
    font-size: 20px;
  }
}

この例では、screenメディアタイプとprintメディアタイプに応じて異なるスタイルを設定しています。画面表示では背景色を水色に設定し、印刷時には背景色を白に、h1要素のフォントサイズを調整しています。

複数のメディア条件の組み合わせ

複数の条件を組み合わせて、より詳細なスタイルを適用することもできます。

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* 横向きで画面幅が768px以上1024px以下の場合に適用 */
  body {
    background-color: lightgreen;
  }
}

この例では、画面の向きが横向きかつ画面幅が768px以上1024px以下の場合に適用されるスタイルを定義しています。

高解像度ディスプレイ向けのスタイル

高解像度ディスプレイ（例えば、Retinaディスプレイ）に合わせたスタイルを指定することもできます。

@media (min-resolution: 192dpi) {
  .high-resolution-image {
    background-image: url('high-res-image.jpg');
  }
}

この例では、解像度が192dpi以上のディスプレイに対して、high-resolution-imageクラスの画像を高解像度のものに変更しています。

メディアクエリの拡張

• min-width: 画面の幅が指定した値以上の場合に適用されます。
• max-width: 画面の幅が指定した値以下の場合に適用されます。
• orientation: 画面の向きが縦向き（portrait）または横向き（landscape）の場合に適用されます。
• resolution: 画面の解像度に基づいてスタイルを適用します。

これらを組み合わせることで、さまざまなデバイスに対応した柔軟なスタイルを適用できます。

レスポンシブデザインと@media

@mediaは、レスポンシブデザインの中心的な役割を果たします。レスポンシブデザインとは、異なるデバイス（スマートフォン、タブレット、デスクトップPCなど）に適応したWebデザインを作成する技術です。@mediaを使って、デバイスごとに異なるスタイルを適用し、画面サイズや解像度に最適化されたWebページを作成できます。

関連情報

• MDN: @media
• W3C: @media Descriptors
• W3C: Media-specific style sheets: the @media rule
• Can I use: Media Queries: Range Syntax

@mediaは、異なるデバイスや条件に対応するための強力なツールであり、Webデザインのレスポンシブ対応において不可欠な要素です。