TECHNOLOGY COMPARE

Bootstrap / UnoCSS

「どっちが上?」ではなく、まず同じ仕事をする道具なのかを確認します。

DIRECT COMPARISON

直接比較しやすい組み合わせ

BootstrapとUnoCSSはどちらも「CSS設計・生成」の技術なので、同じ土俵で比較しやすい組み合わせです。

CSS設計・生成

Bootstrap

レイアウトとUI部品をまとめた成熟したCSS フレームワーク。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。

何を担当する?

グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。

いつ使う?

  • 管理画面や試作を共通部品で短期間に作るとき。

避けたい場面

  • 独自性の高い設計を最小の上書きで実現したいとき。
CSS設計・生成

UnoCSS

必要なユーティリティだけを即時生成するアトミック CSS エンジン。プリセットとルールから使用中のクラスに対応するCSSを生成する。

何を担当する?

プリセットとルールから使用中のクラスに対応するCSSを生成する。

いつ使う?

  • 独自ユーティリティ規則と小さな生成物を柔軟に設計したいとき。

避けたい場面

  • 規約済みの部品集だけで設計を統一したいとき。
DIRECT RELATION

BootstrapとUnoCSSはスタイルの再利用、局所化、実行時コストで比較される。グリッド、フォーム、ナビゲーションなどを既定の見た目で素早く提供する。一方、UnoCSSはプリセットとルールから使用中のクラスに対応するCSSを生成する。