Web制作者がチェックしておきたい！ 2022年版、CSSフレームワークのまとめ

ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。

Awesome CSS Frameworks -GitHub

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。

• ベース・リセットCSS・ノーマライズ
• クラスレスのCSSフレームワーク
• 超軽量のCSSフレームワーク
• 汎用性に優れたCSSフレームワーク
• Material DesignのCSSフレームワーク
• ユーティリティベースのCSSフレームワーク
• 特化型のCSSフレームワーク
• ツールキット

ベース・リセットCSS・ノーマライズ

• normalize.css -GitHub
  Eric Meyerのreset.cssに代わる、現在でも多くのサイトで使用されているノーマライズ。
  参考: CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
• sanitize.css -GitHub
  reset.cssとnormalize.cssに続くCSSリセット。
  参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
• minireset.css -GitHub
  軽量で、モダンなCSSリセット。
• modern-css-reset -GitHub
  現在のWeb制作に合わせて制作された新しいCSSリセット。
• inuitcss -GitHub
  大規模なUIプロジェクト向けの拡張可能でスケーラブルなSassベースのOOCSSフレームワーク。
• ress -GitHub
• modern-normalize -GitHub
  モダンなCSSのリセット。
  参考: normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize
• Natural Selection -GitHub
  モダンブラウザ用のノーマライズ（IEは未対応）。

各リセットCSSリノーマライズについての詳細は、下記をご覧ください。

2023年、現在の環境に適したリセットCSSのまとめ

クラスレスのCSSフレームワーク

セマンティックHTMLを使用し、クラスに依存しないCSSのフレームワーク。

Water.css
シンプルなWebサイトの見栄えをすこし素敵にする、Just-add-CSSのスタイル集です。
参考: シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css

MVP.css
HTML要素のためのミニマリストなスタイルシート集。
参考: 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css

sakura
ミニマルで、クラスレスのCSSフレームワーク。
参考: CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura

Tacit
ダミーサイトをさくっと作成するためのCSSフレームワーク。

awsm.css
クラスや属性などのないセマンティックHTMLマークアップ用のCSSライブラリ。

超軽量のCSSフレームワーク

5Kbよりも軽い、超軽量のCSSフレームワーク。

Pure
すべてのWebプロジェクトで使用できる、超軽量でレスポンシブ対応のCSSモジュールのセット。

Milligram
ミニマルなCSSフレームワーク。

Picnic CSS
軽量で美しいCSSのライブラリ。

Chota
3Kbの本当に超軽量のCSSフレームワーク。

汎用性に優れたCSSフレームワーク

小さなプロジェクトから大きなプロジェクトまで、汎用性に優れたCSSフレームワーク。

Bootstrap
レスポンシブ対応、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、JavaScriptフレームワーク。
参考: Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説

Bulma
FlexboxをベースにしたモダンなCSSフレームワーク。
参考: ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma

Foundation
先進的で、レスポンシブ対応のフロントエンドフレームワーク。

UIkit
高速でパワフルなWebインターフェイスを開発するための軽量でモジュール化されたフロントエンドフレームワーク。

Primer
GitHubのフロントエンドデザインを支えるCSSフレームワーク。

Carbon Components
IBMのCarbon Design Systemを支えるコンポーネントライブラリ。

Fomantic UI
簡潔なHTML、直感的なJavaScript、シンプルなデバッグで美しいWebサイトを素早く構築するCSSフレームワーク。

Pico.css
ネイティブHTML要素のためのエレガントなスタイル、ダークモードが自動的に有効になります。

Blaze UI
スケーラブルで保守可能な基盤を備えたWebサイトを素早く構築するための優れた構造を提供するオープンソースのモジュール式ツールキット。

Base
堅実でレスポンシブ対応のCSSフレームワーク。

Cirrus
プロトタイプのために設計された、コンポーネントとユーティリティ中心のSCSSフレームワーク。

Turretcss
アクセシブルでセマンティックなWebサイトのためのレスポンシブ対応のフロントエンドフレームワーク。

Vanilla Framework
シンプルで拡張可能なCSSフレームワーク。

Pattern Fly
エンタープライズのWebアプリ用のUIフレームワーク。

HiQ
レスポンシブ対応のタイポグラフィと入力スタイルを備えたシンプルなCSSフレームワーク。

Material DesignのCSSフレームワーク

Material Components Web
モジュール式でカスタマイズ可能な、Web用のマテリアルデザインUIコンポーネント。

MUI
Googleのマテリアルデザインのガイドラインに沿った軽量なCSSフレームワーク。

ユーティリティベースのCSSフレームワーク

Tailwind CSS
UIを迅速に開発するためのユーティリティファーストのCSSフレームワーク。
参考: CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
参考: Tailwind CSSが私には合わなかった理由

Tachyons
CSSを書かずにさまざまなUIを素早く構築および設計できるCSSフレームワーク。

Open Props
一貫性のあるデザインを実装するためにCSS変数（カスタムプロパティ）で構成されたCSSフレームワーク。
参考: これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

特化型のCSSフレームワーク

98.css
Windows98風インターフェイスを構築するためのCSSフレームワーク。

Tufte.css
Edward Tufteの本や配布物で示されたアイデアを使用してWebページをスタイルするCSSフレームワーク。

Gutenberg
Webページを正しく印刷するためのモダンなフレームワーク。

Bojler
レスポンシブ対応で、軽量なメールテンプレートを開発するためのフレームワーク。

TuiCss
MS-DOS風インターフェイスを作成するためのCSSフレームワーク。

ツールキット

ツールキットは、フレームワークよりもライブラリに近いです。実際のスタイルは提供しませんが、CSSプリプロセッサで使用できるユーティリティ（ミックスインなど）を提供します。

Bourbon
軽量なSassのツールセット。