Bootstrap: レスポンシブレイアウト
最終更新：2026-08-26
1. レッスン紹介
(1) 前提条件
- フレックスボックスコンテナとアライメントをマスターしていること（レッスン5から）
justify-content-*およびalign-items-*ユーティリティクラスに精通していること
(2) 🎯 学習内容
- Bootstrapの6つのブレイクポイントシステム（xs/sm/md/lg/xl/xxl）を理解する
- レスポンシブ表示ユーティリティクラス
d-{breakpoint}-*をマスターする - レスポンシブなテキスト配置とフォントサイズ制御を学ぶ
.img-fluidを使用したレスポンシブ画像の作成- マルチデバイス対応のレスポンシブページを独自に作成できるようになる
(3) 痛みポイント
チャーリーはバックエンドダッシュボードを開発しています。デスクトップではフルサイドバーとテーブルを表示し、タブレットではサイドバーを折りたたみ、モバイルではハンバーガーメニューに置き換える必要があります。純粋なCSSメディアクエリでこれを実装すると、多くの繰り返しコードを書く必要があります。
(4) 解決策
Bootstrapは完全なレスポンシブユーティリティクラスシステムを提供します。クラス名にブレイクポイントサフィックスを挿入するだけで、異なる画面サイズに異なるスタイルを適用できます。Bootstrapのレスポンシブユーティリティクラスにより、これは非常に簡単になります。
理解: レスポンシブ性は伸縮するハンガーのようなものです。同じHTML構造が異なる幅の画面に対して自動的にレイアウトを調整します。Bootstrapのブレイクポイントはギアのようなものです。モバイル、タブレット、デスクトップ、大型画面、超大型画面に対応します。
(5) メリット
Bootstrapのレスポンシブユーティリティクラスを使用した後、チャーリーは d-none d-md-block や col-12 col-md-6 のようなクラスでマルチデバイス対応を実現し、開発効率を大幅に向上させました。
2. ブレイクポイントシステム
▶ サンプル ブレイクポイントシステムの概要
Bootstrap 5は6つのブレイクポイントを定義しており、min-width（モバイルファースト）に基づいています：
| ブレイクポイント | クラス | 最小幅 | 代表的なデバイス |
|---|---|---|---|
| Extra small | なし | < 576px | モバイル縦向き |
| Small | sm |
>= 576px | モバイル横向き |
| Medium | md |
>= 768px | タブレット |
| Large | lg |
>= 992px | ノートパソコン |
| Extra large | xl |
>= 1200px | デスクトップモニター |
| Extra extra large | xxl |
>= 1400px | 超大型画面 |
graph LR
subgraph Bootstrap breakpoints (min-width)
A[xs 0-575px] --> B[sm 576-767px]
B --> C[md 768-991px]
C --> D[lg 992-1199px]
D --> E[xl 1200-1399px]
E --> F[xxl 1400px+]
end
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。 モバイルファーストの意味: まず小さな画面用のスタイルを書き、次に
min-widthブレイクポイントを使用して大きな画面用に上書きします。ブレイクポイントのないクラスはすべての画面に適用され、ブレイクポイントを持つクラスは指定された幅以上でのみ適用されます。
3. 表示ユーティリティクラス：d-*
異なる画面で要素の表示/非表示を制御します：
HTML
<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
md以上の画面で表示、モバイルでは非表示
</div>
<div class="d-block d-md-none bg-success text-white p-3 mb-2">
モバイルで表示、md以上の画面では非表示
</div>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
(1) よく使われるレスポンシブ表示モード
| 要件 | 実装 |
|---|---|
| モバイルで非表示、タブレット以上で表示 | d-none d-md-block |
| モバイルで表示、タブレット以上で非表示 | d-block d-md-none |
| 常に非表示 | d-none |
| 印刷時のみ表示 | d-none d-print-block |
4. レスポンシブテキスト
HTML
<!-- レスポンシブテキスト配置 -->
<p class="text-center text-md-start">
モバイルでは中央揃え、md以上では左揃え
</p>
<!-- レスポンシブフォントサイズ -->
<p class="fs-6 fs-md-5 fs-lg-4">
大きな画面ほどフォントサイズが大きくなります
</p>
<!-- レスポンシブテキスト色 -->
<p class="text-muted text-md-primary">
モバイルではグレー、タブレット以上では青
</p>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
| 実装 | モバイル | タブレット以上 |
|---|---|---|
text-center text-md-start |
中央揃え | 左揃え |
text-start text-lg-center |
左揃え | デスクトップで中央揃え |
5. レスポンシブマージンとスペーシング
HTML
<div class="container">
<div class="card p-3 p-md-4 p-lg-5 mb-3 mb-md-0">
<h5>レスポンシブカード</h5>
<p class="mb-0 mb-md-2">パディングとマージンが画面サイズに適応します。</p>
</div>
<div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
<button class="btn btn-primary">保存</button>
<button class="btn btn-secondary">キャンセル</button>
</div>
</div>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
| 要件 | 実装 |
|---|---|
| モバイルでコンパクト、デスクトップでゆとり | p-3 p-md-5 |
| モバイルで縦並び、デスクトップで横並び | flex-column flex-md-row |
| モバイルで小さな間隔、デスクトップで大きな間隔 | gap-2 gap-lg-4 |
6. レスポンシブ画像
HTML
<img src="https://via.placeholder.com/1200x600" class="img-fluid" alt="レスポンシブ画像">
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
.img-fluidはmax-width: 100%; height: auto;に相当します。画像は親コンテナの幅を超えることはなく、比率を保って拡大縮小されます。
HTML
<img src="https://via.placeholder.com/400x400" class="img-fluid rounded-circle" alt="丸型" style="max-width: 200px;">
<img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="サムネイル">
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
| クラス | 効果 |
|---|---|
img-fluid |
レスポンシブ幅 |
img-thumbnail |
1pxの角丸ボーダー |
rounded |
角丸 |
7. ブレイクポイントと表示ユーティリティクラスリファレンス
(1) 完全なブレイクポイントリファレンス
| ブレイクポイント名 | クラス | 最小幅 | コンテナ最大幅 | 代表的なデバイス |
|---|---|---|---|---|
| Extra Small | なし | 0px | 100% | モバイル縦向き |
| Small | sm |
576px | 540px | モバイル横向き |
| Medium | md |
768px | 720px | タブレット |
| Large | lg |
992px | 960px | ノートパソコン |
| Extra Large | xl |
1200px | 1140px | デスクトップモニター |
| Extra Extra Large | xxl |
1400px | 1320px | 超大型画面 |
(2) 表示ユーティリティクラスリファレンス
| クラス | 効果 | 代表的な使用法 |
|---|---|---|
d-none |
常に非表示 | 要素を隠す |
d-block |
常にブロックレベル表示 | 要素を表示 |
d-inline |
常にインライン表示 | インラインテキスト |
d-inline-block |
常にインラインブロック | アイコン+テキスト |
d-flex |
フレックスコンテナ | レイアウトコンテナ |
d-none d-md-block |
モバイルで非表示、タブレット以上で表示 | レスポンシブサイドバー |
d-block d-md-none |
モバイルで表示、タブレット以上で非表示 | ハンバーガーメニュー |
d-none d-print-block |
印刷時のみ表示 | 印刷レイアウト |
▶ サンプル レスポンシブ画像ギャラリー
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブギャラリー</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="text-center mb-4">レスポンシブ画像ギャラリー</h3>
<div class="row g-3">
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/0d6efd/fff?text=1" class="img-fluid rounded" alt="img1">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/198754/fff?text=2" class="img-fluid rounded" alt="img2">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/dc3545/fff?text=3" class="img-fluid rounded" alt="img3">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/ffc107/000?text=4" class="img-fluid rounded" alt="img4">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/6f42c1/fff?text=5" class="img-fluid rounded" alt="img5">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img src="https://via.placeholder.com/300x200/20c997/fff?text=6" class="img-fluid rounded" alt="img6">
</div>
</div>
<p class="text-muted text-center mt-3">col-6 → col-md-4 → col-lg-3、各画像はimg-fluidでレスポンシブに対応</p>
</div>
</body>
</html>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル レスポンシブタイポグラフィ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブタイポグラフィ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="text-center text-md-start mb-4">レスポンシブタイポグラフィ</h3>
<p class="fs-6 fs-md-5 fs-lg-4 text-center text-md-start">
画面サイズに合わせてフォントサイズが増加：モバイル fs-6 → タブレット fs-5 → デスクトップ fs-4。<br>
<code>.fs-6 .fs-md-5 .fs-lg-4</code>
</p>
<hr>
<p class="text-muted text-md-primary text-lg-success text-center text-md-start">
レスポンシブテキスト色：モバイル グレー → タブレット 青 → デスクトップ 緑。<br>
<code>.text-muted .text-md-primary .text-lg-success</code>
</p>
<hr>
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center bg-light p-3 rounded">
<span class="badge bg-primary fs-6 fs-md-5 mb-2 mb-md-0">バッジ1</span>
<span class="badge bg-success fs-6 fs-md-5 mb-2 mb-md-0">バッジ2</span>
<span class="badge bg-danger fs-6 fs-md-5">バッジ3</span>
</div>
</div>
</body>
</html>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル レスポンシブスペーシング
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブスペーシング</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- レスポンシブパディングのヒーローセクション -->
<div class="bg-primary text-white p-3 p-md-5 rounded text-center text-md-start">
<h1 class="display-6">レスポンシブスペーシング</h1>
<p class="mb-0">モバイル p-3 (16px)、デスクトップ p-5 (48px)</p>
</div>
<!-- 縦積みセクション -->
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>セクション1</h5>
<p>my-4で垂直方向の間隔を確保。モバイルのパディングはp-3、大型画面ではp-lg-4です。</p>
</section>
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>セクション2</h5>
<p class="mb-0 mb-md-2">テキスト下の間隔もレスポンシブです。</p>
<p class="d-none d-md-block">この段落はmd以上の画面でのみ表示されます。</p>
</section>
<section class="my-4 p-3 p-lg-4 bg-light rounded">
<h5>セクション3</h5>
<p>すべてのセクションが一貫性のために同じスペーシングクラスを使用しています。</p>
</section>
<div class="d-flex flex-column flex-md-row gap-2 gap-md-3 justify-content-md-end">
<button class="btn btn-outline-secondary">キャンセル</button>
<button class="btn btn-primary">送信</button>
</div>
</div>
</body>
</html>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
▶ サンプル レスポンシブテーブル
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブテーブル</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-3">レスポンシブテーブル</h3>
<p class="text-muted small mb-3">モバイルでは「部署」と「ステータス」列を非表示にし、タブレット以上ですべて表示</p>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="table-dark">
<tr>
<th>#</th>
<th>名前</th>
<th class="d-none d-md-table-cell">部署</th>
<th>メール</th>
<th class="d-none d-md-table-cell">ステータス</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td class="d-none d-md-table-cell">技術</td>
<td>john@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-success">有効</span></td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td class="d-none d-md-table-cell">マーケティング</td>
<td>jane@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-warning">試用期間</span></td>
</tr>
<tr>
<td>3</td>
<td>Mike Johnson</td>
<td class="d-none d-md-table-cell">デザイン</td>
<td>mike@example.com</td>
<td class="d-none d-md-table-cell"><span class="badge bg-danger">退職済み</span></td>
</tr>
</tbody>
</table>
</div>
<p class="text-muted small">
ヒント: モバイルで列を非表示にするには <code>d-none d-md-table-cell</code> を使用します。テーブルのはみ出しを防ぐには <code>table-responsive</code> を使用します。
</p>
</div>
</body>
</html>
出力: Bootstrap 5.3でスタイルされたコンポーネント（ボタン、カード、カルーセル、折りたたみなど）がレンダリングされます。ページはデフォルトでBootstrapデフォルトテーマ（ライト）とレスポンシブグリッドを使用します。
❓ よくある質問
Q 「モバイルファースト」是什么意思？为什么大屏幕样式使用断点后缀？
A モバイルファーストとは、ベーススタイル（ブレイクポイントなし）が小さな画面用であり、ブレイクポイントを持つスタイルが大きな画面用に上書きされることを意味します。例えば、
d-none d-md-block：d-none はすべての画面に適用（非表示）、d-md-block はmd以上で表示に上書きします。Q lgとmdの間で1つの動作、smとxsの間で別の動作をしたい場合はどうすればよいですか？
A Bootstrapは
min-width を使用して上書きします。d-none d-md-block d-xl-none と記述すると、xs-smで非表示、md-lgで表示、xl以上で非表示となります。Q レスポンシブ画像に
img-fluid を使用するのと、CSSで直接 max-width: 100% を使用するのとで違いはありますか？A 本質的には同じです。
.img-fluid は max-width: 100%; height: auto; のプリセットユーティリティクラスであり、Bootstrapの画像コンポーネントとより一貫して統合できるように設計されています。Q Bootstrapには印刷スタイルに関連するクラスはありますか？
A はい。Bootstrap 5は
d-print-* シリーズのユーティリティクラスを提供しています。例えば、d-print-none（印刷時に非表示）や d-print-block（印刷時に表示）です。また、印刷時の表示値を制御する display-print-* も提供しています。これらのクラスは印刷メディア内でのみ適用され、印刷レイアウトの最適化に最適です。Q ブレイクポイントをカスタマイズするにはどうすればよいですか？
A ブレイクポイントのカスタマイズには、Sass変数
$grid-breakpoints と $container-max-widths の変更が必要です（詳細はフェーズ5）。CSS上書きのみを使用する場合、@media (min-width: 1600px) { ... } のようなメディアクエリを書くことはできますが、カスタムブレイクポイントユーティリティクラス（d-xxl-block など）は自動生成されません。できるだけBootstrapの標準ブレイクポイントを使用することをお勧めします。📖 まとめ
- Bootstrapには6つのブレイクポイントがあります：xs/sm/md/lg/xl/xxl、
min-width（モバイルファースト）に基づく - ユーティリティクラス + ブレイクポイントサフィックス = レスポンシブ制御：
d-{breakpoint}-*、text-{breakpoint}-*、p-{breakpoint}-* d-none d-md-blockは最も一般的な表示切替パターンです.img-fluidで画像をレスポンシブにします
📝 練習問題
- ⭐ レスポンシブナビバーを作成：モバイルでは
flex-columnでリンクを縦並び、タブレット以上ではflex-rowで横並びにします。 - ⭐⭐ 3段階のレスポンシブカードを作成：モバイル
p-2、タブレットp-4、デスクトップp-5、テキストはモバイルで中央揃え、デスクトップで左揃え。 - ⭐⭐⭐ モバイルで3列目と4列目を非表示（
d-none d-md-table-cell）にし、デスクトップですべての列を表示するテーブルを作成。
前のレッスン: Flexbox · 次のレッスン: Grid
