【学習日記#5】Bootstrapでレスポンシブなサイト制作に挑戦！

2025年5月28日2025年7月2日

ブログ

フレームワークとは？
Bootstrapの使い方
Bootstrapで簡単に作れるレイアウト
これからの学習目標

こんにちは！インターン中のRyuseiです。
今回は、個人プロフィールサイトの作成で学んだ「Bootstrap」についてまとめます。
これまでHTML・CSSの基本やBEMの命名規則を学んできましたが、今回は効率的にレスポンシブ対応を実現できるBootstrapを活用して、さらに一歩進んだサイト作りに挑戦しました。

フレームワークとは？

CSSを自分で一から書かなくても、すでに用意されたスタイルを利用できる便利なツールが「CSSフレームワーク」です。
Bootstrapをはじめ、Tailwind CSS、Bulma、Pure.css、Uikitなど、様々なフレームワークがあります。

これらを活用すると、効率的に見栄えの良いサイトが作れるだけでなく、レスポンシブ対応も簡単に実装できます。
ただし、便利な反面、細かい調整が難しかったり、学習コストが高い面もあるので、その特性を理解しながら使うことが大切です。

Bootstrapの使い方

まずは公式サイトからBootstrapをダウンロードしましょう。
👉 Bootstrap公式サイト

Bootstrapを使うためには、jQueryの読み込みも必要になります。HTMLファイルの<head>内でCSSを読み込み、<body>の最後でjQueryとBootstrapのJSファイルを読み込む形です。

htmlコードをコピーする<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
  ...
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

ポイントは、jQueryを先に読み込むこと。順番を間違えると、BootstrapのJSが正しく動かないので要注意です。

Bootstrapで簡単に作れるレイアウト

これまで学んだBEMでは、自分でクラス名をつけて管理していましたが、Bootstrapではcontainerやcolといったクラス名を使うだけで、レスポンシブ対応やレイアウトの調整が簡単にできます。

たとえば：

container：ページ全体を中央寄せで整列し、レスポンシブにも対応
container-lg：大きい画面サイズで横幅100％表示
colやcol-md：横並びのグリッドレイアウトを簡単に実現できる

実際の例を見てみましょう。

さらに、画面幅が変わると自動で縦並びになったり、指定した幅でレイアウトが変わるのもBootstrapの便利なところです。

htmlコードをコピーする<div class="row">
  <div class="col-lg-4">Column 1</div>
  <div class="col-lg-4">Column 2</div>
  <div class="col-lg-4">Column 3</div>
</div>

これで、ある程度の画面幅以上で3つのカラムが横並びに、画面幅が狭くなると縦並びに自動で切り替わるデザインが作れます。

参考資料

クラス名	適用される幅	例
`col`	全サイズ共通	`.col` → 自動的に等分割
`col-1` ~ `col-12`	全サイズ共通の固定幅	`.col-6` → 12分割中6列を占有
`col-sm-*`	576px以上の画面で適用	スマホ向け以上
`col-md-*`	768px以上の画面で適用	タブレット向け以上
`col-lg-*`	992px以上の画面で適用	ノートPC向け以上
`col-xl-*`	1200px以上の画面で適用	大画面モニター向け
`col-xxl-*`	1400px以上の画面で適用	超大画面向け