先生と生徒の会話形式で理解しよう

生徒

「Bootstrapを導入したら、もともと書いていたCSSが効かなくなったり、逆に変なデザインになってしまいました。どうすれば解決できますか？」

先生

「それは『CSSの競合』が起きているからです。Bootstrapのスタイルと既存のCSSが同じ場所に作用して、意図しない上書きが発生しているんです。」

生徒

「なるほど…。競合を防ぐにはどうしたらいいんでしょうか？」

先生

「ベストプラクティスを知っておけば大丈夫です。順番や命名ルール、優先度の考え方を理解すれば、競合を解消して安全にBootstrapを使えますよ。」

1. CSS競合・上書き問題とは何か？

CSSの競合とは、同じHTML要素に複数のスタイルが指定され、どちらが適用されるか分からなくなる状態のことです。たとえば、Bootstrapが「h1は太字で大きい文字」と指定しているのに、既存CSSで「h1は青色で小さい文字」と指定すると、ブラウザがどちらを優先するかでデザインが変わります。

このような状況を放置すると、ページごとに見た目が変わったり、利用者にとって見づらいデザインになる可能性があります。

2. CSS競合が起きる主な原因

これらを整理して対策することで、移行時のトラブルを大幅に減らすことができます。

まず基本は「Bootstrap → 既存CSS → カスタムCSS」の順に読み込むことです。Bootstrapの後に自分のCSSを読み込めば、意図したデザインを優先できます。


<link href="bootstrap.min.css" rel="stylesheet">
<link href="original.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

Bootstrapが使うクラス名（例：btn、card、containerなど）を避け、自分のCSSは独自の名前空間をつけると競合を防げます。

例えば「my-btn」「custom-card」など、プレフィックス（接頭辞）をつけるのがおすすめです。


<style>
.my-btn {
  background-color: orange;
  color: white;
}
</style>

<button class="btn my-btn">オリジナルボタン</button>

ブラウザ表示

CSSでは「どの指定が優先されるか」を決めるルールがあります。例えば、同じ要素にクラスとIDが指定されていたらIDの方が強く適用されます。

優先度を理解し、意図したデザインが正しく反映されるように設計しましょう。

!importantは強制的にスタイルを適用する指定ですが、多用すると管理が難しくなります。移行後に「なぜ効かないのか分からない」という事態になりやすいからです。

本当に必要な場面以外では使わず、クラス名や読み込み順序で調整するのが安全です。

ブラウザの開発者ツールを使うと、どのCSSが適用されているか一目で分かります。ChromeやEdgeなら右クリック →「検証」で確認できます。

これを使って「Bootstrapが上書きしているのか」「自分のCSSが効いていないのか」を調べると、問題の原因をすぐに突き止められます。

いきなり全ページにBootstrap5を適用せず、まずは一部のページでテストしてCSSの競合を確認しましょう。問題が見つかったらその都度修正し、安全を確認してから次のページに進めるのが効率的です。

既存CSSを全部捨てて書き直す必要はありません。Bootstrapは便利なデザインの土台として使い、独自のデザインが必要なところだけ自分のCSSで上書きするのが理想です。

「全部Bootstrapに合わせる」のではなく、「Bootstrapに任せる部分」と「自分で作り込む部分」を分けるのが上級者の使い方です。