超便利!確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

best-of-css-tool-2020-1

 

海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。

 

2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。

 

CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。

 

今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となっています。

 

 

 

CSSアニメーション

 

Get Waves

あらゆる波型シェイプにカスタマイズができ、そのままSVGファイルとして無料ダウンロードできるサービス。ウェブページのセクション項目同士のスペーサーとしても利用できます。

3-make-some-waves

 

 

 

Box-shadow.css

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

07-boxshadow

 

 

 

CSS Wand

ホバーエフェクトやローディングなど、コピペで利用できるCSSスタイルコレクション集。

css-wand

 

 

 

CSS FX

クリックするだけでHTML/CSSコードをコピペできる、ホバーやボタンリンクなどのCSSエフェクトをまとめたコレクション。

css-fx

 

 

 

CSSeffectsSnippets

ボタンやリンクなどのホバーエフェクト、ローディングエフェクトなどをセットにしたCSSスニペット集。

csseffects-snippets

 

 

 

vov.css

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

14-vov

 

 

 

useAnimations

Lottieをつかって作成されたアニメーション付きアイコンセットで、手軽にアニメーションをウェブサイトやアプリに追加できます。

useanimations

 

 

 

Epic Spinners

CSSのみで作成されたユニークなローディングアニメーション20種類が揃ったライブラリ。

epic_spinners

 

 

 

extra.css

普通のサイトとは一味違うユニークなビジュアルスタイルをまとめたコレクション。

extra-css

 

 

 

Izmir Hover Effects

美しい画像ホバーエフェクトを集めたミニCSSライブラリ。

izmir-imagehover-css-library

 

 

 

CSS Animo

コピー&ペーストでアニメーションを追加できるCSSライブラリ。ホバーエフェクトやボタン、ローディングエフェクトが中心。

css-animo

 

ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】

 

 

CSSフレームワーク

 

Terminal CSS

ターミナル画面のようなスタイルが特長の超軽量フレームワーク(~ 3k gzip)で、グリッドシステムやナビゲーションメニュー、リスト、テーブル、カードなど必要最低限のパーツが一通り揃います。

terminal-css

 

 

 

xstyled

テーマにリンクされたCSSでを使用してアプリのスタイルを設定できる新しいフレームワーク。ダークモードにも対応しています。

xstyled

 

 

 

Cirrus CSS

美しい配色やモダンなフォント設定、魅力的なUIコンポーネントなどを丸ごとセットにしたゴージャスなCSSフレームワーク。

cirrus_css

 

 

 

SSCaffold

人気のCSSライブラリのmilligramskeltonnormalizeを組み合わせた軽量CSSフレームワーク。

sscaffold

 

 

 

Fomantic UI

50以上のUIコンポーネントが揃い、BEMとは異なるより直感的なクラス命名規則を採用したフレンドリーなフレームワーク。3000を超えるテーマが公開されており、デザイン全体を瞬時に切り替えることも可能。

fomantic-ui

 

 

 

Raster

セマンティックCSSではなく、HTMLの記述に必要最低限のミニマルなCSSグリッドシステム。具体的なレイアウトはサンプル例よりどうぞ。

raster

 

 

 

Diez

ウェブサイトやアプリ全体のデザインスタイルを統一するのに役立つオープンソースの開発者向けツールキット。

diez

 

 

 

Butter Cake

モダンな見た目の軽量CSSフレームワークで、手早くアイデアのプロトタイプを作成したいときにも便利。現在バージョン4.0で、定期的にアップデートが行われています。

buttercake

 

 

 

relaxCSS

レイアウト用フレームワークは含まれていないので、GridやFlexboxなどお好みのスタイルに追加するだけで利用できる柔軟さ。

15-relax

 

 

 

Maizzle

Eメールのプロトタイプ作成に特化したCSSフレームワーク。

maizzle

 

ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】

 

 

CSSライブラリ

 

Destyle.css

フォントサイズやマージン、リンクカラーなど極限までスタイルを削ったリセット用スタイルシート。

destyle-css

 

 

 

Immutable Styles

CSSプリプロセッサとCSS/JSライブラリの中間のようなこのツールは、JSXを使用してスタイルを記述し、そのあとにCSSにコンパイルします。

immutable-styles

 

 

 

Matter

Googleのマテリアルデザインの各コンポーネントをCSSのみで作成したライブラリ。実際の動きはデモページよりどうぞ。

matter

 

 

 

Water.css

シンプルな静的サイトの作成に活用したい、必要最低限のスタイルのみをまとめたCSSコレクション。HTMLに追加するだけで手軽にウェブサイ制作をはじめることができます。

water-css

 

 

 

Flexbox Case Studies

Flexboxを使ってさまざまなレイアウトを実現するデモコレクション。簡単な作り方ガイド付きで、Flexboxを学ぶのにも最適です。

flexbox-case-studies

 

 

 

IsometricSass

Javascriiptを使わずにCSSのみで立体的なアイソメトリック・デザインを表現するユニークなCSSライブラリ。デモページを確認するとよりわかりやすいでしょう。

isometric-sass

 

 

 

CSS FX Layout

Flexboxを用いたグリッド用の軽量CSSライブラリで、data属性とクラス名表記の両方に対応しています。

css-fx-layout

 

 

 

a11y CSS Reset

デフォルトのスタイルをリセットするための小さなCSSライブラリ、

a11y-css-reset

 

 

 

Augumented UI

近未来的なサイバーパンク風のUIデザインを仕上げるCSSツール。

augmented-ui

 

 

CSSタイポグラフィ

 

CSSans Pro

CSSでスタイリングされたカラフルなCSSフォント、カラーリングの変更もCSSから行うことが可能。

cssans-pro

 

 

 

RFS

ブラウザのビューポートに応じて自動でフォントサイズを計算、調整してレスポンシブ表示してくれます。

rfs

 

 

 

Typetura

スクリーンサイズに応じて最適なフォント設定を提供してくれる便利ツール。

typetura

 

 

 

Interactive Typography Cheatsheet

フォントのハイライト部分をクリックすると、タイポグラフィの用語が表示されるインタラクティブなチートシート。

interactive-typography-cheatsheet

 

 

 

TypeSafe CSS

「読む」と「書く」ことにのみフォーカスした、1KB以下の超軽量レスポンシブCSSフレームワーク。

typesafe-css

 

 

 

Fontsmith Variable Fonts

Variableフォントについてたくさんの具体的なサンプル例と一緒に学ぶことができるガイドページ。

fontsmith-variable-fonts

 

 

 

Font Style Matcher

Webフォントとフォールバック用フォント間のスタイルの不一致を最小限に抑えるのに役立つツール。

font-style-matcher

 

 

 

Fontanello

気になるフォントを右クリックするだけでスタイル情報を表示してくれるChrome拡張プラグイン。

fontanello

 

 

 

GooFonts

手作業でタグ付けされたGoogleフォントをつかって、お気に入りを探すことができるツール。あまり知られていないフォントに出会えます。

goofonts

 

 

 

CSSツール | 自動生成ジェネレーター

 

Flexulator

Flexboxにおける幅スペースを直感的に計算できるツール。

flexulator

 

 

 

CSS Grid Layout Generator

このビジュアルツールを使うことで、複雑なCSS Gridレイアウトも手軽に作成できます。

css-grid-layout-generator

 

 

 

Branded.

メンテナンス、管理しやすいスタイルガイドを作成できる無料オンラインツール。

branded

 

 

 

CSS Grid Generator

ドラッグ&ドロップの簡単操作のみで、複雑なグリッドレイアウトを作成できるオンラインツール。

css-grid-generator

 

 

 

SVG Arista

このツールはCSSコードを使って、アップロードしたSVGファイルのstrokefillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロジェクト。

svg-arista

 

 

 

Superposition

ウェブサイトで実際に使われている配色を一覧表示し、独自デザインシステムにそのまま活用できます。

superposition

 

 

 

Screen Size Map

あらゆるデバイスのスクリーンサイズを表示、確認できるインタラクティブマップ。

screen-size-map

 

 

 

Gradient Magic

CSSグラデーションを使った1300を超えるCSSパターンが、24のコレクションにカテゴリ分けされており、ボタンひとつでコードをコピーできます。

gradient-magic

 

 

 

Animated CSS Background Generator

アニメーション付きの背景デザインをCSSのみで作成し、ボタンひとつでコードを取得できる便利オンラインツール。

animated-css-background-generator

 

 

 

Drop CSS

使われていない未使用のCSSを取り除いてくれる手軽な無料ツール。

drop-css

 

 

 

Gradient Generator

2つの色を選択するだけで、カスタム自在なCSSグラデーションを作成するツール。

gradient-generator

 

 

 

Mycolorpanda

色を決め、グラデーションの向きを決定すれば、すぐに美しいグラデーションカラーを作成できるシンプルなツール。

mycolorpanda

 

 

 

Amino

どんなウェブサイトの見た目もCSSをつかって変更できるライブ版CSSエディタは、Chrome拡張プラグインでどうぞ。

amino

 

 

 

CSS学習ガイド | チートシート

 

CSS selectors cheatsheet

ゲームとリファレンスガイドを合体させた、プリント印刷も可能なCSSセクレタ・チートシート。

css-selectors-cheasheet

 

 

 

Relearn CSS Layout

ブラウザとCSSをパワーアップするアルゴリズムを活用して、より良いレイアウトを作成する方法を学びます。

relearn-css-layout

 

 

 

CSS Guidelines

拡張しやすく管理しやすいCSSの記述に役立つ詳しいオンラインドキュメント。

css-guidelines

 

 

 

The Complete Guide to SCSS/SASS

もっとよくよく使われているCSSプロセッサSCSSについて、ゼロからマスターすることができる完全ガイド。

complete-guide-to-scss-sass

 

 

 

GRID: A simple visual cheatsheet for CSS Grid Layout

CSS Gridの各プロパティの使い方を、視覚的にまとめているだけでなく、クリックでコピー/ペーストできる点も◎。

css-cheatsheet-1

 

 

 

CSS Tricks’ A Complete Guide to Grid

CSS Gridをこれからはじめるひとだけでなく、すべてのグリッドプロパティの使い方を一ヶ所で確認できるチートシート的な使い方もできます。

csstricks-grid

 

 

 

Joni Bologna’s fruity Flexbox Cheatsheet

出題される質問にYES/NOで答えることで、どのようにスタイリングすれば良いのかすぐに確認できるflexboxのチートシート。

joni-bologna-fruity-flexbox-cheatsheet

 

 

 

CSS Layout

よく利用されるCSSのレイアウトやUIパターン、人気の高い81種類が公開されています。

css-layout

 

 

 

Flexbox 30

CSS Flexboxを30のサンプルコードを使って、30日間でマスターしましょう。

flexbox-30

 

これで分かった!CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ

 

 

CSS3 Perspective Playground

スタイリングがややこしいCSS3 Perspectiveを分かりやすく図解し、スライダーを左右に動かしながら、実際のスタイリングを確認することができます。

css3-perspectives

 

 

 

Easing Functions Cheat Sheet

各イージング機能のパラメーターの変化を、具体的なサンプル例と一緒に確認できるシートシート。

easing_functions_cheat_sheet

 

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

【保存版】ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド

 

 

CSSインスピレーション

 

Print to CSS

雑誌のレイアウトを参考にCSSで作成されたレイアウトコレクション。

print-to-css

 

 

 

CSSBattle

お題をできるだけ少ないCSSコードで完成させる、ミニゴルフのようなオンラインゲーム。

css-battle

 

 

まだまだある!CSSツール、リソース一覧まとめ

 

これまでに紹介したCSSに関する便利ツールもワークフローに加えることで、より快適な制作環境を整えてみませんか。

 

CSSの作業をもっと楽に!無料で使える便利なWebツール40選

CSS スタイルシート制作を楽にする!知っておきたい便利ツール25選まとめ

 

2018、19年のCSSリソースまとめはこちら。

超便利!2019年に注目したい最新CSSツール、リソースガイド100個まとめ

超便利!確認しておきたい最新CSSツール、リソースガイド 2018年度

 

2019年特に話題になった便利オンラインツールもオススメです。

2019年間ベスト!Web制作を変える便利オンラインツール厳選85個

 

参照元リンク : Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 – Speckyboy.com