先生と生徒の会話形式で理解しよう

生徒

「Bootstrapを使ってスマホでも見やすいページを作りたいんですが、何をすればいいですか？」

先生

「それにはレスポンシブ対応が必要だね。Bootstrap 5は最初からレスポンシブ設計に強いから、基本さえ押さえればすぐにできるよ。」

生徒

「レスポンシブってなんですか？」

先生

「レスポンシブとは、パソコン・タブレット・スマホなど画面のサイズに合わせて見た目が自動で変わる仕組みのことだよ。」

生徒

「なるほど！その仕組みをBootstrapでどうやって実現するんですか？」

先生

「では、viewportの設定から具体的なコードまで一緒に見ていこう！」

1. レスポンシブ対応に必要なviewport設定とは？

まずはじめに、HTMLの<head>内にviewport（ビューポート）設定を記述することが大切です。

viewportとは、スマホやパソコンで表示される「見える領域」のことです。これを適切に指定しないと、スマホで見たときにレイアウトが崩れてしまいます。


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

この一文があることで、Bootstrapのレスポンシブ機能が正しく動作するようになります。

2. Bootstrapのコンテナを使ったレイアウト設計

Bootstrap 5では、レスポンシブ対応を意識したコンテナ（container）という枠組みが基本になります。

画面サイズに応じて自動的に幅を調整してくれるので、レイアウトが崩れにくくなります。


<div class="container">
  <h1>見出しタイトル</h1>
  <p>このテキストは画面サイズに応じて中央に表示されます。</p>
</div>

ブラウザ表示

ちなみに.containerは、画面サイズに合わせて幅が変わる特徴を持っています。中央寄せの基本レイアウトとしてよく使います。

3. グリッドシステムで画面サイズに対応

グリッドシステムとは、画面を最大で12個のブロックに分けてレイアウトを調整する仕組みです。

たとえば、パソコンでは横に2つ並べて、スマホでは縦に1列にする、という表示が簡単にできます。


<div class="container">
  <div class="row">
    <div class="col-md-6">
      左側のコンテンツ
    </div>
    <div class="col-md-6">
      右側のコンテンツ
    </div>
  </div>
</div>

ブラウザ表示

このコードでは、画面サイズが中（md）以上のときは左右に並び、小さい画面では縦に並ぶようになります。

Bootstrap 5では、col-smやcol-lgなど、サイズに応じたクラスを使って調整できます。

4. テキスト・画像のレスポンシブ対応

文字や画像も、レスポンシブ対応が必要です。Bootstrapでは以下のように対応できます：

text-center：テキストを中央寄せ
img-fluid：画像サイズを画面幅に合わせて縮小


<div class="container text-center">
  <img src="/img/view/java-exception-introduce-01.jpg" class="img-fluid" alt="サンプル画像">
  <p>画面サイズに合わせて画像が縮小されます</p>
</div>

ブラウザ表示

スマホでもはみ出さずに画像が縮小されて表示されるようになるので、とても便利です。

5. ボタンや見出しのサイズ調整と表示の切り替え

Bootstrapでは、画面サイズに応じて表示を切り替えたり、ボタンのサイズを調整したりもできます。

たとえば、d-none d-md-blockというクラスを使えば、「スマホでは非表示、パソコンでは表示」といった制御ができます。


<h2 class="d-none d-md-block">パソコン用の大きな見出し</h2>
<p class="d-block d-md-none">スマホではこちらのテキストを表示</p>

ブラウザ表示

ユーザーの環境に合わせた表示切り替えも、Bootstrap 5ならクラス名だけで簡単にできます。

6. Bootstrapのレスポンシブ対応を成功させるコツ

プログラミング初心者でも、Bootstrapを使えばレスポンシブ対応が驚くほど簡単です。ただし、次の点に注意してください：

viewportの設定を忘れない
コンテナとグリッド（row・col）を使う
画像には必ずimg-fluidをつける
スマホ用・PC用の表示を分けるときはd-*クラスを使う

これらのポイントを押さえておけば、パソコン・スマホ・タブレット、どんな画面でもバランスの良い表示ができます。

まとめ

ここまで、Bootstrapを使ったレスポンシブ対応の基本手順について、初心者がつまずきやすい部分をひとつずつ順序を追いながら整理してきました。現代のウェブ制作ではスマートフォンやタブレットなど、多様な画面サイズに合わせた柔軟なレイアウトが欠かせません。とくに、画面幅が変化したときでも自然に内容が読みやすく表示されるような設計は、訪問者の体験を左右する重要な要素です。今回の内容では、viewport設定のような基本の設定から、Bootstrap特有のコンテナ構造、グリッドシステムを使った列の調整、画像や文字の表示方法、さらには表示の切り替えを行うユーティリティクラスの活用法まで、多岐にわたり具体的な例を挙げながら解説しました。初めて触れる方にとっても、実際のコードを確認しながら読み進めることで、自然とイメージがつかめる構成となっています。レスポンシブデザインの要となるviewport設定は、その一文があるかどうかでスマホ表示の快適さが大きく変わります。初歩的な部分ではありますが、意外と見落としがちな要素でもあり、実務でトラブルの原因になる場面も少なくありません。そのため、最初に必ず確認する習慣を身に付けることが大切です。また、Bootstrapのコンテナを使ったレイアウトは、画面幅に応じて自動的に中央寄せの美しい整列を行ってくれるため、初心者でもバランスの良いデザインを作りやすいという大きな利点があります。これによって、実際に自分で細かなCSSを記述する手間を省きつつ、見栄えの良いページを実現できます。グリッドシステムはBootstrapで最も重要な仕組みの一つであり、複数の要素を画面サイズに応じて自由に配置できる柔軟性を備えています。たとえば、パソコンでは二列や三列で表示したい場合でも、スマートフォンでは一列に縦並びで読みやすくしたい、といった設計がごく自然に行えます。クラス名を組み合わせるだけで、画面幅ごとの見え方を自在に変えることができるのは、フレームワークの持つ強みそのものです。さらに、画像に対してimg-fluidを付与しておくことで、画面幅に合わせて自然に縮小されるため、画像が画面からはみ出すようなトラブルも避けられます。ウェブ制作では画像表示の最適化がとても重要であり、特にスマートフォンでは読みやすさや表示速度に直結します。また、表示の切り替えに用いるユーティリティクラスは、画面サイズごとに異なるメッセージを表示したいときや、パソコン向けのレイアウトとスマホ向けのレイアウトを分けたい場合に威力を発揮します。d-noneやd-md-blockといった簡潔な指定だけで実現できるため、複雑な条件分岐を考える必要がなくなります。初心者でも理解しやすく、実践的に使いやすい要素となっています。ここまでのポイントを振り返ると、Bootstrapによるレスポンシブ対応は、難しそうに見えて実は決まった仕組みに沿って進めていくだけで、自然と整ったレイアウトが完成することがわかります。最初は少し複雑に感じることがあっても、実際にコードを書き、画面サイズを変えながら表示の違いを確かめていくことで、徐々に理解が深まっていきます。グリッドの幅が変わるタイミングや、コンテナの動き、画像の縮小具合を自分の目で確認することは、学習において非常に大切です。最後に、今回のポイントを応用した簡単なサンプルを示しておきます。特に、見出しと画像、テキストの組み合わせが画面幅に応じてどのように変化するのかがイメージしやすいように、シンプルな構成にしています。

レスポンシブの動きを確認できるサンプルコード


<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 p-3">
      <img src="/img/view/java-exception-introduce.jpg" class="img-fluid border" alt="説明画像">
    </div>
    <div class="col-12 col-md-6 p-3">
      <h3 class="fw-bold">画面幅に合わせて変化するレイアウト</h3>
      <p>スマートフォンでは縦に並び、パソコンでは横に並ぶレイアウトです。</p>
    </div>
  </div>
</div>

ブラウザ表示

先生と生徒の振り返り会話

生徒：今日はレスポンシブ対応の基本がよくわかりました。viewport設定がないとスマホで崩れることも初めて知りました。

先生：そうなんだ。とくにスマホ対応ではviewportが出発点だから、とても大切なんだよ。

生徒：グリッドを使えば画面幅に応じて簡単に並び方を変えられるのも便利ですね。

先生：そのとおり。Bootstrapの強みはそこにあるんだ。ユーティリティクラスも覚えるともっと表現が広がるよ。

生徒：画像にimg-fluidを付ける意味もよく理解できました。今後の制作でも役立ちそうです。

先生：実際に動作を確認しながら慣れていくと、自然とレイアウトの組み立てが身についていくよ。