◀ 6.

CSSフレームワーク比較｜Bootstrap・Tailwind・Bulmaの選び方

▶
編集
この記事の要点
  • CSS ライブラリ（CSS フレームワーク）は、レイアウトや UI コンポーネントのスタイルをあらかじめ用意したものを指す
  • 大別すると コンポーネント型（Bootstrap / Bulma / Foundation）、ユーティリティ型（Tailwind CSS）、デザインシステム型（Material UI / Chakra UI）に分かれる
  • コンポーネント型はすぐ完成するがデザインが似がち。ユーティリティ型は自由度高だが学習コストあり
  • 採用前に JS フレームワーク依存有無・バンドルサイズ・ダークモード対応・アクセシビリティを確認する
  • 本サイトの子ページから個別ライブラリの解説に進める

CSS ライブラリとは

CSS ライブラリ（CSS フレームワークとも呼ぶ）は、ボタン・フォーム・グリッド・ナビゲーションといった頻出 UI のスタイルをあらかじめパッケージにしたものです。CSS をゼロから書く代わりにクラス名や決まったマークアップを書くだけでデザインが整い、開発スピードを大きく短縮できます。

本ページは、本サイトで扱う CSS ライブラリの入口です。代表的なライブラリの違いをざっと整理し、子ページから個別の解説に進めるようにしています。

大分類

分類考え方代表ライブラリ
コンポーネント型「ボタンならこのクラス」と決まった UI 部品を組み合わせるBootstrap / Bulma / Foundation / Materialize
ユーティリティ型「padding は p-4」のようにスタイル単位の小さなクラスを大量に当てるTailwind CSS / Tachyons / WindiCSS
デザインシステム型（JS と一体）React/Vue 向けのコンポーネントライブラリ。スタイルとロジックを同時提供Material UI / Chakra UI / Ant Design / Mantine
軽量・CSS-onlyJS 不要、数十 KB で読み込める実用最低限Pico CSS / Water.css / new.css / Sakura

代表ライブラリの比較

ライブラリ分類特徴サイズ目安
Bootstrapコンポーネント型世界シェア No.1。ドキュメント・サンプル豊富、保守的なデザインCSS 約 230KB / JS 約 80KB
Tailwind CSSユーティリティ型JIT で未使用クラスを削除、最終バンドルは数 KB に抑えられる本番 5〜20KB
Bulmaコンポーネント型JS 不要、純 CSS。Flexbox ベースで読み込みやすい約 200KB
Material UI (MUI)デザインシステム型React 専用。Google Material Design 準拠500KB+ (JS 含)
Chakra UIデザインシステム型React 専用。アクセシビリティに強い300KB+ (JS 含)
Pico CSS軽量・CSS-onlyセマンティック HTML だけでスタイルされる「クラスレス」設計10KB 程度

選び方のヒント

静的ページ・社内ツール

Bootstrap か Bulma が定番です。コピペで動くサンプルが多く、デザインのトレンドから外れにくいので、見た目に時間をかけたくないときに最適です。

本格的なプロダクト・デザイン差別化したい

Tailwind CSS が一強です。ユーティリティを覚える初期コストはありますが、デザインの自由度・最終バンドルサイズ・運用面のスケールで他を圧倒します。

React / Vue ベースの SaaS

Material UI / Chakra UI / Ant Design / Mantine など、コンポーネントとロジックが一体になったライブラリが効率的です。Tailwind + shadcn/ui の組み合わせも近年強い選択肢です。

個人ブログ・ドキュメント

Pico CSS や Water.css のような「クラスを書かなくても綺麗になる」軽量ライブラリが手軽です。

導入の最短サンプル（Bootstrap CDN）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5">
    <h1 class="mb-3">Hello, Bootstrap</h1>
    <button class="btn btn-primary">クリック</button>
  </div>
</body>
</html>

導入時の確認ポイント

  • バンドルサイズ: 本番ビルドで何 KB になるかを必ず計測する。Tailwind は JIT で大幅に削れる
  • JS フレームワーク依存: Material UI / Chakra UI は React 専用。サーバサイドレンダリング (SSR) で扱えるかも確認
  • ダークモード: 公式サポートの有無で実装工数が大きく変わる。Tailwind は dark: 修飾子で簡単
  • アクセシビリティ: フォーカススタイル・キーボード操作・色コントラストへの配慮が標準で備わっているか
  • カスタマイズ: Sass 変数 / CSS 変数 / 設定ファイルなど、トークン上書きの仕組みがあるか
  • 更新頻度とコミュニティ: GitHub の Star 数だけでなく、直近 1 年の Issue / リリースが活発かを見る

移行のヒント

Bootstrap から Tailwind に乗り換えるような場合、いきなり全置換するのは現実的ではありません。新規ページ・新規コンポーネントだけ Tailwind で書いていき、既存ページはそのまま並走させるのが定石です。Tailwind はクラスのコンフリクトが起きにくいため、2 つのライブラリを同居させても比較的安全に進められます。

子ページからライブラリを選択してください

本サイトでは各 CSS ライブラリの導入手順や使い方を個別記事で解説しています。サイドメニューの子ページ一覧から目的のライブラリを選択してください。

関連記事

編集
Post Share
子ページ
  1. Odometer
同階層のページ
  1. 文法、規則
  2. セレクタ
  3. プロパティ
  4. CSSで色を指定する方法（HEX / RGB / HSL / oklch）
  5. アニメーション
  6. ライブラリ
  7. 「display: flex」を用いて要素を横並びにする方法
  8. スクロールの際のサイドバー固定方法「position: sticky」
  9. 縦の中央寄せ
  10. CSSの変更が反映されない
  11. 画面サイズもしくはスマホの場合のCSS切り替え方法
  12. 一行で左、真ん中、右にそれぞれ要素を寄せる方法
  13. 左右の端にそれぞれ要素を寄せる方法
  14. Bootstrapで両サイドを固定して広告を表示させる方法
2026-06-11 12:53:38 T 165

人気ページ

最近更新/作成されたページ