Advertisement

50css-library-2018

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

 

ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。

 

制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。

 

このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。

 

 

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

Atomic Bulldog Grid

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

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

目次へ戻る

 

 

 

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

目次へ戻る

 

 

 

Katana.scss

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

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

目次へ戻る

 

 

 

Flexible Grid

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

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

目次へ戻る

 

短時間で手軽にウェブサイトを作成できるCSSフレームワークは、数多く公開されています。CSSフレームワークを使用することで、開発速度をスピードアップさせるだけでなく

 

 

CSS ライブラリ

Wicked CSS Animation

ユニークな動きをコレクションしたCSSアニメーションライブラリ。

weekly-news-for-designers-june-10-01

目次へ戻る

 

 

 

Epic Spinners

CSSのみでデザインされたローディングアニメーションライブラリで、VusJSへの導入も可能です。

weekly-news-for-designers-feb-25-01

目次へ戻る

 

 

 

Boilerform

フォームをより手軽に作成できるHTML/CSSライブラリ。

weekly-news-for-designers-feb-04-15

目次へ戻る

 

 

 

Micron.js

data属性を追加するだけでマイクロインタラクションを追加できるCSSライブラリ。

weekly-news-for-designers-jan-28-09

目次へ戻る

 

 

 

Anim Trap

ウェブサイトでアニメーションを手軽に利用できる、CSSとJSで作成されたフレームワーク。

weekly-news-for-designers-jan-21-10

目次へ戻る

 

 

 

Pure HTML5 and CSS3 SVG Loader

無料ダウンロードできる、SVGを使った魅力的なローディングアニメーションのコレクション。

weekly-news-for-designers-april-01-09

目次へ戻る

 

アニメーション(英: Animation)は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような

 

 

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

basicScroll

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

weekly-news-for-designers-feb-18-01

目次へ戻る

 

 

 

Unused CSS

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

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

目次へ戻る

 

 

 

Purgecss

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

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

目次へ戻る

 

 

 

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ツール/生成ツール

Flexbox Parent Attribute Visualizer

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

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

目次へ戻る

 

 

 

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画像エフェクトツール

Instagram.css

用意されたCSSスタイルシートを読み込むことで、Instagramの加工エフェクトをすべて再現できるCSSライブラリ。

weekly-news-for-designers-jan-14-09

目次へ戻る

 

 

 

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学習リソース

Learn CSS Grid for Free

全14回にまとめられたCSS Gridを学ぶフリーコースで、初心者から高度なテクニックまで幅広く網羅しています。

weekly-news-for-designers-jan-07-10

目次へ戻る

 

 

 

CSS Cheat Sheet

CSSプロパティを詳しく解説した全デザインガイド。

weekly-news-for-designers-jan-14-08

目次へ戻る

 

 

 

Front-End Design Checklist

グリッドや配色、フォント、リンクなどフロントエンドが押さえておきたいポイントをまとめた学習ガイド。

weekly-news-for-designers-april-22-09

目次へ戻る

 

 

 

Grid to Flex

CSS Grid を使ったプロジェクトで発生する問題点を、CSS Flexboxで解決する方法をまとめています。

weekly-news-for-designers-may-06-05

目次へ戻る

 

 

 

Component Based Design System with Tachyons

機能的なCSSフレームワークやデザインシステムを構築する方法をまとめた学習ガイド。

weekly-news-for-designers-may-27-06

目次へ戻る

 

 

 

30 Seconds of CSS

30秒以下で理解できる簡単なウェブ制作用スニペットをまとめたコレクション。

weekly-news-for-designers-march-04-07

目次へ戻る

 

 

 

How CSS Works; Understanding the cacade

より効果的なCSSコードの基本を学ぶことができるリソース。

weekly-news-for-designers-june-03-17

目次へ戻る

 

 

 

Manageable Utility System with CSS Variables

SCSS VariablesとCSS Variablesの違いをイラスト付きで解説しています。

weekly-news-for-designers-dec-10-11

目次へ戻る

 

 

 

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

Piano Keyboard

実際にキーボードまたはマウスを操作することでピアノを演奏できるCSSプロジェクト。

weekly-news-for-designers-april-22-03

目次へ戻る

 

 

 

Pure CSS Francine

HTML/CSSのみでレンダリングされた18世紀の油絵ペイント。

weekly-news-for-designers-may-06-16

目次へ戻る

 

 

 

Air Bomb

CSSのみで作成されたシューティングゲーム。

weekly-news-for-designers-nov-05-18

目次へ戻る

 

トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。 この記事では、2017年これまでに
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめてい

 

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