CSSでメディアクエリを使用する方法

目次

メディアクエリとは

表示された画面環境に応じて適用するスタイルを切り替える機能。
一つのページで複数の異なる表示環境に対応するレスポンシブWebデザインを実現することができる。

よく使用される例としては、PC版とスマホ版のCSSを分けたい場合などに使用します。

事前準備

HTMLのヘッダータグ内に、以下のメタタグを追加します。

<meta name="viewport" content="width=device-width,initial-scale=1">

スマホにのみCSSを設定する方法

以下の様に、メディアクエリを設定する事で、スマホにのみ設定できるCSSを記載できます。
一例で「sp_font」のCSSを記載していますが、このクラスが設定されていてもスマホ以外はフォントサイズのCSSが反映されません。

@media only screen and (max-width: 479px) {
    /* スマートフォン用のCSS */
    .sp_font {
        font-size: 12px;
    }
}

タブレットにのみCSSを設定する方法

以下の様に、メディアクエリを設定する事で、タブレットにのみ設定できるCSSを記載できます。
一例で「tab_font」のCSSを記載していますが、このクラスが設定されていてもタブレット以外はフォントサイズのCSSが反映されません。

@media only screen and (min-width:479px) and (max-width:768px) {
    /* タブレット用のCSS */
    .tab_font {
        font-size: 16px;
    }
}

PCにのみCSSを設定する方法

以下の様に、メディアクエリを設定する事で、PCにのみ設定できるCSSを記載できます。
一例で「tab_font」のCSSを記載していますが、このクラスが設定されていてもPC以外はフォントサイズのCSSが反映されません。

@media only screen and (min-width: 1200px) {
    /* PC用のCSS */
    .pc_font {
        font-size: 18px;
    }
}

問題点

この記事で記載しているメディアクエリはブラウザの横幅からデバイスを判定しています。
そのため、PCでもウィンドウを小さくすればスマホのCSSが当たります。

また、今後、とてもデカいタブレットが出てきた場合は、そのタブレットにPCのCSSが当たる場合もあります。

まとめ

以下に各デバイスごとのCSSをまとめて記載します。

/* 全てに使用されるCSS */
.all_font {
    font-size: 20px;
}

@media only screen and (min-width: 1200px) {
    /* PC用のCSS */
    .pc_font {
        font-size: 18px;
    }
}

@media only screen and (min-width:479px) and (max-width:768px) {
    /* タブレット用のCSS */
    .tab_font {
        font-size: 16px;
    }
}

@media only screen and (max-width: 479px) {
    /* スマートフォン用のCSS */
    .sp_font {
        font-size: 12px;
    }
}