はじめに
Bootstrapはよく「見た目を整えるCSSフレームワーク」として使われます。
しかし、この認識だけでは長期運用や拡張性のあるUI設計は難しいです。
BootstrapはUI言語として設計されており、HTML上で「意味を持つUI文」を書くことを前提としています。
単に色や装飾を目的としてクラスを付けるのではなく、役割・状態・条件を意識して使うことが重要です。
この記事では以下のポイントを中心に整理します：
- CSS設計の考え方（BEMに近い文法的アプローチ）
- 12分割グリッドとレスポンシブ設計
- クラス名・色の持つ意味
Bootstrapは「CSS集」ではなく「UI言語」
Bootstrapのクラスは単なる装飾ではなく、
UIの構造や役割を表現する言語です。
HTMLはUIを構築する文章、classは単語、クラスの組み合わせは文です。
<div class="d-flex align-items-center justify-content-between"></div>
Bootstrap的には、
「横並びで、縦中央揃えで、両端配置」
という一文になります。
👉 Bootstrapを使う = UI文をBootstrap言語で書く
この意識がないと、独自CSSと混ざって破綻する原因になります。
クラス名は「文法」を持つ
Bootstrapの命名は偶然ではなく、
階層構造と役割を明示する文法に基づいています。
基本構造
- css
- コードをコピーする
- [対象 / ベース] - [役割 / 条件] - [値]
例：ボタン
<button class="btn btn-primary">送信</button>
| クラス | 意味 |
|---|---|
| btn | ボタンというUI部品 |
| btn-primary | 主となる操作 |
btn-primary は 単体では成立せず、必ず btn がベースとして存在
👉 ベース → 派生 が命名で表現されています。
Bootstrapのクラスは「見た目」ではなく、
UI部品の種類・役割・状態を文法的に表すための語彙
として設計されています。
色クラスは「色」ではなく「意味」
Bootstrapの色系クラスは、色そのものではなく UI上の意味 を表します。
| クラス | 意味 |
|---|---|
| primary | 最重要 |
| secondary | 補助 |
| success | 成功 |
| danger | 破壊的操作 |
| warning | 注意 |
| info | 情報 |
❌ 誤解: primary = 青
⭕ 正解: primary = 主役（テーマによって色は変わる）
Bootstrapは「色を指定する」のではなく、
UIの役割を宣言するための語彙として色名を使っている
という点が重要です。
👉 見た目ではなく意味でクラスを選ぶことが、長期運用で破綻しないコツ
「どこに効くか」を先に言う命名
Bootstrapのユーティリティクラスは、
「どの要素に対して」「どんな意味を与えるか」 を
明確にするための命名規則を持っています。
<div class="text-danger bg-light border-primary"></div>
Bootstrapは必ず [対象] - [意味] の順で命名します。
| 接頭辞 | 対象 |
|---|---|
| text | 文字 |
| bg | 背景 |
| border | 枠線 |
| d | display |
👉 クラス名を見るだけで「何に効いているか」が分かる。
この命名規則のおかげで、
HTMLを読むだけでUIの意図が理解できる というメリットがあります。
逆に、対象を無視してクラスを使うと、
「なぜそのクラスが付いているのか」が分からなくなり、
長期運用で破綻しやすくなります。
グリッド・12分割・レスポンシブ
BootstrapのGridは、単なる列分割ではなく
レイアウトを記述するための文法 です。
12分割を基本としており、
実務でよく使う比率（1/2, 1/3, 1/4, 2/3 など）を自然に表現できます。
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">...</div>
<div class="col-md-6 col-lg-8">...</div>
</div>
</div>
| 要素 | 役割 |
|---|---|
| container | レイアウトの枠 |
| row | 横並びの行 |
| col | 列 |
col-md-6 は
「md以上で12分割中6（=半分）」
という意味になります。
👉 クラス名そのものがレスポンシブ条件を表す“文”になっている
そして、
container → row → col
の階層を守らないと文法違反となり、レイアウトが破綻します。
Bootstrapは「CSSを書かせない」設計
<div class="d-flex justify-content-between align-items-center"></div>
クラス CSS
| クラス | CSS |
|---|---|
| d-flex | display: flex |
| justify-content-between | justify-content: space-between |
| align-items-center | align-items: center |
BootstrapはCSSを書かせない代わりに、
CSSの概念をHTMLで書かせる設計です。
Bootstrapを使うときのNGな考え方
1. ボタンの正しい使い方（意味ベース）
❌ NG
<div class="btn btn-primary">青くしたいだけ</div>
⭕ 良い例
<button class="btn btn-primary">保存する</button>
<button class="btn btn-secondary">キャンセル</button>
ポイント
-
primary＝最重要操作 -
secondary＝補助操作 - HTMLタグも意味に合わせて
<button>を使う
👉 「意味で選ぶとUIの優先度が自然に揃う」
✅ 2. 色クラスを“意味”で使う例
❌ NG
<p class="text-danger">赤文字にしたいだけ</p>
⭕ 良い例
<p class="text-danger">この操作は取り消せません</p>
<p class="text-warning">保存していない変更があります</p>
<p class="text-success">設定を保存しました</p>
ポイント
-
danger＝破壊的・注意喚起 -
warning＝注意 -
success＝成功
👉 「色ではなくメッセージの意味に合わせて選ぶ」
✅ 3. Gridの正しい文法例（container → row → col）
❌ NG
<div class="col-6">rowの外で使ってしまう</div>
⭕ 良い例
<div class="container">
<div class="row">
<div class="col-md-4">サイドバー</div>
<div class="col-md-8">メインコンテンツ</div>
</div>
</div>
ポイント
-
container→row→colの階層を守る - col の比率は「文法」であり、意味を持つ
👉 「レイアウトが破綻しないBootstrapの基本文法」
✅ 4. Utilityクラスを“必要最小限”に使う例
❌ NG
<!-- このカードはどういう余白のルールなの？ が分からない -->
<div class="mt-3 mb-4 pt-2 pb-1">プロフィールカード</div>
⭕ 良い例
<!-- このカードは「内側 p-3」「下方向 mb-4」という性格を持つ -->
<div class="card p-3 mb-4">プロフィールカード</div>
ポイント
- spacing scale を守る
- 余白はコンポーネント単位で統一する
👉 「ユーティリティは“調整”ではなく“宣言”として使う」
✅ 5. 独自CSSを“意味の追加”として使う例
❌ NG
.btn {
border-radius: 20px;
}
⭕ 良い例
.btn-round {
border-radius: 20px;
}
<button class="btn btn-primary btn-round">送信</button>
ポイント
- Bootstrapのベースを壊さない
- 独自クラスは「意味の追加」として扱う
👉 「拡張はOK、上書きはNG」
👉 NG例の共通点
- 意味を無視している
- 文法を破っている
- Bootstrapの思想と逆行している
Bootstrapは「CSSを楽にする道具」ではなく、
UIを意味で組み立てるための言語 です。
文法と意味を無視すると、
どれだけ小さなプロジェクトでも必ず破綻します。
Bootstrapを使うときの正しいスタンス
- Bootstrapの命名を信頼する
- 意味を追加する拡張はOK
- 見た目だけの独自解釈はしない
- HTMLは「UIを書く場所」と割り切る
おわりに
Bootstrapは雑に使うと破綻しやすいですが、
思想を理解すると長期運用に強いフレームワークです。
まずは
「BootstrapはUI言語である」
という前提を持つだけで、使い方は大きく変わります。
補足：BEMとBootstrapの関係
Bootstrapのクラス命名は、CSS設計でよく使われる
BEM（Block-Element-Modifier） に近い考え方を持っています。
- Block（ブロック）：UI部品のベース
（例：btn、card） - Element（要素）：部品内の構成要素
（例：card-header） - Modifier（修飾）：状態やバリエーション
（例：btn-primary、text-danger）
Bootstrapでも、
ベース（Block） → 派生・状態（Modifier）
という階層構造があり、意味と文法に沿ったUI部品の設計が可能です。
💡 ポイント
BEMを意識すると、Bootstrapクラスを「見た目」ではなく「意味で選ぶ」感覚がより理解しやすくなります。