SONICMOOV Googleページ

【超軽量多数】おすすめCSSフレームワーク 14選

【超軽量多数】おすすめCSSフレームワーク 14選

  • このエントリーをはてなブックマークに追加

CSSフレームワークと言えばBootstrapが有名だと思いますが、今回は【軽量】なものに少しフォーカスして探してみました。言うまでもありませんが、軽量なデータはユーザーがページへのアクセスした時のストレスを軽減してくれるメリットがあります。

こちらのランディングページ用テンプレートもチェックしてみてください。
【無料】高品質なランディングページテンプレート10選!

目次

  1. FlexboxがベースのSPECTRE
  2. GZIP圧縮で6KBのMustard-UI
  3. FlexboxがベースのBulma
  4. マウスオーバーアニメーションもチェックUIKit
  5. BEMを念頭に開発されたtentCSS
  6. マテリアルデザインで作成Materialize
  7. 応答性の高い設計Foundation
  8. GitHubで42000以上のスターSemantic-UI
  9. マテリアルデザインがベースMUI
  10. モバイルデバイスを念頭に開発Pure
  11. 応答性の高いグリッドと最新コンポーネントによる設計mini.css
  12. 小さなプロジェクトに最適Skeleton
  13. Not UIフレームワークMilligram
  14. SCSSに多くの変数とクラスPicnic CSS

FlexboxがベースのSPECTRE

軽量のCSSフレーム ワークSPECTRE

https://picturepan2.github.io/spectre/

GZIP圧縮で10KBという軽量なCSSフレームワークです。レスポンシブでFlexboxをベースに組み込まれています。

GZIP圧縮で6KBのMustard-UI

GZIPで6KBのCSSフレームワークMustard UI

https://mustard-ui.com/

これもGZIP圧縮で6KBの超軽量なCSSフレームワークです。オープンソースで作成されています。

FlexboxがベースのBulma

GitHubで人気のCSSフレームワーク

https://bulma.io/

GitHubで28000以上のスターが付いている人気のCSSフレームワークの一つです。

マウスオーバーアニメーションもチェックUIKit

アニメーション付きCSSフレームワーク

https://getuikit.com/

マウスオーバー時のアニメーションが用意されています。

BEMを念頭に開発されたtentCSS

BEMを念頭に開発されたCSSフレームワーク

https://css.sitetent.com/

BEMを念頭に開発されたCSSフレームワークとなっており、GZIP圧縮で5KBです。

マテリアルデザインで作成Materialize

人気のCSSフレームワーク

https://materializecss.com/

マテリアルデザインで作成された人気のCSSフレームワークの一つです。

応答性の高い設計Foundation

応答性の高いCSSフレームワーク

https://foundation.zurb.com/

どのデバイスでも見た目の美しい応答性の高いWebサイト、アプリケーション、電子メールを簡単に設計できるようになっていることが売りだそうです。

GitHubで42000以上のスターSemantic-UI

クラス名に特徴があるフレームワークSemantic UI

https://semantic-ui.com/

下記のように見てもらうと分かるのですが、人間が理解しやすい名前がクラス名に使われている設計になっています。GitHubで42000以上のスターを獲得している人気のCSSフレームワークです。

<div class="ui three buttons">
  <button class="ui active button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

マテリアルデザインがベースMUI

マテリアルデザインがベースのCSSフレームワーク

https://www.muicss.com/

マテリアルデザインのガイドラインに基づいて作成されたフレームワークで、GZIP圧縮で6.6KBと軽量です。

モバイルデバイスを念頭に開発Pure

モバイルデバイスを念頭に開発されたCSSフレームワーク

https://purecss.io/

モバイルデバイスを念頭に開発されたもので、ファイルサイズを小さくすることを第一にCSSは深く検討されたものとなっています。

応答性の高いグリッドと最新コンポーネントによる設計mini.css

応答性の高いグリッドなCSSフレームワーク

https://minicss.org/

10KB未満と応答性の高いグリッドと最新のコンポーネントにより、機能だけではなく美しく見えるようにも設計されています。

小さなプロジェクトに最適Skeleton

小さなプロジェクトに最適なCSSフレームワーク

http://getskeleton.com/

小さなプロジェクトや、大きなフレームワークのすべての有用性を必要としない場合は、スケルトンを使用するのがいいかもしれません。

Not UIフレームワークMilligram

CSSフレームワークMilligram

https://milligram.io/

コードがよりクリーンになるように設計されたものとなっています。

SCSSに多くの変数とクラスPicnic CSS

SCSSで書かれたCSSフレームワークPicnic CSS

https://picnicss.com/

Picnic CSSはSCSSに多くの変数とクラス(プレースホルダー)で書かれており、簡単に拡張できるようになっています。

それでは今回はこんなところで。

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation