CSSの@mediaルール：デバイスに応じたスタイルの変更方法

Posted on by

CSSの@mediaルールは、デバイスのサイズや特性に応じて異なるスタイルを適用するための方法です。
この機能を活用することで、レスポンシブデザインを実現し、
さまざまなデバイスで見やすく使いやすいウェブサイトを作成できます。
本記事では、@mediaルールの基本から応用までを解説します。

@mediaルールとは？

@mediaは、CSSで条件に応じたスタイルを定義するためのルールです。
この条件をメディアクエリ（media query）と呼びます。
例えば、デバイスの幅や高さ、解像度に基づいて異なるデザインを適用することが可能です。

基本構文

@media (条件) {
  セレクタ {
    プロパティ: 値;
  }
}

よく使われる条件

  • width または height: ビューポートの幅や高さ。
  • device-width または device-height: デバイス全体の幅や高さ。
  • orientation: 画面の向き（portrait または landscape）。
  • resolution: 解像度（例：300dpi）。
  • aspect-ratio: アスペクト比（例：16/9）。

基本的な使い方

幅に応じたスタイルの変更

画面幅が768px以下のデバイスに異なるスタイルを適用します。

コード例

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

結果

画面幅が768px以下のデバイスで背景色が水色になります。

2.2 画面の向きによるスタイル変更

画面が縦向き（portrait）のときに特定のスタイルを適用します。

コード例

@media (orientation: portrait) {
  body {
    font-size: 18px;
  }
}

結果

デバイスが縦向きの場合にフォントサイズが18pxに変更されます。

複数条件の組み合わせ

画面幅が768px以下かつ解像度が300dpi以上の場合にスタイルを適用します。

コード例

@media (max-width: 768px) and (min-resolution: 300dpi) {
  body {
    color: red;
  }
}

結果

条件を満たすデバイスで文字色が赤に変わります。

実用例

レスポンシブナビゲーションメニュー

画面幅が600px以下の場合、ナビゲーションメニューを縦向きに変更します。

コード例

.nav {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
  }
}

3.2 画像サイズの調整

画面幅に応じて画像サイズを調整します。

コード例

img {
  width: 100%;
}

@media (max-width: 768px) {
  img {
    width: 80%;
  }
}

フォントサイズの変更

デバイスの幅に応じてテキストのサイズを変更します。

コード例

body {
  font-size: 16px;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
}

高度な使い方

範囲を指定

特定の幅の範囲でスタイルを適用します。

コード例

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightgray;
  }
}

結果

画面幅が600px以上1200px以下の場合に背景色が灰色になります。

特定の解像度にスタイルを適用

高解像度ディスプレイ（例：Retinaディスプレイ）用のスタイルを適用します。

コード例

@media (min-resolution: 2dppx) {
  img {
    content: url('high-res-image.png');
  }
}

異なるデバイスタイプにスタイルを適用

プリントメディアに異なるスタイルを適用します。

コード例

@media print {
  body {
    background-color: white;
    color: black;
  }
}

結果

印刷時に背景が白、文字色が黒になります。

ベストプラクティス

モバイルファーストのアプローチ

最初にモバイル向けのスタイルを記述し、大きなデバイス向けにスタイルを上書きする方法がおすすめです。

例

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

再利用可能なクラスを使用

共通スタイルをクラスでまとめ、@mediaで条件付きのスタイルを追加します。

ユニットの適切な選択

レスポンシブデザインでは、%やvw, vhを活用することで柔軟なレイアウトを実現します。

よくある質問

Q1. @mediaルールが適用されない原因は？

正しい条件が記述されているか確認してください。
スタイルが他のルールで上書きされていないか確認してください。

Q2. デスクトップとモバイルで別々のスタイルを管理するには？

デバイスの幅や向きを条件にスタイルを切り替える方法がおすすめです。
必要に応じてデスクトップ優先、またはモバイル優先のアプローチを選択します。

まとめ

CSSの@mediaルールを使うことで、デバイスに応じたスタイルを簡単に適用でき、
レスポンシブデザインを実現できます。
本記事で紹介した基本的な使い方や応用例を参考に、
ユーザーにとって見やすく使いやすいウェブサイトを作成してください。

特に、モバイルファーストのアプローチや適切な条件の設定を心がけることで、
効率的なスタイル管理が可能になります。