Bootstrap5の導入方法を図解たっぷりで解説する | SkillhubAI（スキルハブエーアイ）

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

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

Bootstrapとは

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

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

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

Super Mario Odyssey

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

ACTUS online

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

Bootstrapって何が便利なの？

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

file

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>

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

file

Bootstrapを導入すると、Bootstrapが用意しているCSSクラスが使えます。 以下は、tableタグにBootstrapで用意されているクラスを加えたコードです。

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

　　↓

file

見事！ これだけで、きれいなテーブルのデザインになってくれました。

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

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

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

file

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

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

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

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

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

file

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

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

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

file https://themes.getbootstrap.com/

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

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

Bootstrapの導入方法について

Bootstrapを使う為には、準備が必要になります。導入方法は２種類あります。 * 各種ファイルをダウンロードする方法 * HTMLにBootstrapのリンクを記述する方法（CDNを使った方法）

file

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

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

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

これから、HTMLファイルにリンクを記述する方法を一緒に試してみましょう。 この方法は、CDN（Contents Delivery Network）と呼ばれています。

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

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

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

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

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

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

file

2.CDN版Bootstrap5導入

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

2-1.公式ドキュメントの確認

以下のURLから、Bootstrapの公式サイトを開いてみましょう。

URL：https://getbootstrap.jp/

紫色のボタン（ドキュメントを読む）をクリックして開いてください。

以下のようなページに遷移します。

URL：https://getbootstrap.jp/docs/5.3/getting-started/introduction/

◆Boostrapのバージョンについて

選択バージョンにより、docsの後の「5.3」という数字部分が変わります。

バージョンアップにより、クラス名の一部変更、ドキュメントの見た目に差が生じる場合があります。「解説と違っていて、わからなくなる」という方は、上記URLから直接v5.3のページを開いて進めてください。

2-2.CDNコードを貼り付ける

ドキュメントの“すぐに始める”の手順に従って、CDNを導入していきましょう。

ちなみに、ドキュメントとは仕様書・説明書のようなものです。 Boostrapの機能を使う方法が説明されているので、よく開くことになるでしょう。 ブックマーク登録しておくと便利です。

CDNの導入

1はindex.htmlを新規作成せよ、という内容なのでスキップ。

2の“BootstrapのCSSとJSを入れます。”という部分を見てください。 BootstrapのCDN版を使うためには、以下２つのファイルを読み込ませるためのタグが必要です。

  • CSSファイルを読み込む<link>タグ（黄色ハイライト）
  • JSファイルを読み込む<script>タグ（水色ハイライト）

URL：https://getbootstrap.jp/docs/5.3/getting-started/introduction/

先程作ったindex.htmlはまだ空ですので、掲載されているコードを丸ごとコピー・アンド・ペーストしましょう。 赤い矢印をつけたアイコン「Copy to Clipboard」をクリックすると、楽にコピーが出来ます。

2行目のhtmlタグにあるlang=enは「このページの言語は英語です」の意味です。 日本語ページを作る場合はlang=jaに変更しておくと良いしょう。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

これで、CDNという方法でのBootstrapの導入は完了です。 今回作成したbootstrap5_courseフォルダ、CDNリンクを記述したindex.htmlは次回以降も使います。 保存しておいて下さい。

viewport とは

HTMLの5行目に入っている<meta name="viewport" ...>という記述。 これはviewportと呼ばれる、デバイスの大きさに合わせてサイズを決めるタグになります。

例えば、横幅のサイズが480pxのスマートフォンでサイトを見に来たら、そのサイズに合わせてくれます。 最初のうちはあまり考えず、上のコードにも含まれていた以下の１行を書いておけば問題ありません。

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

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

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

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

左側のメニューで、Downloadのページを開きます。 CDN版と同じ条件でBootstrapを使うのであれば、一番上“コンパイルされたCSSとJS”でOKです。 ダウンロードボタンをクリックして、ファイルを入手しましょう。

URL：https://getbootstrap.jp/docs/5.3/getting-started/download/

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

ダウンロードされたzipフォルダを解凍してください。

解答したフォルダの中には「css」「js」フォルダに分かれています。 そして、それぞれのフォルダの中にはけっこう沢山ファイルが入っているはずです。

ただ、このファイルをすべてHTMLファイルから読み込む必要はありません。 CSSファイルとJSファイル、1つずつ読み込めばOKです。

  • CSS：bootstrap.min.css もしくは bootstrap.min.css のどちらか
  • JS：bootstrap.bundle.min.js もしくは bootstrap.bundle.js のどちらか

file

記述例

以下のような階層構造の制作フォルダ「bootstrap5_dl」で、test.htmlを作る場合のコードを例として紹介します。

file

Bootstrapを使うのに必要な記述自体はCDNとそう変わりません。 ファイルのパスが違うくらいの感覚ですね。

  • <head>内でlinkタグを使ってCSSファイルを読み込む
  • </body>の上にscriptタグでJSファイルを読み込む

test.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap test</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <h1>DL版のテストです</h1>

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

◎まとめ

  • Bootstrapとは、ボタンやフォーム、ナビゲーションメニューなどがテンプレートとして用意されているツールである
  • Bootstrapを使えば、簡単に素早くWebデザイン・制作を行う事が出来る
  • Bootstrapの導入には、２種類の方法がある
  • CDNというHTMLファイルに専用のリンクを記述する方法
  • CSSファイル等をダウンロードして読み込む方法
次のレッスン
レッスン一覧へ