Bootstrap バージョン 5 の始め方（実行可能サンプルあり）

この記事では、Bootstrap の概要を紹介し、Bootstrap 5 の初期化方法を紹介します。実行可能サンプルも公開しているので、ダウンロードして手元で動かして、Bootstrap の使い方に慣れていただければと思います！

Bootstrap とは

Bootstrap（ブートストラップ）は、Twitter 社によって開発された、オープンソースのフロントエンドフレームワークです。主にウェブ開発で使用されています。Bootstrap を使用することで、統一感のあるユーザーインターフェースを素早く開発することができます。また、レスポンシブレイアウトへの対応も効率よく行うことができます。

Bootstrap の特徴

レスポンシブデザイン

画面サイズに応じてレイアウトが自動調整され、デスクトップ、タブレット、スマートフォンなど、デバイスに応じた最適な表示が可能です。

グリッドシステム

グリッドシステムの仕組みにより、複雑なレイアウトも効率よく開発することができます。

豊富なコンポーネント

テーブル、カード、メニュー、入力エディタなど、ユーザーインターフェース開発に求められる様々なパーツが提供されており、パーツを組み合わせることで素早くアプリケーションの外観を開発することができます。

カスタマイズ性

SASS や LESS といった CSS プリプロセッサを使用することで、テーマやスタイルのカスタマイズも可能です。

Bootstrap を使うメリット

Web ユーザーインターフェース開発のベストプラクティスを手軽に利用できる

バージョンアップを重ねながら、長年使われ続けてきており、Web ユーザーインターフェース開発のベストプラクティスが凝縮されています。Bootstrap を使用することで、グリッドシステムの仕組み、各種パーツの設計方法など、ご自身で１からユーザーインターフェースを開発する際にも参考にできるテクニックを学ぶことができます。

Web 上での情報収集が容易

Bootstrap は多くのユーザーがおり、Web での情報収集やトラブルシューティングも容易です。

フリーランスの案件数が多い

Bootstrap は企業案件でも多く採用されており、フリーランスの方にとっても習得しておくことで案件の幅を広げることができます。ぜひ使いこなせるようになりたいフレームワークです。

Bootstrap を使う注意点

Bootstrap は、更新頻度はどれほど高くないものの、定期的にバージョンアップが行われています。採用する Bootstrap のバージョン情報は、公式サイトで都度ご確認ください。

https://getbootstrap.com/docs/versions

Bootstrap の始め方

前置きが長くなりましたが、ここから Bootstrap 5 の始め方を解説していきます。

Bootstrap 公式情報

https://getbootstrap.jp/docs/5.0/getting-started/introduction

CSS の読み込み

head タグ内に、Bootstrap の CSS ファイルを読み込みます。（独自に作成した CSS ファイルがある場合、Bootstrap CSS ファイルの後に読み込んでください。）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブレイアウトの例</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

JavaScript の読み込み

body タグの一番最後に JavaScript ファイルを読み込みます。

<body>
    ...

    <!-- Bootstrap JSと依存関係 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

コンポーネントの初期化

簡易な例として、H1 タグとドロップダウンコンポーネントを初期化します。4 行目が Hello, world! を、6-16 行目がドロップダウンの実装です。ドロップダウンなど、簡単なコードで高機能なコンポーネントを実現できています。

<body>
    <div class="container my-5">
        <div class="row">
            <h1>Hello, world!</h1>

            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bootstrap JSと依存関係 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

実装コード全体

CSS ファイル、JavaScript ファイルの読み込みを踏まえた、実装コードの全体像を示します。このままコード全体をコピーして html ファイルとして実行すると動きます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブレイアウトの例</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container my-5">
        <div class="row">
            <h1>Hello, world!</h1>

            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown button
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bootstrap JSと依存関係 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>