CSSメディアクエリ徹底解説！使い方・作り方・無限ループ対策・応用例＋サンプルコード

はじめに

Webデザインを学ぶ際に、CSSメディアクエリは欠かせない知識のひとつです。

メディアクエリを使用することで、デバイスや画面サイズに応じたレイアウトやデザインを実現できます。

本記事では、初心者向けにCSSメディアクエリの作り方、使い方、無限ループ対策、応用例とサンプルコードを徹底解説します。

これを読めば、メディアクエリを使いこなせるようになること間違いありません！

●CSSメディアクエリとは

CSSメディアクエリとは、Webページのスタイル（CSS）をデバイスや画面サイズに応じて適用するための条件指定の仕組みです。

これにより、スマートフォンやタブレットなど、異なるデバイスや画面サイズごとにレイアウトやデザインを最適化することができます。

●メディアクエリの基本構文

CSSメディアクエリの基本構文は次のようになります。

@media タイプ and (条件) {
  /* スタイルの指定 */
}

例えば、下記のように記述すると、画面幅が768px以下のデバイスに対してスタイルを適用できます。

@media screen and (max-width: 768px) {
  /* 画面幅が768px以下のデバイス向けのスタイル */
}

●メディアクエリの使い方

では、メディアクエリを使って、デバイスや画面サイズごとに異なるスタイルを適用する方法を見ていきましょう。

画面幅に応じたフォントサイズの変更

次のサンプルコードでは、画面幅が768px以下のデバイスでは、フォントサイズを14pxに、それ以外のデバイスではフォントサイズを18pxに設定しています。

body {
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

画面幅に応じたカラム数の変更

次のサンプルコードでは、画面幅が1200px以上のデバイスでは3カラム、768px以上1200px未満のデバイスでは2カラム、768px未満のデバイスでは1カラムのレイアウトになるように設定しています。

.column {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .column {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .column {
    width: 33.333%;
  }
}

●無限ループ対策

メディアクエリを使用する際、条件が重複することでスタイルが無限ループに陥ることがあります。

無限ループを回避するために、以下のように条件を正確に指定することが重要です。

@media screen and (min-width: 481px) and (max-width: 767px) {
  /* 画面幅が481px以上767px以下のデバイス向けのスタイル */
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 画面幅が768px以上1023px以下のデバイス向けのスタイル */
}

このように、それぞれの条件を重複しないように指定することで、無限ループを回避できます。

●応用例とサンプルコード

ここでは、メディアクエリを応用した実用的な例をいくつか紹介します。

画像のサイズ変更

画面幅に応じて、表示する画像のサイズを変更することができます。

img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  img {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  img {
    width: 33.333%;
  }
}

ナビゲーションメニューの表示切り替え

画面幅が小さいデバイスでは、ナビゲーションメニューをドロワーメニューに切り替えることができます。

まず、HTMLでナビゲーションメニューとドロワーメニューを記述します。

<!-- ナビゲーションメニュー -->
<nav class="nav-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<!-- ドロワーメニュー -->
<div class="drawer-menu">
  <input type="checkbox" id="drawer-toggle">
  <label for="drawer-toggle" class="drawer-icon"></label>
  <nav class="drawer-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

次に、CSSで画面幅に応じてナビゲーションメニューとドロワーメニューの表示を切り替えます。

/* ナビゲーションメニュー */
.nav-menu {
  display: none;
}

/* ドロワーメニュー */
.drawer-menu {
  display: block;
}

/* 画面幅が768px以上のデバイスでナビゲーションメニューを表示し、ドロワーメニューを非表示にする */
@media screen and (min-width: 768px) {
  .nav-menu {
    display: block;
  }

  .drawer-menu {
    display: none;
  }
}

このようにして、画面幅に応じてナビゲーションメニューとドロワーメニューを切り替えることができます。

まとめ

本記事では、CSSメディアクエリの作り方、使い方、無限ループ対策、応用例とサンプルコードを初心者向けに徹底解説しました。

メディアクエリをうまく使いこなすことで、デバイスや画面サイズに応じたレスポンシブなデザインが実現できます。

これを機に、ぜひメディアクエリを活用して、すべてのユーザーに適したWebデザインを目指してください。