【HTML&CSS】メディアクエリを活用してウェブサイトをレスポンシブにする方法

この記事では、メディアクエリを使用してウェブサイトをレスポンシブに設計する方法を詳しく解説します。異なるデバイスや画面サイズに対応するために、CSSメディアクエリについて学びましょう。

はじめに

HTML&CSSを学習していくなかで悩まされるレスポンシブ対応。近年ではスマホ社会となりパソコン画面だけでなく、スマホで綺麗にウェブサイトを表示するスキルが求められます。

今回はウェブサイトをレスポンシブ対応させるためにCSSのメディアクエリについて解説してきます。
ぜひ最後まで見て行ってください！

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

メディアクエリは、通常、CSSファイル内で使用されます。以下は基本的なメディアクエリの構文です。

@media (条件) {
    /* 条件が満たされたときに適用されるスタイル */
}

条件は、特定のデバイスの幅、高さ、向き、解像度などを指定します。ここで、具体的な例を示します。

/* 800px以下の幅のデバイスに適用 */
@media (max-width: 800px) {
    /* スタイルの適用 */
    body {
        font-size: 16px;
    }
}

この例では、デバイスの幅が800px以下の場合に、body要素のフォントサイズを16pxに設定します。このように、メディアクエリを使用することで、異なるデバイス幅に対応したスタイルを適用できます。

メディアクエリの記述方法の種類

幅に基づくメディアクエリ

• min-width: 指定した幅以上のデバイスにスタイルを適用します。
• max-width: 指定した幅以下のデバイスにスタイルを適用します。

@media (min-width: 768px) {
    /* 768px以上の幅のデバイスにスタイルを適用 */
}

@media (max-width: 1024px) {
    /* 1024px以下の幅のデバイスにスタイルを適用 */
}

高さに基づくメディアクエリ

• min-height: 指定した高さ以上のデバイスにスタイルを適用します。
• max-height: 指定した高さ以下のデバイスにスタイルを適用します。

@media (min-height: 600px) {
    /* 600px以上の高さのデバイスにスタイルを適用 */
}

@media (max-height: 900px) {
    /* 900px以下の高さのデバイスにスタイルを適用 */
}

向きに基づくメディアクエリ

• orientation: デバイスの向き（縦または横）に応じてスタイルを適用します。

@media (orientation: landscape) {
    /* デバイスが横向きの場合にスタイルを適用 */
}

@media (orientation: portrait) {
    /* デバイスが縦向きの場合にスタイルを適用 */
}

解像度に基づくメディアクエリ

• min-resolution: 指定した解像度以上のデバイスにスタイルを適用します。
• max-resolution: 指定した解像度以下のデバイスにスタイルを適用します。

@media (min-resolution: 300dpi) {
    /* 300dpi以上の解像度のデバイスにスタイルを適用 */
}

@media (max-resolution: 192dpi) {
    /* 192dpi以下の解像度のデバイスにスタイルを適用 */
}

段階的にスタイル調整をする

次に画面幅が小さくなるにつれてCSSのスタイル調整をしていく方法を解説します。

/* ブレイクポイント1200px以下のスタイル */
@media (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* ブレイクポイント992px以下のスタイル */
@media (max-width: 992px) {
  body {
    font-size: 18px;
  }
}

/* ブレイクポイント768px以下のスタイル */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* ブレイクポイント576px以下のスタイル */
@media (max-width: 576px) {
  body {
    font-size: 14px;
  }
}

上記の例では、画面サイズが1200pxから段々と小さくしていくと、bodyのフォントサイズが20px→18px→16px→14pxと調整されていきます。

今回は、フォントサイズだけの調整で簡単な内容でしたが、画面が小さくなったらナビメニューを画面から消して、ハンバーガーメニューを表示させるなどいろいろと応用が可能になります。

まとめ

以上がメディアクエリについての説明でした。
メディアクエリを使用することでパソコン、タブレット、スマートフォンそれぞれのメディアに対して最適なスタイルを表示させることができます！

ぜひメディアクエリをマスターしてレスポンシブ対応を極めましょう！