【CSS】@media - スタイルの適用条件

CSSの@ルールの１つ、@mediaについてご紹介します。

@media

@mediaはスタイルの適用条件を定義します。

ディスプレイやブラウザのサイズによって、適用するスタイルを変えることができます。
デスクトップやスマートフォンなどで様々なデバイスにレイアウトを対応するために利用します。

基本構文

@media 条件 {
    スタイル
}

条件の部分にはメディアタイプやメディア特性などを指定することができ、またそれらを組み合わせることも可能です。

メディアタイプ

メディアタイプはディスプレイや印刷などの出力先を指定します。

@media タイプ {
    スタイル
}

主なタイプは以下です。

<style>
@media screen {
    p {
        color: red;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>

メディア特性

メディア特性は特性を指定します。

@media (特性名: 値) {
    スタイル
}

主な特性は以下です。

次の例はp要素のテキストカラーを赤色にしていますが、横幅が600px以下の場合は青色に設定しています。
デスクトップとスマートフォンでこのプレビューを比較すると色が異なることが分かります。

<style>
p {
    color: red;
}

@media ( max-width: 600px ) {
    p {
        color: blue;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>

メディアクエリー

メディアクエリーは条件を結合します。

@media 条件 結合子 条件 {
    スタイル
}

次の例はp要素のテキストカラーを赤色にしていますが、ブラウザかつ横幅が600px以下の場合は青色に設定しています。
デスクトップとスマートフォンでこのプレビューを比較すると色が異なることが分かります。

<style>
p {
    color: red;
}

@media screen and ( max-width: 600px ) {
    p {
        color: blue;
    }
}
</style>

<p>TEXT TEXT TEXT TEXT</p>