Responsive

8. レスポンシブデザイン

メディアクエリを使えば、画面サイズに応じてスタイルを切り替えられます。
現代のWebではモバイルファースト（小さい画面から設計）が基本です。

🎮 現在のビューポート幅
0px
--
📱 Mobile
< 480px
📱 Tablet
480-768px
💻 Desktop
768px+

レスポンシブグリッド デモ

ウィンドウ幅を変えると、カードの列数が自動的に変わります。

自動折返しグリッド
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
/* モバイルファースト: 1列 */
.grid { grid-template-columns: 1fr; }

/* 480px以上: 2列 */
@media (min-width: 480px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 768px以上: 3列 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

一般的なブレークポイント

デバイス 幅 メディアクエリ
📱 モバイル < 480px デフォルト
📱 タブレット 480px - 768px @media (min-width: 480px)
💻 デスクトップ 768px+ @media (min-width: 768px)
🖥️ ワイド 1200px+ @media (min-width: 1200px)

📌 覚えておきたいポイント

  • モバイルファースト: 小さい画面のスタイルを先に書き、min-width で拡張
  • max-width はデスクトップファースト（非推奨）
  • clamp() でフォントサイズを流動的に調整可能
  • vw, vh 単位はビューポート基準のサイズ
  • 画像には max-width: 100% を必ず指定