画面の大きさで表示を変える。スマホ・タブレット・PC向けにCSSのメディアクエリを使ったレスポンシブデザインについて

この記事では、スマホ・タブレット・PC向けにCSSのメディアクエリを使ったレスポンシブデザインの例を紹介します。画面サイズごとに適切なスタイルを切り替えることで、どのデバイスでも見やすいデザインが作れます。

1 メディアクエリとは？

メディアクエリとは、CSSのルールを特定の条件に応じて適用する仕組みです。画面サイズや解像度、デバイスの種類に応じてスタイルを切り替えることができます。

1.1 基本構文

@media only screen and (条件) {
    /* 条件に合った場合に適用されるCSS */
    セレクタ {
        プロパティ: 値; /* このCSSが適用されます */
    }
}

2 代表的な画面幅の目安

• スマホ（小型）: 〜374px
• スマホ（標準）: 375px 〜 479px
• スマホ（大型）: 480px 〜 767px
• タブレット: 768px 〜 1024px
• ノートPC: 1025px 〜 1280px
• デスクトップPC: 1281px 以上

3 具体的なメディアクエリ例

3.1 スマホ（小型） ～374px

@media only screen and (max-width: 374px) {
    /* 小さい画面向け */
    body {
        font-size: 14px; /* 小さめの文字 */
    }
    .container {
        padding: 10px; /* 狭い画面でも余白を調整 */
    }
}

3.2 スマホ（標準） 375px 〜 479px

@media only screen and (min-width: 375px) and (max-width: 479px) {
    /* 標準スマホ向け */
    body {
        font-size: 16px;
    }
    .container {
        padding: 15px;
    }
}

3.3 スマホ（大型） 480px 〜 767px

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* 大型スマホ向け */
    body {
        font-size: 17px;
    }
    .container {
        padding: 20px;
    }
}

3.4 タブレット 768px 〜 1024px

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* タブレット向け */
    body {
        font-size: 18px;
    }
    .container {
        padding: 25px;
    }
}

3.5 ノートPC 1025px 〜 1280px

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    /* ノートPC向け */
    body {
        font-size: 19px;
    }
    .container {
        padding: 30px;
    }
}

3.6 デスクトップPC 1281px 以上

@media only screen and (min-width: 1281px) {
    /* デスクトップPC向け */
    body {
        font-size: 20px;
    }
    .container {
        padding: 40px;
    }
}

4 メディアクエリのポイント

• max-width は「指定した幅以下」の場合に適用
• min-width は「指定した幅以上」の場合に適用
• 複数条件を組み合わせる場合は and でつなぐ
• 範囲を明確にすることで、重複して適用されるスタイルを避けられる
• レスポンシブデザインを作る際には、モバイルファースト（小さい画面から設計）がおすすめ

5 まとめ

メディアクエリを使うことで、スマホ・タブレット・PCそれぞれの画面幅に応じてCSSを切り替えられます。
ポイントは、小さい画面から順にスタイルを作る「モバイルファースト」 の設計です。
基本のスマホ用スタイルを書き、画面幅が広くなるにつれて上書きしていくと、効率よくレスポンシブデザインが作れます。
さらに、各画面幅のコメントをコード内に追加しておくと、あとから見返したときに理解しやすくなります。