Bootstrap 実践ガイド

投稿者: ocha 投稿日:

Bootstrap は、レスポンシブでモバイルファーストのウェブサイトを構築するための最も人気のある HTML、CSS、JavaScript フレームワークです。このガイドでは、Bootstrap 5（最新バージョン）の実装方法と実践的な使い方を説明します。

目次

  1. Bootstrapとは
  2. インストール方法
  3. 基本的なレイアウト
  4. グリッドシステム
  5. コンポーネント
  6. ユーティリティクラス
  7. 実践的な例

Bootstrapとは

Bootstrap は、ウェブサイトやウェブアプリケーションの開発を迅速に行うためのフレームワークです。再利用可能なコンポーネントとレスポンシブデザインを簡単に実装できるツールを提供しています。2023年現在、最新バージョンは Bootstrap 5.3.3 です。

Bootstrapの主な特徴:

  • モバイルファーストのレスポンシブデザイン
  • 一貫性のあるUIコンポーネント
  • 使いやすいグリッドシステム
  • 豊富なJavaScriptプラグイン
  • カスタマイズ可能なコンポーネント

インストール方法

Bootstrap は複数の方法でプロジェクトに追加できます。

CDN (Content Delivery Network) を使用する方法

最も簡単な方法は CDN を使用することです。以下のコードを HTML ファイルの適切な場所に追加します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap デモ</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap JS (Popper.js を含む) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

必要に応じて、Popper.js と Bootstrap の JavaScript を別々に読み込むこともできます：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

パッケージマネージャーを使用する方法

npm を使用する場合:

npm install bootstrap@5.3.3

yarn を使用する場合:

yarn add bootstrap@5.3.3

基本的なレイアウト

Bootstrap のレイアウトシステムの中心はコンテナです。コンテナはコンテンツを囲み、グリッドシステムを使用するための基礎となります。

コンテナ

Bootstrap には3種類のコンテナがあります：

  1. .container – 各ブレークポイントで固定幅を持つレスポンシブコンテナ
  2. .container-fluid – すべてのブレークポイントで幅が100%のコンテナ
  3. .container-{breakpoint} – 指定したブレークポイントまでは幅100%、それ以降は固定幅となるコンテナ

例：

<!-- レスポンシブコンテナ -->
<div class="container">
  <!-- コンテンツ -->
</div>

<!-- 常に幅100%のコンテナ -->
<div class="container-fluid">
  <!-- コンテンツ -->
</div>

<!-- mdブレークポイント (768px) 以上で固定幅、それ未満では幅100% -->
<div class="container-md">
  <!-- コンテンツ -->
</div>

グリッドシステム

Bootstrap のグリッドシステムは、コンテンツをレスポンシブに配置するための強力なツールです。12カラムシステムを採用しており、さまざまな画面サイズに対応できます。

基本的なグリッドの構造

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <!-- コンテンツ -->
    </div>
    <div class="col-sm-4">
      <!-- コンテンツ -->
    </div>
    <div class="col-sm-4">
      <!-- コンテンツ -->
    </div>
  </div>
</div>

グリッドオプション

Bootstrap 5では、6つのデフォルトのブレークポイントがあります：

  • Extra small (xs): <576px
  • Small (sm): ≥576px
  • Medium (md): ≥768px
  • Large (lg): ≥992px
  • Extra large (xl): ≥1200px
  • Extra extra large (xxl): ≥1400px

各ブレークポイントには、それぞれ専用のクラスプレフィックスがあります：

<div class="row">
  <!-- すべての画面サイズで4カラム幅 -->
  <div class="col-4">col-4</div>

  <!-- Small (sm) 以上で6カラム幅、それ未満では12カラム幅（全幅） -->
  <div class="col-sm-6">col-sm-6</div>

  <!-- Medium (md) 以上で3カラム幅、Small (sm) 以上で6カラム幅、それ未満では12カラム幅 -->
  <div class="col-md-3 col-sm-6">col-md-3 col-sm-6</div>
</div>

自動レイアウトカラム

特定のカラム幅を指定せずに、均等に幅を割り当てることもできます：

<div class="row">
  <div class="col">
    <!-- 均等に幅が割り当てられる -->
  </div>
  <div class="col">
    <!-- 均等に幅が割り当てられる -->
  </div>
  <div class="col">
    <!-- 均等に幅が割り当てられる -->
  </div>
</div>

入れ子になったグリッド

グリッド内にグリッドを入れ子にすることも可能です：

<div class="row">
  <div class="col-sm-9">
    レベル 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        レベル 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        レベル 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

コンポーネント

Bootstrap にはさまざまな事前定義されたコンポーネントが用意されています。いくつかの主要なコンポーネントを紹介します。

ボタン

<!-- 標準ボタン -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

<!-- アウトラインボタン -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- サイズ -->
<button type="button" class="btn btn-primary btn-lg">大きいボタン</button>
<button type="button" class="btn btn-primary">通常ボタン</button>
<button type="button" class="btn btn-primary btn-sm">小さいボタン</button>

フォーム

基本的なフォームの例：

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">あなたのメールアドレスは他の誰とも共有しません。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">確認する</label>
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

ナビゲーションバー

レスポンシブなナビゲーションバーの例：

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">価格</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">無効</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ユーティリティクラス

Bootstrap には、マージン、パディング、テキストの配置、表示などを制御するための多数のユーティリティクラスが用意されています。

マージンとパディング

マージンとパディングのユーティリティクラスは m-* と p-* の形式で提供されています：

<!-- マージン -->
<div class="m-2">マージン 2</div>
<div class="mt-3">上マージン 3</div>
<div class="mb-4">下マージン 4</div>
<div class="ms-5">左マージン 5</div>
<div class="me-auto">右マージン auto</div>

<!-- パディング -->
<div class="p-2">パディング 2</div>
<div class="pt-3">上パディング 3</div>
<div class="pb-4">下パディング 4</div>
<div class="ps-5">左パディング 5</div>
<div class="pe-auto">右パディング auto</div>

テキストの配置

<p class="text-start">左揃えテキスト</p>
<p class="text-center">中央揃えテキスト</p>
<p class="text-end">右揃えテキスト</p>

表示

<div class="d-none">非表示</div>
<div class="d-inline">インライン表示</div>
<div class="d-block">ブロック表示</div>
<div class="d-flex">フレックス表示</div>
<div class="d-md-none d-lg-block">mdブレークポイントでは非表示、lgブレークポイントでは表示</div>

実践的な例

以下に、Bootstrap を使用した簡単なレスポンシブウェブページの例を示します：

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap サンプルページ</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">サンプルサイト</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">サービス</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">会社概要</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- ヒーローセクション -->
  <div class="container">
    <div class="row bg-light py-5 rounded mt-4">
      <div class="col-md-6 d-flex flex-column justify-content-center">
        <h1>Bootstrap 5 サンプル</h1>
        <p class="lead">これは Bootstrap 5 を使用したサンプルページです。レスポンシブデザインとさまざまなコンポーネントを紹介しています。</p>
        <div>
          <button class="btn btn-primary btn-lg me-2">詳細を見る</button>
          <button class="btn btn-outline-secondary btn-lg">お問い合わせ</button>
        </div>
      </div>
      <div class="col-md-6">
        <div class="p-4 text-center">
          <h4>サンプル画像</h4>
          <p>ここに画像が表示されます</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 特徴セクション -->
  <div class="container my-5">
    <h2 class="text-center mb-4">特徴</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">レスポンシブデザイン</h5>
            <p class="card-text">Bootstrap のグリッドシステムを使用して、あらゆるデバイスで適切に表示されるレスポンシブなレイアウトを作成できます。</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">豊富なコンポーネント</h5>
            <p class="card-text">Bootstrap には、ナビゲーションバー、カード、フォーム要素などの事前定義されたコンポーネントが多数用意されています。</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">ユーティリティクラス</h5>
            <p class="card-text">マージン、パディング、表示などを制御するための便利なユーティリティクラスを使用して、迅速にスタイリングできます。</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- お問い合わせフォーム -->
  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 mx-auto">
        <h2 class="text-center mb-4">お問い合わせ</h2>
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">お名前</label>
            <input type="text" class="form-control" id="name" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">メールアドレス</label>
            <input type="email" class="form-control" id="email" required>
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">メッセージ</label>
            <textarea class="form-control" id="message" rows="5" required></textarea>
          </div>
          <div class="d-grid">
            <button type="submit" class="btn btn-primary">送信</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- フッター -->
  <footer class="bg-dark text-white py-4 mt-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h5>サンプルサイト</h5>
          <p>Bootstrap 5 を使用したサンプルウェブサイト</p>
        </div>
        <div class="col-md-6 text-md-end">
          <p>&copy; 2025 サンプルサイト</p>
        </div>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

この例では、レスポンシブなナビゲーションバー、ヒーローセクション、特徴カード、お問い合わせフォーム、フッターを含む基本的なウェブページを作成しています。Bootstrap のグリッドシステム、コンポーネント、ユーティリティクラスをうまく活用することで、コードの量を減らしながら魅力的なレイアウトを実現しています。

まとめ

Bootstrap 5 は、ウェブサイトやウェブアプリケーションを迅速に構築するための強力なフレームワークです。そのグリッドシステム、豊富なコンポーネント、ユーティリティクラスを活用することで、レスポンシブで魅力的なウェブサイトを効率的に開発できます。

Bootstrap の公式ドキュメントは常に最新の情報とさらなる例を提供していますので、詳細については Bootstrap 公式サイト を参照してください。

Bootstrap 公式サイト
Bootstrap 5 チュートリアル – W3Schools

カテゴリー: WEB

関連投稿

WEB

Studio CMSの主な特徴

StudioのCMS（Contents Management Syst 続きを読む…

WEB

UnoCSS を用いた Web 制作実践

UnoCSSは、高速で柔軟なユーティリティファーストのCSS（Atom 続きを読む…

WEB

Material-UIを用いたWeb制作実践

Material-UIは、Reactベースのコンポーネントライブラリで 続きを読む…