【初心者向け】CDN経由でBootstrapを使用する方法

2024年4月21日 21:27

Bootstrapとは，ウェブサイトやウェブアプリケーションの開発を容易にするためのフリーかつオープンソースのフロントエンドフレームワークです．
HTML，CSS，JavaScriptのコンポーネントを提供し，レスポンシブなウェブデザインを簡単に実装できるように設計されています．

例えるなら，美しいウェブサイトを簡単に作れる道具箱のようなものです．
Bootstrapには，ウェブサイトの見た目を整えるための様々なパーツ（ボタンやメニューバーなど）が入っています．
これらのパーツを組み合わせることで，プロのようなデザインのウェブサイトを，簡単に作ることができます．

また，「グリッドシステム」という便利な機能があり，画面の大きさに合わせて内容を自動で調整してくれます．
例えば，大きな画面では3列に並ぶ写真も、スマホでは1列にきれいに並びます．

具体的な使い方について紹介します．

今回は，CDN（Content Delivery Network）を使用して，Bootstrapを読み込みます．
これは，Bootstrapのファイルをダウンロードせずに，インターネット経由で直接リンクする方法です．

HTMLファイルの<head>セクションにBootstrapのCSSファイルへのリンクを挿入します．
ウェブページの<head>セクションに，Bootstrap CSSのCDNリンクを，</body>タグの直前に，JavaScriptのCDNリンクを配置します．

Bootstrap CSSのCDNリンク

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

JavaScriptのCDNリンク

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

これで，Bootstrapのコンポーネントが利用可能になりました．

例えば，以下のコードで簡単にタブを作ることができます．

<div class="container mt-3">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#about">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#services">事業内容</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#notes">記事</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#contact">お問い合わせフォーム</a>
            </li>
    </ul>
</div>

HTMLファイルの書き方がよくわかっていない方は，以下のファイルをコピペしてとりあえずBootstrapを使ってみましょう〜

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">My WebSite</h1>
    </div>
    <!-- ここにコンテンツを追加 -->
    <div class="container mt-3">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#about">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#services">事業内容</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#notes">記事</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#contact">お問い合わせフォーム</a>
            </li>
        </ul>
    </div>

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

この記事が気に入ったらサポートをしてみませんか？