短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。
今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。
ウェブサイト開発を爆速に！人気オススメCSSフレームワーク厳選まとめ【2018年保存版】
Bulma
Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。
Bootstrap
HTML／CSS／JavaScriptから構成された、世界で最も有名なフレームワークのひとつ。ウェブサイトやアプリを効率よく開発するために開発されています。
- URL: http://getbootstrap.com/
- CDN: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css
- CDN（JS）: https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js（同時に jQuery と Popper.JSを読み込む必要あり。）
- ガイド: http://getbootstrap.com/docs/4.1/getting-started/introduction/
Foundationn
レスポンシブなウェブサイトやアプリの作成に人気のフレームワークのひとつで、豊富に用意されたモジュールやコンポーネントは自由にカスタマイズ可能で、あらゆる端末デバイスに対応したスタイルを完成できます。ガイドにはスターターテンプレートも用意されています。
- URL: https://foundation.zurb.com/
- CDN: https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css
- CDN（JS）: https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation-prototype.min.css
- ガイド: https://foundation.zurb.com/frameworks-docs.html
Mini.css
ウェブサイト作成に必要最低限のコンポーネントを揃えた、レスポンシブ対応で7kbの軽量フレームワーク。カスタマイズ性も重視されているので、オリジナル性の高いデザインにもばっちり対応しています。
- URL: https://minicss.org/
- CDN: https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css
- ガイド: https://minicss.org/index
UI Kit
独自のSVGアイコンや豊富なコンポーネントを揃えた、フロントエンド向けフレームワーク。分かりやすいクラス命名など、カスタマイズのしやすさを念頭に置いています。
Skelton
小規模サイトの作成など、Bootstrapほど大量のコンポーネントが必要ないときに検討したい、200行のCSSのみで書かれた超軽量フレームワーク。ただし最近のサップデートはされていない模様。
Semantic UL
デザイン性だけでなくレスポンシブなレイアウトを実現できるフロントエンド向けCSSフレームワーク。3000を超えるCSS Variabblesが用意されたカスタマイズ性に優れた点もポイント。
- URL: https://semantic-ui.com/
- CDN: https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css
- CDN（JS）: https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js
- ガイド: https://semantic-ui.com/introduction/getting-started.html
Propeller
BootstrapとMaterial Designを組み合わせた、魅力的な見た目と統一感、機能性にこだわったフレームワーク。レスポンシブ対応で、すぐにサイト作成を開始できるテンプレートも揃います。
Materialize CSS
マテリアルデザインをベースに作成されたCSSフレームワークで、Bootstrapに慣れ親しんでいるユーザーには使いやすいでしょう。すぐにサイト作成を開始できるテンプレートも用意されています。
- URL: https://materializecss.com/
- CDN: https://cdnjs.com/libraries/materialize
- ガイド: https://materializecss.com/getting-started.html
Material Design Lite
マテリアルデザインのガイドラインに沿って作成され、あらゆるデバイスに最適化されたフレームワークです。ガイドラインやコンポーネント、各種テンプレートとツールが用意されているので、手軽にマテリアルデザインのサイトを作成できます。
- URL: https://getmdl.io/
- CDN: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css
- CDN（JS）: https://code.getmdl.io/1.3.0/material.min.js
- ガイド: https://getmdl.io/started/index.html
Spectre
モダンでレスポンシブの無料フレームワークで、エレガントな見た目やFlexboxベースのレイアウトシステムやCSSコンポーネントなどが揃い、どれもSassとScssでカスタマイズできます。10kb以下と計量で、ほとんどのモダンブラウザに対応しています。
- URL: https://picturepan2.github.io/spectre/
- CDN: https://cdnjs.com/libraries/spectre.css
- ガイド: https://picturepan2.github.io/spectre/getting-started.html
Simple Grid
レスポンシブ対応のCSSグリッドレイアウトで、シンプルで軽量さが売りのフレームワーク。グリッドレイアウトやタイポグラフィーなど基本的なスタイリングのみとなるので、既存サイトのグリッドレイアウト化などサポート的な使い方にも適しています。
- URL: http://simplegrid.io/
- ガイド: http://simplegrid.io/
Mustard UI
モジュールとは分けて利用できるCSSフレームワークで、フロントエンドによるデザインで必要なコンポーネントを一通り揃えており、Scss Variablesによるカスタマイズのしやすさもポイント。
- URL: https://mustard-ui.com/
- CDN: https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css
- ガイド: https://mustard-ui.com/
TentCSS
レスポンシブサイト構築に必要な基本的なコンポーネントを揃えた、シンプルで使いやすいフレームワーク。5kb以下と超軽量で、BEM命名やFlexboxベースのグリッドレイアウトも魅力的です。
Base
Flexboxをベースにしたレスポンシブ対応のグリッドを使った、15kBの軽量高速フレームワーク。カスタマイズ性の良いLESS mixinも一緒に収録されています。
- URL: http://getbase.org/
- CDN: https://cdn.rawgit.com/getbase/base/master/css/index.css
- ガイド: https://github.com/getbase/base/blob/master/readme.md#documentation
Turretcss
シンプルでモダンな雰囲気を特長とした、モバイルファーストなCSSフレームワーク。軽量で高速のパフォーマンスが重視されていますが、豊富に揃ったUIライブラリには配色やタイポグラフィー、フォームなどが揃います。クラス名も分かりやすく、安心して設計を進めることができるでしょう。
- URL: http://turretcss.com/
- CDN: https://cdnjs.cloudflare.com/ajax/libs/bigfishtv-turret/4.0.0/turret.min.css
- ガイド: https://turretcss.com/docs/getting-started/
MUI
マテリアルデザインのガイドラインに沿って作成された、5.4kBの超軽量フレームワーク。Reactにも対応しており、SASSファイルを使ったカスタマイズが可能で、Eメールスタイリング用の異なるバージョンも公開されています。
- URL: https://www.muicss.com/
- CDN: https://cdnjs.com/libraries/muicss
- ガイド: https://www.muicss.com/docs/v1/getting-started/introduction
Material UI
GoogleのマテリアルデザインをReactベースで利用できるCSSフレームワーク。
Material
Googleのマテリアルデザインのガイドラインをベースに、Bootstrap4で作成された、フロントエンド向けのレスポンシブ対応フレームワーク。
- URL: http://daemonite.github.io/material/#doc_index_content_principles
- ガイド: http://daemonite.github.io/material/docs/4.1/getting-started/introduction/
Flat Remix CSS Library
開発スピードアップを目指したCSSライブラリで、フラットスタイルでコントラストの高い配色がポイント。ライセンスはMITとなります。
WebUI
グリッドシステムやナビメニュー、ツールチップ、アラート、トグル、タブなど基本的なコンポーネントが一式揃えたWebフレームワークで、レスポンシブデザインにもばっちり対応しています。
GroundworkCSS 2
レスポンシブ対応で多彩なコンポーネントを揃えた、クロスブラウザ対応のフレームワーク。Sassで作られているので、分かりやすい構造でカスタマイズしやすく工夫されています。
Pure CSS
このフレームワークのポイントはモジュール形式となっているので、ナビメニューやボタン、フォームなどすべてカスタマイズできます。3.8kbという超軽量ながら、各種コンポーネントが揃っているので、素早くサイトを作成できます。
- URL: https://purecss.io/
- CDN: https://unpkg.com/purecss@1.0.0/build/pure-min.css
- ガイド: https://purecss.io/start/
Blaze UI
豊富なコンポーネントが揃ったBootstrapなどの大型フレームワークと、MilligramやMinなどの超軽量フレームワークの中間を目指しています。レスポンシブに対応したモジュール形式で、スタイリングが分かりやすいBEMクラス命名が採用されています。
- URL: https://www.blazeui.com/
- CDN: https://unpkg.com/blaze@4.0.0-7/scss/dist/blaze.min.css
- ガイド: https://www.blazeui.com/getting-started/install
Karma CSS
Flexboxをベースにしたモバイルファーストのグリッドシステムで、あらゆるブラウザに対応したNormalize.cssも含まれているので、プロトタイプをサクッと作成したいときなどに便利で、カスタマイズ性にも優れたフレームワーク。
- URL: https://karmacss.com/en/latest/
- CDN: https://unpkg.com/karma-css@latest/dist/karma.min.css
- ガイド: https://karmacss.com/en/latest/installation.html
Less Framework 4
あらゆる端末デバイスに対応したCSSグリッドシステムが特長のフレームワークで、4つのレイアウトと３つのタイポグラフィー用プリセットが準備されており、どれもシングルグリッドをべーすとしています。
Tachyonns
モバイルファーストで作成され、レスポンシブ対応のウェブサイトの開発向けCSSフレームワーク。パフォーマンスを重視するためにコードは最適化されており、チーム間での利用にも適したシンプルさが特長。
- URL: http://tachyons.io/
- CDN: https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css
- ガイド: http://tachyons.io/#getting-started
Topcoat
スピードとパフォーマンスを重視し、ベンチマークを行い開発された軽量フレームワーク。モバイルレスポンシブ対応で、BEMクラス命名でスタイルシートをカスタマイズしやすい点もポイント。
- URL: http://topcoat.io/
- CDN: https://cdnjs.com/libraries/topcoat/
- CDN（アイコン）: https://cdnjs.com/libraries/topcoat-icons/
Milligram
ミニマルなUIライブラリを揃えたCSSフレームワークで、Bootstrapのような豊富なコンポーネントなどは揃っていないので、レイアウトをサクッと作成したいデベロッパーにオススメ。
- URL: https://milligram.io/
- CDN: https://cdnjs.com/libraries/milligram
- ガイド: https://milligram.io/#getting-started
Petal
ユニークなデザインのUIライブラリを揃えた、軽量フロントエンドフレームワーク。たくさんのコンポーネントを収録しており、LESS CSSによるカスタマイズが可能。アップデートも定期的に行われており、必要なコンポーネントのみを選択できます。
- URL: https://shakrmedia.github.io/petal/
- CDN: https://cdn.rawgit.com/shakrmedia/petal/7841a6e8/dist/petal.min.css
- ガイド: https://shakrmedia.github.io/petal/start/
Kube
使用するJSコンポーネントも含め、３０kbと軽量のフレームワークで、たくさんのライブラリが収録されており、実践のサイト開発にも利用できるサンプルやコードスニペットも紹介されています。
- URL: https://imperavi.com/kube/
- CDN: https://cdnjs.com/libraries/kube
- ガイド: https://imperavi.com/kube/docs/
Chota
3KBと超軽量なCSSオンリーのフレームワークで、サイト開発のベースとして利用できますが、LessやSassなどのプリプロセッサーには非対応となっています。
Beauter
5kb以下と超軽量のフレームワークですが、レスポンシブ対応グリッドなど基本的なスタイルはもちろん、パララックスやモーダルウィンドウ、ツールチップなど多彩なUIライブラリも揃えています。
- URL: http://beauter.outboxcraft.com/
- CDN: https://rawgit.com/outboxcraft/beauter/master/beauter.min.css
- CDN（JS）: https://rawgit.com/outboxcraft/beauter/master/beauter.min.js
- ガイド: http://beauter.outboxcraft.com/docs/start/
Smart CSS Grid
CSS Gridプロパティをベースに作成されたグリッドシステムで、0.5kBという軽量さで、レスポンシブやネストなども考えることなくレイアウトを構築できます。
Griddd
Sassを利用したFlexboxベースの軽量CSSフレームワーク。カスタマイズ性にも優れ、分かりやすいクラス名表記がうれしいシンプルなフレームワーク。
Siimple
フラットデザインの特長を取り入れたシンプルなフレームワークで、デザインとサイト開発どちらの面にも嬉しいミニマルスタイルです。プロトタイプの作成やカスタムレイアウトをゼロから作りたいときに。
- URL: https://siimple.juanes.xyz/
- CDN: https://cdn.jsdelivr.net/npm/siimple@3.0.0/dist/siimple.min.css
- ガイド: https://siimple.juanes.xyz/documentation
Cirrus
レスポンシブ対応のCSSフレームワークで、必要なコンポーネントをモジュール形式で自由に追加できます。最低限のスタイルに加え、ホバーエフェクトやカードスタイルといったトレンドにも対応できるフレームワークと言えるでしょう。
Tailwind CSS
BootstrapやFoundation、Bulmaなどの人気フレームワークとは異なり、UIデザインの開発スピードを向上することを目的としたCSSフレームワークです。
