Bootstrap によるレスポンシブ Web デザイン
コンテナを配置する
Bootstrap でも <body> タグの中に本文などのコンテンツを入力します．しかしながら，スマートフォン，PCなど様々なサイズの画面に対応できるように，<body> タグの中にコンテナを配置し，そのコンテナの中にすべてのコンテンツを入力することが一般的です．
前のページにあった本文を削除し，次のような .containerクラスの <div> 要素を1つ配置します．以降はこの <div> 要素の中に全てのコンテンツを配置するようにしてください．あるいは，目的に応じて，ナビゲーションメニュー用，本文用，フッター用に .containerクラスの <div> 要素を3つ配置するようなことも可能です．なお，JavaScriptの読み込みは <body> の閉じタグである </body> の直前で行うように注意してください．（サンプルを見る）
index.html<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Bootstrapのサンプル</h1>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div> <!-- コンテナの閉じタグ：コンテンツはこれより前に入力する -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
ブラウザで表示し，ブラウザの幅を変更したときにどのようにレイアウトが変化するか確認してください．スマートフォンのような小さな幅の画面では画面の幅いっぱいにコンテンツが配置されるはずです．画面の幅が大きくなると，コンテンツの左右にマージン（余白）が設定されコンテンツが左右中央に配置されます．さらに画面の幅を拡大すると，いくつかの段階（ブレークポイント）でコンテンツの幅が変化するはずです．
次のページでは画面サイズに応じてレイアウトが切り替わるブレークポイントを理解し，思った通りのコンテンツ幅を設定できるようにしよう．
なお，コンテナの詳細はここで確認してください．