Bootstrapの使い方をわかりやすく解説

Web制作を始めると、デザインやレイアウトをゼロから整えるのに時間がかかると感じたことはありませんか？
そんなときに活用したいのが「Bootstrap（ブートストラップ）」です。
Bootstrapは、HTML・CSS・JavaScriptで構成されたフレームワークで、レスポンシブ対応の美しいWebサイトを簡単に作ることができます。

この記事では、Bootstrapの導入方法から基本の使い方、さらに実用的な活用方法までを初心者にもわかりやすく解説します。
これからWeb制作を始めたい方、効率的にデザインを整えたい方は、ぜひ参考にしてください。

Bootstrapとは何か？
Bootstrapの導入方法
1. CDNを使って読み込む
基本のレイアウトの作り方
1. グリッドの基本構造
よく使うコンポーネントの使い方
カスタマイズの基本
1. カスタムCSSを追加する方法
モバイル対応も簡単にできる
1. 表示切り替えの例
Bootstrapを使った簡単なWebページの例
まとめ：Bootstrapを使いこなして効率的なWeb制作を

Bootstrapとは何か？

Bootstrapは、Twitter社のエンジニアが開発したオープンソースのCSSフレームワークです。
主な特徴は以下のとおりです。

レスポンシブデザインが簡単に実装できる
美しいUIコンポーネントが豊富に用意されている
ブラウザ間の互換性に優れている
クラスを使うだけで手軽にレイアウトを作れる

特に、HTMLとCSSを少し触ったことのある人ならすぐに使い始められる点が魅力です。

Bootstrapの導入方法

Bootstrapを使用するには、いくつかの導入方法がありますが、ここではCDNを使った最もシンプルな方法を紹介します。

CDNを使って読み込む

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrapのテストページ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center text-primary">こんにちは、Bootstrap！</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

上記のコードをブラウザで表示するだけで、Bootstrapが適用されたページが完成します。

基本のレイアウトの作り方

Bootstrapの魅力の一つは、グリッドシステムです。
画面サイズに応じて自動的にレイアウトを調整してくれる仕組みです。

グリッドの基本構造

<div class="container">
  <div class="row">
    <div class="col-md-6">左側のカラム</div>
    <div class="col-md-6">右側のカラム</div>
  </div>
</div>

container: コンテンツを中央に配置するための外枠
row: 行（横並び）のグループ
col-md-6: 幅を12分割中6（50%）に指定するカラム

画面サイズに応じて自動でレイアウトが変わるので、モバイル対応も簡単です。

よく使うコンポーネントの使い方

Bootstrapには、あらかじめデザインされたUIパーツが多数用意されています。

ボタン

<button class="btn btn-primary">送信</button>
<button class="btn btn-secondary">キャンセル</button>

ナビゲーションバー（ナビバー）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
</nav>

アラートメッセージ

<div class="alert alert-success" role="alert">
  登録が完了しました！
</div>

カルーセル（スライドショー）

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

カスタマイズの基本

Bootstrapのデフォルトスタイルを変更したい場合は、自作のCSSファイルを後から読み込むことでカスタマイズできます。

カスタムCSSを追加する方法

<link rel="stylesheet" href="custom.css">

custom.cssの中で、Bootstrapのクラスを上書きして自分好みに調整できます。

.btn-primary {
  background-color: #ff6600;
  border: none;
}

モバイル対応も簡単にできる

Bootstrapはデフォルトでモバイルファースト設計がなされています。

表示切り替えの例

<p class="d-none d-md-block">これは中サイズ以上で表示されます</p>
<p class="d-block d-md-none">これは小サイズで表示されます</p>

d-noneやd-blockなどのクラスを使うことで、デバイスサイズごとに表示・非表示を切り替えられます。

Bootstrapを使った簡単なWebページの例

以下に、Bootstrapを使って作成したシンプルなWebページのサンプルコードを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap サンプル</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-center text-success">Bootstrapで作るサンプルページ</h1>
    <p class="lead text-center">これはBootstrapを使ったシンプルなWebページです。</p>

    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">カード1</h5>
            <p class="card-text">簡単にスタイリングできます。</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">カード2</h5>
            <p class="card-text">レスポンシブ対応もラクラク。</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">カード3</h5>
            <p class="card-text">ボタンやフォームも簡単に使えます。</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>