bootstrap-overview

Bootstrap 5.3 の概要

Bootstrap 5.3.8 は、レスポンシブでモバイルファーストの Web サイトを構築するための強力なフロントエンドフレームワークです。このスキルでは、インストール、プロジェクトのセットアップ、基本概念について説明します。

クイックスタートの選択肢

CDN（最速のセットアップ）

プロトタイプやシンプルなプロジェクトでは、CDN リンクを使用します。CSS を <head> に、JS を </body> の閉じタグの前に追加します。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Popper を別途管理する場合を除き、必ず bootstrap.bundle.min.js（Popper.js を含む）を使用してください。

パッケージマネージャーによるインストール

npm：

npm install [email protected]

yarn：

yarn add [email protected]

pnpm：

pnpm add [email protected]

Bun：

bun add [email protected]

Composer（PHP）：

composer require twbs/bootstrap:5.3.8

NuGet（.NET）：

Install-Package bootstrap -Version 5.3.8

インストール後、JavaScript にインポートします。

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// Or import specific components
import { Modal, Tooltip } from 'bootstrap';

ES モジュールの使用

バンドラーを使わず、ブラウザーでネイティブ ESM を使用する場合は、インポートマップとともに bootstrap.esm.min.js を使用します。

<script type="importmap">
{
  "imports": {
    "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/esm/popper.min.js",
    "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
  }
}
</script>
<script type="module">
  import * as bootstrap from 'bootstrap'
  // Use bootstrap components
</script>

古いブラウザーでは、es-module-shims ポリフィルを含めてください。

スターターテンプレート

Bootstrap の各ページには、次の最小限の構造が必要です。

<!doctype html>
<html lang="en">
  <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, Bootstrap!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

重要な要件：

• 正しくレンダリングするための <!doctype html> 宣言
• width=device-width, initial-scale=1 を指定したレスポンシブ対応のビューポートメタタグ
• CSS は <head> に、JavaScript は </body> の前に読み込む

ビルドツールとの統合

本番アプリケーションでは、ツリーシェイキングと最適化のために Bootstrap をビルドツールと統合します。

Vite のセットアップ

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install bootstrap @popperjs/core
npm install -D sass

main.js にインポートします。

import './scss/styles.scss';
import * as bootstrap from 'bootstrap';

src/scss/styles.scss を作成します。

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Parcel と Webpack のセットアップガイドについては、references/build-tools.md を参照してください。

Ruby on Rails 8 のセットアップ

Rails 8 では、デフォルトのアセットパイプラインとして Propshaft を使用します。統合方法は 3 つあります。

方法 1：Importmaps + bootstrap gem（Node.js 不要）：

bundle add bootstrap -v "~> 5.3.8"
bundle add dartsass-rails
bin/rails dartsass:install

方法 2：cssbundling-rails（Node.js をフル活用）：

rails new myapp --css bootstrap
# Or for existing apps:
bundle add cssbundling-rails
bin/rails css:install:bootstrap

方法 3：CDN のみ — CDN リンクをレイアウトに直接追加します。

Turbo／Stimulus のパターン、フォームヘルパー、Bootstrap Icons を含む Rails 8 の完全な統合ガイドについては、references/rails-setup.md を参照してください。

JavaScript コンポーネント

Bootstrap 5 のコンポーネントは、次の 2 つの方法で初期化できます。

データ属性（JavaScript 不要）

<button type="button" class="btn btn-primary"
        data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

プログラムによる初期化

// Get element
const myModal = document.getElementById('myModal');

// Create instance
const modal = new bootstrap.Modal(myModal, {
  keyboard: false,
  backdrop: 'static'
});

// Use methods
modal.show();
modal.hide();
modal.toggle();
modal.dispose();

コンポーネントメソッドのパターン

すべてのコンポーネントで、一貫したパターンに従います。

• getInstance() - 既存のインスタンスを取得
• getOrCreateInstance() - インスタンスを取得または作成
• dispose() - インスタンスを破棄してクリーンアップ
• コンポーネント固有のメソッド（show、hide、toggle など）

すべてのコンポーネントのイベント、メソッド、オプションを含む JavaScript API の詳細については、references/javascript-api.md を参照してください。

フレームワークに関する注意点

Bootstrap の JavaScript は React、Vue、Angular と完全には互換性がありません。Bootstrap とフレームワークの両方が同じ DOM 要素を変更しようとする場合があり、バグの原因となるためです。これらのフレームワークでは、専用パッケージを使用してください。

• React：React Bootstrap
• Vue 3：BootstrapVueNext
• Angular：ng-bootstrap

Bootstrap の CSS は、どのフレームワークでも問題なく動作します。

アクセシビリティ

Bootstrap は、すぐに使えるアクセシブルなコンポーネントを提供していますが、適切に実装する責任は開発者にあります。Bootstrap のアクセシビリティ機能を理解することで、WCAG 2.2 への準拠を確実にできます。

主なアクセシビリティ機能

視覚的に非表示のコンテンツ：

.visually-hidden を使用すると、画面上ではコンテンツを非表示にしながら、スクリーンリーダーからアクセスできる状態に保てます。

<p class="text-danger">
  <span class="visually-hidden">Error: </span>
  This field is required
</p>

キーボードでフォーカスしたときに表示されるスキップリンクには、.visually-hidden-focusable を使用します。

<a class="visually-hidden-focusable" href="#main-content">
  Skip to main content
</a>

色のコントラストに関する考慮事項：

Bootstrap のデフォルトの色は、すべての状況で WCAG のコントラスト要件を満たすとは限りません。

• テキストには 4.5:1 のコントラスト比が必要です（WCAG AA）。
• 大きなテキスト（18pt 以上）には 3:1 のコントラスト比が必要です。
• テキスト以外の要素（アイコン、境界線）には 3:1 のコントラスト比が必要です。

色の組み合わせは必ずテストしてください。明るい背景でのデフォルトの .text-muted は、要件を満たすために調整が必要な場合があります。必要に応じて、コントラストを高めるために .text-body または .text-body-emphasis の使用を検討してください。

モーションの低減への対応：

Bootstrap は prefers-reduced-motion メディアクエリを尊重します。

@media (prefers-reduced-motion: reduce) {
  /* Transitions and animations are disabled or minimized */
}

カルーセル、モーダル、折りたたみなどのコンポーネントは、モーションの低減を希望するユーザー向けに、アニメーションを自動的に低減または無効化します。

ARIA の実装

インタラクティブなコンポーネントには、適切な ARIA 属性が含まれています。

<div class="accordion-item">
  <h2 class="accordion-header">
    <button class="accordion-button" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseOne"
            aria-expanded="true"
            aria-controls="collapseOne">
      Section Title
    </button>
  </h2>
  <div id="collapseOne" class="accordion-collapse collapse show"
       aria-labelledby="headingOne">
    <div class="accordion-body">Content here</div>
  </div>
</div>

Bootstrap は、JavaScript を使用するコンポーネントの aria-expanded、aria-controls、aria-hidden を自動的に処理します。

フォーカス管理

Bootstrap はインタラクティブなコンポーネントのフォーカスを適切に管理します。

• モーダルはダイアログ内にフォーカスを閉じ込めます。
• ドロップダウンを閉じると、フォーカスが元の位置に戻ります。
• ツールチップとポップオーバーはキーボードで操作できます。

カスタム実装では、Bootstrap のフォーカストラップユーティリティを使用するか、フォーカスを手動で管理してください。

RFS（レスポンシブフォントサイズ）

RFS は Bootstrap のレスポンシブスケーリングエンジンです。ビューポートの寸法に応じて、フォントサイズ、マージン、パディングなどのプロパティを自動的に調整します。

RFS の仕組み

RFS は rem 単位とビューポート幅（vw）を組み合わせた calc() 関数を生成し、流動的なスケーリングを実現します。

// Input
.title {
  @include font-size(4rem);
}

// Output
.title {
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

プロパティは最小と最大のビューポートサイズの間で滑らかに変化し、それより大きな画面では指定値に固定されます。

RFS ミックスインの使用

フォントサイズ：

.heading {
  @include font-size(2.5rem);
}

その他のプロパティ：

.card {
  @include padding(2rem);
  @include margin(1.5rem);
  @include rfs(1rem, border-radius);
}

RFS 関数

メディアクエリ内のプロパティや複雑な計算には、次の関数を使用します。

.responsive-element {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

設定

RFS の動作は Sass 変数で制御します。

$rfs-base-value: 1.25rem;        // Minimum font size
$rfs-unit: rem;                   // Output unit
$rfs-breakpoint: 1200px;          // Max viewport for scaling
$rfs-factor: 10;                  // Scaling intensity

$rfs-factor の値を小さくすると（例：5）、スケーリングがより大きくなります。値を大きくすると（例：15）、効果が抑えられます。デフォルトは 10 です。

RTL（右から左への表示）サポート

Bootstrap 5 には RTL サポートが含まれています。有効にするには：

1. <html> 要素に dir="rtl" を設定します。
2. RTL スタイルシートを使用します。

<html lang="ar" dir="rtl">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" crossorigin="anonymous">
  </head>
</html>

論理プロパティ（start／end）は、方向を指定するプロパティ（left／right）に置き換わります。

ブラウザーのサポート

Bootstrap 5.3 は最新のブラウザーのみをサポートします。

ブラウザー	サポートレベル
Chrome	最新 2 バージョン
Firefox	最新 2 バージョン
Safari	最新 2 バージョン
Edge	最新 2 バージョン
iOS Safari	最新 2 バージョン
Android Chrome	最新 2 バージョン

サポート対象外： Internet Explorer（すべてのバージョン）。Bootstrap 5 では IE のサポートが完全に終了したため、フォールバックなしで CSS カスタムプロパティ、フレックスボックス、グリッドなどの最新の CSS 機能を利用できます。

モバイルに関する考慮事項

Bootstrap はモバイルファーストで設計されています。すべてのコンポーネントはタッチ操作に適しており、適切なタップ領域（インタラクティブな要素の場合は最小 44x44 ピクセル）を備えています。ブラウザーの DevTools ではタッチ操作、スクロールの挙動、パフォーマンス特性を完全には再現できないため、実機でテストしてください。

CSS 変数

Bootstrap 5.3 は CSS カスタムプロパティを広範囲に使用します。

:root {
  --bs-blue: #0d6efd;
  --bs-primary: #0d6efd;
  --bs-body-font-family: system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
}

ルートレベルまたはコンポーネントレベルで上書きします。

.my-component {
  --bs-primary: #custom-color;
}

依存関係

Bootstrap 5.3 の JavaScript には、次のものが必要です。

• Popper.js（bootstrap.bundle.js に含まれています）- ドロップダウン、ポップオーバー、ツールチップ、および位置指定を行うコンポーネントに必要です。
• jQuery への依存はありません（Bootstrap 5 で削除されました）。

適切なバンドルを選択してください。

• bootstrap.bundle.js - Popper.js を含みます（ほとんどのプロジェクトに推奨）。
• bootstrap.js - Popper.js を含みません（Popper を別途管理する場合、または位置指定を行うコンポーネントを使用しない場合に使用します）。

ファイル構成

npm でインストールした場合：

node_modules/bootstrap/
├── dist/
│   ├── css/
│   │   ├── bootstrap.css
│   │   ├── bootstrap.min.css
│   │   ├── bootstrap.rtl.css
│   │   └── bootstrap.rtl.min.css
│   └── js/
│       ├── bootstrap.js
│       ├── bootstrap.min.js
│       ├── bootstrap.bundle.js
│       └── bootstrap.bundle.min.js
└── scss/
    ├── bootstrap.scss
    ├── _variables.scss
    └── ...

利用可能な CSS ビルド：

ファイル	内容
bootstrap.css	フレームワーク全体（デフォルト）
bootstrap-grid.css	グリッドシステムとフレックスユーティリティのみ
bootstrap-utilities.css	ユーティリティクラスのみ
bootstrap-reboot.css	Reboot による正規化のみ

各バリアントには、.min.css（圧縮版）と .rtl.css（右から左に記述するバージョン）があります。

主な概念

モバイルファースト

Bootstrap はモバイルファーストで構築されています。基本スタイルはモバイルデバイスを対象とし、ブレークポイントが大きくなるとメディアクエリでレスポンシブ対応が適用されます。このアプローチでは、次の点が重要です。

• モバイルレイアウトから始め、大きな画面向けに複雑さを加える
• min-width メディアクエリを使用する（ブレークポイント以上の画面にスタイルが適用されます）
• 小さな画面を特に対象とする場合を除き、max-width クエリは避ける

ボックスサイズ

Bootstrap はグローバルに box-sizing: border-box を設定し、デフォルトの content-box を切り替えます。これにより、パディングが要素の最終的な計算幅に影響しなくなり、サイズ計算が簡単になります。Google Maps などのサードパーティ製ウィジェットと競合する場合があります。必要に応じて .selector { box-sizing: content-box; } で上書きしてください。

Reboot

Bootstrap の Reboot は、ブラウザー間で一貫した表示を実現するため、独自の考えに基づく CSS の正規化を提供します。詳細については、bootstrap-content スキルを参照してください。

ブレークポイント

デフォルトのレスポンシブブレークポイント：

• xs：<576px（デフォルト。インフィックスなし）
• sm：≥576px
• md：≥768px
• lg：≥992px
• xl：≥1200px
• xxl：≥1400px

コンテナシステム

コンテナは次の 3 種類です。

• .container - 固定幅でレスポンシブ（ブレークポイントごとに幅が変わります）
• .container-fluid - 常に全幅（すべてのブレークポイントで 100%）
• .container-{breakpoint} - ブレークポイントまでは全幅、その後は固定幅

<div class="container">Fixed-width responsive</div>
<div class="container-fluid">Always 100% width</div>
<div class="container-lg">100% until lg, then fixed</div>

コンテナは水平方向のパディング（デフォルトでは --bs-gutter-x: 1.5rem）を確保し、ビューポート内でコンテンツを中央に配置します。

その他のリソース

リファレンスファイル

• references/build-tools.md - Vite、Parcel、Webpack の完全なセットアップガイド
• references/rails-setup.md - Propshaft、Turbo、Stimulus を使用した Ruby on Rails 8 との統合
• references/javascript-api.md - JavaScript コンポーネント API の完全なリファレンス
• references/vite-setup.md - Vite プロジェクトの構成と設定の詳細

サンプルファイル

• examples/starter-template.html - 基本的な HTML スターター
• examples/rtl-starter.html - アラビア語コンテンツを含む RTL 対応スターターテンプレート
• examples/rails-application-layout.html.erb - Bootstrap を使用した Rails 8 アプリケーションレイアウト
• examples/rails-bootstrap-form.html.erb - Bootstrap スタイルの Rails フォームヘルパー
• examples/rails-flash-messages.html.erb - Bootstrap アラートとしてのフラッシュメッセージ
• examples/rails-navbar-partial.html.erb - Rails 向けのレスポンシブなナビゲーションバーのパーシャル
• examples/rails-turbo-modal.html.erb - Turbo 対応の Bootstrap モーダル

関連スキル

• bootstrap-customize - Sass 変数、テーマ設定、カラーモード
• bootstrap-layout - グリッドシステム、コンテナ、ブレークポイントの詳細
• bootstrap-content - Reboot とタイポグラフィ