デザイン

デザイン

最新!CSSをもっと効率よく活用できるツールを一挙紹介!【もう試しましたか?】

2,206 views

CSSが進歩に従って機能を活用するためのライブラリやツールが次々登場しています。こうしたものを利用することで、普段の作業時間を短縮できたり、まだ知らない機能について知ることができます。

今回は今年リリースされたばかりの、最新CSSライブラリ、フレームワーク、ツールを紹介します。

 

CSS Flexboxツール&ライブラリ

1.Waffle Grid

Flexboxのグリッドシステムを簡単に利用できます。

css①

 

2.RAGrid

クラスの代わりに認識しやすい属性を使ったFlexboxグリッドです。

css②

 

3.Griddd

非常にシンプルながらカスタマイズ性が高いグリッドです。

css③

 

4.Flexboxチートシート

CSS Flexboxのプロパティを具体的な例とともに紹介しています。

css④

 

 

CSS Gridツール&ライブラリ

1.Griddy

CSS Gridをオンラインで学べるツールです。

css⑤

 

2.Graaf

デザイナー向けの、純粋なCSS Gridで制作されたオーバーレイです。

css⑥

 

3.CSS Grid Cheat Sheet

CSS Gridを美しく学べるガイドです。

css⑦

 

 

CSSコンポーネント

1.Foundation Building Blocks

作業を短縮するコンポーネントが100以上も揃っています。

css⑧

 

2.Bttn.css

美しいボタンのコレクションです。

css⑨

 

3.explodal

爆発するような演出で表示されるモーダルウィンドウで、CSSと1行のJavaScriptコード、小さなGIFファイルだけで制作されています。

css⑩

 

4.Social Share Kit

ソーシャルメディアへの共有ツールで、アイコン、ボタン、共有カウント、ポップアップなどが用意されています。

css⑪

 

 

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

1.Animatelo

簡単にすぐ使えるアニメーションです。

css⑫

 

2.Animista

既に完成したCSSアニメーションが揃っており、好きなようにカスタマイズしてサイトに組み込むことができます。

css⑬

 

 

CSSウェブフレームワーク

1.awsm.css

クラスや属性を使わずに美しいHTMLを書くことができるライブラリです。

css⑭

 

2.BBC Grandstand

よく使うCSSやヘルパークラスを集めたサイトです。

css⑮

 

 

CSSフレームワーク

1.Luxbar

非常に軽量なCSSのみで作られたナビゲーションバーです。もちろんレスポンシブ対応です。

css⑯

 

2.kernel.css

マテリアルデザインに影響を受けて作られた、CSSとJavaScriptの軽量フレームワークです。

css⑰

 

 

 

こうしたツールやライブラリを利用すれば、手間と時間を短縮しながらも美しいサイトが作れます。新しい分野を学ぶ時のヒントとして使うのもオススメです。

 

 

 

 

※本記事は、30 of Our Favorite CSS Resources from This Yearを翻訳・再構成したものです。

関連記事

おすすめ記事