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

Post on:2023年3月1日

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

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

Awesome CSS Frameworks -GitHub

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

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

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

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

2023年、現在の環境に適したリセット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

top of page

©2023 coliss