Advertisement

web-frameworks-2018-feat-1

 

短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく、クリーンで規則性のあるレイアウトを時間をかけずに作成できます。

 

今回はたくさんあCSSフレームワークの中から、特に人気の高いものを中心に、高機能で使い勝手の良いものから、無駄を一切省いた超軽量なものまで、最新CSSフレームワークをまとめてご紹介します。目的やデザインの好みなど、自分にあった使いやすいフレームワークを見つけてみてはいかがでしょう。

 

 

ウェブサイト開発を爆速に!人気オススメCSSフレームワーク厳選まとめ【2018年保存版】

Bulma

bulma-banner-1

Flexbox をベースにしたCSSフレームワーク。軽量で用意されたひとつのCSSファイルを読み込むだけの手軽さも人気の理由。

 

Bootstrap

bootstrap

HTML/CSS/JavaScriptから構成された、世界で最も有名なフレームワークのひとつ。ウェブサイトやアプリを効率よく開発するために開発されています。

 

Foundationn

foundation

レスポンシブなウェブサイトやアプリの作成に人気のフレームワークのひとつで、豊富に用意されたモジュールやコンポーネントは自由にカスタマイズ可能で、あらゆる端末デバイスに対応したスタイルを完成できます。ガイドにはスターターテンプレートも用意されています。

 

Mini.css

mini-css

ウェブサイト作成に必要最低限のコンポーネントを揃えた、レスポンシブ対応で7kbの軽量フレームワーク。カスタマイズ性も重視されているので、オリジナル性の高いデザインにもばっちり対応しています。

 

UI Kit

uikit-css

独自のSVGアイコンや豊富なコンポーネントを揃えた、フロントエンド向けフレームワーク。分かりやすいクラス命名など、カスタマイズのしやすさを念頭に置いています。

 

Skelton

skelton-css

小規模サイトの作成など、Bootstrapほど大量のコンポーネントが必要ないときに検討したい、200行のCSSのみで書かれた超軽量フレームワーク。ただし最近のサップデートはされていない模様。

 

Semantic UL

semantic-ui

デザイン性だけでなくレスポンシブなレイアウトを実現できるフロントエンド向けCSSフレームワーク。3000を超えるCSS Variabblesが用意されたカスタマイズ性に優れた点もポイント。

 

Propeller

propellar

BootstrapとMaterial Designを組み合わせた、魅力的な見た目と統一感、機能性にこだわったフレームワーク。レスポンシブ対応で、すぐにサイト作成を開始できるテンプレートも揃います。

 

Materialize CSS

materialize-css

マテリアルデザインをベースに作成されたCSSフレームワークで、Bootstrapに慣れ親しんでいるユーザーには使いやすいでしょう。すぐにサイト作成を開始できるテンプレートも用意されています。

 

Material Design Lite

material-design-lite

マテリアルデザインのガイドラインに沿って作成され、あらゆるデバイスに最適化されたフレームワークです。ガイドラインやコンポーネント、各種テンプレートとツールが用意されているので、手軽にマテリアルデザインのサイトを作成できます。

 

Spectre

spectre-css

モダンでレスポンシブの無料フレームワークで、エレガントな見た目やFlexboxベースのレイアウトシステムやCSSコンポーネントなどが揃い、どれもSassとScssでカスタマイズできます。10kb以下と計量で、ほとんどのモダンブラウザに対応しています。

 

Simple Grid

simple-grid-css

レスポンシブ対応のCSSグリッドレイアウトで、シンプルで軽量さが売りのフレームワーク。グリッドレイアウトやタイポグラフィーなど基本的なスタイリングのみとなるので、既存サイトのグリッドレイアウト化などサポート的な使い方にも適しています。

 

Mustard UI

mustard

モジュールとは分けて利用できるCSSフレームワークで、フロントエンドによるデザインで必要なコンポーネントを一通り揃えており、Scss Variablesによるカスタマイズのしやすさもポイント。

 

TentCSS

tent-css

レスポンシブサイト構築に必要な基本的なコンポーネントを揃えた、シンプルで使いやすいフレームワーク。5kb以下と超軽量で、BEM命名やFlexboxベースのグリッドレイアウトも魅力的です。

 

Base

base-css

Flexboxをベースにしたレスポンシブ対応のグリッドを使った、15kBの軽量高速フレームワーク。カスタマイズ性の良いLESS mixinも一緒に収録されています。

 

Turretcss

turretcss

シンプルでモダンな雰囲気を特長とした、モバイルファーストなCSSフレームワーク。軽量で高速のパフォーマンスが重視されていますが、豊富に揃ったUIライブラリには配色やタイポグラフィー、フォームなどが揃います。クラス名も分かりやすく、安心して設計を進めることができるでしょう。

 

MUI

mui-css

マテリアルデザインのガイドラインに沿って作成された、5.4kBの超軽量フレームワーク。Reactにも対応しており、SASSファイルを使ったカスタマイズが可能で、Eメールスタイリング用の異なるバージョンも公開されています。

 

Material UI

material-ui

GoogleのマテリアルデザインをReactベースで利用できるCSSフレームワーク。

 

Material

material-css2

Googleのマテリアルデザインのガイドラインをベースに、Bootstrap4で作成された、フロントエンド向けのレスポンシブ対応フレームワーク。

 

Flat Remix CSS Library

flat-remix-library-css

開発スピードアップを目指したCSSライブラリで、フラットスタイルでコントラストの高い配色がポイント。ライセンスはMITとなります。

 

WebUI

webui-css

グリッドシステムやナビメニュー、ツールチップ、アラート、トグル、タブなど基本的なコンポーネントが一式揃えたWebフレームワークで、レスポンシブデザインにもばっちり対応しています。

 

GroundworkCSS 2

groundwork-css2

レスポンシブ対応で多彩なコンポーネントを揃えた、クロスブラウザ対応のフレームワーク。Sassで作られているので、分かりやすい構造でカスタマイズしやすく工夫されています。

 

Pure CSS

pure-css

このフレームワークのポイントはモジュール形式となっているので、ナビメニューやボタン、フォームなどすべてカスタマイズできます。3.8kbという超軽量ながら、各種コンポーネントが揃っているので、素早くサイトを作成できます。

 

Blaze UI

blaze-ui-css

豊富なコンポーネントが揃ったBootstrapなどの大型フレームワークと、MilligramやMinなどの超軽量フレームワークの中間を目指しています。レスポンシブに対応したモジュール形式で、スタイリングが分かりやすいBEMクラス命名が採用されています。

 

Karma CSS

karma-css

Flexboxをベースにしたモバイルファーストのグリッドシステムで、あらゆるブラウザに対応したNormalize.cssも含まれているので、プロトタイプをサクッと作成したいときなどに便利で、カスタマイズ性にも優れたフレームワーク。

 

Less Framework 4

less-framework

あらゆる端末デバイスに対応したCSSグリッドシステムが特長のフレームワークで、4つのレイアウトと3つのタイポグラフィー用プリセットが準備されており、どれもシングルグリッドをべーすとしています。

 

Tachyonns

tachyoons

モバイルファーストで作成され、レスポンシブ対応のウェブサイトの開発向けCSSフレームワーク。パフォーマンスを重視するためにコードは最適化されており、チーム間での利用にも適したシンプルさが特長。

 

Topcoat

topcoat-css

スピードとパフォーマンスを重視し、ベンチマークを行い開発された軽量フレームワーク。モバイルレスポンシブ対応で、BEMクラス命名でスタイルシートをカスタマイズしやすい点もポイント。

 

Milligram

milligram

ミニマルなUIライブラリを揃えたCSSフレームワークで、Bootstrapのような豊富なコンポーネントなどは揃っていないので、レイアウトをサクッと作成したいデベロッパーにオススメ。

 

Petal

petal-framework

ユニークなデザインのUIライブラリを揃えた、軽量フロントエンドフレームワーク。たくさんのコンポーネントを収録しており、LESS CSSによるカスタマイズが可能。アップデートも定期的に行われており、必要なコンポーネントのみを選択できます。

 

Kube

kube-css

使用するJSコンポーネントも含め、30kbと軽量のフレームワークで、たくさんのライブラリが収録されており、実践のサイト開発にも利用できるサンプルやコードスニペットも紹介されています。

 

Chota

chota

3KBと超軽量なCSSオンリーのフレームワークで、サイト開発のベースとして利用できますが、LessやSassなどのプリプロセッサーには非対応となっています。

 

Beauter

beauter

5kb以下と超軽量のフレームワークですが、レスポンシブ対応グリッドなど基本的なスタイルはもちろん、パララックスやモーダルウィンドウ、ツールチップなど多彩なUIライブラリも揃えています。

 

Smart CSS Grid

smart-css-grid

CSS Gridプロパティをベースに作成されたグリッドシステムで、0.5kBという軽量さで、レスポンシブやネストなども考えることなくレイアウトを構築できます。

 

Griddd

griddd-framework

Sassを利用したFlexboxベースの軽量CSSフレームワーク。カスタマイズ性にも優れ、分かりやすいクラス名表記がうれしいシンプルなフレームワーク。

 

Siimple

siimple-framework

フラットデザインの特長を取り入れたシンプルなフレームワークで、デザインとサイト開発どちらの面にも嬉しいミニマルスタイルです。プロトタイプの作成やカスタムレイアウトをゼロから作りたいときに。

 

Cirrus

cirrus-framework

レスポンシブ対応のCSSフレームワークで、必要なコンポーネントをモジュール形式で自由に追加できます。最低限のスタイルに加え、ホバーエフェクトやカードスタイルといったトレンドにも対応できるフレームワークと言えるでしょう。

 

Tailwind CSS

tailwind-css

BootstrapやFoundation、Bulmaなどの人気フレームワークとは異なり、UIデザインの開発スピードを向上することを目的としたCSSフレームワークです。

トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでに