プログラミング

プログラミング

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

3,093 views

読了時間 : 約4分44秒

トレンドの変化と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を翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ