メディアクエリーについて

メディアクエリーとは、スマホ・タブレット・PCなど、
画面の大きさや種類に応じてCSSを切り替える方法のことです。

メディアクエリーの定義

モバイルファースト

• ビューポートの幅が狭い場合のスタイルから書き始めていくことです。

/* モバイル向け（デフォルト） */
.container {
  display: block;
  padding: 1rem;
  font-size: 14px;
}

/* PC向け（ブレイクポイントで変更） */
@media screen and (min-width: 768px) {
  .container {
    display: flex;
    padding: 2rem;
    font-size: 16px;
  }
}

デスクトップファースト

• 広い方のスタイルから描き始めていくことです。

body {
  background: pink;
}

/* ビューポートの最大幅が800px以下 */
@media (max-width: 800px) {
  body {
    background: skyblue;
  }
}

/* ビューポートの最大幅600px以下 */
@media (max-width: 600px) {
  body {
    background: orange;
  }
}

• 使い分けは、使用されるユーザーを想定して記載することが大切ですが、最近では、モバイルファーストが多いです。

• CSSでは、後に記載したものが優先されるため、記述順序が大切です。幅の順番は守りましょう。

SP/PCの表示・非表示

メディアクエリーのよくある例として、SPとPCの画像の表示・非表示の切り替えを紹介します。

<img src="logo-sp.png" width="116" height="32" class="logo-sp" />

<img src="logo-pc.png" width="284" height="32" class="logo-pc" />

• SPとPCそれぞれに、画像を準備しています。

@media (min-width: 600px) {
  .logo-sp {
    display: none;
  }

  .logo-pc {
    display: inline;
  }

• 600px以上のとき、
  • logo-spの画像は非表示とします。
  • logo-pcにはデフォルトのinlineを設定することで表示することができます。

<picture>要素を使った画像の出し分け

コード全体

<picture class="header-logo">
  <source
    srcset="img/pc/pc_header_logo.webp"
    media="(min-width: 768px)"
  />
  <img
    src="img/header_logo.webp"
    alt="※※※※※※※※※※"
  />
</picture>

各要素の役割

• <picture>: 複数の画像を条件に応じて出し分けるコンテナ
• <source>: 条件付きで表示する画像を指定

<source
  srcset="img/pc/pc_header_logo.webp"  ← 表示する画像
  media="(min-width: 768px)"           ← 画面幅768px以上で使用
/>

• <img>: デフォルトで表示する画像

<img
  src="img/header_logo.webp"  ← 768px未満で表示
  alt="※※※※※※※※※※"
/>

動作の流れ

画面幅が768px以上？
  ↓
YES → img/pc/pc_header_logo.webp（PC用）
NO  → img/header_logo.webp（スマホ用）