6日でできる 新HTML&CSS入門｜Bootstrapの導入方法

デザインを一から作らなくても、整ったWebページは作れる。
Bootstrapを導入して、ボタン・余白・レイアウトをすばやく美しく整えよう。

WebサイトやWebアプリを作るとき、見た目を整えるCSSをすべて自分で書くのは大変です。ボタンの色、余白、文字サイズ、フォームの見た目、スマートフォン対応のレイアウトなど、細かいデザイン調整には多くの時間がかかります。

そこで便利なのがBootstrapです。Bootstrapは、Webページ制作でよく使うCSSやJavaScriptの機能をまとめたフロントエンドフレームワークです。ボタン、ナビゲーションバー、カード、フォーム、グリッドレイアウトなど、あらかじめ用意された部品をclassで指定するだけで、整ったデザインをすばやく作れます。

Bootstrapを使う方法は、大きく分けて2つあります。1つはCDNを使ってインターネット上のBootstrapファイルを読み込む方法、もう1つはBootstrapのCSSやJavaScriptファイルをダウンロードして、自分のプロジェクト内に配置する方法です。Bootstrap公式ドキュメントでも、コンパイル済みのCSSとJavaScriptをダウンロードする方法や、CDN経由で読み込む方法が案内されています。

この記事では、Bootstrapの基本、導入方法、ファイル配置、HTMLへの読み込み方、よく使うclass、コンポーネントの考え方を、サンプルHTMLを使って分かりやすく解説していきます。

Bootstrapとは何か

Bootstrapは、HTML、CSS、JavaScriptを使ったWebページ制作を効率化するためのフロントエンドフレームワークです。フロントエンドとは、ユーザーがブラウザで見る画面側のことです。Bootstrapを使うと、あらかじめ用意されたデザインや部品を組み合わせて、見栄えのよいページを作りやすくなります。

Bootstrapでは、btn、container、row、col、navbar、form-controlなどのclassをHTMLに指定します。すると、Bootstrap側で用意されているCSSが適用され、ボタンやレイアウト、フォームなどが整った見た目になります。

用語概要
BootstrapCSSとJavaScriptがセットになったフロントエンドフレームワーク
コンポーネントボタン、ナビゲーション、カード、フォームなどの部品
グリッド行と列を使ってレイアウトを組む仕組み
レスポンシブ画面幅に応じてレイアウトを調整する考え方
classBootstrapのデザインを適用するためにHTMLへ指定する名前

Bootstrapは、デザインをまったく考えなくてもよい道具ではありません。あくまで、よく使うデザインやレイアウトを効率よく作るための土台です。基本的なHTMLとCSSの知識を持ったうえで使うと、より分かりやすく扱えます。

図1：BootstrapはWebページ制作を助ける部品集

この図から分かること

Bootstrapは、Webページ制作でよく使うデザイン部品をまとめたフレームワークです。ボタン、フォーム、ナビゲーション、レイアウトなどをclassで指定するだけで、整った見た目を作りやすくなります。CSSをすべて一から書かなくても、基本的なデザインを短時間で整えられる点が大きな特徴です。

Bootstrapを使う理由

Bootstrapを使うと、Webページ制作を効率化できます。特に、学習段階や短時間で画面を作りたいとき、管理画面や試作ページを作るときに便利です。

Bootstrapを使う理由説明
デザインを整えやすいボタンやフォームなどに標準の見た目が用意されている
レイアウトを作りやすいcontainer、row、colなどでグリッドレイアウトを組める
レスポンシブ対応しやすい画面幅に応じたレイアウト調整を行いやすい
導入が簡単CSSとJavaScriptを読み込むだけで使い始められる
コンポーネントが豊富ナビゲーション、カード、アラート、モーダルなどが使える
無料で利用できるオープンソースのフレームワークとして利用できる

Bootstrapを使うと、ボタンの色や余白、フォームの幅などを自分で細かく指定しなくても、一定の品質のデザインをすばやく作れます。もちろん、必要に応じて自分のCSSを追加して、色や余白を調整することもできます。

Bootstrap 5の特徴

現在よく使われるBootstrap 5では、以前のバージョンよりもモダンなWeb制作に合わせた構成になっています。Bootstrap 5では、JavaScriptプラグインが通常のJavaScriptで書き直され、jQueryへの依存がなくなりました。

特徴解説
jQuery不要Bootstrap 5ではjQueryに依存せずにJavaScript機能を使える
レスポンシブ対応スマートフォン、タブレット、PCに対応しやすい
グリッドが使いやすい行と列で柔軟にレイアウトを作れる
コンポーネントが豊富ボタン、カード、ナビゲーション、フォームなどを利用できる
CDNで導入しやすいCSSとJavaScriptをURLから読み込める

Bootstrap 5を使う場合は、古いBootstrap 3やBootstrap 4の書き方と異なる部分があるため、学習するときはバージョンを確認することが大切です。サンプルコードをコピーするときも、どのバージョン向けのコードなのかを見ておきましょう。

Bootstrapの導入方法は2種類ある

Bootstrapを使うには、HTMLにBootstrapのCSSとJavaScriptを読み込ませます。導入方法は主に2つあります。

方法概要利点
CDNで利用Web上にあるBootstrapファイルを読み込むダウンロード不要で始めやすい
ダウンロードして利用Bootstrapファイルを自分のプロジェクト内に置くオフラインでも使いやすく、ファイルを管理しやすい

Bootstrap公式ドキュメントでは、CDNを使ってCSSとJavaScriptを読み込む方法が紹介されています。ビルド作業なしで使い始められるため、学習や簡単なサンプル作成に向いています。

一方、ダウンロードして利用する方法では、bootstrap.min.cssやbootstrap.min.jsなどのファイルを自分のプロジェクト内に配置します。インターネットに接続していない環境で確認したい場合や、ファイル構成を手元で管理したい場合に便利です。

CDNで利用する方法

CDNとは、インターネット上に置かれたファイルを読み込む仕組みです。BootstrapをCDNで使う場合、HTMLのhead内にCSSのlinkを追加し、bodyの終わり付近にJavaScriptのscriptを追加します。

CDNを使うと、Bootstrapのファイルを自分でダウンロードしなくても使えます。学習を始めるだけなら、とても手軽な方法です。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

ただし、CDNはインターネット経由でファイルを読み込むため、オフライン環境では使えません。また、実務では公式ドキュメントで案内されているintegrityやcrossoriginを含むコードを使うこともあります。学習段階では、CSSとJavaScriptを読み込む位置を理解することから始めましょう。

ダウンロードして利用する方法

Bootstrapをダウンロードして使う場合は、公式サイトからファイルを入手し、プロジェクトフォルダー内に配置します。基本的には、CSSファイルをcssフォルダーへ、JavaScriptファイルをjsフォルダーへ入れます。

Bootstrapファイルの入手方法

Bootstrapを利用するには、公式サイトからCSS/JSファイルを入手する必要があります。

公式ダウンロードサイト：https://getbootstrap.jp/

Bootstrapの公式サイトから、ダウンロードのリンクをクリックします。

「ダウンロード」ボタンをクリックして、BootstrapのZIPをダウンロードします。

フォルダー構成の例は次のとおりです。

project
├─ css
│  └─ bootstrap.min.css
├─ js
│  └─ bootstrap.min.js
└─ lesson52_1.html

HTMLでは、次のように読み込みます。

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap.min.js"></script>

この方法では、CSSとJavaScriptのファイルが自分のプロジェクト内にあるため、ファイルパスを正しく指定する必要があります。css/bootstrap.min.cssやjs/bootstrap.min.jsのように、HTMLから見た位置を正しく書くことが大切です。

図2：BootstrapはCSSとJavaScriptを読み込んで使う

この図から分かること

Bootstrapを使うには、CSSとJavaScriptをHTMLに読み込ませます。CDNを使う場合はURLから読み込み、ダウンロードして使う場合はプロジェクト内のcssフォルダーやjsフォルダーから読み込みます。どちらの方法でも、CSSはhead内、JavaScriptはbodyの終わり付近に配置するのが基本です。

CSSとJavaScriptを読み込む位置

BootstrapのCSSは、HTMLのhead内で読み込みます。CSSはページの見た目に関係するため、ブラウザが本文を表示する前に読み込めるようにします。

<head>
  <meta charset="UTF-8">
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

BootstrapのJavaScriptは、bodyの閉じタグの直前に置くことが多いです。ページのHTMLを読み込んだあとにJavaScriptを読み込むことで、表示への影響を抑えやすくなります。

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

Bootstrapのすべての機能でJavaScriptが必要なわけではありません。ボタンの見た目や余白、グリッドレイアウトなどはCSSだけで使えます。一方、モーダル、ドロップダウン、カルーセルなどの動きがあるコンポーネントではJavaScriptが必要になります。

viewportを設定する理由

Bootstrapはレスポンシブ対応を前提に使われます。そのため、HTMLのhead内にはviewportのmetaタグを入れます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewportを設定すると、スマートフォンやタブレットなどの画面幅に合わせてページを表示しやすくなります。Bootstrapのグリッドやレスポンシブ機能を正しく活用するためにも、viewportは忘れずに記述しましょう。

指定役割
width=device-widthページ幅を端末の画面幅に合わせる
initial-scale=1.0初期表示倍率を1にする

viewportがないと、スマートフォンでページが縮小表示されたり、意図したレイアウトにならなかったりすることがあります。Bootstrapを使うHTMLでは、基本設定として入れておくと安心です。

Bootstrapを使ったサンプルHTML

ここでは、ダウンロードしたBootstrapファイルをローカルに配置して使うサンプルを作ります。cssフォルダーにbootstrap.min.css、jsフォルダーにbootstrap.min.jsがある想定です。

ファイル名： lesson52_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap導入サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="mt-4 mb-3">Bootstrapで作る最初のページ</h1>

    <p class="lead">これはBootstrapを読み込んだ基本サンプルです。containerやbtnなどのclassを使って、余白やボタンの見た目を整えています。</p>

    <button class="btn btn-primary">詳しく見る</button>
    <button class="btn btn-success">申し込む</button>
  </div>

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

ブラウザの表示例

ブラウザで表示すると、画面の中央寄りに余白が整った本文エリアが表示されます。h1にはmt-4とmb-3によって上下の余白が付き、pにはleadによって少し目立つ本文スタイルが適用されます。

ボタンにはbtn、btn-primary、btn-successが指定されています。btnでボタンの基本デザインが適用され、btn-primaryで青系のボタン、btn-successで緑系のボタンになります。自分で細かくCSSを書かなくても、Bootstrapのclassを指定するだけで整ったボタンを表示できます。

サンプルHTMLのポイント

このサンプルで特に大切なのは、BootstrapのCSSを読み込んでから、HTML内でBootstrapのclassを使っていることです。

コード役割
link href="css/bootstrap.min.css" rel="stylesheet"BootstrapのCSSを読み込む
meta name="viewport"レスポンシブ表示のための基本設定
div class="container"中央寄せと左右の余白を持つレイアウト枠を作る
h1 class="mt-4 mb-3"見出しに上と下の余白を付ける
p class="lead"文章を少し目立つ導入文のように表示する
button class="btn btn-primary"青系のBootstrapボタンを作る
button class="btn btn-success"緑系のBootstrapボタンを作る
script src="js/bootstrap.min.js"BootstrapのJavaScriptを読み込む

Bootstrapでは、classの組み合わせによって見た目を調整します。たとえば、btnだけではボタンの基本形、btn-primaryを追加すると青系、btn-successを追加すると緑系になります。このように、classを足していく感覚でデザインを作ります。

containerは主要レイアウトの枠

containerは、Bootstrapでよく使うレイアウト用classです。ページの内容を中央寄せにし、左右に適度な余白を作ります。

<div class="container">
  ページの内容
</div>

containerを使わずに文字をそのまま配置すると、画面の端に寄って読みにくくなることがあります。containerを使うと、画面幅に応じて適度な最大幅と余白が設定され、読みやすいレイアウトになります。

class役割
container中央寄せの固定幅風レイアウト枠
container-fluid画面幅いっぱいに広がるレイアウト枠
rowグリッドの行を作る
colグリッドの列を作る

ページ全体の主要な内容はcontainerで囲むと、Bootstrapらしい整ったレイアウトになります。

btnとbtn-primaryでボタンを作る

Bootstrapの代表的な使い方のひとつがボタンです。buttonタグにbtnと色を表すclassを指定することで、整ったデザインのボタンを作れます。

<button class="btn btn-primary">送信する</button>
class役割
btnボタンの基本デザインを適用する
btn-primary主要操作向けの青系ボタンにする
btn-success成功や申し込みなどに使いやすい緑系ボタンにする
btn-danger削除や警告に使いやすい赤系ボタンにする
btn-outline-primary枠線タイプの青系ボタンにする

Bootstrapでは、classを変えるだけでボタンの印象を切り替えられます。大切な操作にはbtn-primary、成功や完了に関係する操作にはbtn-success、削除にはbtn-dangerなど、意味に合わせて選ぶと分かりやすくなります。

図3：Bootstrapのclassで部品の見た目を変える

この図から分かること

Bootstrapでは、HTMLにclassを指定することで部品の見た目を変えられます。btnを指定するとボタンの基本形になり、btn-primaryを加えると青系のボタンになります。container、form-control、row、colなども、BootstrapのCSSが用意しているデザインやレイアウトを適用するためのclassです。

余白を調整するclass

Bootstrapでは、CSSを自分で書かなくても余白を調整できるclassが用意されています。サンプルではmt-4とmb-3を使っています。

<h1 class="mt-4 mb-3">Bootstrapで作る最初のページ</h1>
class意味
mt-4margin-topを付ける
mb-3margin-bottomを付ける
ms-2左側の余白を付ける
me-2右側の余白を付ける
p-3全方向にpaddingを付ける

mはmargin、pはpaddingを表します。tはtop、bはbottom、sはstart、eはendを表します。数字が大きくなるほど余白が大きくなります。

Bootstrapの余白classを使うと、ちょっとした余白調整のためにCSSを追加しなくても済みます。学習段階では、よく使う余白classを少しずつ覚えると便利です。

フォームにはform-controlを使う

Bootstrapでは、入力欄にも専用のclassがあります。inputやtextareaにform-controlを指定すると、幅や余白、枠線が整った入力欄になります。

<input type="text" class="form-control" placeholder="お名前を入力">

<textarea class="form-control" rows="4" placeholder="お問い合わせ内容を入力"></textarea>
class役割
form-controlテキスト入力欄やtextareaの見た目を整える
form-labelラベルの見た目を整える
form-selectセレクトボックスの見た目を整える
form-checkチェックボックスやラジオボタンを整える

フォームはユーザーが直接操作する部分なので、見た目や余白が重要です。Bootstrapのフォームclassを使うと、入力欄の幅や枠線が整い、見やすいフォームを作りやすくなります。

グリッドレイアウトの基本

Bootstrapの大きな特徴のひとつがグリッドレイアウトです。rowとcolを使うことで、画面を行と列に分けてレイアウトできます。

<div class="container">
  <div class="row">
    <div class="col">左の内容</div>
    <div class="col">右の内容</div>
  </div>
</div>

この例では、containerの中にrowを作り、その中に2つのcolを置いています。画面幅に応じて列の幅が調整され、レスポンシブなレイアウトを作りやすくなります。

class役割
rowグリッドの行を作る
col自動幅の列を作る
col-612分割のうち6幅の列を作る
col-md-6中くらい以上の画面で6幅の列にする
g-3グリッド間の余白を指定する

Bootstrapのグリッドは、12分割の考え方を使います。たとえば、col-6を2つ並べると、横幅を半分ずつ使う2列レイアウトになります。スマートフォンでは縦並び、PCでは横並びにするような設定も作れます。

ナビゲーションバーも作れる

Bootstrapには、ナビゲーションバーを作るnavbarというコンポーネントもあります。メニューやロゴ、折りたたみメニューなどを作るときに使われます。

<nav class="navbar navbar-expand-lg">
  ナビゲーションの内容
</nav>
class役割
navbarナビゲーションバーの基本class
navbar-expand-lg大きい画面では横並びにする
navbar-brandサイト名やロゴ部分に使う
nav-linkメニューリンクに使う

ナビゲーションはWebサイトの使いやすさに大きく関わる部分です。Bootstrapを使うと、基本的なメニュー構造を短いコードで作りやすくなります。

Bootstrapでよく使うコンポーネント

Bootstrapには、ボタンやフォーム以外にも多くのコンポーネントがあります。コンポーネントとは、Webページでよく使う部品のことです。

コンポーネント概要使い方の例
ボタン見栄えのよいボタンを作るbutton class="btn btn-success"
ナビゲーションメニューやタブを作るnav class="navbar"
グリッド行と列でレイアウトを作るdiv class="row"、div class="col"
フォーム入力欄や選択欄を整えるinput class="form-control"
カード画像や文章をまとめた箱を作るdiv class="card"
アラート注意や成功メッセージを表示するdiv class="alert alert-warning"
モーダル画面上にダイアログを表示するbuttonとmodalを組み合わせる

Bootstrapのコンポーネントを使うと、よくあるUIを効率よく作れます。ただし、classの意味を理解せずにコピーだけで作ると、後で修正しにくくなることがあります。最初は、どのclassがどの見た目を担当しているのかを確認しながら使いましょう。

Bootstrapタグ・class解説表

Bootstrapを導入するときや基本サンプルでよく使うタグとclassを整理しておきます。

タグ・class名主な用途
link href="..."CSSファイルを読み込む
script src="..."JavaScriptファイルを読み込む
meta name="viewport"レスポンシブ表示の基本設定
container主要なレイアウト枠を作る
btnボタン全般の基本デザイン
btn-primary青系の主要ボタン
btn-success緑系のボタン
form-controlテキストボックスやtextareaの装飾
row、colグリッドレイアウトの行と列
navbarナビゲーションバー
mt-4、mb-3上下の余白を調整する
lead導入文を少し目立たせる

Bootstrapでは、タグそのものよりもclassの使い方が重要です。HTMLに適切なclassを指定することで、BootstrapのCSSが反映されます。まずはcontainer、btn、form-control、row、colのような基本classから覚えるとよいでしょう。

Bootstrapを使うときの注意点

Bootstrapは便利ですが、何でも自動で最適なデザインになるわけではありません。目的に合わせてclassを選び、必要に応じて自分のCSSで調整します。

注意点内容
バージョンを確認するBootstrap 4と5では書き方が違う部分がある
classの意味を理解するコピーだけでなく、何を指定しているか確認する
独自CSSとの競合に注意する自分のCSSがBootstrapの指定とぶつかる場合がある
JavaScriptが必要な部品を確認するモーダルやドロップダウンにはJavaScriptが必要
デザインが似やすいそのまま使うとBootstrapらしい見た目になりやすい
ファイルパスを確認するローカル利用ではcssやjsの場所を間違えない

Bootstrapは、制作を助ける道具です。基本デザインをすばやく作り、そのうえでサイトの目的やブランドに合わせて色、余白、画像、見出しなどを調整すると、より完成度の高いページになります。

Bootstrap導入時の確認ポイント

Bootstrapを導入したら、次の点を確認しましょう。

確認することチェック内容
CSSを読み込んでいるかlink href="css/bootstrap.min.css"が正しく書かれているか
JavaScriptを読み込んでいるかscript src="js/bootstrap.min.js"が正しく書かれているか
viewportがあるかスマートフォン表示に必要なmetaタグがあるか
ファイル配置が正しいかcssフォルダーとjsフォルダーの場所が合っているか
classが正しいかbtn、container、form-controlなどの名前に誤りがないか
表示確認をしたかブラウザでボタンや余白が変わっているか

CSSが正しく読み込まれていれば、btn btn-primaryを指定したボタンがBootstrapの青いボタンとして表示されます。見た目が変わらない場合は、CSSのパスやファイル名を確認しましょう。

Bootstrapで制作を効率化する考え方

Bootstrapを導入すると、Webページの基本デザインをすばやく整えられます。containerで本文エリアを作り、btnでボタンを整え、form-controlで入力欄を整え、rowとcolでレイアウトを組むことができます。

大切なのは、Bootstrapのclassをただ暗記することではなく、どのclassがどの役割を持っているのかを理解することです。containerはレイアウト枠、btnはボタン、form-controlは入力欄、rowとcolはグリッドというように、部品ごとの役割を意識すると使いやすくなります。

Bootstrapは、HTMLとCSSの基礎を学んだあとに使うと効果が分かりやすいフレームワークです。最初は簡単なページに導入し、ボタンや余白がどのように変わるかを確認してみましょう。その後、フォーム、ナビゲーション、グリッド、カードなどを少しずつ試していくと、見栄えのよいWebページを効率よく作れるようになります。