読み込み中...

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

CSSメディアクエリの使い方と応用例を解説するイメージ CSS
2024.01.23
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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デザインを目指してください。