CSS メディアクエリーについてまとめ

メディアクエリーとは、スマホ・タブレット・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を設定することで表示することができます。