BootStrapの基礎知識 備忘録

1. Bootstrapの概要と利点
（優先度：★★★★★）

なぜBootstrapを使うのか？

• HTML/CSS/JSのフレームワークで、レスポンシブなデザインを簡単に作れる
• ゼロからCSSを書くよりも統一感があり、開発スピードが上がる
• すぐに使える部品（ボタン、フォーム、ナビバーなど）が豊富

実際の使い方

• CDNを読み込むだけでOK
  .html

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  

• カスタムしたい場合はCSSやSCSSを追加する

---

2. グリッドシステム
（優先度：★★★★★）

レスポンシブ対応の肝！

• Bootstrapのレイアウトは12カラムのグリッドシステムを使う
• row と col を組み合わせてレイアウトを作成

例：3等分するレイアウト

.html

<div class="container">
  <div class="row">
    <div class="col-4 bg-primary text-white">1</div>
    <div class="col-4 bg-secondary text-white">2</div>
    <div class="col-4 bg-success text-white">3</div>
  </div>
</div>

👉 小さい画面では縦並び、大きい画面では横並びになる

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

3. 主要なコンポーネント
（優先度：★★★★☆）

Bootstrapには便利なUIパーツがたくさんある

• ボタン → btn btn-primary など
• ナビゲーションバー → navbar クラスを活用
• フォーム → form-control や input-group
• カード → card を使うと簡単にボックスが作れる

ボタンの例（btn クラスを活用）

.html

<button class="btn btn-primary">Primaryボタン</button>
<button class="btn btn-danger">Dangerボタン</button>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

ナビバーの例（navbar クラスを活用）

🛠 ナビバーのポイント

• navbar → ナビゲーションバーを作成
• navbar-expand-lg → 大画面では展開、小画面では折りたたむ
• navbar-toggler → スマホ時にメニューを開閉
• nav-item & nav-link → ナビメニューを作成

.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" 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>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

ナビバーの例が 不完全 なのは、
Bootstrapの JavaScriptが読み込まれていない ためです。
Bootstrapのナビゲーションバーを正しく動作させるには、BootstrapのJSとPopper.jsを読み込む必要があります。

JavaScript導入

.html

<!-- ✅ ナビバー -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <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" 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>

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

フォームの例（form-control や input-group）

📌 使い方：スタイリッシュな入力フォームを作る
🛠 フォームのポイント

• form-control → テキスト入力欄のデザインを統一
• mb-3 → フォーム要素の間隔を空ける
• btn btn-primary → 送信ボタンを青色にする
• w-100 → ボタンを横幅いっぱいにする

.html

<form class="p-4">
  <div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control" placeholder="[e-mail]">
  </div>
  <div class="mb-3">
    <label class="form-label">パスワード</label>
    <input type="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary w-100">ログイン</button>
</form>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

📌 追加機能：アイコン付き入力フィールド
　input-group を使うと、アイコン付きのフォームが作れる！

.html

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="ユーザー名">
</div>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

カード（card クラスを活用）

📌 使い方：ボックスレイアウトを簡単に作成する
🛠 カードのポイント

• card → ボックスを作成
• card-img-top → カードの上に画像を配置
• card-body → カードの中身（タイトル・テキスト・ボタン）

.html

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="サンプル画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">これはBootstrapのカードコンポーネントの例です。</p>
    <a href="#" class="btn btn-primary">詳細を見る</a>
  </div>
</div>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

---

4. レスポンシブデザイン
（優先度：★★★★☆）

デバイスサイズごとに適用するクラス

• col-（全サイズ共通）、col-sm-、col-md-、col-lg- など
• d-none d-md-block（小さい画面で非表示、大きい画面で表示）

例：画面サイズに応じたレイアウト変更

.html

<div class="row">
  <div class="col-md-6 col-sm-12 bg-warning">大きい画面では横並び、小さい画面では縦並び</div>
  <div class="col-md-6 col-sm-12 bg-info">レスポンシブ対応！</div>
</div>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

---

5. ユーティリティクラス
（優先度：★★★☆☆）

CSSを書かなくても見た目を調整できる

カテゴリ	クラス例	具体的な利用用途
マージン	m-3 mx-auto	要素同士の間隔をあける （ボタンの間隔、カードの間隔調整）
パディング	p-2 px-4	ボタンやカードの中の余白を調整 （テキストが端に寄らないようにする）
文字色	text-danger text-success	エラーメッセージを赤にする 成功メッセージを緑にする
背景色	bg-success bg-light	注意喚起のボックスや セクションの背景を変える
テキスト配置	text-center text-end	タイトルやボタンのラベルを 中央・右寄せにする
フレックス	d-flex justify-content-center	要素を横並びにする 中央揃えにする（ナビバーのレイアウト）
幅・高さ	w-50 h-100	画像やボックスのサイズを統一する
文字スタイル	fw-bold fst-italic	強調したいテキストを太字・斜体にする （見出しや説明文）
ボーダー	border border-primary	カードやボタンに枠線をつける、 デザインのアクセントにする
影・透明度	shadow opacity-50	ボタンやボックスを立体的に見せる、 背景画像の透明度を調整する

マージン・パディング

📌 使い方：ボタンやカードの間隔を調整する

.html

<button class="btn btn-secondary m-3">ボタン</button>
<div class="p-3">
    <button class="btn btn-primary">ボタン</button>
</div>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

💡 マージンとパディングどんなときに使う？

ケース	マージンを使う？	パディングを使う？
ボタン内の文字が端に寄りすぎている	❌ No	✅ Yes（内側に余白をつける）
ボタン同士がくっつきすぎている	✅ Yes（ボタン同士の間隔をあける）	❌ No
カード内のテキストに余裕を持たせる	❌ No	✅ Yes（内側に余白をつける）
ページ全体のセクション間に余白をつける	✅ Yes（外側の余白で区切る）	❌ No

文字色・背景色

📌 使い方：エラーメッセージや成功メッセージを分かりやすくする

.html

<p class="text-danger">エラー: 入力内容が正しくありません</p>
<p class="text-success">成功: 登録が完了しました！</p>

→ 重要なメッセージを色で強調できる！

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

テキスト配置

📌 使い方：タイトルやボタンのラベルを中央寄せにする

.html

<h2 class="text-center">サイトの見出し</h2>
<p class="text-end">この文章は右寄せです</p>

→ text-center で見出しを中央に、text-end で文章を右寄せに！

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

---

フレックス

📌 使い方：ボタンを横並びにして中央揃えにする

.html

<div class="d-flex justify-content-center">
    <button class="btn btn-primary m-3">ボタン1</button>
    <button class="btn btn-secondary m-3">ボタン2</button>
</div>

→ d-flex で横並び、justify-content-center で中央揃えに！

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

幅・高さ

📌 使い方：画像やボックスのサイズを統一する

.html

<img src="example.jpg" class="w-50">

→ w-50 で画像の幅を 50% に調整！

6. JavaScript機能
（優先度：★★☆☆☆)

Bootstrapには簡単に使えるJS機能がある
（ただし、jQueryなしでも動く）

• モーダル（ダイアログ）
• トグル（開閉するメニュー）
• ツールチップ（ホバー時に説明表示）

モーダルの例

.html

<!-- Bootstrap JavaScript 読み込み（JS & Popper.js）-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- ボタン -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">開く</button>

<!-- モーダル本体 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">タイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">モーダルの内容</div>
    </div>
  </div>
</div>

実行例

See the Pen Untitled by 藤井海里 (@ijialbto-the-decoder) on CodePen.

---

7. カスタマイズ方法
（優先度：★★☆☆☆）

Bootstrapのデフォルトデザインを変更したい場合

• CSSを追加して !important で上書き
• SCSSをカスタマイズして bootstrap.scss を編集
• --bs-primary などのCSS変数を使う