CSS: CSSレスポンシブ基礎
最終更新：2026-10-13
レスポンシブデザインは、モバイルフォンからデスクトップモニターまで、すべてのデバイスでウェブページを美しく表示します。
1. ビューポートメタタグ
レスポンシブデザインの必須タグ：
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このタグがないと、モバイルブラウザはページをデスクトップ幅（通常980px）でレンダリングし、 fittingするように縮小します——テキストが読めなくなります。
2. メディアクエリ
異なる画面サイズに異なるスタイルを適用：
▶ サンプル
▶ 試してみよう3. 相対単位
| 単位 | 基準 | 最適な用途 |
|---|---|---|
% |
親要素 | コンテナ幅 |
em |
親のフォントサイズ | パディング、マージン |
rem |
ルートのフォントサイズ | フォントサイズ |
vw |
ビューポート幅 | 全幅要素 |
vh |
ビューポート高さ | フルスクリーンセクション |
▶ サンプル
▶ 試してみよう4. モバイルファーストアプローチ
最初にモバイル用にデザインし、大きな画面向けに強化：
CSS
/* ベーススタイル（モバイル） */
.container {
width: 100%;
padding: 10px;
}
/* タブレット */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* デスクトップ */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
5. フレキシブル画像
画像をレスポンシブに：
CSS
img {
max-width: 100%;
height: auto;
}
❓ よくある質問
Q ビューポートメタタグがないとどうなりますか？
A モバイルブラウザはデスクトップ幅（通常980px）でレンダリングし、その後携帯電話の画面に fittingするように縮小します。テキストが読めなくなり、ピンチズームが必要になります。ビューポートメタタグはレスポンシブデザインの基盤です。
Q メディアクエリのブレークポイントはどうやって選べばいいですか？
A まずモバイルスタイルを書き（モバイルファースト）、その後min-widthで強化します。一般的なブレークポイント：モバイル < 576px、タブレット768px、ノートPC992px、デスクトップ1200px。これらの数字に縛られず、実際のコンテンツに基づいてブレークポイントを選択してください。
Q レスポンシブデザインではremを使う必要がありますか？
A 必ずしもそうではありません。
remはフォントサイズに適し、レイアウトの寸法には%、fr、vw/vhを使用します。重要なのは、レイアウトサイズに固定pxを使用しないことです。フォントサイズ：rem、コンテナ：%、スペーシング：emまたはrem。📖 まとめ
- レスポンシブデザインの核心は「柔軟な適応」——相対単位、メディアクエリ、フレキシブル画像を使用
- 3つのステップを覚えておいてください：ビューポートメタを追加、相対単位を使用、ブレークポイントでメディアクエリを適用
- モバイルファーストが推奨——最初に最小の画面用にデザインし、その後強化
📝 練習問題
- ページを作成してください：デスクトップでは3カラム、タブレットでは2カラム、モバイルでは1カラム（メディアクエリを使用）。
remでフォントサイズを設定し、メディアクエリでルートのfont-sizeを変更して比例的なスケーリングを確認してください。- レスポンシブナビゲーションバーを作成してください：デスクトップでは水平、モバイルでは非表示（またはハンバーガー）。
- 画像に
max-width: 100%を設定し、ブラウザのサイズを変更してレスポンシブ動作を確認してください。
