初心者必見！cdnとbootstrap 3の基本コードと使い方完全ガイド

2025 12/05

2025/12/05

はじめに

この文書は、Bootstrap 3 を CDN 経由で手早く利用する方法を解説します。CDNとは、世界中に分散したサーバーにファイルを置き、必要なときにブラウザがそれを直接読み込む仕組みです。手元にファイルを置かずに済み、読み込みが速くなる利点があります。

Bootstrap 3 は主に CSS と JavaScript（および Bootstrap の JavaScript が依存する jQuery）で構成されます。HTML の head に CSS の URL を書き、body 終了直前に JavaScript の URL を書くだけで利用できます。後続の章で具体的なコード例と使い方のポイント、簡単なテンプレートを順に示します。

対象は、ウェブ制作の入門者から中級者までです。手順を追えば実際に動くテンプレートをすぐに作れます。気軽に読み進めてください。

基本の CDN コード

概要

Bootstrap 3 のスタイルは内で読み込みます。JavaScriptはページ表示の妨げにならないよう、直前に置きます。Bootstrap の JavaScript は jQuery に依存するため、必ず jQuery を先に読み込みます。

具体例（最小構成）

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- ページの内容 -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

ポイント

CSSはに置くと、読み込み中の白い未装飾状態を減らせます。
jQueryを先に読み込みます。Bootstrap の機能（モーダルやタブなど）は jQuery を使います。
スクリプトを直前に置くと、HTMLの読み込みを妨げず速く表示できます。

注意点

CDNは手軽で速いですが、必要に応じてローカルに保存する選択も検討してください。

使い方のポイント

CSSはに置く

スタイルシート(<link rel="stylesheet" href="style.css">)は内に置きます。ブラウザが先に読み込むことで表示が安定し、レイアウトの崩れ（FOUC）を防げます。外部フォントや大きなCSSは遅延読み込みを検討してください。

JavaScriptは直前に置く

ページ表示を妨げないよう、<script src="app.js"></script>は直前に置きます。この配置ならHTMLの描画が終わってからスクリプトが実行され、表示速度が向上します。DOM 操作が必要な場合はdefer属性を使うと分かりやすく安全です。

Bootstrap 3は読み込み順に注意

Bootstrap 3はjQueryに依存します。必ず先にjQuery、次にBootstrapのJSを読み込んでください。順番が逆だと動作しません。例えば：

<head>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <!-- コンテンツ -->
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="bootstrap.min.js"></script>
</body>
</html>

この順を守れば、Bootstrapのコンポーネントやプラグインが正しく動きます。

簡単なテンプレート

以下は Bootstrap 3（バージョン3.4.1）を使ったシンプルなHTMLテンプレート例です。DOCTYPEとmeta、CSS読み込み、コンテナ内の見出しとボタン、最後にjQueryとBootstrapのJSを置く基本構成を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>サンプルページ</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>見出し</h1>
    <p>簡単な説明文です。</p>
    <button class="btn btn-primary">実行</button>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

ポイントの説明：