プログラミング

プログラミング

PR

2017年にリリースされたCSSフレームワーク、ライブラリ、ツール58選!【パート1】

5,200 views

読了時間 : 約4分43秒

トレンドの変化とCSSの進歩によって、最近リリースされた無料のリソースやツールは、おどろくべき数にのぼります。

しかし驚いている場合ではありません。これら時間節約に役立つCSSライブラリーとツールは、未採用であれ既に馴染まれているものであれ、CSSプロパティのクリアーな学習の窓口として構築されているのです。

本記事では、前後半にわけて、昨年(2017年)にリリースされたCSSライブラリ、フレームワーク、ツールから厳選したものを50個集めました。多様なカテゴリーを含んだコレクションです。

 

前半(本記事)

1.Flexboxのツール&ライブラリ

2.CSSグリッドツール

3.CSSボタンライブラリ

4.CSSコンポーネント

5.CSSアニメーションツール

6.CSSリファレンス、ガイドとチェックリスト

 

以下、後半

7.Atomic CSSフレームワーク

8.CSS Webフレームワーク

9.Lightweight CSSフレームワーク

10.雑多なCSSツールの束

 

 

1.CSS Flexboxのツールとライブラリ

 

ワッフルグリッド

Waffle Grid – 使いやすいフレックスボックスグリッドシステム。

Waffle Grid

 

RAGrid

RAGrid – クラスの代わりに認識可能な属性を使用するフレックスボックスグリッド。

RAGrid

 

タフィーフレームワーク

Taffy – Flexboxで構築された、オープンソースの軽量で現代的なCSSフレームワーク。

Taffy

 

Griddd

Griddd – 死ぬほどシンプルでカスタマイズ可能なフレックスボックスベースのグリッド。

Griddd

 

 

フレックスボックス・チートシート

Flexbox Cheatsheet – CSS Flexboxプロパティの対話型ガイドで、多くの例がついています。

Flexbox Cheatsheet

 

 

2.CSSグリッドツール&ライブラリ

 

グリッディ

Griddy – CSS Gridを学習するためのオンラインツール。

Griddy

 

グラフ

Graaf – CSSだけで作られたグリッドオーバーレイのデザインのコレクション。

Graaf

 

CSS グリッド・チートシート

CSS Grid Cheat Sheet – CSSグリッドのビジュアルガイドです。

CSS Grid Cheat Sheet

 

CSS Gridについては、以下の記事をご覧ください。

 

 

3.CSSボタンライブラリ

 

Bttn.css

Bttn.css – すばらしいプロジェクトのための素晴らしいボタン!

Bttn.css

 

ホバーボタン

Hover Buttons Library – アニメーション化されたCSS / SCSSボタンのコレクション。

Hover Buttons

 

Buttons

Buttons – CSS ボタンのコレクション。

Buttons

 

ソーシャルシェアキット

Social Share Kit – ソーシャルネットワークアイコン、共有ボタン、シェア数、フローティング/スティッキーボタンバー、ポップアップなどの、端正で見栄えの良いCSS / JavaScriptソーシャル共有ツールのライブラリ。

Social Share Kit

 

 

4.CSSコンポーネント

 

Foundation Building Blocks

Foundation Building Blocks –プロジェクトを開始するための100以上のコンポーネントのコレクション。

Foundation Building Blocks

 

Balloon.css

Balloon.css – CSSだけで作られたシンプルなツールチップ。
Balloon.css

 

Fontisto

Fontisto – 象徴的なフォントとCSSツールキット。

Fontisto

 

Prettyチェックボックス

Pretty Checkbox – チェックボックスとラジオボタンを美しくするための純粋CSSのライブラリ。

Pretty Checkbox

 

CSS チェックボックスライブラリ

CSS Checkbox Library –あらゆる趣きのCSSチェックボックスを含んだ巨大ライブラリ。

CSS Checkbox Library

 

explodal(爆発モーダル)

explodal – 97%以上のCSS、1行のJavaScript、小さなGIFで構成された「爆発的な」モーダルウィンドウ。

explodal

 

SCSS だけスライダー

SCSS Only Slider – このチュートリアルでは、SCSSのみでレスポンシブ・スライダーを作成する方法を教われます。

SCSS Only Slider

 

CSS ローダー

CSS Loader – 1つのdivと純粋なCSSだけを使用した、Webアプリケーション用のシンプル・ローダー。

CSS Loader

 

5.CSSアニメーションツール&ライブラリ

 

アニマテロ

Animatelo – 「カップめん式にお湯をかけるだけ」の Web アニメーション。

Animatelo

 

Vivifyライブラリー

Vivify – フリーのCSSアニメーションライブラリー.

Vivify

 

アニミスタ

Animista – あらかじめ作成されたCSSアニメーションのコレクションで遊んでみて、気に入ったものに手を入れ、実際に使用するものだけをとってこられます。

Animista

 

Obnoxious.CSS

Obnoxious.CSS – 気が強い人と弱い人のためのアニメーション。

OBNOXIOUS.CSS

 

 

 

6.CSSリファレンス、ガイド、チェックリスト

 

CSSのチートシート

50 Cheatsheets, References and Guides for CSS – さまざまな主題にまたがるCSS関連のチートシートおよびガイドの巨大なコレクション。

50 Cheatsheets, References and Guides for CSS

 

CSSデータベース

CSS Database – 実装のWeb標準になりつつあrるCSSの機能とその位置の包括的なリスト。

CSS Database

 

CSSトリガー

CSS Triggers – CSSプロパティがブラウザリソースをどのように利用するかを見ることができるインタラクティブなリソース。

CSS Triggers

 

Flawless Typography Checklist

Flawless Typography Checklist – インタラクティブな視覚的チェックリストにまとめられた完全なタイポグラフィのマスターコース。

Flawless Typography Checklist

 

Sassmagic

Sassmagic – 豊富なSassリファレンスガイド。

Sassmagic

 

Boilrplate

Boilrplate – プロジェクトを開始するのに役立つ定型ディレクトリ。

Boilrplate

 

 

以下、後半

7.Atomic CSSフレームワーク

8.CSS Webフレームワーク

9.Lightweight CSSフレームワーク

10.雑多なCSSツールの束

 

 

 

※本記事は、50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017を翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ