English 中文 العربية 日本語 Português

Bootstrap: ボタンとボタングループ

最終更新：2026-08-26

1. レッスンの導入

(1) 前提条件

(2) 🎯 学習内容

(3) ペインポイント

アリスの登録ページには3つのボタンが必要です：送信（青のプライマリボタン）、リセット（灰色のセカンダリボタン）、既存のアカウントでログイン（リンクスタイル） -- それぞれのボタンは異なるスタイルですが、すべて.btnベースクラスに基づいています。

(4) 解決策

Bootstrapは豊富なボタンスタイルとサイズオプション、そしてボタンをグループとして結合・配置する機能を提供しています。

理解する: ボタンはリモコンのキーのようなものです -- 色は機能を表し（青=プライマリ、赤=危険、緑=成功）、サイズは異なるコンテナに合わせ、disabledは使用不能であることを示します。

(5) 利点

Bootstrapのボタンシステムにより、カスタムCSSを書かずに、プロフェッショナルで一貫性があり、アクセシビリティに優れたボタンインターフェースを実装できます。

2. ボタンの基本

Bootstrapは.btnをベースボタンクラスとして使用し、色のバリエーションと組み合わせます。

HTML 
<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>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル ボタンバリエーションのショーケース

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Standard Buttons</h5>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-dark">Dark</button>
    <button class="btn btn-link">Link</button>

    <hr>

    <h5>Outline Buttons</h5>
    <button class="btn btn-outline-primary">Primary</button>
    <button class="btn btn-outline-secondary">Secondary</button>
    <button class="btn btn-outline-success">Success</button>
    <button class="btn btn-outline-danger">Danger</button>

    <hr>

    <h5>Button Sizes</h5>
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-sm">Small</button>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

3. ボタンのバリエーション

(1) 色のセマンティクス

クラス 色 用途
btn-primary 青 プライマリアクション（送信、次のステップ）
btn-secondary 灰色 セカンダリアクション（キャンセル、戻る）
btn-success 緑 成功アクション（保存、確認）
btn-danger 赤 危険なアクション（削除、終了）
btn-warning 黄 警告アクション
btn-info シアン 情報提供アクション
btn-light 白 明るい背景で使用
btn-dark 黒 暗い背景で使用
btn-link リンク色 ボタンをリンクに偽装

(2) アウトラインボタン

HTML 
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。 アウトラインボタンはホバー時に背景色を塗りつぶすため、セカンダリアクションに適しています。

(3) ボタンのサイズ

クラス フォントサイズ パディング シナリオ
btn-lg 1.25rem 0.5rem 1rem 目立つCTA、ヒーローセクション
デフォルト 1rem 0.375rem 0.75rem 一般的な用途
btn-sm 0.875rem 0.25rem 0.5rem テーブル内、コンパクトなスペース

4. ボタンの状態

HTML 
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1">Disabled link</a>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。 <button>要素はdisabled属性をネイティブでサポートしています。<a>タグは.disabledクラスによって無効化されます。

5. ブロックボタン

HTML 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full-width block button</button>
  <button class="btn btn-outline-secondary" type="button">Also full width</button>
</div>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

6. ボタングループ

HTML 
<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

(1) ボタングループのバリエーション

HTML 
<div class="btn-group-vertical">
  <button class="btn btn-primary">Top</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Bottom</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
    <button class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">Left</button>
    <button class="btn btn-outline-secondary">Center</button>
    <button class="btn btn-outline-secondary">Right</button>
  </div>
</div>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

クラス 効果 シナリオ
btn-group 水平方向のグループ化 ツールバー、ページネーション
btn-group-vertical 垂直方向のグループ化 サイドバーのオプション
btn-toolbar 複数のグループをツールバーに結合 リッチテキストエディター

7. ボタンの決定とリファレンス

(1) ボタンのバリエーション選択フロー

100% 
graph TD
    A[ボタンが必要] --> B{プライマリまたはセカンダリ？}
    B -->|プライマリアクション| C{色の選択}
    B -->|セカンダリアクション| D[btn-outline-* または btn-link]
    C --> E[送信/保存 → btn-primary]
    C --> F[危険/削除 → btn-danger]
    C --> G[成功/確認 → btn-success]
    C --> H[警告/注意 → btn-warning]
    D --> I{ボーダーあり？}
    I -->|はい| J[btn-outline-primary / outline-danger]
    I -->|いいえ| K[btn-link リンクスタイル]
    A --> L{サイズ要件？}
    L --> M[目立つ → btn-lg]
    L --> N[標準 → デフォルト]
    L --> O[コンパクト → btn-sm]
    A --> P{グループ化？}
    P --> Q[btn-group 水平 / btn-group-vertical 垂直]

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

(2) ボタンのサイズ完全リファレンス

クラス フォントサイズ padding-y padding-x ボーダー半径 シナリオ
btn-lg 1.25rem 0.5rem 1rem 0.5rem CTA、ヒーローセクション
デフォルト 1rem 0.375rem 0.75rem 0.375rem 一般的なボタン
btn-sm 0.875rem 0.25rem 0.5rem 0.25rem テーブル、コンパクトなスペース

(3) ボタングループの種類リファレンス

クラス レイアウト HTML構造 シナリオ
btn-group 水平配置 div.btn-group > button*N ページネーション、アクショングループ
btn-group-vertical 垂直配置 div.btn-group-vertical > button*N サイドバーボタン
btn-toolbar 複数のbtn-groupを結合 div.btn-toolbar > div.btn-group*N リッチテキストエディター
btn-group + dropup 上向きに開く div.btn-group.dropup アップロードメニュー
btn-group + dropend 右向きに開く div.btn-group.dropend サイドメニュー

▶ サンプル ボタンツールバー

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Toolbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Rich Text Editor Toolbar</h5>

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Formatting toolbar">
      <div class="btn-group me-2" role="group" aria-label="Text style">
        <button type="button" class="btn btn-outline-secondary">B</button>
        <button type="button" class="btn btn-outline-secondary">I</button>
        <button type="button" class="btn btn-outline-secondary">U</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Alignment">
        <button type="button" class="btn btn-outline-secondary">⬅</button>
        <button type="button" class="btn btn-outline-secondary">⬇</button>
        <button type="button" class="btn btn-outline-secondary">➡</button>
      </div>
      <div class="btn-group" role="group" aria-label="Actions">
        <button type="button" class="btn btn-outline-secondary">🔗</button>
        <button type="button" class="btn btn-outline-secondary">📷</button>
      </div>
    </div>

    <p class="text-muted small">btn-toolbarは複数のbtn-groupを結合し、me-2はグループ間のスペースを制御します</p>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル トグルボタン

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Radio Toggle</h5>
    <div class="btn-group mb-4" role="group" aria-label="Basic radio toggle">
      <input type="radio" class="btn-check" name="options" id="option1" checked>
      <label class="btn btn-outline-primary" for="option1">Day View</label>

      <input type="radio" class="btn-check" name="options" id="option2">
      <label class="btn btn-outline-primary" for="option2">Week View</label>

      <input type="radio" class="btn-check" name="options" id="option3">
      <label class="btn btn-outline-primary" for="option3">Month View</label>
    </div>

    <h5 class="mb-3">Checkbox Toggle</h5>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle">
      <input type="checkbox" class="btn-check" id="checkbox1">
      <label class="btn btn-outline-success" for="checkbox1">Bold</label>

      <input type="checkbox" class="btn-check" id="checkbox2">
      <label class="btn btn-outline-success" for="checkbox2">Italic</label>

      <input type="checkbox" class="btn-check" id="checkbox3">
      <label class="btn btn-outline-success" for="checkbox3">Underline</label>
    </div>

    <p class="text-muted small mt-3"><code>btn-check</code>と<code>&lt;label&gt;</code>を使用してトグル効果を実現し、JavaScriptは不要です。</p>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル 読み込み状態ボタン

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-4">Loading State Buttons</h5>

    <div class="d-flex gap-2 mb-3">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading...
      </button>
      <button class="btn btn-success" disabled>
        <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
        Saving...
      </button>
      <button class="btn btn-danger" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Deleting...
      </button>
    </div>

    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Connecting...
      </button>
      <button class="btn btn-outline-success">
        <span class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
        Submit Button
      </button>
    </div>

    <p class="text-muted small mt-3"><code>spinner-border</code>または<code>spinner-grow</code>と<code>disabled</code>を使用して読み込み状態を実装します。</p>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

▶ サンプル ブロックボタン

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Block Buttons (d-grid)</h5>

    <div class="d-grid gap-2 mb-4">
      <button class="btn btn-primary btn-lg" type="button">Primary Action — Full-width button</button>
      <button class="btn btn-outline-secondary" type="button">Secondary Action</button>
    </div>

    <h5 class="mb-3">Responsive Block</h5>
    <div class="d-grid gap-2 d-md-block">
      <button class="btn btn-primary me-md-2" type="button">Desktop Side-by-side</button>
      <button class="btn btn-outline-secondary" type="button">Mobile Stacked</button>
    </div>

    <p class="text-muted small mt-3">
      <code>d-grid gap-2</code>でスタックされた全幅ボタンを実現し、<code>d-md-block</code>でデスクトップでは横並びに戻ります。
    </p>

    <hr>

    <h5 class="mb-3">Button Group Block Variant</h5>
    <div class="d-grid gap-2">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">Option One</button>
        <button class="btn btn-primary">Option Two</button>
        <button class="btn btn-primary">Option Three</button>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

出力: Bootstrap 5.3でスタイルされたコンポーネント（例：ボタン、カード、カルーセル、コラプス）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドをデフォルトで使用します。

❓ よくある質問

Q <button>と<a>をボタンとして使用する際の違いは何ですか？
A <button>はフォーム送信やインタラクティブなアクション（送信、保存、削除）をトリガーするために使用されます。<a>はページ遷移（詳細ページ、外部リンク）に使用されます。セマンティックには、ボタンは何かを実行し、aはどこかへ移動します。
Q ボタンのtype="button"は何をしますか？
A ボタンがフォーム送信をトリガーするのを防ぎます。<form>内では、<button>はデフォルトでtype="submit"となり、クリック時にページを更新します。明示的にtype="button"を指定することで、この動作を回避できます。
Q ボタンの色をカスタマイズするにはどうすればいいですか？
A 2つの方法があります：(1) BootstrapのCSS変数をオーバーライドする -- --bs-btn-bg、--bs-btn-color、--bs-btn-hover-bg。(2) フェーズ5では、Sass変数$theme-colorsを通じてカスタマイズします。
Q ボタングループをネストできますか？
A はい。btn-group内に別のbtn-groupを配置して、ドロップダウングループを作成できます。例：<div class="btn-group"><button>1</button><div class="btn-group"><button class="dropdown-toggle">More</button><ul class="dropdown-menu">...</ul></div></div>。ネストされたボタングループは同じ行に留まるため、ページネーションコンポーネントの「もっと見る」ボタンに適しています。
Q ボタン内にアイコンを配置できますか？純粋なアイコンボタンの作り方は？
A はい。<button>内に直接<i>または<svg>を配置してください。純粋なアイコンボタンには、テキストの説明のためにaria-labelを追加することをお勧めします：<button class="btn btn-outline-secondary" aria-label="Search"><svg ...></svg></button>。Bootstrap Iconsは公式のアイコンライブラリで、<i class="bi bi-search"></i>で埋め込みます。

📖 まとめ

📝 練習問題

  1. ⭐ フォームの下部アクションバーを作成してください：送信（btn-primary btn-lg）、下書き保存（btn-outline-secondary）、削除（btn-outline-danger）、キャンセル（btn-link）。
  2. ⭐⭐ btn-groupを使用してページネーションコンポーネントを作成してください：前へ + ページ番号1〜5 + 次へ、選択されたページ番号はbtn-primaryでハイライト表示。
  3. ⭐⭐⭐ ツールバーを作成してください：btn-toolbarを使用して2つのボタングループを結合します：テキスト書式設定（B/I/U）と配置（左/中央/右）。

前のレッスン: Navbar · 次のレッスン: Cards

Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%