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

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

2022年版、CSSフレームワークのまとめ

Awesome CSS Frameworks -GitHub

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

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

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

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

2022年、現在の環境に適した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のツールセット。

sponsors

top of page

©2022 coliss