【6日でできるHTML＆CSS入門】Bootstrapの利用

　WebデザインやWebアプリ開発の現場では、見栄えのよいサイトを素早く作るためのツールが重要です。その代表例が「Bootstrap」です。Bootstrapを利用すれば、CSSやHTML、JavaScriptの専門知識がそこまでなくても、プロ品質のWebページを手軽に制作できます。本記事では、Bootstrapの概要や導入方法、基本的な使い方まで、サンプルを交えて解説します。

１．Bootstrapの基礎知識

1.1. Bootstrapとは何か

　Bootstrapは、HTML・CSS・JavaScriptがセットになったフロントエンドフレームワークです。元々Twitter社が開発したことから「Twitter Bootstrap」と呼ばれていましたが、現在は単に「Bootstrap」と呼ばれています。
　Bootstrapを使えば、あらかじめ用意されたスタイルやコンポーネントを組み合わせるだけで美しいWebページを作れるのが大きな特徴です。

用語概要
BootstrapCSS/JSがセットになったWebフレームワーク
コンポーネントボタンやナビバー、グリッドなどの部品・パーツ
レスポンシブ画面サイズに応じて自動的にレイアウトが変化すること

1.2. なぜBootstrapを使うのか？

  • デザインテンプレートが豊富：ボタンやナビゲーション、グリッドレイアウトなどを簡単に作成できる。
  • レスポンシブ対応が容易：スマホやPCなど、どんなデバイスでも見やすいレイアウトが自動で適用される。
  • 導入が簡単：CSSやJavaScriptのリンクを貼るだけ
  • 無料で利用可能

1.3. Bootstrap 5の主な特徴

　現在主流となっている「Bootstrap 5」では、従来バージョンよりシンプルで使いやすく、モダンなWeb開発に最適な設計になっています。
主な特徴は次のとおりです。

特徴解説
jQuery不要JavaScriptプラグインも標準JSで動作
新しいグリッド構造より柔軟なレイアウトが可能
より軽量な構成ファイルサイズが小さくなった

２．Bootstrapの導入方法

2.1. Bootstrapファイルの入手方法

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

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

方法概要利点
CDNリンクで利用Web上のBootstrapファイル利用ダウンロード不要ですぐ使える。
ダウンロードして配置ファイルを自分で持つオフラインでも使える・細かく編集可能

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

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

2.2. ファイル配置の例（ローカルで利用する場合）

BootstrapのZIPを展開し、以下のような構成で配置します。

※「CSS」「js」フォルダーには、複数のファイルが含まれています。HTMLサンプルの「lesson52_1.html」に必要なファイルは「bootstrap.min.css」「bootstrap.min.js」ですが、それ以外のファイルも「CSS」「js」フォルダーに保存しておきます。

project/
├── css/
│   └── bootstrap.min.css
├── js/
│   └── bootstrap.min.js
├── index.html

３．Bootstrapを使ったHTMLサンプル

3.1. 基本的なHTMLの例

ファイル名： lesson52_1.html

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap サンプル</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- BootstrapのCSSを読み込む -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="mt-4 mb-3">はじめてのBootstrap</h1>
    <p>これはBootstrapを利用した最初の例です。</p>
    <button class="btn btn-primary">ボタン例</button>
  </div>
  <!-- BootstrapのJavaScriptを読み込む -->
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

表示例

余白が整ったタイトルと本文、青色のボタンが表示されます。

3.2. 主なクラスやタグの意味

クラス/タグ用途・効果
.container中央寄せ＋余白を持つ主要レイアウト枠
.btn, .btn-primaryボタンの装飾・青色ボタン
<meta name="viewport">レスポンシブ対応のための設定

3.3. Bootstrapの主な部品（コンポーネント）

Bootstrapには数多くの便利な部品（コンポーネント）が用意されています。

コンポーネント概要使い方例
ボタン見栄えの良いボタン<button class="btn btn-success">OK</button>
ナビゲーションメニューやタブなど<nav class="navbar navbar-expand-lg"></nav>
グリッドレイアウト用の行・列<div class="row"><div class="col"></div></div>
フォーム入力欄や送信ボタンなど<input class="form-control">

４．Bootstrapタグ・クラス解説表

クラス/タグ名主な用途
<link href="...">CSSファイルを読み込む
<script src="...">JavaScriptファイルを読み込む
.container主要なレイアウト枠
.btnボタン全般の基本デザイン
.btn-primaryメインの青色ボタン
.form-controlテキストボックスやセレクトボックスの装飾
.row, .colグリッドレイアウト（行・列）
.navbarナビゲーションバー

まとめ

  • BootstrapはCSS/JSがセットのフレームワークで、誰でも簡単に美しいWebサイトが作れる。
  • ファイルをダウンロードまたはCDNで利用し、HTMLにリンクするだけで使える。
  • 用意された**豊富なクラスや部品（コンポーネント）**を利用して、見栄えや機能を大幅にアップできる。
  • レスポンシブ対応も標準なので、スマホ・タブレット・PCすべてに最適化したWebページを素早く構築できる。