CSS @media クエリ：レスポンシブWebデザインの切り開き方

CSS プロパティ @media

CSS @media クエリについて深く掘り下げ、画面サイズ、解像度、向きなどのデバイス特性に応じて異なるスタイルを適用する方法を学びましょう。これにより、さまざまな画面サイズに適応するレスポンシブWebページを簡単に作成できます。

CSS @media クエリとは？

@media クエリとは、異なるデバイス特性に基づいて異なるスタイルルールを適用できるCSSの技術です。

@media クエリの役割は、レスポンシブWebデザインを作成し、Webサイトをさまざまなデバイスで最適に表示することです。

簡単な @media クエリの構文例:


@media (max-width: 768px) {
  /* スタイルルール */
}

@media クエリの構文詳細

@media ルールの構成要素を詳しく説明します。

@media: メディアクエリを開始することを示すキーワード。
メディアタイプ: (オプション) screen, print など、スタイルを適用する対象となるデバイスの種類を指定するために使用されます。
メディア特性式: (必須) 論理演算子 (and, not, or) で接続された条件式で、デバイスの特性を指定します。

一般的なメディア特性:

メディア特性	説明
`width`, `height`	ビューポートの幅と高さ。
`min-width`, `max-width`, `min-height`, `max-height`	最小/最大ビューポートの幅と高さ。
`orientation`	デバイスの向き (portrait または landscape)。
`resolution`	画面解像度。

さまざまなメディア特性式の組み合わせ例とその意味:


/* 画面の幅が768px以下の場合に適用 */
@media (max-width: 768px) { ... }

/* 画面の幅が768px以上の場合に適用 */
@media (min-width: 768px) { ... }

/* 画面の向きが横向きの場合に適用 */
@media (orientation: landscape) { ... }

/* 画面の解像度が1dppx以上の高解像度の場合に適用 */
@media (min-resolution: 1dppx) { ... }

コード例：異なる画面サイズに異なるスタイルを適用する


<!DOCTYPE html>
<html>
<head>
  <title>@media クエリサンプル</title>
  <style>
    body {
      font-size: 16px;
    }

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

    @media (min-width: 1200px) {
      body {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <p>このテキストのフォントサイズは画面サイズによって変化します。</p>
</body>
</html>

@media クエリのユースケース

@media クエリの一般的なユースケース:

レスポンシブレイアウト: 画面サイズに合わせてページレイアウトを調整します。例えば、1カラムレイアウトを複数カラムレイアウトに変換します。
```
    @media (min-width: 768px) {
      .container {
        display: flex;
      }
    }
    
```

画像のレスポンシブ対応: 画面サイズに合わせて異なるサイズまたは解像度の画像を読み込みます。


    img {
      max-width: 100%;
      height: auto;
    }

    @media (min-width: 768px) {
      img {
        width: 50%;
      }
    }

フォントサイズの調整: 画面サイズに合わせてフォントサイズを調整し、読みやすさを向上させます。
要素の表示/非表示: 画面サイズに合わせて特定の要素を表示または非表示にします。例えば、サイドバーナビゲーションなど。
印刷スタイル: 印刷ページに異なるスタイルを適用します。例えば、ナビゲーションバーの非表示、ページ余白の調整など。

@media クエリのベストプラクティス

@media クエリを使用する際のベストプラクティスの推奨事項:

モバイルファーストの戦略でWebページを設計する。
ブレークポイントの数を増やしすぎず、コードを簡潔に保つ。
ブレークポイントに意味のある名前を付けて、コードの可読性を高める。
ブラウザの開発者ツールを使用して @media クエリをデバッグする。
業界で一般的に使用されているブレークポイントの標準を参照する。

まとめ

@media クエリのメリットと重要性をまとめます。

読者の皆様が @media クエリを学び、活用して、より優れたレスポンシブWebページを作成することをお勧めします。

CSS @media クエリ：レスポンシブWebデザインの切り開き方

CSS @media クエリとは？

@media クエリの構文詳細

コード例：異なる画面サイズに異なるスタイルを適用する

@media クエリのユースケース

@media クエリのベストプラクティス

まとめ

関連QA