CSS: CSSレスポンシブレイアウト
最終更新：2026-10-13
1. レスポンシブ画像
(1) 基本的なレスポンシブ画像
CSS
img {
max-width: 100%;
height: auto;
}
(2) レスポンシブ背景画像
CSS
.banner {
background-image: url("desktop-bg.jpg");
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.banner {
background-image: url("mobile-bg.jpg");
}
}
2. レスポンシブテーブル
テーブルは小さな画面ではオーバーフローする可能性があります。水平スクロールにoverflow-x: autoを使用：
▶ サンプル
▶ 試してみよう3. 要素の表示/非表示
メディアクエリを使用して異なるブレークポイントで要素を表示/非表示：
▶ サンプル
▶ 試してみよう4. レスポンシブレイアウトのテスト
- ブラウザのリサイズ: ブラウザウィンドウの端をドラッグ
- Chrome DevTools: F12 → デバイストークルバーの切り替え（Ctrl+Shift+M）
- 実機: 可能であれば実際の携帯電話/タブレットでテスト
❓ よくある質問
Q 画像をレスポンシブにするにはどうすればいいですか？
A 基本：
img { max-width: 100%; height: auto; }で画像がオーバーフローしないことを確認。高度：<picture>と<source>を使用して異なる画面サイズで異なる解像度を読み込みます。基本バージョンはほとんどの場合に十分です。Q レスポンシブデザインには3つのバージョンが必要ですか？
A いいえ。まずモバイル体験を確保し、その後大きな画面で強化します。多くのページはモバイル + デスクトップバージョンのみで十分で、タブレットはしばしば自然な遷移です。重要なのは「コンテンツファースト、デバイス適応」——レスポンシブのためのレスポンシブではありません。
Q レスポンシブ効果をテストするにはどうすればいいですか？
A ブラウザのDevToolsは様々なデバイスサイズをシミュレートできますが、実機でのテストをお勧めします。タッチインタラクションはシミュレーションとは異なります。responsinator.comなどのオンラインツールも素早いプレビューに役立ちます。
📖 まとめ
- レスポンシブレイアウトの核心は「柔軟な適応」
- フレキシブルグリッド（% / fr）、フレキシブル画像（max-width）、メディアクエリ（@media）を通じて、すべての画面で適切に動作するページを構築できます
- 実践では「モバイルファースト」が推奨：最初にモバイルスタイルを書き、その後
min-widthでタブレットとデスクトップ用のスタイルを段階的に追加
📝 練習問題
- 「レスポンシブ個人ブログ」ページを作成してください：ヘッダーナビゲーション、記事リスト、サイドバーのおすすめ、フッターの著作権付き。要件：モバイルは単一カラム、タブレットは2カラム、デスクトップは3カラム + 固定サイドバー。
min-widthブレークポイントを使用してカードグリッドを1カラムから4カラムに変更し、各ブレークポイントで観察してください。- テーブルが小さな画面で水平スクロールできるレスポンシブテーブルページを作成してください（
overflow-x: autoを使用）。
