こんにちは！たく丸です！
今回は、CSSのメディアクエリの書き方をご紹介します。

目次

メディアクエリ（media query）とは？

メディアクエリとは、画面の幅などの条件に応じて、適用するCSSを切り替える仕組みです。

スマホで見てもパソコンで見ても、レイアウトが崩れずに見やすいWebサイトがありますよね。
あれは、メディアクエリを使って画面サイズごとにデザインを調整しているからです。
このように、どの端末でも見やすく表示させることを「レスポンシブ対応」と呼びます。

現在はスマホからのアクセスが大半を占めるサイトも多く、Googleもスマホ版のページを基準に評価する「モバイルファーストインデックス」を採用しています。レスポンシブ対応は必須といえるでしょう。

メディアクエリの基本的な書き方

まずはviewportの設定を忘れずに

メディアクエリを書いても、スマホでパソコン版が縮小表示されてしまう場合は、HTMLの<head>内に次のコードがあるか確認しましょう。

<meta name="viewport" content="width=device-width, initial-scale=1">

基本の構文

@media (min-width: 768px) {
  /* 画面幅が768px以上のときに適用 */
  .container {
    display: flex;
  }
}

min-width：〇〇px「以上」のときに適用
max-width：〇〇px「以下」のときに適用

以前は「@media screen and (min-width: 768px)」のようにscreen andをつけて書くのが一般的でしたが、省略しても問題ありません（印刷時と分けたい場合はscreenを指定します）。

よく使われるブレイクポイント

・スマホ：〜767px

・タブレット：768px〜1023px

・パソコン：1024px〜

あくまで目安なので、デザインが崩れる幅に合わせて調整しましょう。

モバイルファーストの書き方

「モバイルファースト」とは、まずスマホ向けのスタイルを書き、画面が大きくなるにつれてmin-widthでスタイルを追加していく書き方です。
現在はこちらが主流です。

/* スマホ（基本のスタイル） */
p {
  font-size: 14px;
}

/* 768px以上（タブレット） */
@media (min-width: 768px) {
  p {
    font-size: 16px;
  }
}

/* 1024px以上（パソコン） */
@media (min-width: 1024px) {
  p {
    font-size: 18px;
  }
}

※CSSは同じ条件なら後に書いたものが優先されるので、小さい画面→大きい画面の順に書いていきます。

デスクトップファーストの書き方

「デスクトップファースト」は、パソコン向けのスタイルを基本にして、画面が小さくなるにつれてmax-widthで上書きしていく書き方です。
パソコンからの利用が多い業務システムや、既存のPCサイトをスマホ対応させるときに使われます。

/* パソコン（基本のスタイル） */
body {
  background-color: #ffffff;
}

/* 1023px以下（タブレット） */
@media (max-width: 1023px) {
  body {
    background-color: #f5f5f5;
  }
}

/* 767px以下（スマホ） */
@media (max-width: 767px) {
  body {
    background-color: #eeeeee;
  }
}

こちらは大きい画面→小さい画面の順に書いていきます。

min-widthとmax-widthを混ぜて書くと、どのスタイルが優先されるのかわかりにくくなります。どちらかに統一して書くのがおすすめです。

範囲を指定する書き方

「768px以上1023px以下」のように範囲を指定したい場合は、andでつなげます。

@media (min-width: 768px) and (max-width: 1023px) {
  /* タブレットのときだけ適用 */
}

最近の主要ブラウザでは、不等号を使った新しい範囲構文も使えます。直感的で読みやすいのが特徴です。

@media (width >= 768px) {
  /* 768px以上 */
}
@media (768px <= width < 1024px) {
  /* 768px以上1024px未満 */
}

知っておくと便利なメディアクエリ

ダークモードに対応する

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111111;
    color: #eeeeee;
  }
}

アニメーションを減らす設定に対応する

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

コンテナクエリ（@container）

画面幅ではなく、親要素の幅に応じてスタイルを切り替えたい場合は、コンテナクエリが便利です。カードなどの部品をどこに置いても最適に表示できます。

.card-wrap {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

まとめ

メディアクエリの書き方をおさらいします。

・viewportの設定を必ず入れる
・現在の主流はmin-widthを使ったモバイルファースト
・min-widthとmax-widthはどちらかに統一すると管理しやすい
・新しい範囲構文やコンテナクエリも使える

ターゲットを明確にして、どの端末でも見やすいサイトを作っていきましょう！