とほほのCSSフレームワーク入門
トップ >
CSSフレームワーク
目次
数値は Google で「CSS フレームワーク名」を検索した時のヒット数です。(2022年7月17日時点)
- フレームワークの種別
- Bootstrap (118,000,000件)
- Foundation (144,000,000件)
- Pure.CSS (25,900,000件)
- Primer CSS (16,600,000件)
- Tailwind CSS (6,500,000件)
- MVP.css (6,250,000件)
- Skeleton CSS (4,610,000件)
- Bulma (2,220,000件)
- SkyBlue (1,800,000件)
- Materialize (1,690,000件)
- UIkit (1,610,000件)
- Ant Design (1,350,000件)
- new.css (1,380,000件)
- Semantic UI (1,220,000件)
- Milligram (1,160,000件)
- Tachyons (1,160,000件)
- Spectre.css (1,140,000件)
- tacit (623,000件)
- Schema (???,???件)
- INK (???,???件)
フレームワークの種別
汎用型フレームワーク
Bootstrap に代表されるように、コンテナ、グリッドなどのレイアウト、テーブル、フォームなど様々なコンポーネントや、マージン、パディング、色付けなどのユーティリティを兼ね備えるものです。
超軽量型フレームワーク
汎用型と方向性は同じですが、ソースコードが数KBと、非常に軽量に作成されています。
ユーティリティ特化系
マージン、パディング、色付けなどのユーティリティクラスのみを提供し、コンポーネント自体は React や Vue.js などにまかせてしまうタイプです。
おまかせ系
CSSファイルを読み込むだけで、CSSクラスはまったくサポートされないタイプ。CSSファイルを読み込むだけで、フレームワーク作者が好みとするデザインにしれくれます。それ以上のことは自分で追加していくタイプです。
Bootstrap
Foundation
Pure.CSS
Primer CSS
- GitHub社が開発。
- CSSのみ。JavaScript は使用しない。Bootstrap によく似ている。
- .container-sm, .col-6, .m-3, .p-3, .form-control など。
- テーブルは使用しない主義なのか、テーブルに関するクラスが少ない?
- グリッドは12カラム。
- .container, .col-2, .m-3, .pt-3, .btn, .btn-primary, .color-fg-success など。
- 公式サイト:https://primer.style/css/
- 日本語情報:https://segakuin.com/css/primer/ (SE学院)
- サンプル:primer.html
Tailwind CSS
- React や Vue.js などと組み合わせて利用することを想定。一度すべてのスタイルをリセットし、React などで作成したコンポーネントに対し、Tailwind によるマージン、フォントサイズなどのユーティリティクラスを適用していく。
- スタイルシートのプロパティをそのまま純粋にCSSクラス化したイメージ。
- グリッドは1~12グリッドまで自由に選択可能。
- ブレークポイントは md:grid-cols-6 のようにブレークポイント名:~で指定。
- 公式サイト:https://tailwindcss.com/
- ドキュメント:https://tailwindcss.com/docs/
- .pt-4, .text-center, .font-bold, .rotate-90 など。
- サンプル:tailwind.html
MVP.css
Skeleton CSS
Bulma
SkyBlue
Materialize
UIkit
Ant Design
new.css
Semantic UI
Milligram
Tachyons
Spectre.css
tacit
Schema
INK
- ポルトガルのWeb開発会社SAPOが開発。
- グリッドはパーセント指定が可能でネストが楽。
- 英語ライクなクラス名。
- CSS UIコンポーネント、JavaScript UIコンポーネント、JavaScript APIなど機能も豊富。
- 公式サイト:https://ink.sapo.pt/
- サンプル:ink.html
Copyright (C) 2022 杜甫々
初版:2022年7月10日 最終更新:2022年7月10日
http://www.tohoho-web.com/ex/css-framework.html