Bootstrap

Bootstrapとは

Bootstrap は、あらかじめデザインされたUI部品(ボタン・カード・モーダル・ナビゲーション)とグリッドシステムをまとめたCSSフレームワークです。クラス名を当てるだけで、CSSをほとんど書かずに整った画面が組めます。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">在庫アラート</h5>
    <button class="btn btn-primary">確認</button>
  </div>
</div>

btn btn-primary のように部品の名前を指定するのが特徴です。何が出るかは名前を見れば分かり、デザインの判断は Bootstrap 側が済ませています。

Tailwind CSSとの対比

同じ「CSSを書かずに組む」でも、[[Tailwind CSS]] とは考え方が逆向きです。

	Bootstrap	Tailwind CSS
クラスの単位	部品(`card`・`btn`)	性質(`p-4`・`rounded`・`bg-blue-500`)
見た目の既定	完成済みのデザインが付いてくる	デザインは自分で組み立てる
早さの出どころ	部品がそのまま使える	命名やファイル往復が要らない
独自デザイン	上書きが必要で、量が増えると衝突する	最初から自由

「Bootstrapらしい見た目」で構わないなら Bootstrap が速いです。管理画面・社内ツール・プロトタイプのように、独自性より速度が要る場面に向きます。逆にデザインを作り込むほど上書きが増え、Bootstrap の既定と自分のCSSが競り合う状態になります。そこまで行くなら最初から Tailwind を選ぶほうが素直です。

グリッドシステム

12分割を基本とし、画面幅ごとに何列分を占めるかをクラスで指定します。

<div class="row">
  <div class="col-12 col-md-8">本文</div>
  <div class="col-12 col-md-4">サイドバー</div>
</div>

col-12 は狭い画面で全幅、col-md-8 は中程度以上の幅で12分割中8列という意味です。[[レスポンシブデザイン]] のブレークポイントがクラス名に埋め込まれており、メディアクエリを書かずに出し分けられます。内部の仕組みは [[FlexboxとGrid]] で、Bootstrap はその上に命名規則を被せたものと捉えると理解が早いです。

カスタマイズ

見た目の調整は、完成後のCSSを上書きするのではなく [[CSSプリプロセッサ(Sass)]] の変数を差し替えてビルドし直すのが正攻法です。

$primary: #2563eb;      // 既定の色を差し替える
@import 'bootstrap/scss/bootstrap';

上書き方式だと詳細度の勝負になり、!important が増えていきます。変数から作り直せば出力そのものが変わるため、衝突が起きません。使う部品だけを個別に読み込めば、出力サイズも削れます。

初学者向けポイント

モーダルやドロップダウンなど動きのある部品はJavaScriptも必要です。CSSだけ読み込んで「開かない」となるのはよくある詰まりどころです
クラス名の意味を都度調べるより、使う部品のページを開いたまま写すほうが速く進みます
[[React]] などと組み合わせるときは、DOMを直接操作するBootstrapのJSと競合することがあります。フレームワーク向けに作り直された部品ライブラリを使うのが安全です

関連技術とのつながり

[[CSS]] — Bootstrap が生成しているものの正体
[[Tailwind CSS]] — 部品単位か性質単位かで対照的な、同じ目的のフレームワーク
[[CSSプリプロセッサ(Sass)]] — 変数を差し替えてビルドし直すのが正攻法のカスタマイズ
[[レスポンシブデザイン]] — ブレークポイントがクラス名に埋め込まれている
[[FlexboxとGrid]] — グリッドシステムの内部で使われている仕組み

Q: Bootstrapのクラス指定の考え方はどれ?
- [x] `btn` や `card` のように部品の名前を指定する
- [ ] `p-4` や `bg-blue-500` のように性質を積み上げる
- [ ] 要素ごとにインラインスタイルを書く
解説: 部品単位のクラスを当てます。性質を積み上げるTailwind CSSとは逆向きの考え方です。

Q: `col-12 col-md-8` の意味はどれ?
- [ ] 常に12列中8列を占める
- [x] 狭い画面では全幅、中程度以上の幅では12分割中8列を占める
- [ ] 12個の要素を8列に並べる
解説: ブレークポイントがクラス名に含まれており、メディアクエリを書かずに幅ごとの出し分けができます。

Q: Bootstrapの見た目を変えるときの正攻法はどれ?
- [ ] 生成済みCSSを `!important` で上書きする
- [x] Sassの変数を差し替えてビルドし直す
- [ ] クラス名を自分のものに書き換える
解説: 上書きは詳細度の勝負になり衝突が増えます。変数から作り直せば出力そのものが変わります。