「反映されない」「エラーが出る」を解決！Bootstrap導入トラブル完全チェックリスト
生徒
「BootstrapをCDNで読み込んだのに、見た目が変わりません…。CSSが反映されない気がします。」
先生
「Bootstrapが正しく読み込まれていないか、書き方に少しミスがあるのかもしれませんね。よくあるトラブルとそのチェックポイントを一緒に見ていきましょう！」
生徒
「はい！自分で気づけるようになりたいです！」
1. CSSやJavaScriptが反映されない原因とは？
HTMLにBootstrapを導入しても、ボタンの見た目が変わらない・レイアウトが崩れているなど「CSSが効かない」「エラーが出る」場合は、次のような原因が考えられます。
- CDNリンクが間違っている
- 読み込む順番が正しくない
- ファイルが保存されていない
- ブラウザのキャッシュが残っている
2. CDNリンクが正しいか確認する
Bootstrap 5.3のCSSとJSを使う場合、下記のようなCDNリンクが必要です。リンク先の文字が1文字でも違うと、正しく読み込まれません。
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
3. HTMLの基本構造を確認しよう
初心者が見落としやすいのがHTMLの構造ミスです。<head>の中にCSS、</body>の直前にJavaScriptを記述するのが基本です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap表示確認</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-primary">Bootstrapが正しく反映されました</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
4. 保存ミスに注意しよう
HTMLファイルを作ったあと、上書き保存を忘れると修正内容が反映されません。よくあるのが「見た目が変わらない」と思ったら、前の状態が表示されているだけというケースです。
保存してからブラウザで再読み込みしましょう。
5. ブラウザのキャッシュをクリアする
パソコンやスマホのブラウザには「キャッシュ（記憶）」が残っています。古いファイルが表示されている場合があるので、Ctrl + F5（Macなら Command + R）で再読み込みをしてみてください。
それでも変わらないときは、キャッシュを削除する設定を確認しましょう。
6. ファイル名や拡張子のミスに注意
ファイルの名前がindex.htmlやtest.htmlになっていても、うっかりindex.txtになっていないか注意しましょう。
拡張子（けいちょうし）とは、ファイルの最後についている「.html」などのことです。これが間違っていると、ブラウザで正しく表示できません。
7. 文字コードはUTF-8になっているか
文字化けしたり、日本語が変になるときは、文字コードがUTF-8になっているか確認しましょう。
HTMLの最初にある次のタグで指定できます。
<meta charset="UTF-8">
8. エラーが出たときの確認ポイント
ページにエラーが表示されたときは、下記のことをチェックしてください。
- CDNリンクが正しいか？
- JavaScriptは最後に書いてあるか？
- インターネットにつながっているか？
- 拡張子が.htmlになっているか？
それでも解決しない場合は、別のブラウザで開いてみるのもおすすめです。
9. チェックリストで安心確認！
- HTMLの基本構造が正しいか
- BootstrapのCDNリンクが正確か
- ファイルは保存されているか
- ブラウザのキャッシュを消したか
- インターネット接続は問題ないか
このチェックリストをひとつずつ確認すれば、「反映されない」「表示されない」「エラーが出る」といったBootstrap導入のトラブルを初心者でも自力で解決できます。
