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

生徒

「BootstrapをCDNで使うって聞いたけど、リンクがいろいろあって難しそうです…」

先生

「Bootstrap 5.3を使うときに、CSSやJavaScript、アイコン用のリンクを貼る必要がありますね。初心者の方でもすぐに使えるように、必要なCDNリンクとIntegrityのコードを一覧で紹介しますよ。」

生徒

「Integrityって何ですか？リンクを貼るだけじゃダメなんですか？」

先生

「Integrity（インテグリティ）とは、CDNのファイルが書き換えられていないかを確認するための安全チェック用のコードです。安心して使うために、これも一緒に書くと良いですよ。」

1. Bootstrap 5.3のCDNリンクとは？

Bootstrap（ブートストラップ）は、Webサイトのデザインやレイアウトを簡単に作れる人気のフレームワークです。CDN（コンテンツ・デリバリー・ネットワーク）を使うと、パソコンにファイルを保存しなくてもネット上から読み込めるため、すぐに使えます。

Bootstrap 5.3を使うためには、CSS・JavaScript・Iconsの3つのCDNリンクをHTMLの中に記述します。

2. CSSのCDNリンクとIntegrity

Bootstrapのスタイルを適用するためのCDNリンクです。HTMLファイルの<head>タグの中に書きます。


<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8jhAXgJ/TC3eR3f5XUJOKMx4ELfGi2cW8NdRaEjUj8vZ69" crossorigin="anonymous">

3. JavaScriptのCDNリンクとIntegrity

ボタンやモーダルなど、動きのある機能を使うためにはJavaScriptのCDNが必要です。</body>タグの直前に記述します。


<!-- Bootstrap 5.3 JS（Popper含む） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoK4FjA36kZr9E+SBZrxMi87IcQdxNQ74uRkNvMZV6VBrG/" crossorigin="anonymous"></script>

4. Bootstrap IconsのCDNリンクとIntegrity

チェックマークやゴミ箱アイコンなどを使いたい場合は、アイコン用のCDNも必要です。<head>タグ内にCSSと一緒に書きます。


<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" integrity="sha384-XKnY1GwL7R1mzt0CZRFmRAduWYwB2zJp8oyOgzL3t8k38st0xW8UAvR5fw8XWwLs" crossorigin="anonymous">

5. 実際にすべて組み合わせたHTMLテンプレート

ここでは、すべてのCDNリンク（CSS・JavaScript・Icons）を正しく書いたHTMLの全体例を紹介します。初心者の方はこのテンプレートをコピペして使ってもOKです。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap CDN例</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8jhAXgJ/TC3eR3f5XUJOKMx4ELfGi2cW8NdRaEjUj8vZ69" crossorigin="anonymous">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" integrity="sha384-XKnY1GwL7R1mzt0CZRFmRAduWYwB2zJp8oyOgzL3t8k38st0xW8UAvR5fw8XWwLs" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-success"><i class="bi bi-check-circle-fill me-2"></i>Bootstrap 5.3が使えました！</h1>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoK4FjA36kZr9E+SBZrxMi87IcQdxNQ74uRkNvMZV6VBrG/" crossorigin="anonymous"></script>
</body>
</html>

ブラウザ表示