使い方を知っておくと便利なフレームワークBootstrap。基礎知識と使い方

2024年12月28日2025年1月13日

URLをコピーしました！

Bootstrapとは？

Bootstrap（ブートストラップ）は、ウェブサイトやウェブアプリのデザインを簡単に作るためのフレームワークです。HTML、CSS、JavaScriptがパッケージ化されており、効率的でプロフェッショナルなデザインを誰でも手軽に構築できます。

そもそもフレームワークって？

フレームワークとは、開発作業を効率化するための「道具箱」のようなものです。Bootstrapは、ウェブデザインに特化した道具箱で、次のような素材がそろっています

ボタンやナビゲーションバーなどのデザイン済みのパーツ。
レスポンシブ対応（スマホやタブレットでも見やすいデザイン）。
グリッドシステムでレイアウトを簡単に調整可能。

Bootstrapの特徴

モバイルファースト：すべてのデザインがスマホ画面に最適化されており、デスクトップ画面にも柔軟に対応します。
レスポンシブデザイン:　ウィンドウの幅に応じて自動でデザインが変化するので、追加のコードを書かなくてもOK。
使いやすいUIコンポーネント:ボタン、フォーム、モーダル（ポップアップ）、カードなど、すぐに使えるパーツが多数用意されています。
初心者でもすぐに利用可能:難しい設定は不要で、簡単なコードをコピー＆ペーストするだけでデザインを追加できます。

具体的には、ページのコンテンツをスマホ・タブレット・デスクトップの各画面サイズに応じて調整できたり、デザインを一から作らなくても、プロのような見た目のパーツが使えたり、メニューのデザインも数行のコードで設定できたりしますので、初心者におすすめなコードでもあります。

WordPressと相性がいい？

Bootstrapは、WordPressと非常に相性が良いフロントエンドフレームワークです。特に、WordPressのブロックエディター（Gutenberg）を活用する際に、その強みを簡単に引き出すことができます。

例えば、ブロックエディターでセクションやコンテンツを作成した際に、「追加CSSクラス」を利用してクラス名を追加することがあります。この時、Bootstrapで用意されたクラス名を入力することで、ブロックエディターにはないデザインやスタイルを簡単に適用することが可能です。

Bootstrapなんて知らなくてもよい？

小規模なサイトや個人ブログでは、複雑なレイアウトやデザインを必要としない場合があります。基本的なHTMLとCSSの知識があれば、レスポンシブ対応も可能です。実際のところ、Bootstrapを知らなくてもウェブサイトは作れます。初心者にとっては、Bootstrapのルールを覚えるよりも、HTMLとCSSを基礎から学ぶ方が効率的です。

Bootstrapのようなフレームワークを使うべきケースは下記のような場合です。

短期間でサイトを構築したい

プロジェクトに時間が限られている場合、Bootstrapの既成のコンポーネントやグリッドシステムが助けになります。

複雑なレスポンシブデザインが必要

Bootstrapのグリッドシステムを利用すれば、スマホから大型ディスプレイまで柔軟に対応可能。

デザインを一定の基準で統一したい

チームで開発を進める場合、Bootstrapを使うことでデザインルールを統一できます。

Bootstrapは確かに便利で、多くの機能を備えたフレームワークですが、必ずしもウェブ制作において「絶対必要」なツールではありません。簡単なサイトや自由度の高いデザインを求める場合、Bootstrapに頼らず、自分でCSSを記述する方が良いケースもあります。

一方で、開発効率やレスポンシブデザインを重視する場合は、Bootstrapを学び、適切な場面で活用することが大きなメリットを生みます。特にレスポンシブデザインの崩れ防止には役立ちます。まずは、自分のプロジェクトの規模や目的に合わせて、Bootstrapを使うかどうかを判断してみてください！

Bootstrap 5 公式サイト

Bootstrapの基礎知識

HTMLファイルで練習してみよう

Bootstrapを使う場合、HTMLファイルにBootstrapのCDNを読み込むだけで、すぐに利用できます。練習にはビジュアルスタジオコードなどが必要です。

グリッドシステム

Bootstrapのグリッドシステムは、レスポンシブデザインを簡単に実現するための仕組みです。ページのレイアウトを12個のカラムに分割し、各コンテンツの幅を自由に調整できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid System</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
   <h1>３列のレイアウトを作る</h1>
    <div class="row">
      <div class="col-md-4 bg-primary text-white text-center p-3">1列目</div>
      <div class="col-md-4 bg-secondary text-white text-center p-3">2列目</div>
      <div class="col-md-4 bg-success text-white text-center p-3">3列目</div>
    </div>
  </div>
</body>
</html>

container: コンテンツを画面中央に配置する固定幅の枠。
container-fluid: 画面幅いっぱいに広がるコンテナ。
row: 行全体を定義するクラス。
col: 列を作成し、12カラムの幅を自動調整。
bg-primary: 背景を青色に変更。
text-white: テキストの色を白に変更。
p-3: コンテンツに「3」サイズの余白（padding）を追加。

ボタンとテキスト装飾

Bootstrapには、見栄えの良いデザインがすぐに適用できるボタンやテキストスタイルのクラスが用意されています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Buttons</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container text-center mt-5">
    <button class="btn btn-primary">プライマリボタン</button>
    <button class="btn btn-secondary">セカンダリボタン</button>
    <button class="btn btn-success">成功ボタン</button>
    <button class="btn btn-outline-danger">アウトラインボタン</button>
  </div>
</body>
</html>

btn: ボタンにスタイルを適用する基本クラス。
btn-primary: 青色のボタン。
btn-secondary: グレーのボタン。
btn-outline-*: 枠線だけのアウトラインスタイル。

スペーシングユーティリティについて

Bootstrapでは、mb-0やpt-1のようなクラスを使って、余白（margin）やパディング（padding）を簡単に設定できます。数字は0から5までの段階があり、次のようにrem単位で指定されています。

0 = 0rem
1 = 0.25rem
2 = 0.5rem
3 = 1rem
4 = 1.5rem
5 = 3rem

スペーシングユーティリティの詳細は、Bootstrap公式サイトのスペーシングドキュメントをご参照ください。

Bootstrapのブレイクポイントとグリッドシステム

Bootstrapのグリッドシステムでは、画面サイズに応じてレイアウトを調整するための「ブレイクポイント」が用意されています。これにより、スマホ、タブレット、PCなど異なるデバイスで適切なデザインを実現できます。

ブレイクポイントとは？

ブレイクポイントは、画面幅が特定のサイズを超えたときにスタイルを切り替える仕組みです。Bootstrapでは、以下のような5つの主要なブレイクポイントが定義されています

ブレイクポイント名	対応するデバイス	最大または最小幅（ピクセル）
xs	スマホ	～576px
sm	スマホ（横向き）	576px～
md	タブレット	768px～
lg	ラップトップ	992px～
xl	大型ディスプレイ	1200px～

ブレイクポイントを使ったクラスの指定方法

Bootstrapのグリッドシステムでは、col-[ブレイクポイント名]-[カラム数]の形式で列の幅を指定します。

例：`col-12` と `col-md-6` の違い

col-12:
- 幅が576px未満（スマホサイズ）では1列に配置。
- デフォルトで「1列（12カラム）」として表示されます。
col-md-6:
- 幅が768px以上（中サイズ以上）になると、**2列（6カラムずつ）**に分割されます。
- 幅が768px未満では、この指定は無視され、1列表示になります。

以下のコードを実行すると、スマホ、タブレット、PCで異なるレイアウトが表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Breakpoints</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 bg-primary text-white p-3">1列目</div>
      <div class="col-12 col-md-6 bg-secondary text-white p-3">2列目</div>
    </div>
  </div>
</body>
</html>

スマホ（576px未満）:col-12が適用され、各カラムが1列表示。
タブレット（576px以上、992px未満）:col-sm-6が適用され、2列表示。
PC（992px以上）:col-lg-4が適用され、3列表示。

Bootstrapの練習してみよう -1-

下記の基本のHTMLをエディタに貼り付けて、プレビュー画像のような見た目になるようにBootstrapを使ってみましょう！

<!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>
  <header>
    <h1>練習問題：簡単なウェブページ</h1>
  </header>
  <main>
    <section>
      <h2>セクション1</h2>
      <p>ここにいくつかの説明文を追加します。</p>
    </section>
    <section>
      <h2>セクション2</h2>
      <p>さらに別の内容がここに入ります。</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 練習サイト</p>
  </footer>
</body>
</html>

Bootstrapを適用した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>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <header class="bg-primary text-white text-center p-3">
    <h1>練習問題：簡単なウェブページ</h1>
  </header>
  <main class="container mt-4">
    <section class="mb-4">
      <h2 class="text-success">セクション1</h2>
      <p>ここにいくつかの説明文を追加します。</p>
    </section>
    <section class="mb-4">
      <h2 class="text-danger">セクション2</h2>
      <p>さらに別の内容がここに入ります。</p>
    </section>
  </main>
<footer class="bg-dark text-white text-center p-3">
  <p class="mb-0">&copy; 2024 練習サイト</p>
</footer>
</body>
</html>

Bootstrapの練習をしてみよう -2-

グリッドシステムも練習してみましょう！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>練習問題: グリッドシステム</title>
</head>
<body>
  <div>
    <div>
      <p>1列目の内容</p>
    </div>
    <div>
      <p>2列目の内容</p>
    </div>
    <div>
      <p>3列目の内容</p>
    </div>
  </div>
</body>
</html>

Bootstrapを適用したHTMLの答えの例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap適用例: グリッドシステム</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col bg-primary text-white text-center p-3">1列目の内容</div>
      <div class="col bg-secondary text-white text-center p-3">2列目の内容</div>
      <div class="col bg-success text-white text-center p-3">3列目の内容</div>
    </div>
  </div>
</body>
</html>

各デバイスによって異なるcolになるか考えてみましょう。

Bootstrap公式ドキュメント

はじめに
Bootstrapの概要や導入方法について説明しています。
https://getbootstrap.jp/docs/5.3/getting-started/introduction
グリッドシステム
レスポンシブなレイアウトを構築するためのグリッドシステムの使い方を解説しています。 https://getbootstrap.jp/docs/5.3/layout/grid
コンポーネント
ボタン、ナビゲーションバー、カードなど、よく使われるUIコンポーネントの一覧です。 https://getbootstrap.jp/docs/5.3/components
ユーティリティ
色、間隔、タイポグラフィなど、デザイン調整に役立つユーティリティクラスの一覧です。https://getbootstrap.jp/docs/5.3/utilities
フォーム
入力フィールドやチェックボックスなど、フォーム要素のデザインと使い方を説明しています。 https://getbootstrap.jp/docs/5.3/forms
ナビゲーションバー
レスポンシブなナビゲーションバーの作成方法を解説しています。 https://getbootstrap.jp/docs/5.3/components/navbar
モーダル
ポップアップウィンドウであるモーダルの使い方を紹介しています。 https://getbootstrap.jp/docs/5.3/components/modal
アラート
ユーザーへの通知や警告メッセージの表示方法を説明しています。 https://getbootstrap.jp/docs/5.3/components/alerts
アイコン
Bootstrapで利用可能なアイコンの一覧と使用方法を紹介しています。 https://getbootstrap.jp/docs/5.3/icons
カスタマイズ
Bootstrapのデザインや機能をプロジェクトに合わせてカスタマイズする方法を解説しています。 https://getbootstrap.jp/docs/5.3/customize

Bootstrapのテンプレート利用

Bootstrapには多くのテンプレートがあります。Bootstrapを基に作られたテンプレートを活用することで、短時間でプロフェッショナルなデザインを実現できます。さらに、モバイルファーストのフレームワーク。テンプレートもすべてのデバイスで見やすいレイアウトになっています。これはかなり重要です。

また目的にあったデザインも多く、ポートフォリオ、企業サイト、ECサイトなど、サイトの目的に応じたテンプレートを選ぶとカスタマイズがしやすくなります。さらにHTML/CSSの基本がわかればカスタマイズも可能ですが、テンプレートのコードが整理されているか、編集がしやすいかをチェックが必要です。

Bootstrap公式サイトのサンプル

フレームワークの一部を使用した例から、カスタムコンポーネントやレイアウトを使用した例まで、どのような例でもすぐにプロジェクトを開始できるように多くのサンプルソースのダウンロードが可能です。

Designup

無料の高品質テンプレートを300種類以上提供。
Bootstrap4/5に対応。
サイト制作のベースに最適なデザインが揃っています。
Designupはこちら

Workship Magazine

無料で使えるテンプレートを78種類も掲載。
ポートフォリオやECサイト向けのテンプレートが豊富。
テンプレートごとに用途が明確で選びやすい。
Workship Magazineはこちら

Nesabi

フリーで使えるBootstrapテーマをまとめて紹介。
管理画面やダッシュボード向けのテンプレートも多数掲載。
ビジネスサイトやブログ向けのデザインも豊富。
Nesabiはこちら

PhotoshopVIP

商用利用可能なテンプレートを25個紹介。
アニメーションを取り入れた洗練されたデザイン。
モバイルファーストのレスポンシブ対応テンプレート。
PhotoshopVIPはこちら

WordPressで活用できる？

WordPressのブロックエディター（Gutenberg）では、カラムブロックや他の要素でBootstrapの柔軟なクラスを活用したい場合に、デフォルトの設定では制限を感じることがあります。例えば、

スペーサーブロックを使わないと余白を調整できない
このテーマは、画像を角丸にできない

など、ちょっとしたところの修正を追加CSSのクラスでやっていければ・・・という時に役立ちます。

スペーサーの代わりにBootstrapクラスを使う

スペーサーブロックを挿入して、余白を微調整するのは手間がかかったり、レスポンシブ対応のスペーサーではないといった時に、追加CSSのクラスで調整します。下図の例は、h2タイトルにタブレットサイズの余白とスマートフォンサイズの異なる余白を指定しています。

追加CSSのクラスでBootstrapが反映しない時

WordPressのブロックエディター（Gutenberg）で、追加CSSクラスにBootstrapのクラスを入力しても、期待通りに反映されない場合があります。そもそもBootstrapは全てのwordpressに組み込まれてはいないので、テーマによっては、指定しても何も行らない場合があります。

開発者ツールで確認

ブラウザの開発者ツールを開き、ページの<head>タグ内に以下のようなBootstrapのCSSやJavaScriptが読み込まれているかを確認します。

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

テーマの`functions.php`を確認

functions.phpに以下を記述して、Bootstrapをブロックエディターにも適用します

function add_editor_styles() {
    add_theme_support('editor-styles');
    add_editor_style('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
}
add_action('after_setup_theme', 'add_editor_styles');

また要素が正しく選択されていて、そこのclassが適用されているかの確認も必要です。

WordPress内のfunctions.phpに関する内容は下記を参照ください。

Bootstrapだけが選択肢ではない！その他のフレームワーク

Bootstrap以外にも、目的に応じて多彩なCSSフレームワークが存在します。それぞれ特徴が異なるので、自分のプロジェクトに合ったものを選びましょう。

Tailwind CSS

特徴：ユーティリティファーストのCSSフレームワークで、既存のコンポーネントではなく、細かいスタイルを直接適用する方式。
- 必要なCSSのみを使うので軽量。
- 高いカスタマイズ性。
おすすめの用途
- 完全に独自のデザインを作りたい場合。
- デザインが頻繁に変わるプロジェクト。
公式サイト:
https://tailwindcss.com

Bulma

特徴：シンプルで直感的なクラス設計が特徴のフレームワーク。HTMLにクラスを適用するだけで多彩なデザインが可能。
- フラットデザインが得意。
- シンプルなレイアウトを短時間で構築できる。
おすすめの用途:
- ミニマルなデザインや小規模プロジェクト。
- フレームワーク初心者向け。
公式サイト:
https://bulma.io

Foundation

特徴：レスポンシブデザインに特化したフレームワークで、プロトタイピングにも向いている。
- アクセシビリティやARIAサポートが充実。
- 高度なレイアウトに対応可能。
おすすめの用途:
- 大規模プロジェクト。
- アクセシビリティ重視のサイト。
公式サイト:
https://get.foundation

UIkit

特徴：軽量で洗練されたモジュールが揃ったフレームワーク。独自のJavaScriptライブラリも含まれている。
- カードやグリッドなどのコンポーネントが豊富。
- デザインの一貫性を保ちやすい。
おすすめの用途:
- アプリケーションUIや管理画面。
- プロトタイプ制作。
公式サイト:
https://getuikit.com

Spectre.css

特徴：非常に軽量なCSSフレームワークで、必要最低限のスタイルとレイアウトに絞られている。
- シンプルで早いページ読み込みが可能。
- モバイルファースト設計。
おすすめの用途:
- 軽量性重視のプロジェクト。
- カスタマイズ前提のシンプルなデザイン。
公式サイト:
https://picturepan2.github.io/spectre

Materialize

特徴：GoogleのMaterial Designガイドラインに基づいて設計されたフレームワーク。視覚的に洗練されたデザインを実現可能。
- アニメーションやカードなどが標準搭載。
- モバイルデバイスで特に美しい。
おすすめの用途:
- モダンで動きのあるデザインが必要なプロジェクト。
- サービスや製品のランディングページ。
公式サイト:
https://materializecss.com