Advertisement

 

海外サイト WebDesigner Depot で公開された 155 Best CSS Libraries for 2019 より許可をもらい、翻訳転載しています。

 

この記事では、ウェブサイト制作をより手軽で簡単にする最新CSSライブラリをまとめてご紹介します。制作時間の短縮はもちろん、新しく登場するCSSの学習ガイドとしても最適です。

 

ウェブ制作に携わるすべてのひとにオススメしたいお役立ちツールが揃っており、多くはGitHubよりセレクトされています。これらのツールを使わないにしても、CSSの可能性を学ぶことができるでしょう。

 

 

これは便利!ウェブ制作がサクサク捗る新作CSSライブラリ、ツール15個まとめ

CSS Wand

CSSをベースとしたアニメーションをボタンひとつでコピペできるシンプルなCSSライブラリ。思い通りにカスタマイズできるので、ボタンや入力フォーム、ローディングアニメーションなどを素敵にしたいときに試してみましょう。

01-csswand

 

 

 

Water.css

その名の通り、「水(Water)を加えるだけで」、ウェブサイト制作の雛形として利用できるCSSフレームワーク。基本となるデフォルトスタイルのみをまとめた、2kbの軽量CSSフレームワークで、クラス名が定義されていない点もポイントです。

02-water

 

 

 

Raisin CSS

CSS GridやFlexbox、ブレイクポイント、overflow、配置などさまざまなモジュールを実装したユーティリティCSSライブラリ。JSをつかった実装が必要なときは、一度確認してみると良いでしょう。

03-raisin

 

 

 

Atomize

Atomic CSSに基づいたフレームワークで、Separation of Concers理論で作成されています。スタイルに中立で、独自のブレークポイントを定義できたり、NPMを利用できたり、他の開発プラグインもダウンロードするだけです。

04-atomize

 

 

 

Sassyfication

Sassでよく利用されるVariablesやMixinをまとめたコレクション。ユーティリティライブラリのSASS版。

05-sassy

 

 

 

Spectrum CSS

デザインには欠かせないAdobe社がリリースしたデザインシステム。CSSのみでスタイリングされており、CSSファイルを読み込むだけでAdobeそっくりのプロジェクトが作成できます。デモサイトはこちらから。

06-spectrum

 

 

 

Box-shadow.css

デザイン要素に影をつけるドロップシャドウをまとめたコレクションで、お好みでカスタマイズできるジェネレーター機能も一緒に公開されています。クロスブラウザ対応でCSSの面倒なスタイリングを手軽に行うことができます。

07-boxshadow

 

 

 

Flix Carousel

動画配信サービスNetflixで利用されている画像プレビューカルーセルで、CSSのみでスタリングされています。サンプルページはこちらを参考に。

08-flix

 

 

 

Woah.css

「エキセントリックなデベロッパー」向きのCSSアニメーションライブラリ。90年代のテレビ番組で見たことのある、レトロな画面切り替えエフェクトをCSSで再現できます。

09-woah

 

 

 

Animation Library

控えめなCSSアニメーションを集めたライブラリで、クラス名を追加するだけで簡単にアニメーションを実装できる点も素敵です。

10-animation

 

 

 

Wipe.css

この新しいCSSリセットは、sanitize.cssやnormalize.cssをベースにし、すべてを一新したわけではないので、リセット用の候補のひとつとして。

11-wipe

 

 

 

Denali CSS Library

Denali デザインシステムをベースとしたCSSライブラリ。洗練されたモダンな見た目が特長で、企業向けサイトの制作に最適と言えます。はじめるにあたってとても詳しいドキュメンテーションも付属しています。

12-denali

 

 

 

nova-skeletons

ウェブサイト制作におけるプロトタイプで利用する、灰色のブロック要素やダミーコンテンツ(スクリーンショット参照)をまとめたライブラリで、本番では利用することはありません。特にプロトタイプの初期段階で役立つツール。

13-nova

 

 

 

vov.css

基本的なアニメーションをすべて網羅したライブラリで、クラス名を追加するだけで利用できる手軽さも◎。アニメーションの遅延などより細かく調整できるクラスが揃っているのも、このアニメーションライブラリの特長。

14-vov

 

 

 

relaxCSS

ベーシックなウェブページやアプリで必要にあるであろう、ほとんどのスタイルを揃えたCSSフレームワークで、ナビゲーションメニューやタグなどの特別コンポーネントも収録されています。最近話題のダークモードにも対応。レイアウト用フレームワークは含まれていないので、GridやFlexboxなどお好みのスタイルに追加するだけで利用できる柔軟さ。

15-relax

 

 

まだまだある!ウェブ制作のお役立ちCSSツール

 

CSSに関連するツールは、以下のエントリーも参考にしてみてはいかがでしょう。

best-of-css-tools-2019-1
海外サイト Speckyboy.com で公開された Our 100 Favorite CSS Libraries, Frameworks and Tool
50css-library-2018
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Frameworks, Libraries & Tools from 20

 

ウェブ制作が捗る最新オンラインツールも定期的にまとめています。合わせて利用することでワークフローの改善にもつながります。

free-collection-of-handcrafted-patterns-1
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。
css-wand
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これら
typography-resources
この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デ
mindmap-by-realtimeboard
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかって

 

ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれる、ウェブ制作に携わるすべての人にオススメしたい Chrome 拡張機能をまとめています。

10-best-chrome-extensions-for-designers-gillde-1
この記事は、2017年5月8日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計40個のChrome拡

 

参照元リンク : 15 Best CSS Libraries for 2019 – WebDesigner Depot