CSSフレームワーク比較：同じカードを6通りで

CSSフレームワーク比較

CSSフレームワーク比較：1枚のカードを6つのフレームワークで | We.Inc

同じ料金カードを Tailwind、Bootstrap、Bulma、Pico CSS、UnoCSS、素のCSSで記述し、比較表、フレームワーク診断、使い分けのアドバイスを添えて紹介します。

最適なCSSフレームワークは、どのように開発するかによって決まります。Tailwind はユーティリティクラスでマークアップ内にスタイルを書くチームに向いており、Bootstrap はオプションの JavaScript 付きですぐに使えるコンポーネントを提供し、Bulma は JavaScript なしのコンポーネント、Pico はセマンティックな素のHTMLにスタイルを当て、UnoCSS はオンデマンドのユーティリティエンジンです。そして最新の素のCSSは、今やそれだけでほとんどのニーズを満たします。

6つの選択肢をそれぞれ一言で

選択肢
書き方のスタイル

Tailwind CSS
マークアップ内のユーティリティクラス、ビルド工程あり

Bootstrap
コンポーネントクラスとユーティリティ層

Bulma
コンポーネントクラス、CSSのみ

Pico CSS
素のHTML要素にスタイルを当て、クラスはごくわずか

UnoCSS
プリセット付きのユーティリティエンジン、ビルド工程あり

素のCSS
独自のクラス、カスタムプロパティ、ネスト

比較記事はたいてい機能を並べるだけです。この記事では、同じ小さな料金カードを6つの選択肢すべてで書き、マークアップを並べて読めるようにしたうえで、それぞれのカスタマイズ方法、JavaScript を含むかどうか、ライセンスを比較します。冒頭の短い診断では、4つの質問からおすすめの出発点を提案します。

診断の4つの質問に答えると、おすすめの出発点と次点が表示されます。
料金カードの6つのバージョンを読み、それぞれでスタイルがどこに書かれているかに注目します。
比較表で、JavaScript の要否、ライセンス、カスタマイズ方法を確認します。
ライブで動く素のCSS版を編集して、フレームワークなしで最新のCSSがどこまでできるかを確かめます。

機能と同じくらい、チームの慣れで選びましょう。チーム全員がすでにすらすら読めるフレームワークは、誰も知らない少し優れたものに勝ります。
サイズは自分のビルドで計測しましょう。ユーティリティエンジンは使ったクラスだけを出力するため、実際の数値はフレームワークの公式サイトではなく、あなたのページ次第です。
1つのサイトで2つのコンポーネントフレームワークを混ぜるのは避けましょう。リセットや基本スタイルが衝突し、詳細度のデバッグで節約した時間が失われます。
何を選ぶにしても、色、角丸、余白などのデザイントークンは1か所にまとめておきましょう。そうすれば後で乗り換えるときも、作り直しではなく検索と置換で済みます。

よくある質問

2026年に最適なCSSフレームワークは何ですか？

唯一の勝者はありません。React、Vue、Svelte で作るコンポーネントベースのアプリでは Tailwind がよく選ばれます。Bootstrap は、一般的な管理画面やマーケティング用のレイアウトを素早く作る手段として今も有力です。Pico はドキュメントや小規模サイトに向いており、シンプルなプロジェクトの多くは素のCSSで十分です。

Tailwind の代替としておすすめは何ですか？

最も近いのは UnoCSS で、Tailwind 互換のプリセットに加えて、attributify などの追加モードがあります。マークアップ内のクラスを減らしたいなら、Pico CSS やカスタムプロパティを使った素のCSSが正反対のアプローチです。Bootstrap のユーティリティクラスも、同じ領域の一部をカバーしています。

Bootstrap の代替としておすすめは何ですか？

Bulma は、JavaScript を一切使わずに似たようなコンポーネントの語彙を提供します。Foundation も独自のグリッドを持つコンポーネントフレームワークです。より軽量な結果が欲しいなら、Pico はセマンティックなHTMLにスタイルを当て、Tailwind ではデフォルトを上書きする代わりにユーティリティからコンポーネントを組み立てられます。

今でもCSSフレームワークは必要ですか？

必ずしも必要ではありません。グリッド、flexbox、カスタムプロパティ、clamp()、コンテナクエリ、ネイティブのネストで、今ではレイアウト、テーマ設定、レスポンシブな文字サイズをまかなえます。それでもフレームワークは、一貫した余白のスケール、フォームのスタイル、チームの規約の面で時間を節約してくれます。

これらのフレームワークは商用で無料で使えますか？

はい。Tailwind CSS、Bootstrap、Bulma、Pico CSS、UnoCSS はすべてMITライセンスで公開されており、著作権表示をコードに残す限り商用利用が認められています。テーマキットなどの有料アドオンには、それぞれ独自の条件があります。

ユーティリティファーストとコンポーネントクラスの違い

ユーティリティフレームワークはプロパティごとに1つのクラスを提供するため、カードはHTML内の十数個の小さなクラスで表現されます。コンポーネントフレームワークは、それらの判断をまとめた card クラスを提供します。ユーティリティは一度きりのデザインを素早く作れてCSSが膨らむのを防ぎ、コンポーネントは定番の見た目を素早く作れてマークアップを短く保ちます。
Pico のようなクラスレスのフレームワークは、さらにコンポーネント寄りです。article 要素そのものがカードのように見えます。コンテンツ中心のサイトには最適ですが、デザインがデフォルトから離れると制約になります。

どれをいつ使うか

独自のデザインシステムと JavaScript のコンポーネント層を持つアプリなら、Tailwind か UnoCSS を選びましょう。ドロップダウン、モーダル、フォームを今すぐ動かす必要があり、定番の見た目で問題ないなら Bootstrap を選びましょう。そのコンポーネントのスタイルが欲しいけれど JavaScript は自分で用意したいなら、Bulma を選びましょう。
主に素のHTMLで書くドキュメント、プロトタイプ、小規模サイトには Pico を選びましょう。サイトが小さい場合、デザインが完全オリジナルの場合、または更新を追い続ける依存関係をゼロにしたい場合は、素のCSSを選びましょう。

比較表

ライセンスは各プロジェクトのリポジトリに基づいています。サイズはあえて載せていません。バージョンやビルド設定、さらにユーティリティエンジンの場合はページで使うクラスによって変わるためです。

6つの選択肢の違い

選択肢
アプローチ
JavaScript
ライセンス
カスタマイズ
ビルド工程

Tailwind CSS
ユーティリティファースト
実行時はなし
MIT
CSS内のテーマ変数（v4 の @theme）、任意の値
あり、CLI またはバンドラーのプラグイン

Bootstrap 5
コンポーネントとユーティリティ
モーダル、ドロップダウン、折りたたみ、ツールチップ用のオプションのバンドル
MIT
Sass 変数、CSSカスタムプロパティ
CDN利用ならなし、Sass ならあり

Bulma
コンポーネント
同梱なし
MIT
Sass 変数とCSSカスタムプロパティ
CDN利用ならなし

Pico CSS
クラスレス、または最小限のクラス
同梱なし
MIT
CSSカスタムプロパティ、カラーテーマ
なし

UnoCSS
プリセット付きのアトミックエンジン
実行時はなし（オプションのランタイムモードあり）
MIT
設定ファイルのプリセット、ルール、ショートカット
通常はあり

素のCSS
独自のクラス
なし
自分のもの
何でも可能
なし

1枚の料金カードを6つのフレームワークで

以下のどのバージョンも、プラン名、価格、3つの機能、ボタンという同じ内容を表示します。スタイルの指定がどこに書かれているかを比べてみてください。

Tailwind CSS

スタイルはすべてユーティリティクラスで指定します。ホバーやフォーカスの状態も基本スタイルのすぐ隣に書きます。

Bootstrap 5.3

card コンポーネントが枠を提供し、text-center や w-100 などのユーティリティが細かい部分を補います。

Bulma

Bulma はカードの各部分に明示的な名前を付け、バリエーションには is- や has- の修飾子を使います。

Pico CSS

card クラスはまったくありません。Pico は article をカードとして、role=button を持つリンクをボタンとしてスタイルします。

UnoCSS（attributify プリセット）

Wind と Attributify のプリセットを使うと、ユーティリティを属性ごとにまとめられます。Tailwind 形式の通常のクラスも使えます。

どのCSSフレームワークが合う？4つの質問

何を作りますか？

JavaScript のコンポーネントを使うアプリ
マーケティングサイトや管理画面
ドキュメント、ブログ、小規模サイト

ビルド工程を使いたいですか？

はい、すでにバンドルしています
いいえ、スタイルシートのリンク1つで済ませたい

すぐに使えるインタラクティブなウィジェットが必要ですか？

はい、モーダルやドロップダウンが今すぐ必要
いいえ、動作は自分たちで書きます

デザインはどの程度オリジナルですか？

完全にオリジナル
整ったデフォルトで十分

おすすめの出発点：

。次点：

。決める前に、下にある両方のカードのバージョンを読んでみてください。

4つすべてに答えると、おすすめが表示されます。

素のCSS

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

CSSフレームワーク比較：同じカードを6通りで