Bootstrap: Bootstrap入門とインストール

1. レッスン概要

(1) 前提条件

基本的なHTMLタグ（div、p、h1〜h6、a、img）をマスターする
CSSセレクタと一般的なプロパティ（color、margin、padding、font-size）を理解する

(2) 🎯 学習内容

Bootstrapとは何か、そのコア機能を理解する
CDN経由でBootstrap 5.3をインストールする方法を学ぶ
最初のBootstrapページを自分で構築する
Bootstrapのバージョン選択と比較をマスターする
Bootstrapのクラス命名規則を理解する

(3) 課題点

HTMLとCSSの学習を刚刚終えた初心者のアリスは、ナビバー、カード、テーブル、カルーセルを備えた個人ホームページを作りたいと考えていますが、ゼロからCSSを書くのは遅すぎます。

(4) 解決策

Bootstrapは、現在最も人気のあるフロントエンドCSSフレームワークです。完全なコンポーネントライブラリとレスポンシブグリッドシステムを提供し、CSSをゼロから書かなくても、美しく、複数デバイスに対応したウェブページを素早く構築できます。

理解のアプローチ: CSSを手動で書くことは、材料を買い、野菜を切り、自分で料理をすることに似ています。Bootstrapを使用することは、デリバリーを注文することに似ています。コンポーネントを選択するだけで、スタイルは処理され、あなたは組み立てに集中できます。

(5) 利点

Bootstrapを採用した後、アリスはCDNを導入し、対応するクラスを追加するだけで、プロフェッショナルなナビバー、カード、テーブルを備えたページを素早く構築できます。元々数百行の手書きCSSが必要だった作業量が、数十行のHTMLにまで削減されます。

2. Bootstrapとは

Bootstrapは、当初2011年にTwitterのエンジニアであるマーク・オットーとジェイコブ・ソーントンによって開発され、元々はTwitter Blueprintと名付けられました。十数年を経た主要バージョンの迭代を経て、現在のBootstrap 5.3は、成熟し安定したフレームワークとなっています。

(1) コア機能

Bootstrapは4つの主要な能力を提供します：

能力	説明	例
グリッドシステム	12列のレスポンシブレイアウト、モバイル/タブレット/デスクトップに適応	`col-md-6 col-lg-4`
コンポーネントライブラリ	70以上の既製HTML/CSS/JSコンポーネント	ボタン、カード、ナビバー、モーダル
ユーティリティクラス	アトミックCSSユーティリティ、カスタムスタイルを不要に	`mt-3`、`text-center`、`d-flex`
JSプラグイン	jQuery不要、ネイティブJavaScriptベース	カルーセル、ポップアップ、アコーディオン

(2) 他のフレームワークとの比較

次元	Bootstrap	Tailwind CSS	純粋な手書きCSS
学習曲線	低い（直感的なクラス命名）	中〜高い（多くのユーティリティクラスを覚える必要がある）	高い（レイアウト/セレクタ/互換性の知識が必要）
開発速度	速い	速い	遅い
カスタマイズの柔軟性	中（Sass変数のカバレッジ）	高い（デザインシステムレベルのカスタマイズ）	最も高い
ファイルサイズ	中（gzip圧縮で約30KB）	小さい（オンデマンドコンパイル）	コード量による
コンポーネントの豊富さ	70以上のコンポーネント	組み込みコンポーネントなし	全てカスタムビルド
適用シナリオ	高速開発、管理ダッシュボード、MVP	デザインシステム、ブランドカスタマイズ	コアビジネス、パフォーマンス最適化

(3) バージョン履歴

timeline
    title Bootstrapバージョンタイムライン
    2011 : v2.0 : Twitter Blueprintオープンソース化
    2013 : v3.0 : フラットデザイン + モバイルファースト
    2018 : v4.0 : Flexboxグリッド + Sass
    2021 : v5.0 : jQuery削除 + CSS変数追加
    2023 : v5.3 : ダークモード + アクセントカラー追加

出力: スタイルがアクティブなBootstrap 5.3コンポーネントのエフェクト（例：ボタン、カード、カルーセル、アコーディオン）。ページはBootstrapデフォルトテーマ（ライトモード）とレスポンシブグリッドが適用されます。

3. Bootstrapのインストール

このチュートリアルの最初の15レッスンはCDN方法を使用します。ファイルをダウンロードする必要はなく、HTMLにたった2行のコードを導入するだけです。

(1) 方法1: CDN導入（推奨）

▶ サンプル CDNによる基本テンプレート

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  <p class="lead">This is my first Bootstrap page.</p>

  <!-- Bootstrap JS + Popper (needed for interactive components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ 試してみよう

出力: スタイルがアクティブなBootstrap 5.3コンポーネントのエフェクト（例：ボタン、カード、カルーセル、アコーディオン）。ページはBootstrapデフォルトテーマ（ライトモード）とレスポンシブグリッドが適用されます。

要点:

CSSは<head>内、JSは</body>の前に配置
bootstrap.bundle.min.jsにはPopper.jsが含まれています（ポップアップコンポーネントに必要）
minバージョン（圧縮済み）の使用は読み込み時間を短縮します

(2) 方法2: npmインストール（フェーズ5で使用）

BASH

npm install bootstrap@5.3.3

TEXT 📖 参照専用

// import in JS entry file
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

出力: スタイルがアクティブなBootstrap 5.3コンポーネントのエフェクト（例：ボタン、カード、カルーセル、アコーディオン）。ページはBootstrapデフォルトテーマ（ライトモード）とレスポンシブグリッドが適用されます。

この方法はフェーズ5でのSassカスタマイズと組み合わせて使用する必要があります。初期段階ではスキップできます。

4. 完全なページ例

以下は、ナビバー、ボタン、カード、グリッドレイアウトを含む完全なBootstrapページです：

▶ サンプル包括的な個人ホームページテンプレート

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Demo - Alice's Portfolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Alice</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <div class="bg-primary text-white text-center py-5">
    <div class="container">
      <h1 class="display-4">Hi, I'm Alice</h1>
      <p class="lead">A web developer who loves building clean, responsive websites.</p>
      <a href="#" class="btn btn-light btn-lg">View My Work</a>
    </div>
  </div>

  <!-- Cards -->
  <div class="container my-5">
    <div class="row">
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Web Design</h5>
            <p class="card-text">Clean and modern interfaces built with Bootstrap.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Responsive Layout</h5>
            <p class="card-text">Works perfectly on mobile, tablet, and desktop.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">UI Components</h5>
            <p class="card-text">Over 70 ready-to-use components at your fingertips.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

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

▶ 試してみよう

出力: スタイルがアクティブなBootstrap 5.3コンポーネントのエフェクト（例：ボタン、カード、カルーセル、アコーディオン）。ページはBootstrapデフォルトテーマ（ライトモード）とレスポンシブグリッドが適用されます。

このコードはわずか約40行のHTMLで構成されています。純粋なCSS手書きでは少なくとも150行以上が必要な場合と比較してください。

5. Bootstrapのクラス命名規則

Bootstrapのクラス命名は固定パターンに従います。このモデルを理解すれば、ほとんどのクラス名を「推測」できるようになります：

TEXT 📖 参照専用

{property}{direction}-{size}-{value}

部分	意味	例
`property`	プロパティの略	`m`=margin、`p`=padding、`text`=text-align
`direction`	方向（オプション）	`t`=top、`b`=bottom、`s`=start、`e`=end
`size`	ブレークポイント（オプション）	`sm`、`md`、`lg`、`xl`、`xxl`
`value`	値	`0`〜`5`、`auto`、`center`、`start`

例えば、mt-md-3はmd以上の画面でmargin-top: 1remを設定します。この命名システムはBootstrap全体に貫かれており、後続のレッスンで詳しく説明されます。

(1) Bootstrapと純粋なCSS開発効率の比較

シナリオ	ネイティブCSS	Bootstrap	節約された時間
レスポンシブ3列グリッド	40行以上のメディアクエリ	1行の`row-cols-md-3`	~90%
ナビバー + 折りたたみメニュー	80行以上のCSS + JS	1つの`navbar`コンポーネント	~85%
カードベースのレイアウト	60行以上のCSS	1つの`card`コンポーネント	~95%
フォームバリデーションスタイル	30行以上のCSS	`was-validated`クラス	~90%

(2) Bootstrapバージョン選択比較

バージョン	jQuery	CSS変数	ダークモード	グリッド	IEサポート
v4.6	必要	なし	なし	Flexbox	✅
v5.0	削除済み	追加	なし	Flexbox + xxl	❌
v5.3	削除済み	強化済み	✅	Flexbox + CSS Gridヘルパー	❌

▶ サンプル Bootstrapの読み込み成功を確認する

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container text-center py-5">
    <div class="spinner-border text-primary mb-3" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <h3>Bootstrap 5.3.3 is loaded</h3>
    <p class="text-success"><strong>✓</strong> CSS is working</p>
    <button class="btn btn-primary" onclick="alert('JS is working!')">Test JS</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</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>Bootstrap Components</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">
    <span class="badge bg-primary">New</span>
    <span class="badge bg-success">Active</span>
    <span class="badge bg-danger">Expired</span>
    <div class="progress mt-3" style="height: 20px;">
      <div class="progress-bar bg-success" style="width: 75%">75% Complete</div>
    </div>
    <div class="alert alert-info mt-3">Info alert with an <a href="#" class="alert-link">example link</a>.</div>
  </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>DevTools Practice</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">
    <h1>DevTools Practice</h1>
    <p class="text-muted">Open DevTools (F12) and inspect these Bootstrap elements.</p>
    <div class="row">
      <div class="col-4"><div class="bg-primary text-white p-3 rounded">Col 1</div></div>
      <div class="col-4"><div class="bg-success text-white p-3 rounded">Col 2</div></div>
      <div class="col-4"><div class="bg-info text-white p-3 rounded">Col 3</div></div>
    </div>
  </div>
</body>
</html>

▶ 試してみよう

出力: スタイルがアクティブなBootstrap 5.3コンポーネントのエフェクト（例：ボタン、カード、カルーセル、アコーディオン）。ページはBootstrapデフォルトテーマ（ライトモード）とレスポンシブグリッドが適用されます。

❓ よくある質問

Q Bootstrap 5にはjQueryは必要ですか？

A いいえ。Bootstrap 5はjQueryの依存関係を完全に削除しました。すべてのJSプラグインはネイティブJavaScriptに基づいて実装されています。すべてのインタラクティブコンポーネントを使用するには、bootstrap.bundle.min.jsを導入するだけで済みます。

Q BootstrapとTailwindのどちらを選ぶべきですか？

A 開発速度とコンポーネントの豊富さならBootstrapを選択してください。カスタマイズ性の高いデザインシステムや厳格なブランドスタイルならTailwindを選択してください。学習パスとしては、まずBootstrapを学ぶことをお勧めします（敷居が低く、コミュニティが大きく、就職に有利）。その後、Tailwindに進むのが良いでしょう。

Q CDNで読み込むと遅くなりますか？

A BootstrapのCDNファイルは、中国にノードを持つjsDelivrグローバルアクセラレーションネットワークから提供されています。圧縮されたCSSは約28KB、JSは約22KBで、ページ読み込みへの影響は最小限です。ブラウザはCDNファイルをキャッシュするため、後続のページで再ダウンロードする必要もありません。

Q JavaScriptの知識がなくてもBootstrapを使用できますか？

A はい。BootstrapのCSS部分（グリッド、タイポグラフィ、ボタン、カードなど）はJSから独立して使用できます。フェーズ1〜2は完全にCSSコンテンツであり、JS知識は必要ありません。

Q Bootstrap 5と4の主な違いは何ですか？

A Bootstrap 5はjQuery依存を削除し、CSSカスタムプロパティのサポートを追加し、グリッドシステムを改善し（xxlブレークポイント追加）、ダークモードを導入し、IEサポートを停止しました。v4から移行する場合、left/rightがstart/endに置き換えられたなどの変更点に注意してください。

Q CDN方法に単一障害点のリスクはありますか？

A これはマルチCDNフォールバック戦略で解決できます。プライマリCDNが読み込みに失敗した場合、代替CDNにフォールバックするか、integrity属性を使用してファイルの整合性を検証します。本番環境では、独自のCDNでBootstrapファイルをホストすることを検討してください。

📖 まとめ

Bootstrapはグリッドシステム + コンポーネントライブラリ + ユーティリティクラス + JSプラグインを提供するCSSフレームワークです
純粋な手書きCSSと比較して、開発速度が大幅に向上し、レスポンシブページを迅速に構築するのに適しています
CDN経由での導入を推奨します：<link>と<script>が1つずつあれば始められます
クラス命名は{property}{direction}-{size}-{value}パターンに従い、記憶しやすいです

📝 練習問題

⭐ 新しいHTMLファイルを作成し、CDN方法でBootstrap 5.3.3をインポートしてください。ページ内に<h1>と<p class="lead">を配置し、デフォルトのフォントと余白の効果を観察してください。
⭐⭐ 「インストール」セクションの「CDN導入による基本テンプレート」例を参考にし、ボタン(<button class="btn btn-primary">)とアラート(<div class="alert alert-success">)を追加して、コンポーネントの表示を確認してください。

Web-Tutorial 技術チーム

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

私たちについて

Bootstrap: Bootstrap入門とインストール

1. レッスン概要

(1) 前提条件

(2) 🎯 学習内容

(3) 課題点

(4) 解決策

(5) 利点

2. Bootstrapとは

(1) コア機能

(2) 他のフレームワークとの比較

(3) バージョン履歴

3. Bootstrapのインストール

(1) 方法1: CDN導入（推奨）

▶ サンプル CDNによる基本テンプレート

(2) 方法2: npmインストール（フェーズ5で使用）

4. 完全なページ例

▶ サンプル 包括的な個人ホームページテンプレート

5. Bootstrapのクラス命名規則

(1) Bootstrapと純粋なCSS開発効率の比較

(2) Bootstrapバージョン選択比較

▶ サンプル Bootstrapの読み込み成功を確認する

▶ サンプル 一般的なコンポーネントの迅速な使用

▶ サンプル 開発者ツールでのデバッグテクニック

❓ よくある質問

📖 まとめ

📝 練習問題

▶ サンプル包括的な個人ホームページテンプレート

▶ サンプル一般的なコンポーネントの迅速な使用

▶ サンプル開発者ツールでのデバッグテクニック