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

CSSレスポンシブレイアウト

レスポンシブ画像

基本的なレスポンシブ画像

CSS 
img {
  max-width: 100%;
  height: auto;
}

レスポンシブ背景画像

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");
  }
}

レスポンシブテーブル

テーブルは小さな画面ではオーバーフローする可能性があります。水平スクロールにoverflow-x: autoを使用：

サンプル

HTML 
<style>
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
<div class="table-wrapper">
  <table>
    <tr><th>名前</th><th>メール</th><th>電話</th><th>住所</th><th>都市</th></tr>
    <tr><td>田中</td><td>tanaka@email.com</td><td>123-456-7890</td><td>東京都渋谷区</td><td>東京</td></tr>
  </table>
</div>
▶ 試してみよう

要素の表示/非表示

メディアクエリを使用して異なるブレークポイントで要素を表示/非表示：

サンプル

HTML 
<style>
.desktop-only {
  display: none;
}
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
</style>
<div class="mobile-only">モバイルのみのコンテンツ</div>
<div class="desktop-only">デスクトップのみのコンテンツ</div>
▶ 試してみよう

レスポンシブレイアウトのテスト

  1. ブラウザのリサイズ: ブラウザウィンドウの端をドラッグ
  2. Chrome DevTools: F12 → デバイストークルバーの切り替え（Ctrl+Shift+M）
  3. 実機: 可能であれば実際の携帯電話/タブレットでテスト

❓ よくある質問

Q 画像をレスポンシブにするにはどうすればいいですか？
A 基本：`img { max-width: 100%; height: auto; }`で画像がオーバーフローしないことを確認。高度：``と``を使用して異なる画面サイズで異なる解像度を読み込みます。基本バージョンはほとんどの場合に十分です。
Q レスポンシブデザインには3つのバージョンが必要ですか？
A いいえ。まずモバイル体験を確保し、その後大きな画面で強化します。多くのページはモバイル + デスクトップバージョンのみで十分で、タブレットはしばしば自然な遷移です。重要なのは「コンテンツファースト、デバイス適応」——レスポンシブのためのレスポンシブではありません。
Q レスポンシブ効果をテストするにはどうすればいいですか？
A ブラウザのDevToolsは様々なデバイスサイズをシミュレートできますが、実機でのテストをお勧めします。タッチインタラクションはシミュレーションとは異なります。responsinator.comなどのオンラインツールも素早いプレビューに役立ちます。

📖 まとめ

📝 演習

  1. 「レスポンシブ個人ブログ」ページを作成してください：ヘッダーナビゲーション、記事リスト、サイドバーのおすすめ、フッターの著作権付き。要件：モバイルは単一カラム、タブレットは2カラム、デスクトップは3カラム + 固定サイドバー。
  2. min-widthブレークポイントを使用してカードグリッドを1カラムから4カラムに変更し、各ブレークポイントで観察してください。
  3. テーブルが小さな画面で水平スクロールできるレスポンシブテーブルページを作成してください（overflow-x: autoを使用）。
100%