Web制作者がチェックしておきたい、軽量で読み込みが速いCSSのフレームワークのまとめ
Post on:2018年2月15日
sponsors
Webページやアプリでよく利用されるレイアウトやコンポーネントが簡単に利用できるCSSベースのフレームワークを紹介します。新しいプロジェクトを始める時に、モックアップを作成する時に、既存ページを変更する時に、ぴったりです。
CSSのフレームワークは数多くリリースされていますが、その中でも特に軽量で読み込みが速いものをまとめました。
イラスト: Girls Design Materials
クリーンで、最速のWebアプリを構築するために開発されたCSSのコンポーネント集。BEMで実装されたさまざまなコンポーネントは管理に優れ、テーマカラーを変更することも可能です。デザインファイルも用意されています。
Apacheライセンス
395bytesの超軽量、レスポンシブ対応のCSSのフレームワーク。グリッドにはfloat, flexbox, gridではなく、table-cellが使用されており、簡単にカラムレイアウトを扱えるのも大きな特徴です。
MITライセンス
デュオトーンの美しいカラースキームを備えたミニマルなCSSのフレームワーク。既存ページのテーマファイルとしても利用でき、古いデザインのページもモダンな感じに簡単に変更できます。ブックマークレットも用意されているので、お試しも簡単です。
MITライセンス
レスポンシブ対応ページを作成するためのCSSのテンプレート。HTMLの最小構成のひな形をはじめ、制作に必要なコンポーネントを利用して実装します。レイアウトはデフォルトでfloatが利用されていますが、Gridバージョンも利用できます。ナビゲーション・タブ・ダイアログ・アコーディオンなどのコンポーネントも豊富に用意されてます。
Free to commercial project.
LESSで作成された、モダンで軽量なCSSのフレームワーク。UIコンポーネントごとにモジュール化されており、コピペで簡単に利用できます。レイアウトにはflexboxを利用しており、floatに変更することも可能です。
MITライセンス
3kbの超軽量CSSのフレームワーク。レイアウトはflexboxで、calc()を使用したフレキシブルなグリッドを簡単に利用できます。コンポーネントはナビゲーション・タブ・カードと最小限ですが、ユーティリティが充実しています。新しいプロジェクトでflexboxを利用したい時にぴったりのシンプルで使いやすいフレームワークです。
MITライセンス
siimple
siimple -GitHub
デモページ、カラー
ミニマルで美しいフラットなデザインのコンポーネントが利用できるCSSのフレームワーク。デザインをカスタマイズしなくても、完成したページを実装できます。モジュール式なので、必要なものだけを利用し、テーマカラーは11色が用意されています。
MITライセンス
高速でパワフルな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
