Web制作者がチェックしておきたい、軽量で読み込みが速いCSSのフレームワークのまとめ

Webページやアプリでよく利用されるレイアウトやコンポーネントが簡単に利用できるCSSベースのフレームワークを紹介します。新しいプロジェクトを始める時に、モックアップを作成する時に、既存ページを変更する時に、ぴったりです。

CSSのフレームワークは数多くリリースされていますが、その中でも特に軽量で読み込みが速いものをまとめました。

軽量で読み込みが速いCSSのフレームワークのまとめ

イラスト: Girls Design Materials

サイトのキャプチャ

Topcoat
Topcoat -GitHub
デモページ

クリーンで、最速のWebアプリを構築するために開発されたCSSのコンポーネント集。BEMで実装されたさまざまなコンポーネントは管理に優れ、テーマカラーを変更することも可能です。デザインファイルも用意されています。
Apacheライセンス

サイトのキャプチャ

lit
lit -GitHub
デモページ

395bytesの超軽量、レスポンシブ対応のCSSのフレームワーク。グリッドにはfloat, flexbox, gridではなく、table-cellが使用されており、簡単にカラムレイアウトを扱えるのも大きな特徴です。
MITライセンス

サイトのキャプチャ

sakura
sakura -GitHub
デモページ

デュオトーンの美しいカラースキームを備えたミニマルなCSSのフレームワーク。既存ページのテーマファイルとしても利用でき、古いデザインのページもモダンな感じに簡単に変更できます。ブックマークレットも用意されているので、お試しも簡単です。
MITライセンス

サイトのキャプチャ

roolith
roolith -GitHub
デモページ

レスポンシブ対応ページを作成するためのCSSのテンプレート。HTMLの最小構成のひな形をはじめ、制作に必要なコンポーネントを利用して実装します。レイアウトはデフォルトでfloatが利用されていますが、Gridバージョンも利用できます。ナビゲーション・タブ・ダイアログ・アコーディオンなどのコンポーネントも豊富に用意されてます。
Free to commercial project.

サイトのキャプチャ

Petal
Petal -GitHub
デモページ

LESSで作成された、モダンで軽量なCSSのフレームワーク。UIコンポーネントごとにモジュール化されており、コピペで簡単に利用できます。レイアウトにはflexboxを利用しており、floatに変更することも可能です。
MITライセンス

サイトのキャプチャ

chota
chota -GitHub
デモページ

3kbの超軽量CSSのフレームワーク。レイアウトはflexboxで、calc()を使用したフレキシブルなグリッドを簡単に利用できます。コンポーネントはナビゲーション・タブ・カードと最小限ですが、ユーティリティが充実しています。新しいプロジェクトでflexboxを利用したい時にぴったりのシンプルで使いやすいフレームワークです。
MITライセンス

サイトのキャプチャ

siimple
siimple -GitHub
デモページカラー

ミニマルで美しいフラットなデザインのコンポーネントが利用できるCSSのフレームワーク。デザインをカスタマイズしなくても、完成したページを実装できます。モジュール式なので、必要なものだけを利用し、テーマカラーは11色が用意されています。
MITライセンス

サイトのキャプチャ

UIkit
UIkit -GitHub
デモページ

高速でパワフルなWebインターフェイスを開発するための軽量CSSのフレームワーク。Sass, LESSのどちらにも対応しています。レイアウトはflexboxで柔軟なグリッドを利用でき、コンポーネントもさまざまなものが用意されています。
MITライセンス

サイトのキャプチャ

Picnic CSS
Picnic CSS -GitHub
デモページ

Bootstrap, PureCSSなどの不満点を解消するために開発されたCSSのフレームワーク。レイアウトやコンポーネントをすべて含めても10kb以内で実装でき、特にスマホでの読み込みに最適化されています。flexboxを利用したさまざまなレイアウトが簡単に利用できます。
MITライセンス

サイトのキャプチャ

Milligram
Milligram -GitHub
デモページ

名の通り、今回紹介した中で最軽量2kbのCSSフレームワーク。UIのフレームワークではなく、パフォーマンスを向上させ、生産性も向上するよう、コードがよりクリーンになるように設計されています。flexboxを使ったプロジェクトのベースとして利用できます。
MITライセンス

sponsors

top of page

©2018 coliss