[CSS] モバイルファースト、デスクトップファーストでのメディアクエリの使い分け

モバイルファーストとデスクトップファーストのメディアクエリの使い分けについて解説します。

モバイルファースト

モバイルファーストとは、小さな画面サイズを基準に全デバイス共通の基本のスタイルを最初に定義し、画面幅が大きくなるにつれてスタイルを追加・上書きしていく手法です。

モバイルファーストのCSSを書くポイント

ベーススタイルをモバイル向けに記述
小さな画面サイズを基準に、全デバイス共通の基本のスタイルを定義します。
メディアクエリでスタイルを拡張
画面幅が広がるにつれて、大きい画面向けスタイルを追加または上書きします。
記述順を「小さい条件」から「大きい条件」にする
大きい条件を後に記述することで、上書きがスムーズになります。
主に使用するメディアクエリは min-width
画面幅が指定の値以上の場合に適用されます。

/* 全デバイス共通のベーススタイル（主にモバイル向け） */
body {
    font-size: 15px;
    margin: 10px;
}

/* 768px以上の画面幅用スタイル */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
        margin: 15px;
    }
}

/* 1024px以上の画面幅用スタイル */
@media screen and (min-width: 1024px) {
    body {
        font-size: 18px;
        margin: 20px;
    }
}

/* 全デバイス共通のベーススタイル（主にモバイル向け） */

body {

font-size: 15px;

margin: 10px;

}

/* 768px以上の画面幅用スタイル */

@media screen and (min-width: 768px) {

body {

font-size: 16px;

margin: 15px;

}

/* 1024px以上の画面幅用スタイル */

@media screen and (min-width: 1024px) {

body {

font-size: 18px;

margin: 20px;

}

デスクトップファースト

デスクトップファーストとは、大きな画面サイズを基準に全デバイス共通の基本のスタイルを最初に定義し、画面幅が小さくなるにつれてスタイルを追加・上書きしていく手法です。

デスクトップファーストのCSSを書くポイント

ベーススタイルをデスクトップ向けに記述
大きな画面サイズを基準に、全デバイス共通の基本のスタイルを定義します。
メディアクエリでスタイルを調整
画面幅が狭くなるにつれて、小さい画面向けのスタイルを追加または上書きします。
記述順を「大きい条件」から「小さい条件」にする
小さい条件を後に記述することで、上書きがスムーズになります。
主に使用するメディアクエリは max-width
画面幅が指定の値以下の場合に適用されます。

/* 全デバイス共通のベーススタイル（主にデスクトップ向け） */
body {
    font-size: 18px;
    margin: 20px;
}

/* 767px以下の画面幅用スタイル */
@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
        margin: 15px;
    }
}

/* 479px以下の画面幅用スタイル */
@media screen and (max-width: 479px) {
    body {
        font-size: 15px;
        margin: 10px;
    }
}