レスポンシブデザイン完全ガイド：メディアクエリで柔軟なWebレイアウト

レスポンシブデザイン（メディアクエリ）

レスポンシブデザインは、異なるデバイスや画面サイズに応じてWebサイトのレイアウトやスタイルを動的に調整する手法です。特に、CSS3のメディアクエリを使用することで、画面サイズ、解像度、向きなどに応じたスタイルを簡単に適用できます。

📚 1. メディアクエリの基本構文

cssコードをコピーする@media (条件) {
  /* 条件が一致する場合に適用するスタイル */
}

• 例: 画面幅が768px以下の場合

cssコードをコピーするbody {
  background-color: lightgray;
}

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

解説:

• max-width: 768px → 画面幅が768px以下のデバイスで適用
• 幅が小さい画面では背景色がlightblueに変わる

🖥️ 2. よく使われる画面サイズのブレークポイント

例: デバイスごとにスタイルを変更

cssコードをコピーする/* スマートフォン */
@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

/* タブレット */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* デスクトップ */
@media (min-width: 1025px) {
  body {
    font-size: 16px;
  }
}

📱 3. メディアクエリの複数条件

複数の条件を組み合わせて指定することも可能です。

cssコードをコピーする/* 画面幅が768px以下で、縦向きの場合 */
@media (max-width: 768px) and (orientation: portrait) {
  body {
    background-color: pink;
  }
}

🎨 4. 実践的なレスポンシブデザイン例

HTML

htmlコードをコピーする<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

CSS

cssコードをコピーする.container {
  display: flex;
  gap: 10px;
}

.box {
  flex: 1;
  background: lightcoral;
  padding: 20px;
  text-align: center;
}

/* タブレット以下では縦並びに */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

解説:

• 通常: 横並びで3つのボックスが表示される
• 画面幅が768px以下: ボックスが縦並びに変更される

⚙️ 5. メディアクエリ + CSS変数

CSS変数を使うと、より管理しやすいコードになります。

cssコードをコピーする:root {
  --main-color: lightseagreen;
  --font-size: 16px;
}

body {
  background: var(--main-color);
  font-size: var(--font-size);
}

/* 画面幅が600px以下 */
@media (max-width: 600px) {
  :root {
    --main-color: lightpink;
    --font-size: 14px;
  }
}

💡 6. よく使われるレスポンシブデザインのポイント

1. モバイルファースト: 小さい画面から順にスタイルを定義cssコードをコピーする/* 基本スタイル */ body { font-size: 14px; } /* 大きな画面用スタイル */ @media (min-width: 768px) { body { font-size: 16px; } }
2. 柔軟なユニットを使用: %, vw, vh、em など
3. 画像の最適化:cssコードをコピーするimg { max-width: 100%; height: auto; }

🚀 7. まとめ

• メディアクエリは、デバイスや画面サイズに応じたスタイルを提供する重要なCSS3機能です。
• モバイルファーストアプローチを取り入れると、保守性が向上します。
• 複数の条件やCSS変数と組み合わせることで、より柔軟なデザインが可能になります。