EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSSレスポンシブ基礎

レスポンシブデザインは、モバイルフォンからデスクトップモニターまで、すべてのデバイスでウェブページを美しく表示します。

ビューポートメタタグ

レスポンシブデザインの必須タグ：

HTML 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

このタグがないと、モバイルブラウザはページをデスクトップ幅（通常980px）でレンダリングし、 fittingするように縮小します——テキストが読めなくなります。

メディアクエリ

異なる画面サイズに異なるスタイルを適用：

サンプル

HTML 
<style>
.box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

/* モバイル：単一カラム */
@media (max-width: 576px) {
  .box { background: #e74c3c; }
}

/* タブレット：2カラム */
@media (min-width: 577px) and (max-width: 992px) {
  .box { background: #f39c12; }
}

/* デスクトップ：3カラム */
@media (min-width: 993px) {
  .box { background: #2ecc71; }
}
</style>
<div class="box">レスポンシブボックス——ブラウザのサイズを変更して色の変化を確認</div>
▶ 試してみよう

相対単位

単位 基準 最適な用途
% 親要素 コンテナ幅
em 親のフォントサイズ パディング、マージン
rem ルートのフォントサイズ フォントサイズ
vw ビューポート幅 全幅要素
vh ビューポート高さ フルスクリーンセクション

サンプル

HTML 
<style>
.rem-demo {
  font-size: 1.2rem;  /* ルートに相対 */
}
.vw-demo {
  width: 80vw;        /* ビューポート幅の80% */
}
</style>
<div class="rem-demo">rem単位を使用したテキスト</div>
<div class="vw-demo">ビューポート幅の80%</div>
▶ 試してみよう

モバイルファーストアプローチ

最初にモバイル用にデザインし、大きな画面向けに強化：

CSS 
/* ベーススタイル（モバイル） */
.container {
  width: 100%;
  padding: 10px;
}

/* タブレット */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* デスクトップ */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

フレキシブル画像

画像をレスポンシブに：

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。

📖 まとめ

📝 演習

  1. ページを作成してください：デスクトップでは3カラム、タブレットでは2カラム、モバイルでは1カラム（メディアクエリを使用）。
  2. remでフォントサイズを設定し、メディアクエリでルートのfont-sizeを変更して比例的なスケーリングを確認してください。
  3. レスポンシブナビゲーションバーを作成してください：デスクトップでは水平、モバイルでは非表示（またはハンバーガー）。
  4. 画像にmax-width: 100%を設定し、ブラウザのサイズを変更してレスポンシブ動作を確認してください。
100%