Advertisement

csstool2019first

 

海外サイト Speckyboy.com で公開された Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018 より許可をもらい、翻訳転載しています。

 

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

 

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

 

今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。

 

 

 

 

新作CSSライブラリ

 

WickedCSS Animations

CSSのみでスタイリングされた、アニメーション24種類が揃ったライブラリ。

wickedcss-animations

目次へ戻る

 

 

 

Motus

スクロールしたときにCSSキーフレームを再現するアニメーション用ライブラリ。

motus

目次へ戻る

 

 

 

ScrollOut

スクロールしたときの変化を検知し、パララックスエフェクトやCSS Variableなどに活用できます。

scrollout

目次へ戻る

 

 

 

SimpleBar

クロスブラウザ対応のCSSのみでスタイリングされた、カスタムスクロールバーを作成できます。

simplebar

目次へ戻る

 

 

 

Repaintless.css

軽量のアニメーション用ライブラリで、高速表示をテーマに開発されています。

repaintless

目次へ戻る

 

 

 

Three Dots

3つのドットで表現された、ローディングアニメーションのコレクション。

three-dots

目次へ戻る

 

 

 

Splitting

CSS Variablesをつかったテキストやグリッド向けアニメーションをまとめたライブラリ。

splitting

目次へ戻る

 

 

 

Epic Spinners

CSSのみでスタイリングされたローディングアニメーション用アイコンコレクション。

epic-spinners

目次へ戻る

 

 

 

Boilerform

スタイリングの面倒くさいフォームを、手軽に作成できるHTML&CSSで作成されたお決まりテンプレート。

boilerform

目次へ戻る

 

 

 

Micron.js

CSSアニメーションで作成された、マイクロインタラクション用ライブラリで、JavaScriptでコントロールできます。

micron

目次へ戻る

 

 

 

AnimTrap

Bootstrapのように使えるJSアニメーションのCSSフレームワーク。

anim-trap

目次へ戻る

 

 

 

Pure HTML5 and CSS3 SVG Loaders

HTML5/CSS3で作成された、SVGローディング用アニメーションアイコンコレクション。

pure-html5-and-css3-svg-loaders

目次へ戻る

 

 

 

お役立ちCSS ユーティリティ

 

basicScroll

スクロールした位置に応じてCSSアニメーションを適用でき、パララックススクロールを簡単に実装できるスクリプト。

basicscroll

目次へ戻る

 

 

 

Unused CSS

作成したコードで使っていないCSSセレクターをスキャン、検索してくれるツール。

weekly-news-for-designers-feb-25-05

目次へ戻る

 

 

 

Purgecss

サイトで利用していないCSSを削除してくれるツール。

weekly-news-for-designers-feb-04-06

目次へ戻る

 

 

 

sanitize.css

すべてのブラウザ上で間違っているスタイルや見つからないスタイルを修正してくれるライブラリ。

sanitize-css

目次へ戻る

 

 

 

CSS Gridish

デザイン段階のグリッドデザインをSketchファイルやCSS Gridを利用したCSS/SCSSコードに変換してくれるツール。

weekly-news-for-designers-jan-28-04

目次へ戻る

 

 

 

Opticss

CSSスタイルシートの最適化を行ってくれるツール。

weekly-news-for-designers-june-03-05

目次へ戻る

 

 

 

Mort

適用されていないCSSを自動検出してくれるCSSツール。

weekly-news-for-designers-june-03-16

目次へ戻る

 

 

 

CSS画像エフェクト

 

Instagram.css

人気アプリInstagramのエフェクトをCSSのみで完全再現したコレクションで、実装もしやすくなっています。

instagram-css

目次へ戻る

 

 

 

Pure CSS Halftone Effect

CSSのみでハーフトーンエフェクトを作成できるツール。

weekly-news-for-designers-march-04-17

目次へ戻る

 

 

 

CSS Glitch Effect

CSSアニメーションと clip-path プロパティで完成した、グリッチエフェクトを追加できるコレクション。

weekly-news-for-designers-jan-07-13

目次へ戻る

 

 

 

Direction Aware Hover Effects

マウスの進入方向をベースにしたCSS/JSホバーエフェクト。

weekly-news-for-designers-feb-18-13

目次へ戻る

 

 

 

CSSレイアウトフレームワーク

 

Atomic Bulldog Grid

CSS Gridプロパティを活用したレイアウトフレームワークで、部分的にFlexboxも代替として用意されています。

weekly-news-for-designers-march-04-01

目次へ戻る

 

 

 

BuddyCSS

開発をより手軽に行うことをテーマに開発された、シンプルなCSSフレームワーク。

buddycss

目次へ戻る

 

 

 

60GS

横幅を60個に分割したグリッドシステムを実装の軽量CSSライブラリ。

60gs

目次へ戻る

 

 

 

Teutonic CSS

すぐにウェブページを作成できる、わずか12KBの超軽量なモダンCSSフレームワーク。

teutonic-css

目次へ戻る

 

 

 

ModestaCSS

黒を基調としたダーク系のレスポンシブ対応CSSフレームワーク。

modestacss

目次へ戻る

 

 

 

Flat Remix CSS Library

ウェブサイト制作で利用するデザイン要素をあらかじめ用意し、より効率の良い素早いワークフローを実現します。

weekly-news-for-designers-march-25-02

目次へ戻る

 

 

 

Fictoan

より直感的に利用できるクラス命名ルールを用い、UIデザインの基本ベースとしても便利なSCSSフレームワーク。

weekly-news-for-designers-march-25-08

目次へ戻る

 

 

 

Mustard UI

見た目の良さがポイントのCSSフレームワークのひとつ。

weekly-news-for-designers-april-15-01

目次へ戻る

 

 

 

Material

人気のBootstrap 4フレームワークとGoogleのマテリアルデザインを組み合わせたフレームワーク。

weekly-news-for-designers-may-06-02

目次へ戻る

 

 

 

Smart CSS Grid

ごく限られたミニマルな作りで、レスポンシブにも対応したCSSグリッドシステム。

weekly-news-for-designers-may-13-05

目次へ戻る

 

 

 

Biomatic UI

基本的なコンポーネント一式が揃い、どんなデザインにも柔軟に対応できるクラス命名ルールやレスポンシブ対応グリッドなど、カスタマイズにも向いたフレームワーク。

weekly-news-for-designers-nov-12-12

目次へ戻る

 

 

 

Tailwind CSS

Web制作で利用されるコンポーネントや、Flexboxベースのグリッドシステムなどをまとめ、より高速なUI開発に適したフレームワーク。

weekly-news-for-designers-nov-05-10

目次へ戻る

 

 

 

Paper CSS

手書きしたようなカジュアルなデザインが特長のCSSフレームワーク。

weekly-news-for-designers-nov-05-11

目次へ戻る

 

 

 

CSS Flexbox フレームワーク

 

Frow CSS

CSSプロパティ Flexbox を利用した、オープンソースのHTML&CSSフレームワーク。

weekly-news-for-designers-march-04-06

目次へ戻る

 

 

 

Cirrus

Flexboxを使った、レスポンシブ対応のCSSフレームワーク。

cirrus

目次へ戻る

 

 

 

Butter Cake

FlexboxをベースにしたオープンソースのCSSフレームワーク。

butter-cake

目次へ戻る

 

 

 

Flexit

シンプルで使い勝手の良い、CSS Flexboxを使ったグリッドシステムを採用しています。

flexit

目次へ戻る

 

 

 

Strawberry

超軽量なFlexboxをベースにしたCSSフレームワークで、Flexboxをつかったネストなどにも対応しています。

strawberry

目次へ戻る

 

 

 

Katana.scss

FlexboxをベースにしたSCSSレイアウトシステム。

weekly-news-for-designers-june-10-18

目次へ戻る

 

 

 

Flexible Grid

CSS Flexboxをより手軽に導入するのに役立つフレームワーク。

weekly-news-for-designers-april-15-15

目次へ戻る

 

 

 

オンラインCSSツール&生成ツール

 

Flexbox Parent Attribute Visualizer

CSS Flexboxの設定をより視覚的に確認できるインタラクティブなツール。

weekly-news-for-designers-march-11-09

目次へ戻る

 

 

 

Fancy Border Radius Generator

border-radiusを調整することで、自由にユニークな形、シェイプを作成できるジェネレーター。SVGを使うまではないんだけど、、そんなときにも便利です。

fancy-border-radius-generator

目次へ戻る

 

 

 

TinyEditor

400バイト以下という超軽量のHTML/CSS/JSエディター。ブラウザーのアドレスバーにコードを入力するだけ。

tinyeditor

目次へ戻る

 

 

 

css-doodle

CSSをつかったオリジナルのデザインパターンを、自由に描くことができるオンラインツール。

css-doodle

目次へ戻る

 

 

 

Fonty

ウェブフォントがうまく表示されるか、ライブサイトで直接確認、検証できる便利ツール。

fonty

目次へ戻る

 

 

 

CSS Duotone Generator

2018年を代表するデザイントレンド「デュオトーン」エフェクトをHTML/CSSのみでカスタマイズできるツール。

css-duotone-generator

目次へ戻る

 

 

 

StyleURL

デベロッパーとデザイナーが共同作業を行うときに、CSSの変更をよりスムーズにできるツール。

styleurl

目次へ戻る

 

 

 

Gradient Joy

画像用プレースホルダーを美しいグラデーションで表示してくれるツール。

gradient-joy

目次へ戻る

 

 

 

Font Playground

さまざまな太さやスタイルが実装されたVariable フォントを試し打ちできるオンラインツール。

font-playground

目次へ戻る

 

 

 

Keyframes.app

オンライン上でCSSアニメーションを作成できるツールで、より複雑な動きも手軽に表現できます。

weekly-news-for-designers-june-03-11

目次へ戻る

 

 

 

Visually Build Responsive Layouts with CSS Grid

レスポンシブ対応でCSS Gridを用いたレイアウトを直感的に作成できるオンラインツール。

weekly-news-for-designers-feb-11-07

目次へ戻る

 

 

 

CSS Alignment Cheatsheet

天地中央や左揃えなどCSSの整列ルールをイラスト付きでまとめたオンラインガイド。

weekly-news-for-designers-jan-21-12

目次へ戻る

 

 

 

Clippy

CSSの Clip-path プロパティを使ったスタリングをオンラインで作成できるツール。

weekly-news-for-designers-feb-04-02

目次へ戻る

 

 

 

GradPad

CSSカラーグラデーションを直感的に作成できるオンラインツール。

weekly-news-for-designers-feb-18-08

目次へ戻る

 

 

 

trianglify.io

ポリゴンスタイルの色鮮やかなパターンを作成でき、PNGとSVGファイル形式で無料ダウンロードできます。

weekly-news-for-designers-march-25-06

目次へ戻る

 

 

 

CSSgr.id

レイアウトを確認しながらインタラクティブにCSS Gridレイアウトを作成できるツール。

weekly-news-for-designers-may-06-17

目次へ戻る

 

 

 

Layoutit!

CSS Grid を数値を入力するだけで自由にカスタマイズできるオンラインツール。

weekly-news-for-designers-may-20-10

目次へ戻る

 

 

 

Gradientify

鮮やかなCSSグラデーションカラーを集めたコレクションで、CSSコードをコピー&ペーストできます。

weekly-news-for-designers-nov-12-04

目次へ戻る

 

 

 

 

CSS学習リソースまとめ

 

Learn CSS Grid for Free

全14回のコースを通して、CSSグリッドの基本から高度テクニックまですべて網羅したインタラクティブなスクリーンキャスト。

learn-css-grid-for-free

目次へ戻る

 

 

 

CSS Layout cookbook

ウェブサイト制作で一般的なレイアウトの「レシピ」、作り方をまとめています。

css-layout-cookbook

目次へ戻る

 

 

 

Guidelines for Brutalist Web Design

ウェブサイト本来のあるべき姿に焦点を当てて作られた、デザイン手法「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」を導入するポイントをまとめたガイドライン。

guidelines-for-brutalist-web-design

目次へ戻る

 

 

 

Accessibility Cheatsheet

ウェブサイトの使いやすさ、アクセシビリティのポイントをまとめたチートシート。サイト制作で確認しておきたいチェックリストとなっています。

accessibility-cheatsheet

目次へ戻る

 

 

 

MODALZ MODALZ MODALZ

ポップアップ、モーダルウィンドウの具体的な使い方をまとめたガイド。

modalz-modalz-modalz

目次へ戻る

 

 

 

GRID

CSS Gridプロパティの使い方を、簡単な図解でまとめたチートシート。

grid

目次へ戻る

 

 

 

A11Y Style Guide

アクセシビリティをテーマに見据えたパターンライブラリ。

a11y-style-guide

目次へ戻る

 

 

 

The Font Loading Checklist

Webフォントの読み込みを最適化し、最大のパフォーマンスとユーザーエクスペリエンスを実現するためのポイントをまとめたガイドライン。

the-font-loading-checklist

目次へ戻る

 

 

 

What is Modular CSS?

大規模サイトでの実践的なCSSの管理、開発方法をまとめたガイド。

what-is-modular-css

目次へ戻る

 

 

 

Learn Flexbox

Flexboxのさまざまなプロパティの使い方を、図解でデモンストレーションしたオンラインツール。

learn-flexbox

目次へ戻る

 

 

 

Hot Tips CSS

プロジェクトで活用したいCSSスニペットをまとめています。ちょっとした手間が省ける小技が揃います。

hot-tips-css

目次へ戻る

 

 

 

CSS Cheat Sheet

CSSの各プロパティをわかりやすくまとめたリファレンスガイド。

css-cheat-sheet

目次へ戻る

 

 

 

Front-End Design Checklist

デザインのクオリティをアップさせる、フロントエンドが確認しておきたいポイントまとめ。

front-end-design-checklist

目次へ戻る

 

 

 

Grid to Flex

CSS Flexboxで実現できない部分を、CSS Gridをフォールバックとして活用する、実践的なポイントまとめ。

grid-to-flex

目次へ戻る

 

 

 

Component Based Design System With Tachyons

機能的なCSSフレームワーク・デザインシステムの構築方法を、わかりやすく図解したガイドライン。

component-based-design-system-with-tachyons

目次へ戻る

 

 

 

30 Seconds of CSS

30秒以下で理解できるほど簡単で、実用的なCSSスニペットをまとめたコレクションで、実際のサンプル例を確認できます。

30-seconds-of-css

目次へ戻る

 

 

 

100 Days CSS Challenge

毎日出題されるお題の同じCSSスタイリングを、100日間続けることで、自分のスキルをみがくことができるフリープログラム。

100-days-css-challenge

目次へ戻る

 

 

 

How CSS works: Understanding the cascade

より効率的なコードを実現するテクニックを、じっくり学ぶコンテンツ。

how-css-works-understanding-the-cascade

目次へ戻る

 

 

 

Manageable Utility Systems with CSS Variables

Sass Variables と新しい CSS Variables の違いを詳しく見ていきます。

manageable-utility-systems-with-css-variables

目次へ戻る

 

 

 

 

CSSを使ったユニークなプロジェクト

 

Piano Keyboard

キーボードやマウスを使ってピアノを弾くことができるCSS/JSサイト。タブレット端末でも利用可能となっています。

piano-keyboard

目次へ戻る

 

 

 

CSS Snake & Ladders

複数のプレイヤーで楽しむことができる、簡単なゲームをHTML/CSSで実現しています。

css-snake-ladders

目次へ戻る

 

 

 

Solar System Explorer in CSS

太陽系(英: Solar System)の仕組みをCSSで図解したスニペット。

solar-system-explorer-in-css

目次へ戻る

 

 

 

Pure CSS Francine

18世紀頃のオイルペイントを、HTML/CSSで再現した作品で、途方もない制作時間が費やされています。

pure-css-francine

目次へ戻る

 

 

 

Air Bomb

JSを使わず、CSSのみで制作された、15秒間のミニゲーム。

air-bomb

目次へ戻る

 

40-css-utility-tools
CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのち
50css-library-2018
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Frameworks, Libraries & Tools from 20

 

サムネイル@ : What is Modular CSS? – Space Ninja

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