Bootstrapのインストール方法を理解しよう
このレッスンでは主に、Bootstrap のインストール方法について解説していきます。
このレッスンの目標
- Bootstrap のインストール方法を理解する
- 解説がなくても、自分で Bootstrap を使う準備ができる
- 公式リファレンスの重要性が理解できる
Bootstrap をインストールする２つの方法
それでは早速、Bootstrap のインストール方法について確認していきましょう。
Bootstrap をインストールする方法は、主に 2 つあります。
- Bootstrap 公式サイトからダウンロードしたファイルを利用する方法
- CDN を利用して、読み込み先の HTML ファイルに Bootstrap のリンクを記述する方法
まず、公式サイトからダウンロードしたファイルを利用する方法ですが、この方法は自分のパソコン（サイト公開する時はレンタルサーバー上）に、Bootstrap 本体のファイルをダウンロードして利用するシンプルな方法です。
次に、CDN を利用した方法ですが、この方法は、まず「CDN」の仕組みについて理解する必要があります。
CDN（コンテンツデリバリネットワーク）を簡単に説明すると、インターネット上にあらかじめ用意されているコンテンツ（CSS ファイル、JS ファイル、画像ファイルなど）を配信するために用意されたネットワークのことです。
CDN を利用すると、インターネット上にあるファイルを直接参照して、Bootstrap を利用できるようになります。
参考：CDN とは何か？CDN を利用するメリットを図を使ってわかりやすく解説
※ レッスンでは、学習のために２つのパターンで Bootstrap をインストール方法を学びます。
「ファイル経由」で Bootstrap をインストールする
Bootstrap をインストールする方法の一つとして、ここでは「ファイル経由」で Bootstrap を利用する手順を解説します。
ファイル経由で Bootstrap を利用する方法は、以下の手順になります。
- Bootstrap の動作確認用ファイルを作成する
- 公式サイトから Bootstrap 本体のファイルをダウンロードする
- ダウンロードした Zip ファイルを解凍して、必要な CSS ファイル、JS ファイルをコピーする
- 公式サイトから jQuery 本体のファイルをダウンロードして、JS フォルダへコピーする
- index.html に Bootstrap と jQuery を読み込む
- index.html に Bootstrap のサンプルコードを記述して動作確認する
実際に同じ手順で作業を進めながら、Bootstrap のインストール作業を進めていきましょう。
Bootstrap の動作確認用ファイルを作成する
ご自身の PC 上の任意の場所に、以下の構成でファイルとフォルダを作成してください。
- Bootstrap 関連のファイルをまとめる
Bootstrapフォルダを作成 - Bootstrap フォルダ配下に CSS ファイルをまとめる
cssフォルダを作成 - Bootstrap フォルダ配下に JavaScript ファイルをまとめる
jsフォルダを作成 - Bootstrap フォルダ配下に 演習用の HTML ファイル
index.htmlを作成
フォルダ構成
公式サイトから Bootstrap 本体のファイルをダウンロードする
次に、Bootstrap 公式サイトから必要なファイルをダウンロードしてきます。
以下の公式サイト URL にアクセスして、「ダウンロード」ボタンを押下します。
Bootstrap のダウンロードページに遷移したら、「ダウンロード」ボタンを押下して Bootstrap 本体のファイルをダウンロードします。
以下のような Zip ファイルがダウンロードされたら OK です。
ダウンロードした Zip ファイルを解凍して、必要な CSS ファイル、JS ファイルをコピーする
Bootstrap 本体の Zip ファイルを解凍すると、CSS フォルダと JS フォルダがあるので、そこから必要なファイルをコピーしていきます。
ダウンロードフォルダの中には、多くの CSS ファイルと JavaScript ファイルがありますが、Bootstrap を利用する際に必要なのは以下の 2 つです。
- bootstrap-4.5.0-dist フォルダ > css フォルダ > bootstrap.css
- bootstrap-4.5.0-dist フォルダ > js フォルダ > bootstrap.bundle.js
事前に作成した Bootstrap フォルダ内の css と js フォルダに上記ファイルをそれぞれコピーしてください。
以下のようになっていれば OK です。
【補足】
Bootstrap 本体のフォルダにはいくつかのファイルが存在しますが、Bootstrap の一番多くの機能を含んでいるのが bootstrap.css と bootstrap.bundle.js です。そのため、Bootstrap 利用時はこの 2 つのファイルを読み込むだけで Bootstrap の各機能が使用できるようになります。
また、同じ名前のファイルで末尾に「.min」が付いているファイルは圧縮版といい、改行やコメント、スペースなどを除去して圧縮（Minify）された軽量版となっています。
改行やスペースなどが省略されているため、通常版よりもページの読み込みスピードが高速化されるなどのメリットがあります。
公式サイトから jQuery 本体のファイルをダウンロードして、JS フォルダへコピーする
先程コピーしてきた bootstrap.js は 内部の処理で jQuery というライブラリ（JavaScript の処理を使いやすく纏めたツール）を利用しているため、jQuery 本体のファイルも読み込むように設定が必要です。
まずは、以下の jQuery 公式のダウンロード URL にアクセスして、「Download the uncompressed, development jQuery 3.5.1」のリンクを押下します。
リンクをクリックするとソースコードの画面が表示されるので、該当ページ上で右クリックメニューから「別名で保存」を選択します。
以下のように保存ダイアログが表示されたら、ファイル名はそのままで jQuery のファイルをダウンロードします。
最後にダウンロードした jQuery ファイルを、事前に作成した Bootstrap フォルダ内の js フォルダにコピーしてください。
以下のようになっていれば OK です。
これで、ファイル経由で Bootstrap を利用する準備が整いました。
index.html に Bootstrap と jQuery を読み込む
次に、準備した Bootstrap と jQuery を index.html から読み込むようにソースコードを記述していきます。
最終的な完成版のコードはこちらです。
index.html（完成コード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrapの導入</title>
<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!-- Bootstrapの動作確認 -->
<h1 class="text-primary">これは見出しタグです。</h1>
<!-- jQueryとBootstrapのJavaScript読み込み -->
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>
それでは、上記の完成コードを目指して、ステップバイステップでコーディングを進めていきましょう。
まずは、index.html に雛形となる以下の HTML コードを記述します。
index.html（雛形）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrapの導入</title>
</head>
<body>
</body>
</html>
次に、HTML の <head> タグの中に Bootstrap の CSS を読み込む以下のコードを追加していきます。
index.html（追加コード）
<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="css/bootstrap.css">
CSS の次は、jQuery と Bootstrap の JavaScript ファイルを </body> タグの直前に記述します。
index.html（追加コード）
<!-- jQueryとBootstrapのJavaScript読み込み -->
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
最終的に、index.html の内容が以下のようになっていれば OK です。
index.html（見本コード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrapの導入</title>
<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!-- jQueryとBootstrapのJavaScript読み込み -->
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>
index.html に Bootstrap のサンプルコードを記述して動作確認する
それでは、ファイル経由で Bootstrap が正しく利用できるか確認してみましょう。
index.html の <body> タグの中に以下の見出しタグを追加してください。
index.html（追加コード）
<!-- Bootstrapの動作確認 -->
<h1>これは見出しタグです。</h1>
コードを追加したら、ブラウザで表示結果を確認してみましょう。
以下のよう <h1> タグに記述した内容が表示されていれば OK です。
それでは Bootstrap の動作確認として、クラス名を付与して見た目が変わることを確認していきます。
先程追加した <h1> タグに以下のクラスを追加します。
index.html（追加コード）
class="text-primary"
🔻 タグ全体の実装イメージ
<h1 class="text-primary">これは見出しタグです。</h1>
もう一度表示結果を確認してみましょう。
以下のように文字の色が変わっていれば、Bootstrap がうまく利用できている証拠です！
通常、Web ページの見た目を変えるには CSS のコードを記述する必要がありますが、Bootstrap を利用することによって、CSS コードを自分で書かずにスタイリングできることができます。
ここまでの完成コードをあらためて提示します。
index.html（完成コード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrapの導入</title>
<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<!-- Bootstrapの動作確認 -->
<h1 class="text-primary">これは見出しタグです。</h1>
<!-- jQueryとBootstrapのJavaScript読み込み -->
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>
【応用知識】
先程追加したコードは、 Bootstrap で用意されている「文字色を変えるクラス名」でした。
上記以外にも、Bootstrap では以下のようなクラス名が用意されているので、どのように変化するか、実際にクラス名を書き換えながら確認してみましょう。
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
これで、ファイル経由による Bootstrap のインストール方法の解説は以上となります。
「CDN 経由」で Bootstrap をインストールする
Bootstrap をインストールする方法の一つとして、ここでは「CDN 経由」で Bootstrap を利用する手順を解説します。
ここでも、実際に同じ手順で作業を進めながら、Bootstrap が利用できるか確認してみましょう。
CDN 経由で Bootstrap を利用する方法は、以下の手順になります。
- Bootstrap の動作確認用に bootstrap.html ファイルを作成する
- Bootstrap 公式サイトから スターターテンプレートをコピーする
- bootstrap.html に Bootstrap のサンプルコードを記述して動作確認する
Bootstrap の動作確認用に bootstrap.html ファイルを作成する
はじめに、CDN 経由で Bootstrap が利用できるか確認するために、専用の HTML ファイルを作成します。
ファイル経由で利用した index.html と同じフォルダ階層で bootstrap.html を作成してください。
Bootstrap 公式サイトから スターターテンプレートをコピーする
次に、Bootstrap 公式サイトからスターターテンプレートをコピーしていきます。
以下のページにアクセスして、コードをコピーしてください。ソースコードの右上にある「Copy」の文字をクリックするとコード全体がコピーされます。
公式サイトのスターターテンプレートをコピーして、事前に用意した bootstrap.html に貼り付けたら準備完了です。
この状態で一度、bootstrap.html の表示結果をブラウザで確認してみましょう。
以下のように表示されたら OK です。
bootstrap.html（完成コード）
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>
※上記の完成コードは必ずしも最新の Bootstrap テンプレートコードと一致する訳ではないので、バージョンによってはコードに差分がでる可能性があります。
bootstrap.html に Bootstrap のサンプルコードを記述して動作確認する
ファイル経由の場合と同じように、Bootstrap であらかじめ用意されているクラス名を付与して見た目が変わることを確認していきます。
スターターテンプレートに記述されていた <h1> タグに以下のクラスを追加します。
bootstrap.html（追加コード）
class="text-primary"
🔻 タグ全体の実装イメージ
<h1 class="text-primary">これは見出しタグです。</h1>
もう一度表示結果を確認してみましょう。
以下のように文字の色が変わっていれば、Bootstrap がうまく利用できている証拠です。
これで、CDN 経由による Bootstrap のインストール手順の解説は終わりです。
Bootstrap の公式リファレンスを活用しよう
次のレッスンからは、公式リファレンスを参照する機会が多くなるため、ここでは、Bootstrap の公式リファレンスの活用について補足させて頂きます。
公式リファレンスの大切さ
コーディングに慣れるまでは、公式リファレンスを参照することが難しく感じるかもしれません。
しかし、Bootstrap に限らず、プログラミングの世界では「公式リファレンスを一番最初に確認すること」が重要です。
というのも、技術革新のスピードが早いプログラミング技術は、常に情報がアップデートされているため、一般の方が公開している技術記事は情報が古くなっていたり、実際には間違った解説になっていることもあるからです。
そのため、Web 制作コースのチュートリアルでは、この公式リファレンスを読む習慣をつけられるように、各レッスンごとに公式リファレンスのリンクを記載しています。
慣れるまでは難しく感じるかも知れませんが、積極的に公式リファレンスのページも読み込むようにして、実践的なスキルを習得してきましょう。
公式リファレンスと一般の技術記事の比較
参考までに、公式リファレンスと一般的な記事の特徴をまとめてみました。
| 公式リファレンス | 技術ブログなどで紹介された記事 |
|---|---|
| 情報の鮮度：★★★ | 情報の鮮度：★☆☆ |
| 情報の信頼性：★★★ | 情報の信頼性：★☆☆ |
| わかり易さ：★☆☆ | わかり易さ：★★★ |
プログラミング関連の調べ物をするときに良く見かける、Qiita などのエンジニア向けブログで紹介されている技術記事は、公式リファレンスなどが公開した一次情報をベースに執筆されています。
これらは、公式リファレンスが発信した一次情報を参考に発信される情報のため、二次情報と呼ばれます。
そのような二次情報は、初心者でも理解しやすいように「わかり易く解説されていること」が一番の特徴ですが、誰か別の人が公式リファレンスを読み、それをアウトプットしない限りは得られない情報です。
また、もし誤った理解で解説された二次情報を信じてしまい、間違った理解をするのも危険な学習行為です。
情報の鮮度と、信頼性の高い公式リファレンスの解説をまずは確認して、そこから知識の深堀りとして参考記事を確認するように意識してください。
以下の参考記事は、公式リファレンスを読めるようになるポイントが紹介されているのでオススメです。
チュートリアル完走後には、自分自身でリファレンスを読みながらコーディングできることを目指していきましょう！
まとめ
このレッスンでは Bootstrap の 2 つのインストール方法を学びました。
また、以下の目標が達成できているかセルフチェックしてください。
- Bootstrap のインストール方法を理解している
- 解説がなくても、自分で Bootstrap を使う準備ができる
- 公式リファレンスの重要性が理解している
基本的には CDN 経由で Bootstrap を利用できれば問題ありませんが、特定の条件下ではファイル経由を利用する場合も想定されるため、どちらの利用方法も使いこなせるようになっておきましょう。
最後に、レッスンで確認した Bootstrap 公式のリファレンスをまとめておきますので、このレッスンで学んだことを復習する際には、以下の公式リファレンスも参考にしてください。
【公式リファレンス】