レスポンシブ対応の基本：メディアクエリの書き方

レスポンシブ対応の基本：メディアクエリの書き方

レスポンシブ対応の基本：メディアクエリの書き方

スマートフォンやタブレット、PCなど、異なる画面サイズに合わせてWebページの見た目を最適化する「レスポンシブデザイン」。その中核を担うのがメディアクエリ（media queries）です。本記事では、基本スタイルを広い画面に合わせて設計し、狭い画面幅に応じて調整するメディアクエリの書き方と活用方法を解説します。

メディアクエリとは？

メディアクエリとは、画面サイズやデバイスの種類に応じて異なるCSSを適用するための機能です。これにより、1つのHTMLファイルで複数の画面サイズに対応したデザインを実現できます。

基本的な構文

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

例：画面幅が768px以下のときに文字サイズを小さくする

CSS
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

このように、基本スタイルを広い画面向けに定義し、画面幅が狭くなるにつれて調整していく手法は、管理のしやすさや読みやすさに優れています。

よく使う条件一覧

  • max-width：指定した幅以下の画面に適用
  • min-width：指定した幅以上の画面に適用
  • orientation：縦向き（portrait）・横向き（landscape）
  • max-height / min-height：高さ条件

画面幅ごとのブレイクポイント例

CSS
/* デフォルト：広い画面（1024px以上） */
body {
  font-size: 16px;
  display: flex;
}

/* タブレット（768px〜1023px） */
@media (max-width: 1023px) {
  body {
    font-size: 15px;
    flex-direction: column;
  }
}

/* スマートフォン（〜767px） */
@media (max-width: 767px) {
  body {
    font-size: 14px;
    padding: 10px;
  }
}

メディアクエリの記述場所

  • 外部CSSファイル内に記述（推奨）
  • HTMLの<style>タグ内にも記述可能

まとめ

  • メディアクエリはレスポンシブ対応に不可欠なCSS機能
  • max-widthやmin-widthで画面サイズを判別
  • 主要なブレイクポイントを定義しておくと効率的にスタイル管理ができる

ALTERNATE toolsでは、今後実践的な設計テンプレートやブレイクポイント戦略の解説記事も公開していく予定です。

PAGE TOP