CSS|レスポンシブデザイン:メディアクエリの書き方

レスポンシブデザインは、異なる画面サイズやデバイスに対応するウェブサイトを作成するための手法です。メディアクエリを使用することで、デバイスの特性に応じてスタイルを適用できます。この記事では、メディアクエリの基本的な書き方を説明します。

ビューポートの設定

レスポンシブデザインを正しく機能させるには、HTMLファイルのメタタグでビューポートを設定します。これにより、デバイスの幅に基づいてページがスケーリングされます。

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

このタグは、ブラウザにデバイスの画面幅に合わせてページを適切に表示するよう指示します。

メディアクエリの記述

CSSファイル内でメディアクエリを使用して、異なる画面サイズに応じたスタイルを定義します。以下は、一般的なブレイクポイントを使用した例です。

/* 基本スタイル */
body {
  font-size: 16px;
}

/* タブレット向けスタイル */
@media screen and (max-width: 1023px) {
  body {
    font-size: 14px;
  }
}

/* スマートフォン向けスタイル */
@media screen and (max-width: 767px) {
  body {
    font-size: 12px;
  }
}

レイアウトの調整

特定の要素のレイアウトや表示方法を変更するために、メディアクエリ内でCSSプロパティを調整します。たとえば、グリッドレイアウトやフロートを使っている場合、画面サイズに応じて列数や配置を変更できます。

/* グリッドレイアウトの例 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 1023px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
  }
}

デスクトップファーストのサンプルコード

デスクトップファーストのアプローチでは、大きな画面サイズから小さな画面サイズへとスタイルを定義します。

/* デスクトップ向けのデフォルトスタイル */
.container {
  width: 1024px;
}

/* タブレット向けスタイル */
@media screen and (max-width: 1023px) and (min-width: 768px){
  .container {
    width: 90%;
  }
}

/* スマートフォン向けスタイル */
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
  }
}

モバイルファーストのサンプルコード

モバイルファーストのアプローチでは、小さな画面サイズから大きな画面サイズへとスタイルを定義します。

/* モバイル向けのデフォルトスタイル */
.container {
  width: 100%;
}

/* タブレット向けスタイル */
@media screen and (min-width: 768px) {
  .container {
    width: 90%;
  }
}

/* デスクトップ向けスタイル */
@media screen and (min-width: 1024px) {
  .container {
    width: 1024px;
  }
}

ブレイクポイントの選択

ブレイクポイントの選択は、ターゲットとするデバイスや、コンテンツの特性に基づいて行います。ブレイクポイントの値は絶対的なものではありません。実際のコンテンツやデザインに応じて、適切なブレイクポイントを選択することが重要です。

まとめ

メディアクエリを使用したレスポンシブデザインは、多様なデバイスに対応するウェブサイトを作成する上で不可欠な手法です。適切なビューポート設定、メディアクエリの記述、レイアウトの調整を行うことで、ユーザーフレンドリーなウェブサイトを実現できます。デスクトップファーストかモバイルファーストかのアプローチは、プロジェクトの要件に応じて選択します。