Bootstrap5の導入方法を図解たっぷりで解説する

【注意】

本講座では、現行最新版（Bootstrap 5）を使用します。
Bootstrap 4の利用についてはこちらの講座をご確認ください。

本講座ではBootstrap5の導入方法から、各種機能の使い方、カスタマイズの方法までを図解たっぷりで解説します。

Bootstrapとは

BootstrapとはもともとあのTwitter社が作ったHTML/CSSフレームワークです。
そこが作ったっていうこともあって、そのクオリティの高さはもうお墨付きです。

いろいろなプロジェクトで採用されていて実績も十分ですね。例えばNintendoも一部のサイトでBootstrapを使ったりもしています。ということはBootstrapを使えばこんなサイトを作れる可能性もあります。すごいですよね。

Bootstrapが使われているサイト例

Super Mario Odyssey


https://www.nintendo.co.uk/Games/Nintendo-Switch/Super-Mario-Odyssey-1173332.html

ACTUS online


https://online.actus-interior.com/

 

Bootstrapって何が便利なの？

1.簡単なコードで美しいデザインを実現

Bootstrapとは、HTML/CSS/JavaScriptで構成されるボタンやナビゲーションメニューなどがテンプレートとして用意されているツールです。テンプレートとは、HTML/CSS/JavaScriptファイルやコードの事です（次回の章で詳しく説明します）。このような予め用意されたファイルやコード使えば、Webサイトのデザインは簡単に素早く行えます。

 

例えばテーブルを作成する時に以下のようなコードを書きますよね。

<table>
    <tr>
        <th>th1</th><th>th2</th><th>th3</th>
    </tr>
    <tr>
        <td>data1</td><td>data2</td><td>data3</td>
    </tr>
</table>

ブラウザで確認するとこんな感じになっていると思います。

それがtableタグにBootstrapで用意されているクラスを加えるだけで

<table class="table table-striped table-bordered">

↓

見事！きれいなテーブルのデザインになってくれました。
追加した「table table-striped table-bordered」クラスには、Bootstrapの方で既にスタイルが準備されています。このためクラスを加えるだけで、自分ではCSSを書かずにこんなきれいなテーブルが簡単にできまうのです。

2.レスポンシブデザインに対応

また、Bootstrapはレスポンシブデザインにも対応しています。
図のようにどのようなデバイスに対しても適切な見え方をしてくれます。

レスポンシブデザインとは

閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。 ~ wikipedia

ユーザーは、PC・タブレット・スマホなど、画面サイズが異なる様々な端末からWebサイトを閲覧します。どの端末で閲覧したとしても、画面表示が崩れることなく美しいレイアウト・デザインを保つには、レスポンシブ対応は必要不可欠といえるでしょう。

ですが、レスポンシブ対応はコードも少々複雑で難しいものかもしれません。
手間も時間もかかってしまいます。そのような時に、Bootstrapを使えば素早く手軽にレスポンシブに対応する事が出来ます。

これは、Bootstrapがレスポンシブに対応する為のHTML/CSS/JavaScriptコードをあらかじめ用意してくれていて、そのコードを使用するだけでレスポンシブが実現できるからです。

また、レスポンシブの他、ナビゲーションバーやボタン、フォームなどサイト制作において必要なパーツもコードをあらかじめ用意してくれています。ですので、それぞれのテンプレート（予め用意されているコード）を組み合わせるだけでサイトが作れてしまうのです。

3.テンプレートもたくさん揃っている

おしゃれなサイトテンプレートも用意されているので手軽にサイト制作が行えます。
サイトテンプレートは、Bootstrapのサイト（英語版）の「Themes」という項目にあります。


https://themes.getbootstrap.com/

上で紹介している公式サイトのテーマは有料のものですが、探せば無料のものも数多くあります。
例えば、以下のサイトではBootstrap5を使った無料テンプレートを紹介しています。
こういったフリーで使えるものがあるととても嬉しいですね。


https://untree.co/cat/bootstrap-5/

Bootstrapの導入方法について

Bootstrapを使う為には、準備が必要になります。導入方法は２種類あります。

  • 各種ファイルをダウンロードする方法
  • HTMLにBootstrapのリンクを記述する方法です（CDNを使った方法）

どちらの方法も読み込むファイルは同じものです。違いは、ほとんどありません。
しかし、リンク記述の方法だとリンク先のサーバーがダウンしていたりする場合にBootstrapが機能せず、サイトの表示が崩れてしまうという可能性があります。

では、この２つの方法を詳しく見ていきましょう。

【実習】CDNでBootstrap5を導入する

こちらは、HTMLファイルにリンクを記述する方法です。
この方法は、CDNと呼ばれています。

HTMLにいくつかの専用リンクを記述するだけで、Bootstrapが使えるようになります。
ダウンロードの方法に比べ、とても手軽に始められることが特徴です。

また、先ほどCDNだとリンク先のサーバーがダウンしていた場合に、サイトが崩れてしまう可能性を挙げました。
しかし、そのようなことは頻繁には起こりませんので、基本的にはこちらの方法を使用していく形でよいでしょう。

1.実習用フォルダ/ファイルを作成

ここからはHTMLファイルを作成して、実際にやってみてください。

まずは、どこかに適当なフォルダを作成しましょう。
フォルダ名はなんでも良いですが今回は「bootstrap_works」という名前にします。

ベースとなるHTMLファイルを制作しましょう。
テキストエディタを起動して新規ファイルを作成し「index.html」という名前で保存してください。

そして以下のコードを記述しましょう。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>

</body>
</html>

 

viewportとは

ここではviewportというmetaタグが設定されています。これはデバイスの大きさに合わせてサイズを決めるというタグになります。例えば横幅のサイズが480pxのスマートフォンでサイトを見に来たら、そのサイズに合わせてくれます。

まずは以下を書いておけば問題ないので、コピペでも良いので書いておきましょう。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

2.CDN版Bootstrap5導入

では、実際にCDN版のBootstrap5導入方法を学んでいきます。

以下URLにアクセスし、「はじめる」のボタンをクリック。
https://getbootstrap.jp/

移動先URL：https://getbootstrap.jp/docs/5.0/getting-started/introduction/

CSSのコードをコピー。
赤い矢印をつけた「copy」をクリックするとコピーできます。

実習用に作ったindex.htmlに、コピーしたコードを貼り付けましょう。
<head> タグから </head>タグの中に貼り付けます。

※bootstrap@5.0.●の●部分は更新によって変わります。Bootstrapサイトのものをそのまま貼り付けて下さい。

Bootstrapのサイトに戻ってください。
CSSの下に、JSという項目があり、使い方が説明されていますね。

以下の <script> のいずれかを、ページの最後の </body> タグの直前に記述してください。

こちらもCSSと同じようにコピーして、自分が作っているhtmlに貼り付けます。
コピーするコードはBundle、赤い矢印をつけたところです。

Bootstrapサイトの指示に従って、 </body> の直前に貼り付けましょう。
全てのリンクを貼り付けたindex.htmlファイルは以下のようになります。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

これで、CDNという方法でのBootstrapの導入は完了です。

 

ダウンロードしてBootstrap5を使えるようにするには？

必要なCSS、Javascriptのファイルをダウンロードして、それを導入してみます。
こちらはレッスンと一緒に実行しなくても構いません。

 

1.ファイルのダウンロード

https://getbootstrap.jp/にアクセスし、赤枠部分「Download」を押下します。

ページが切り替わります。

移動先URL：https://getbootstrap.jp/docs/5.0/getting-started/download/

 

「コンパイルされたCSSとJS」項目下にある、「ダウンロード」を押下します。
ファイルのダウンロードが開始されます。

 

2.ダウンロードしたファイルを読み込む

ダウンロードされたzipフォルダを全て展開してください。
展開されたフォルダ内を見てみると「css」ファイルや「js」ファイルが入っています。
これらのファイルを読み込むためにHTMLファイルにリンクを記述します。

※zipファイルについて→zipフォルダは圧縮されている為、解凍用のソフトが必要です。有料のものもありますが、Bootstrapのzipファイルであれば無料ソフトでも解凍可能なものも複数あります。解凍ソフトがない方は「窓の杜　解凍」などで検索して探してみるのも良いと思います。

 

では、解凍したBootstrapのファイルを読み込ませましょう。
まず、空のファイルに以下のように記述して下さい。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>

</body>
</html>

 

cssファイルとjsファイルを読み込むためのリンクを書いていきます。
Bootstrapフォルダには多くのファイルが含まれていますが、基本的にはCDNと同じく「bootstrap.min.css」「bootstrap.bundle.min.js」の２つで良いです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>


  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

index.htmlやdownload.htmlなど、お好きな名前をつけて保存します。

注意！

上記の記述はhtmlファイルと同階層に、cssフォルダ/jsフォルダを移動させた場合のパスです。
階層構成は下図のイメージです。

パスは、cssやjsファイルの場所に合わせて変更してください。

◎まとめ

・Bootstrapとは、ボタンやフォーム、ナビゲーションメニューなどがテンプレートとして用意されているツールである

・Bootstrapを使えば、簡単に素早くWebデザイン・制作を行う事が出来る

・Bootstrapの導入には、２種類の方法がある

・CDNというHTMLファイルに専用のリンクを記述する方法

・CSSファイル等をダウンロードして読み込む方法

今回作成した「bootstrap_works」フォルダ、その中にあるCDNリンクを記述したindex.htmlは次回以降も使います。
保存しておいて下さい。

次のレッスン レッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×