Bootstrap5を読み込む為の方法を徹底解説

更新 : 2022/12/18

カテゴリー : Bootstrap, プログラミング・Web

by : It is R

Bootstrapは、Webサイトを制作するときに使うフレームワークです。
例えば、レイアウトを整えたり、ボタンを作ったりということが、あらかじめ用意されたクラスを割り振っていくことで、簡単にできてしまいます。

今回は、WebサイトでBootstrap5を読み込む方法を紹介します。

CDNを利用して、Bootstrapを使う方法
Bootstrapを公式サイトからダウンロードして使う方法
パッケージマネージャを使ったダウンロードの方法
まとめ

CDNを利用して、Bootstrapを使う方法

CDNを利用することで、Bootstrapをダウンロードすることなく始めることができます。

まずは以下の<link>タグを、<head></head>の間に入力します。

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

次に以下のコードを、</body>の直前に入力します。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

HTML 全体で、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <title>Bootstrapの使い方</title>
</head>
<body>
    <div class="alert alert-primary" role="alert">
        アラートです
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

また、今回読み込んだ、JSファイル（bootstrap.bundle.min.js）は、PopperというJSライブラリを含んでいます。

もしPopperを別に読み込ませたいのであれば、「bootstrap.min.js」の方を読み込み、さらにその前でPopperを読み込む必要があります。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

Bootstrapを公式サイトからダウンロードして使う方法

つづいて、Bootstrapを公式サイトからダウンロードして使う方法を紹介します。

Bootstrap公式サイト（https://getbootstrap.com/）

上記サイトにアクセスし、「Download」をクリックします。

すると次のような画面が表示されますので、「Download」をクリックします。

これでダウンロードが開始されます。

ダウンロードしたものを解凍すると、「bootstrap-[バージョン]-dist」というフォルダが作られます。
（[バージョン]は、そのバージョンの数字になっています）

記事執筆時点の最新版は5.2.3なので、今回の場合は「bootstrap-5.2.3-dist」となります。
たとえば、この「bootstrap-5.2.3-dist」をindex.htmlファイルと同じ階層に置いた場合、次のようにして呼び出します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrapの使い方</title>
</head>
<body>
    <div class="alert alert-primary" role="alert">
        アラートです
    </div>
    <script src="bootstrap-5.2.3-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

パッケージマネージャを使ったダウンロードの方法

Webサイトの開発に慣れている人は、パッケージマネージャを使った方が、すばやくBootstrapのダウンロードを行なうことができるかもしれません。

npmを使ってインストールする場合

npmを使う場合は、Node.jsが必要になります。
下の記事を参考にしてください。

Windowsの場合

WindowsにNode.jsをインストールする方法

Macの場合

MacにNode.jsをインストールする方法

フォルダを作成し、ターミナルのcdコマンドで、作成したフォルダへ移動します。
その後、npm initでpackage.jsonファイルを作ります。

では、インストールしていきましょう。
以下のコマンドを実行してください。

$ npm install bootstrap

Yarn を使ってインストールする場合

Yarn の詳しい使い方についてはこちらの記事を参考にしてください。

【yarn】インストール方法から使い方まで解説します

フォルダを作成し、ターミナルのcdコマンドで、作成したフォルダへ移動します。
さらに、yarn initでpackage.jsonファイルを作ります。

インストールは以下のコマンドです。

$ yarn add bootstrap

Popper.jsのダウンロード

Popper.js

上記の方法でダウンロードしたBootstrapのJSファイル「bootstrap.bundle.min.js」は、PopperというJSライブラリを含んでいます。
もし、Popperを別に読み込ませたいのであれば、「bootstrap.min.js」の方を読み込みます。

また、Popper.jsは、パッケージマネージャーを使ってダウンロードすることができます。

package.jsonファイルがあるフォルダで、以下のコマンドを実行してください。

npmの場合

$ npm install @popperjs/core

yarnの場合

$ yarn add @popperjs/core

まとめ

Bootstrapは、用意されたスタイルを割り当てて、かんたんにWebサイトをデザインすることができる、フレームワークです。

CDNを使ってダウンロードなしで使い始めることもできますし、公式サイトからダウンロードして使うこともできます。

このシリーズの一覧はこちら

2件のコメント「Bootstrap5を読み込む為の方法を徹底解説」

名無しの新九郎 より:

2017年11月13日 10:00 PM

Rails 5で開発を進めております。
ドロップダウンがなかなか表示されず、四苦八苦しておりました。
しかし主様の記事で無事解決しました。

原因は直前でcdnを読み込んでいなかったことと、読み込む順番でした。
本当にありがとうございました。

返信
1. It is R より:
  
  2017年11月14日 4:09 AM
  
  >名無しの新九郎さん
  コメントありがとうございます。
  無事解決できたとのこと、私も嬉しく思います。
  開発、お互い頑張っていきましょう。
  ありがとうございます。
  
  返信

CDNを利用して、Bootstrapを使う方法

Bootstrapを公式サイトからダウンロードして使う方法

パッケージマネージャを使ったダウンロードの方法

npmを使ってインストールする場合

Yarn を使ってインストールする場合

Popper.jsのダウンロード

まとめ

このシリーズの一覧はこちら

オススメ記事

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

【Unity】Addressableを使って画像をスクリプトから表示する方法

【絶対できる！】Unityでの2Dノベルゲームの作り方を詳しく解説

【解決！】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

Dockerでよく使うコマンドとオプション、その使い方を徹底解説！

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう！

Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門

FC2でブログを始めよう！誰でも簡単にできるブログの作り方

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！ 小学生からのプログラミング入門

Fish shellの使い方。プラグインなしでもここまで可愛くできる！

2件のコメント 「Bootstrap5を読み込む為の方法を徹底解説」

名無しの新九郎 へ返信する コメントをキャンセル

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！　小学生からのプログラミング入門

2件のコメント「Bootstrap5を読み込む為の方法を徹底解説」

名無しの新九郎へ返信するコメントをキャンセル