CSSフレームワークのおすすめ2つ｜BootstrapとTailwindの選び方

CSSフレームワークは、Webデザインと開発の効率を上げるツールです。この記事では BootstrapとTailwind CSS の紹介と、簡単な実装例を解説します。

結論から書くと、既製のコンポーネントをそのまま使いたいならBootstrap、デザインを自分で決めたいならTailwind CSSです。

▼2つの違い

	Bootstrap	Tailwind CSS
提供されるもの	完成したコンポーネント	細かいユーティリティクラス
見た目	Bootstrapらしくなる	自分で決める
HTMLの見た目	クラス名が短い	クラスが長く並ぶ
向いている場面	管理画面・社内ツール	デザインが決まっているサイト

この記事は2023年の公開後、2026年9月に見直しました。当時のBootstrap 4系のコードはjQueryを前提にしていましたが、Bootstrap 5でjQueryは不要になり、属性名も変わっています。Tailwindもv4で設定方法が大きく変わったため、あわせて更新しています。

Bootstrapの魅力と基本的な実装

Bootstrapは、おそらく、かなり人気のあるCSSフレームワークの1つです。

優れたグリッドシステムと豊富なコンポーネントは、レスポンシブなデザインを簡単に実現することができます。

Bootstrapの実装例

Bootstrapを使った、シンプルなナビゲーションバーの実装例です。

See the Pen
CSS-Bootstrap実装例 by りん@エンジニア (@rinblog0408)
on CodePen.

Bootstrapの導入と設定

Bootstrapを使うためには、まずプロジェクトにBootstrapのCSSとJavaScriptファイルを組み込む必要があります。組み込む方法は2つあり、CDNを使用するか、ダウンロードしてローカルに組み込む方法があります。

<!-- Bootstrap 5.3 をCDNで読み込む -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5からはjQueryが不要になりました。4系ではjQueryとPopperを別々に読み込む必要がありましたが、5系では bootstrap.bundle.min.js ひとつでPopperまで含まれます。読み込むファイルは2つだけです。

古い記事のコードをコピーしてくると、不要なjQueryまで読み込むことになります。Bootstrap 5を使うなら、jQueryの行は消してください。

シンプルなナビゲーションバーの作成

Bootstrapを使った、シンプルなナビゲーションバーを作成するコードです。

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- ロゴやサイト名などのコンテンツをここに追加 -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

属性名に注意してください。Bootstrap 5では、JavaScriptを動かすためのデータ属性がすべて data-bs- で始まる形に変わりました。4系の data-toggle や data-target のままでは、ボタンを押しても開きません。

▼バージョンによる属性名の違い

4系（旧）	5系
`data-toggle`	`data-bs-toggle`
`data-target`	`data-bs-target`
`data-dismiss`	`data-bs-dismiss`

名前空間を付けたのは、他のライブラリのデータ属性と区別するためです。4系から5系へ移行するときは、この置き換えが最初の作業になります。

Tailwind CSSの特徴とカスタマイズ

Tailwind CSSは、クラスベースのフレームワークで、HTMLに直接クラスを追加することでスタイルが適用されます。柔軟にカスタマイズしやすい点が特徴かなと思います。

Tailwind CSSの導入と設定

Tailwind CSS はv4（2025年1月）で導入方法が大きく変わりました。設定をJavaScriptのファイルではなくCSSに書く形になり、必要な記述がかなり減っています。

npm install tailwindcss @tailwindcss/postcss

CSS側は1行の @import だけで始められます。

@import "tailwindcss";

色やフォントのカスタマイズは、tailwind.config.js ではなくCSSの @theme に書きます。

@import "tailwindcss";

@theme {
  --color-brand: #0f766e;
  --font-display: "Inter", sans-serif;
}

こう書くと bg-brand や font-display といったクラスが使えるようになります。

▼v3とv4の違い

	v3まで	v4
設定ファイル	`tailwind.config.js`	CSSの `@theme`
読み込み	`@tailwind` を3行	`@import "tailwindcss"` の1行
ビルド速度	—	最大5倍速いとされる

既存プロジェクトに tailwind.config.js がある場合はv3以前です。v4はそのファイルを前提にしていないので、移行するときは設定をCSSへ移す作業が要ります。

ボタンのカスタマイズ

Tailwind CSSの魅力の1つは、ボタンなどのコンポーネントを簡単にカスタマイズできる点です。以下ののようにコーディングすることで、カラーやサイズを変更することができます。

<!-- 緑色の背景と白い文字色を持つボタン -->
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

<!-- 赤色の背景と白い文字色を持つ大きなボタン -->
<button class="bg-red-600 text-white font-bold py-3 px-6 rounded-lg text-xl">
  Sign Up Now
</button>