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

生徒

「Bootstrapを使いたいんですけど、CDNって何ですか？」

先生

「CDNとは“コンテンツ・デリバリー・ネットワーク”の略で、インターネット上でファイルを素早く読み込むための仕組みです。BootstrapのようなCSSやJavaScript、アイコンなどを読み込むときに使います。」

生徒

「なるほど。でも、Bootstrap本体とアイコンのCDNって、どっちを先に読み込めばいいんですか？」

先生

「とても大事なポイントですね。それでは、アイコンCDNと本体CDNの読み込み順とベストプラクティスについて詳しく説明していきましょう。」

1. CDNとは？初心者でもわかる意味と役割

CDN（シー・ディー・エヌ）は、Content Delivery Network（コンテンツ・デリバリー・ネットワーク）の略です。これは、インターネット上の複数のサーバーにデータを分散して配置する仕組みのことで、Webページの表示を早くするために使います。

例えば、BootstrapのCDNを使うと、自分のパソコンにファイルを保存しなくても、ネット上にあるBootstrapのデータを読み込んで使うことができます。

2. Bootstrap本体CDNとアイコンCDNとは？

Bootstrapには、主に以下の2つのCDNがあります。

Bootstrap本体のCDN：レイアウトやデザインのためのCSSやJavaScriptの読み込み
Bootstrap Icons（アイコン）のCDN：アイコンを表示するための専用CDN

たとえば、「ハートのアイコン」や「チェックマーク」などを表示するには、Bootstrap IconsのCDNが必要です。

3. 最適な読み込み順とは？

初心者の方がつまずきやすいのが「読み込む順番」です。CDNを使うときは、読み込みの順番がとても大切です。間違った順番だと、ページがうまく表示されなかったり、アイコンが出てこないことがあります。

基本のルール：

まずはBootstrap本体のCSSを読み込む
次にBootstrap IconsのCSSを読み込む
最後にJavaScript（必要であれば）を読み込む

この順番を守ることで、スタイルもアイコンも正しく表示されます。

4. 実際のHTMLの記述例

ここでは、Bootstrap 5とBootstrap IconsをCDNで読み込むHTMLの例を紹介します。正しい順番で読み込むことで、スタイルやアイコンが正しく表示されます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CDNの読み込み例</title>
    <!-- Bootstrap本体のCSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap IconsのCSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-primary"><i class="bi bi-check-circle-fill me-2"></i>Bootstrapとアイコンを読み込む</h1>
</body>
</html>

ブラウザ表示