BootStrapの基礎知識 備忘録

# 1. Bootstrapの概要と利点<br>（優先度：★★★★★）
#### なぜBootstrapを使うのか？

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

#### 実際の使い方
<ul>
<li>CDNを読み込むだけでOK

```.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
```
<li>カスタムしたい場合はCSSやSCSSを追加する
</ul><hr>

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

#### レスポンシブ対応の肝！
<ul>
<li>Bootstrapのレイアウトは12カラムのグリッドシステムを使う
<li>row と col を組み合わせてレイアウトを作成
</ul>
例：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>
```
👉 小さい画面では縦並び、大きい画面では横並びになる
<details><summary>実行例</summary>

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XJWyojO" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/XJWyojO">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

</details>

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

#### Bootstrapには便利なUIパーツがたくさんある
<ul>
<li>ボタン → btn btn-primary など
<li>ナビゲーションバー → navbar クラスを活用
<li>フォーム → form-control や input-group
<li>カード → card を使うと簡単にボックスが作れる
</ul>

#### ボタンの例（btn クラスを活用）
``` .html
<button class="btn btn-primary">Primaryボタン</button>
<button class="btn btn-danger">Dangerボタン</button>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="200" data-default-tab="html,result" data-slug-hash="Jojewdq" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/Jojewdq">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

#### ナビバーの例（navbar クラスを活用）
🛠 ナビバーのポイント
<ul>
    <li>navbar → ナビゲーションバーを作成
    <li>navbar-expand-lg → 大画面では展開、小画面では折りたたむ
    <li>navbar-toggler → スマホ時にメニューを開閉
    <li>nav-item & nav-link → ナビメニューを作成
</ul>

```.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>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yyLQrox" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/yyLQrox">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

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

<details><summary>JavaScript導入</summary>

```.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>
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MYWzRBL" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/MYWzRBL">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>
:::

#### フォームの例（form-control や input-group）
📌 使い方：スタイリッシュな入力フォームを作る
🛠 フォームのポイント
<ul>
    <li>form-control → テキスト入力欄のデザインを統一
    <li>mb-3 → フォーム要素の間隔を空ける
    <li>btn btn-primary → 送信ボタンを青色にする
    <li>w-100 → ボタンを横幅いっぱいにする
</ul>

```.html
<form class="p-4">
  <div class="mb-3">
    <label class="form-label">メールアドレス</label>
    <input type="email" class="form-control" placeholder="example@example.com">
  </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>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ogNQOEb" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/ogNQOEb">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>
📌 追加機能：アイコン付き入力フィールド<br>
　input-group を使うと、アイコン付きのフォームが作れる！

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

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XJWyQZw" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/XJWyQZw">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

#### カード（card クラスを活用）
📌 使い方：ボックスレイアウトを簡単に作成する
🛠 カードのポイント
<ul>
    <li>card → ボックスを作成
    <li>card-img-top → カードの上に画像を配置
    <li>card-body → カードの中身（タイトル・テキスト・ボタン）
</ul>

``` .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>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="LEYXvgN" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/LEYXvgN">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

<hr>

# 4. レスポンシブデザイン<br>（優先度：★★★★☆）
#### デバイスサイズごとに適用するクラス
<ul>
<li>col-（全サイズ共通）、col-sm-、col-md-、col-lg- など
<li>d-none d-md-block（小さい画面で非表示、大きい画面で表示）
</ul>

例：画面サイズに応じたレイアウト変更
```.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>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="pvoQqRK" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/pvoQqRK">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

<hr>

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


## マージン・パディング
📌 使い方：ボタンやカードの間隔を調整する
```.html
<button class="btn btn-secondary m-3">ボタン</button>
<div class="p-3">
    <button class="btn btn-primary">ボタン</button>
</div>
```
<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ByaGMMe" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/ByaGMMe">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

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

## 文字色・背景色
📌 使い方：エラーメッセージや成功メッセージを分かりやすくする

```.html
<p class="text-danger">エラー: 入力内容が正しくありません</p>
<p class="text-success">成功: 登録が完了しました！</p>
```
→ 重要なメッセージを色で強調できる！

<details><summary>実行例</summary>
<p class="codepen" data-height="200" data-default-tab="html,result" data-slug-hash="xbxQBbY" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/xbxQBbY">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

## テキスト配置
📌 使い方：タイトルやボタンのラベルを中央寄せにする

``` .html
<h2 class="text-center">サイトの見出し</h2>
<p class="text-end">この文章は右寄せです</p>
```
→ text-center で見出しを中央に、text-end で文章を右寄せに！

<details><summary>実行例</summary>
<p class="codepen" data-height="200" data-default-tab="html,result" data-slug-hash="pvoQYJE" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/pvoQYJE">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

<hr>

## フレックス
📌 使い方：ボタンを横並びにして中央揃えにする

```.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 で中央揃えに！

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VYwVRWg" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/VYwVRWg">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

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

```.html
<img src="example.jpg" class="w-50">
```
→ w-50 で画像の幅を 50% に調整！



# 6. JavaScript機能<br>（優先度：★★☆☆☆)

#### Bootstrapには簡単に使えるJS機能がある<br>（ただし、jQueryなしでも動く）
<ul>
<li>モーダル（ダイアログ）
<li>トグル（開閉するメニュー）
<li>ツールチップ（ホバー時に説明表示）
</ul>
モーダルの例

```.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>
```

<details><summary>実行例</summary>
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VYwVNpv" data-pen-title="Untitled" data-user="ijialbto-the-decoder" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ijialbto-the-decoder/pen/VYwVNpv">
  Untitled</a> by 藤井海里 (<a href="https://codepen.io/ijialbto-the-decoder">@ijialbto-the-decoder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>
</details>

<hr>

# 7. カスタマイズ方法<br>（優先度：★★☆☆☆）
#### Bootstrapのデフォルトデザインを変更したい場合
<ul>
<li>CSSを追加して !important で上書き
<li>SCSSをカスタマイズして bootstrap.scss を編集
<li>--bs-primary などのCSS変数を使う
</ul>


<hr>