レスポンシブデザイン

Responsive Design Portal

概要

レスポンシブデザインは、デバイス幅・解像度・環境の違いに自動対応する設計手法です。昨今は従来の「ビューポート単位のメディアクエリ」に加え、コンテナクエリや流体タイポグラフィ（clamp()）の活用で、コンポーネント志向のスケーラブルな設計が可能になりました。

  • モバイルファースト
    最小構成→段階的に強化（progressive enhancement）。
  • 柔軟レイアウト
    flex / grid / minmax() / auto-fit。
  • メディア最適化
    picture / srcset / sizes / loading=lazy。
  • コンテナクエリ
    @container で部品ごとにレスポンシブ。

基本

  • ビューポート設定：<meta name="viewport" content="width=device-width,initial-scale=1">
  • モバイルファーストCSS：ベースは狭幅・小要素、幅が広がるほど段階的に拡張。
  • 相対単位：%, em, rem, vw, vh を場面で使い分け。
  • 画像最適化：srcset/sizes と loading="lazy"、decoding="async"。
  • インタラクション：タップ領域は最低44px相当を目安に。

基礎

流体タイポグラフィ

clamp(min, preferred, max) でサイズを滑らかに可変。

:root{
  --fs-body: clamp(14px, 0.9rem + 0.2vw, 16px);
  --fs-h1:   clamp(28px, 1.2rem + 2.4vw, 36px);
}
body{ font-size: var(--fs-body); }
h1{ font-size: var(--fs-h1); }

グリッドの基本

auto-fit + minmax() で列数自動調整。

.cards{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

画像の適応

<img src="/img/hero-800.jpg"
     srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w"
     sizes="(min-width: 960px) 960px, 100vw"
     width="800" height="450" loading="lazy" decoding="async" alt="Hero">

応用

コンポーネント志向（コンテナクエリ）

親の幅に応じて部品が自律的に変形します。

コンテナに合わせて拡大縮小

このカードを囲うボックス幅で変化

.component{ container-type:inline-size; }
@container (min-width: 600px){ .component{ padding: 24px; } }

表の可読性（横スクロール）

列A列B列C列D
Alpha100OK備考
Beta200OK備考
Gamma300NG備考

ナビゲーション（モバイル切替）

小幅では折り畳み、広幅では横並びに。

@media (max-width: 860px){
  nav.tabs{ display:none }
  nav.tabs.open{ display:block }
}

発展

  • Container Units（cqw/cqh）実験
  • アスペクト比（aspect-ratio）でサムネ統一
  • 動的テーマ（prefers-color-scheme + 手動切替）
  • アクセシビリティ（フォーカス可視化・対比比）

最新情報

news.json が見つからないため、表示可能な最新情報はありません。
例）/programming/ResponsiveDesign/data/news.json に下記のような配列を置いてください：

[
  {"date":"2025-08-20","title":"Container Queries 記事を追加","url":"#css"},
  {"date":"2025-08-12","title":"流体タイポのチートシート公開","url":"#examples"}
]

仕事の現場

  • デザインガイド
    ブレークポイントより「コンテンツの折返し」を基準に。
  • パフォーマンス
    CLS/LCP/INP を意識。画像最適化・遅延読込・CSS 最小化。
  • 検証
    デバイスモード、アクセシビリティチェック、キーボード操作。

CSS

/* 代表パターン */
:root{
  --space: clamp(8px, 0.5rem + 1vw, 24px);
}
.wrap{ max-width: 1200px; margin-inline:auto; padding-inline: var(--space); }
.stack > * + *{ margin-top: var(--space); }
.cluster{
  display:flex; flex-wrap:wrap; gap: var(--space); align-items:center;
}
.switcher{
  display:flex; flex-wrap:wrap; gap: var(--space);
}
.switcher > *{
  flex-basis: clamp(240px, 50%, 480px); flex-grow:1;
}

Web開発

  • フォーム要素のサイズは相対で。行内ヘルプ・エラー表示は折返し考慮。
  • カード・リスト・表の3種を基本型として共通化。
  • OGP/メタ/manifest の可変アイコン（ICO/SVG/PNG）を準備。

アプリ開発

ハイブリッド/PWA では、レスポンシブ設計が UI 再利用性や将来の画面サイズ拡張にも有効です。

知っておくといい

知識

  • ビューポート / デバイスピクセル比(DPR)
  • コンテナクエリ / コンテナーユニット
  • アクセシビリティ基礎（コントラスト・フォーカス）

技能

  • グリッド設計・名付け
  • 画像最適化（ビルド or 手作業）
  • ブラウザデバッグ（DevTools）

用語

  • clamp(), min(), max()
  • minmax(), fit-content()
  • prefers-color-scheme

例

レスポンシブカード

<ul class="cards">
  <li class="card">A</li>
  <li class="card">B</li>
  <li class="card">C</li>
</ul>

ピクチャ要素

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" width="1200" height="675" alt="Hero" loading="lazy">
</picture>

フォーム

.form{ display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

より具体的に

このページを雛形に、各プロジェクトの UI コンポーネントを配置し、コンテナクエリで適応させる構成に拡張できます。ニュースや実装例を増やしていけば、チームのデザインシステムとして機能します。