CSS メディアクエリの書き方・使い方と種類【ウェブデザイン技能検定 1級学科範囲】

2024年12月18日 2024年11月22日 6分45秒

タスラ t3l

メディアクエリはCSSでレスポンシブデザインを実現するための強力なツールです。

特定の条件に基づいてスタイルを適用することで、さまざまなデバイスや画面サイズに対応したデザインを作成できます。

現在のウェブデザインにおいては必須といっても過言ではない内容になりますので、知っている方も是非この機会に見直していただけたらと思います。

普段使えるような使い方だけではなく、ちょっと特殊な方法も紹介します。

1 メディアクエリの基本
2 条件の具体例
3 条件の重ね掛け
4 その他の条件
5 まとめ

メディアクエリの基本

メディアクエリは、CSSの一部として使用され、特定の条件に基づいてスタイルを適用するためのルールです。例えば、デバイスの画面幅、解像度、向きなどに応じてスタイルを変更できます。

基本的な構文

@media (条件) {
    /* 適用するスタイル */
}

条件の具体例

1. (min-width: 500px)

min-widthは、画面の最小幅を指定する条件です。指定した幅以上のデバイスに対してスタイルを適用します。

使用例

@media (min-width: 500px) {
    body {
        background-color: lightgreen;
    }
}

この例では、画面幅が500ピクセル以上のデバイスに対して背景色をライトグリーンに変更します。

2. all and (color)

allはすべてのメディアタイプに適用される条件です。(color)は、色がサポートされているデバイスに対してスタイルを適用します。

使用例

@media all and (color) {
    body {
        background-color: lightyellow;
    }
}

この例では、色がサポートされているすべてのデバイスに対して背景色をライトイエローに変更します。

3. screen and (color)

screenは画面メディアタイプに適用される条件です。(color)は、色がサポートされているデバイスに対してスタイルを適用します。

使用例

@media screen and (color) {
    body {
        background-color: lightcoral;
    }
}

この例では、画面メディアタイプで色がサポートされているデバイスに対して背景色をライトコーラルに変更します。

4. not screen and (color)

notは指定した条件に一致しないデバイスに対してスタイルを適用する条件です。screen and (color)は、画面メディアタイプで色がサポートされているデバイスに対してスタイルを適用しますが、notを使用するとそれ以外の条件にスタイルを適用します。

使用例

@media not screen and (color) {
    body {
        background-color: lightgray;
    }
}

この例では、画面メディアタイプで色がサポートされていないデバイスに対して背景色をライトグレーに変更します。

条件の重ね掛け

メディアクエリでは、複数の条件を組み合わせて指定することができます。
これにより、さらに詳細な条件を設定してスタイルを適用できます。

使用例

@media (min-width: 500px) and (max-width: 800px) and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

この例では、画面幅が500ピクセル以上800ピクセル以下で、画面の向きが横向き（ランドスケープ）のデバイスに対して背景色をライトブルーに変更します。

その他の条件

メディアクエリには、画面幅や色以外にも多くの条件があり、それらを組み合わせて使用できます。以下に、いくつかの一般的な条件を紹介します。

orientation: デバイスの向きを指定します。portrait（縦向き）またはlandscape（横向き）。

@media (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

aspect-ratio: 画面のアスペクト比（幅と高さの比率）を指定します。

@media (aspect-ratio: 16/9) {
    body {
        background-color: lightpink;
    }
}

resolution: デバイスの解像度を指定します。

@media (min-resolution: 192dpi) {
    body {
        background-color: lightseagreen;
    }
}

prefers-color-scheme: ユーザーが設定したカラースキーム（ダークモードやライトモード）を指定します。

@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

hover: デバイスがホバー操作をサポートしているかどうかを指定します。

@media (hover: hover) {
    a:hover {
        color: red;
    }
}

まとめ

メディアクエリは、CSSでレスポンシブデザインを実現するための強力なツールです。
特定の条件を設定して、デバイスの特性に応じたスタイルを適用できます。
条件の重ね掛けや多様なメディア特性を使用することで、より細かい制御が可能になります。
ウェブデザイン技能検定だけでなく、現代の制作には必須の内容になりますので、是非メディアクエリの基本的な使い方と応用を理解し、適切に活用いただけたらとおもいます。