Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
Post on:2024年2月6日
sponsorsr
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。
Awesome CSS Frameworks -GitHub
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。
- ベース・リセットCSS・ノーマライズ
- クラスレスのCSSフレームワーク
- 超軽量のCSSフレームワーク
- 汎用性に優れたCSSフレームワーク
- Material DesignのCSSフレームワーク
- ユーティリティベースのCSSフレームワーク
- 特化型のCSSフレームワーク
- ツールキット
ベース・リセットCSS・ノーマライズ
- sanitize.css -GitHub
reset.cssとnormalize.cssに続くCSSリセット。
参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css - modern-normalize -GitHub
モダンなCSSのリセット。
参考: normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize - minireset.css -GitHub
軽量で、モダンなCSSリセット。 - modern-css-reset -GitHub
現在のWeb制作に合わせて制作された新しいCSSリセット。 - inuitcss -GitHub
大規模なUIプロジェクト向けの拡張可能でスケーラブルなSassベースのOOCSSフレームワーク。 - ress -GitHub
モダンCSS用のリセット。 - Natural Selection -GitHub
ベスト プラクティスのCSSセレクタのコレクション。
各リセットCSSやノーマライズについての詳細は、下記をご覧ください。
クラスレスのCSSフレームワーク
セマンティックHTMLを使用し、クラスに依存しないCSSのフレームワーク。
Water.css
MITライセンス
シンプルなWebサイトの見栄えをすこし素敵にする、Just-add-CSSのスタイル集です。
参考: シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css
MVP.css
MITライセンス
HTML要素のためのミニマリストなスタイルシート集。
参考: 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
sakura
MITライセンス
ミニマルで、クラスレスのCSSフレームワーク。
参考: CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
Tacit
MITライセンス
ダミーサイトをさくっと作成するためのCSSフレームワーク。
awsm.css
MITライセンス
クラスや属性などのないセマンティックHTMLマークアップ用のCSSライブラリ。
超軽量のCSSフレームワーク
5Kbよりも軽い、超軽量のCSSフレームワーク。
Pure
BSDライセンス
すべてのWebプロジェクトで使用できる、超軽量でレスポンシブ対応のCSSモジュールのセット。
Milligram
MITライセンス
ミニマルなCSSフレームワーク。
Picnic CSS
MITライセンス
軽量で美しいCSSのライブラリ。
Chota
MITライセンス
3Kbの本当に超軽量のCSSフレームワーク。
汎用性に優れたCSSフレームワーク
小さなプロジェクトから大きなプロジェクトまで、汎用性に優れたCSSフレームワーク。
Bootstrap
MITライセンス
レスポンシブ対応、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、JavaScriptフレームワーク。
参考: Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bulma
MITライセンス
FlexboxをベースにしたモダンなCSSフレームワーク。
参考: ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
Foundation
MITライセンス
先進的で、レスポンシブ対応のフロントエンドフレームワーク。
UIkit
MITライセンス
高速でパワフルなWebインターフェイスを開発するための軽量でモジュール化されたフロントエンドフレームワーク。
Primer
MITライセンス
GitHubのフロントエンドデザインを支えるCSSフレームワーク。
Carbon Components
Apacheライセンス
IBMのCarbon Design Systemを支えるコンポーネントライブラリ。
Fomantic UI
MITライセンス
簡潔なHTML、直感的なJavaScript、シンプルなデバッグで美しいWebサイトを素早く構築するCSSフレームワーク。
Pico.css
MITライセンス
ネイティブHTML要素のためのエレガントなスタイル、ダークモードが自動的に有効になります。
Blaze UI
MITライセンス
スケーラブルで保守可能な基盤を備えたWebサイトを素早く構築するための優れた構造を提供するオープンソースのモジュール式ツールキット。
Base
MITライセンス
堅実でレスポンシブ対応のCSSフレームワーク。
Cirrus
MITライセンス
プロトタイプのために設計された、コンポーネントとユーティリティ中心のSCSSフレームワーク。
Turretcss
MITライセンス
アクセシブルでセマンティックなWebサイトのためのレスポンシブ対応のフロントエンドフレームワーク。
Vanilla Framework
GNU Lesser General Public License v3.0
シンプルで拡張可能なCSSフレームワーク。
Pattern Fly
MITライセンス
エンタープライズのWebアプリ用のUIフレームワーク。
HiQ
MITライセンス
レスポンシブ対応のタイポグラフィと入力スタイルを備えたシンプルなCSSフレームワーク。
Material DesignのCSSフレームワーク
Material Components Web
Apache License 2.0
モジュール式でカスタマイズ可能な、Web用のマテリアルデザインUIコンポーネント。
MUI
MITライセンス
Googleのマテリアルデザインのガイドラインに沿った軽量なCSSフレームワーク。
Materialize
MITライセンス
Googleのマテリアルデザインのガイドラインに基づくレスポンシブ対応のフロントエンドライブラリ。
ユーティリティベースのCSSフレームワーク
Tailwind CSS
MITライセンス
UIを迅速に開発するためのユーティリティファーストのCSSフレームワーク。
参考: CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
参考: Tailwind CSSが私には合わなかった理由
Tachyons
MITライセンス
CSSを書かずにさまざまなUIを素早く構築および設計できるCSSフレームワーク。
Open Props
MITライセンス
一貫性のあるデザインを実装するためにCSS変数（カスタムプロパティ）で構成されたCSSフレームワーク。
参考: これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
特化型のCSSフレームワーク
98.css
Windows98風インターフェイスを構築するためのCSSフレームワーク。
Tufte.css
Edward Tufteの本や配布物で示されたアイデアを使用してWebページをスタイルするCSSフレームワーク。
Gutenberg
Webページを正しく印刷するためのモダンなフレームワーク。
XP.css
Windows XPのようなインターフェイスを構築するためのCSSライブラリ。
Bojler
レスポンシブ対応で、軽量なメールテンプレートを開発するためのフレームワーク。
TuiCss
MS-DOS風インターフェイスを作成するためのCSSフレームワーク。
7.css
Windows 7のようなインターフェイスを構築するためのCSSライブラリ。
ツールキット
ツールキットは、フレームワークよりもライブラリに近いです。実際のスタイルは提供しませんが、CSSプリプロセッサで使用できるユーティリティ（ミックスインなど）を提供します。
Bourbon
軽量なSassのツールセット。
sponsors
