Bootstrap_Bootstrapの読み込み

02Bootstrapの読み込み

では実際にBootstrapを実際に読み込んで使ってみましょう。

Bootstrapを読み込む方法は大きく

CDN(Content Delivery Network)を使用する方法
ファイルをダウンロードしてプロジェクトに直接組み込む方法

の２つあります。

順番に説明していきます。

まず、１つ目のCDNを用いる方法です。

CDN（コンテンツデリバリネットワーク）とは、インターネット上でコンテンツを高速かつ効率的に配信するためのシステムです。

CDNは世界中に分散配置されたサーバーのネットワークで構成されており、ウェブサイトのデータや画像、動画などのコンテンツをユーザーに迅速に届けることができます。

CDNの仕組み

分散配置されたサーバー

CDNは世界中の様々な場所にサーバーを配置しています。

これにより、ユーザーがどこにいても最寄りのサーバーからコンテンツを受け取ることができます。

キャッシュ機能

ウェブサイトの静的コンテンツ（画像やCSS、JavaScriptなど）をCDNのサーバーにキャッシュ（保存）します。ユーザーがウェブサイトにアクセスする際、CDNはこのキャッシュされたコンテンツを配信します。

これにより、オリジンサーバー（元のサーバー）への負荷が軽減され、配信速度が向上します。

トラフィックの分散

多くのユーザーが同時にアクセスする場合でも、CDNはトラフィックを複数のサーバーに分散することで、サイトの応答速度を維持し、サーバーの過負荷を防ぎます。

「Lesson4_Bootstrapフォルダ」を新たに作成し、その中に「index.html」を作成し、以下のコードをコピーアンドペーストしてください。

index.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

では実際にBootstrapを読み込んでみましょう。
HTMLファイルの<head>タグ内の最後に、以下の記述を追加してください。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

さらに、</body>タグの直前に以下のコードを追加してください。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

CDNによる読み込み方法は以上です！

では、２つめのファイルをダウンロードしてプロジェクトに直接組み込む方法をご紹介します。

新たに、Lesson4_Bootstrapフォルダに「js」「css」という名のフォルダを作成してください。

次に、公式ドキュメントからファイルをダウンロードします。

https://getbootstrap.jp/docs/5.3/getting-started/download

ダウンロードが完了したら、zipファイルを解凍し中身を確認しましょう。

zipを解凍すると「CSS」「JS」フォルダの２つが入っていると思います。

以下のファイルを「Lesson4_Bootstrap」に設置しましょう。

対象ファイル

bootstrap-5.3.0-dist
 ├ js
 |  └ bootstrap.min.js
 └ css  
    └ bootstrap.min.css

Cloud9のファイル構造

Lesson4_Bootstrap
 ├ js
 |  └ bootstrap.min.js
 ├ css  
 |  └ bootstrap.min.css
 └ index.html

これでBootstrapをダウンロードすることができました！

では実際にBootstrapのサンプルコードを挿入し、実際に画面を見てみましょう。

index.htmlの<body>タグ内に以下のコードを追加してください。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                アコーディオンメニューが表示されます！
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                アコーディオンメニュー２
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                アコーディオンメニュー３
            </div>
        </div>
    </div>
</div>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

追記できたら、ブラウザ上で確認してみましょう。

Cloud9でプレビューを開いてください。

画像のようにアコーディオンメニューが表示されていたらBootstrapを無事に読み込めています。

ここでindex.htmlを見てみましょう。

デザインするのに必要なCSSや動きをつけるためのJavaScriptを１行も記述していないのに、画面上にはおしゃれなアコーディオンメニューが表示されています。

これがBootstrapの便利さです。

Bootstrapでは、HTMLのタグにあらかじめ用意されているクラス名を付与することによって、CSSを記述せずともCSSを適応させることができます。

例えば、「fw-bold」というクラスを追加すると、追加されたHTMLは太字になります。

つまり、fw-boldはCSSでいうfont-weight: bold;と同じ意味になります。

あらかじめBootstrap側で、以下のようなコードが用意されているためCSSは記述せずに済みます。

.fw-bold {
    font-weight: bold;
}

では使い方が分かったところで、Bootstrapの基本的な使い方について見ていきましょう。

Bootstrap_Bootstrapの読み込み

02Bootstrapの読み込み

CDNの仕組み

分散配置されたサーバー

キャッシュ機能

トラフィックの分散

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル