とほほのCSSフレームワーク入門

• トップ
• CSSフレームワーク

• フレームワークの種別
  • 汎用型フレームワーク
  • 超軽量型フレームワーク
  • ユーティリティ特化系
  • おまかせ系
• 様々なフレームワーク
  • Bootstrap
  • Foundation
  • Pure.CSS
  • Primer CSS
  • Tailwind CSS
  • MVP.css
  • Skeleton CSS
  • Bulma
  • SkyBlue
  • Materialize
  • UIkit
  • Ant Design
  • new.css
  • Semantic UI
  • Milligram
  • Tachyons
  • Spectre.css
  • tacit
  • Schema
  • INK

フレームワークの種別

汎用型フレームワーク

Bootstrap に代表されるように、コンテナ、グリッドなどのレイアウト、テーブル、フォームなど様々なコンポーネントや、マージン、パディング、色付けなどのユーティリティを兼ね備えるものです。

• Bootstrap
• Foundation
• Primer CSS
• Bulma
• Materialize
• UIkit
• Spectre.css
• Semantic UI
• INK

超軽量型フレームワーク

汎用型と方向性は同じですが、ソースコードが数KBと、非常に軽量に作成されています。

• Pure.CSS
• Skeleton CSS
• Milligram

ユーティリティ特化系

マージン、パディング、色付けなどのユーティリティクラスのみを提供し、コンポーネント自体は React や Vue.js などにまかせてしまうタイプです。

• Tailwind CSS
• Tachyons
• Ant Design

おまかせ系

CSSファイルを読み込むだけで、CSSクラスはまったくサポートされないタイプ。CSSファイルを読み込むだけで、フレームワーク作者が好みとするデザインにしれくれます。それ以上のことは自分で追加していくタイプです。

• MVP.css
• new.css
• tacit

様々なフレームワーク

Bootstrap

• 世界で最も多く利用されているCSSフレームワーク。
• Twitter社が開発。
• 公式サイト：https://getbootstrap.com/
• 日本語サイト：https://getbootstrap.jp/
• ドキュメント：https://getbootstrap.jp/docs/5.0/getting-started/introduction/
• 日本語情報：とほほのBootstrap 5入門
• 日本語情報：https://segakuin.com/css/bootstrap/ (SE学院)
• サンプル：bootstrap.html

Foundation

• 開発：Zurb社
• カスタマイズ性が高い。
• 大規模プロジェクトにも対応。
• Google でヒット数は Bootstrap よりも多いが、一般用語もヒットしている模様。Googleトレンドで見るとやはり Bootstrap の圧勝。(→ グラフ)
• 公式サイト：https://get.foundation/index.html
• リファレンス：https://get.foundation/sites/docs/
• 日本語情報：https://segakuin.com/css/foundation/ (SE学院)
• サンプル：foundation.html

Pure.CSS

• 米国の Yahoo! が提供。
• ミニマイズ後のモジュールサイズは約17KBと、モバイルを考慮して軽量・コンパクト。
• 機能もシンプルなので学習コストも低いが、不足する機能は自分でCSS定義する必要あり。
• .pure-g, .pure-u-1-3, .pure-form, .pure-button, .pure-menu など。
• グリッドは 2カラム、3カラム、5カラム、12カラム。
• 公式サイト：https://purecss.io/
• 日本語情報：https://segakuin.com/css/pure/ (SE学院)
• サンプル：pure-css.html

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

• JavaScript 未使用。CSS クラスさえもサポートしない。
• HTMLにCSSを呼び出す1行を加えるのみで、HTMLのデフォルト表示をモバイル対応にしてくれる超シンプルなもの。
• 公式サイト：https://andybrewer.github.io/mvp/
• サンプル：mvp-css.html

Skeleton CSS

• CSSクラスは10個程度しかなく学習コストは低い。
• .container, .row, .two .columns, .u-full-width, .button など。
• グリッドは12カラム固定。
• 公式サイト：http://getskeleton.com/
• 日本語情報：https://segakuin.com/css/skeleton/ (SE学院)
• サンプル：skeleton.html

Bulma

• シンプルなグリッドシステムを提供。
• Sass変数を設定するだけで簡単にカスタマイズ可能。
• JavaScrip が不要。他の JavaScript フレームワークとの相性もよい。
• 公式サイト：https://bulma.io/
• ドキュメント：https://bulma.io/documentation/
• 日本語情報：https://segakuin.com/css/bulma/ (SE学院)
• サンプル：bluma.html

SkyBlue

• Bootstrap に似ていますが非常にシンプル。
• CDN はまだ無いみたい。
• シンプルなアイコンを内蔵。
• 公式サイト：http://muffinman.io/skyblue/
• サンプル：skyblue.html

Materialize

• カーネギー大学の学生チームによって開発。
• Google が提唱するマテリアルデザインを実現するフレームワーク。
• 公式サイト：https://materializecss.com/
• 日本語情報：https://segakuin.com/css/materialize/ (SE学院)
• サンプル：materialize.html

UIkit

• Bootstrap の様に利用できて比較的シンプル。学習コストは比較的軽いほう。
• .uk-container, .uk-column-1-6, .uk-grid, .uk-input, .uk-margin など。
• レスポンシブの指定は *-sm-* ではなく @s で指定する。
• 等幅任意分割グリッドや、6分割グリッドなど。
• 公式サイト：https://getuikit.com/
• 日本語情報：https://segakuin.com/css/uikit/ (SE学院)
• サンプル：uikit.html

Ant Design

• 中国の Alibaba が開発。
• React と組み合わせて利用することを想定。
• 公式サイト：https://ant.design/
• ドキュメント：https://ant.design/docs/react/introduce
• サンプル：(省略)

new.css

• MVP.css 同様CSSを読み込むだけ。JavaScript無し。CSSクラス無し。
• シンプルだけど、割といい感じに仕上げてくれる。
• 公式サイト：https://newcss.net/
• サンプル：new-css.html

Semantic UI

• CSS と JavaScript から構成。
• デザイン性が高いのが評判。
• クラスは大半が class="ui ..." で指定し、... には class="ui blue button" など自然言語を意識した直感的なクラス名を指定。
• 50以上のUIコンポーネント、3,000以上のテーマ変数を持つ。
• .container, .grid, .row, .column .red .large .form など。
• 公式サイト：https://semantic-ui.com/
• ドキュメント：https://semantic-ui.com/introduction/getting-started.html
• 日本語情報：https://segakuin.com/css/semantic/ (SE学院)
• サンプル：senantic-ui.html

Milligram

• 軽量(圧縮で2KB)なフレームワーク。
• CSSクラスも10～20種程度で学習コストは低い。
• 公式サイト：https://milligram.io/
• 日本語情報：https://segakuin.com/css/milligram/
• サンプル：milligram.html

Tachyons

• Tailwind CSS と同様 ph3 mv6 などのユーティリティクラスを指定するタイプ。
• React や Vue.js などと組み合わせての利用を想定。
• 公式サイト：https://tachyons.io/
• ドキュメント：https://tachyons.io/docs/
• 日本語情報：https://segakuin.com/css/tachyons/ (SE学院)
• サンプル：tachyons.html

Spectre.css

• 軽量でレスポンシブでモダンであるとのこと。
• 公式サイト：https://picturepan2.github.io/spectre/
• ドキュメント：https://picturepan2.github.io/spectre/getting-started.html
• 日本語情報：https://segakuin.com/css/spectre/ (SE学院)
• サンプル：spectre-css.html

tacit

• MVP.css 同様CSSを読み込むだけ。JavaScript無し。CSSクラス無し。
• CSSを読み込むだけで tacit 作者自身のお気に入りのスタイルにしてくれる。
• 画面の横幅が狭いとテーブルのカラムをすべて横並びにしてしまうみたい。
• 公式サイト：https://yegor256.github.io/tacit/
• サンプル：tacit.html

Schema

• Bootstrap とよくにたフレームワーク。
• 12列のグリッド。
• Lessを使用。
• CDN での公開はまだないみたい？
• 公式サイト：http://danmalarkey.github.io/schema/
• ドキュメント：http://danmalarkey.github.io/schema/documentation.html
• サンプル：schema.html

INK

• ポルトガルのWeb開発会社SAPOが開発。
• グリッドはパーセント指定が可能でネストが楽。
• 英語ライクなクラス名。
• CSS UIコンポーネント、JavaScript UIコンポーネント、JavaScript APIなど機能も豊富。
• 公式サイト：https://ink.sapo.pt/
• サンプル：ink.html