デザイン

デザイン

PR

おすすめCSSライブラリ、フレームワーク、ツール100選!

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,474 views

読了時間 : 約10分38秒

webデザイナーなら必ず聞いたことがあるCSS!ここ最近、急速に進歩していて、次々にたくさんのリソースやツールなどが公開されているのも驚きではありません。

 

CSSライブラリやフレームワーク、ツールは、短時間で手軽にウェブサイトの制作を助けてくれるだけではなく、すべてを理解するのは難しいCSSの窓を開けてくれるでしょう。また、これらは2018年に公開されたばかりの最新版ですので、あなたが探しているものがきっと見つかるでしょう!

 

最新!CSSライブラリ

WickedCSS Animations  - ピュアなCSSアニメーションのライブラリです。

 

 

 

 

Motus - スクロールすると、それと同時にCSSキーフレームがその動きをまねるアニメーションライブラリです。

 

 

 

ScrollOut - 表示、パラレックスやCSSの変数効果をスクロールをする中で変化させることができます。

 

 

 

 

SimpleBar - クロスブラウザーや、ピュアなCSSを使用しているスクロールバーなどの制作をしています。

 

 

 

Repaintless.css - 軽量のCSSアニメーションライブラリです。

 

 

 

 

Three Dots - すべて三つの点だけが使われたローディングアニメーションのコレクションです。

 

 

 

Splitting - アニメーションテキストや、グリッドとCSS変数のライブラリです。

 

 

 

Epic Spinners - VueJSと統合し、スピンだけを取り入れたCSSアイコンのコレクションです。

 

 

 

Boilerform - ボイラーフォームはHTMLやCSSボイラープレートなどのフォーム作成を通常より少し簡単にしてくれます。

 

 

 

Micronjs - マイクロインタラクションはCSSやJSに基づいてなりたっています。

 

 

 

 

AnimalTrap -アニメーション用のCSSやジャバスクリプトフレームワークです。

 

 

 

Pure HTML5 and CSS3 SVG Loaders- 無料でダウンロードできる魅力的なダウンロード画像のコレクションです。

 

CSS ユーティリティ

BasicScroll - スクロールの位置によってCSS変数を変えることができるツールです。

 

 

 

Unused CSS - あなたのウェブサイトを未使用のCSSセレクター用にスキャンできるツールです。

 

 

 

Purgecss - あなたのサイトから未使用のCSSを取り除くツールです。

 

 

 

Sanitize.css - このCSSライブラリはミスや壊れている文体を訂正してくれます。

 

 

 

CSS Gridish - あなたのプロジェクトのスッペクからスケッチファイルやCSSグリッドを制作できます。

 

 

 

OptiCSS - テンプレート対応のCSS最適化をしています。

 

 

 

Mort - 作動していないCSSを見つけることができるツールです。

 

 

CSS画像エフェクト 

Instagram.css - ピュアなCSSのインスタグラムフィルターのコンプリートされたセットです。

 

 

 

Pure CSS Halftone Effect - CSSを使って魅力的な効果を作り出すことができます。

 

 

 

 

CSS Glitch Effect - マリールーがCSSアニメーションやClip‐pathプロパティで実験的なグリッチエフェクトを作動させたことをシェアしています。

 

 

 

Direction Aware Hover Effects - ホバーエフェクトはユーザーが示す方向によって作動します。

 

 

CSS画像エフェクトの詳細は、こちらのライブラリコレクションからチェックしてみて下さい。

 

 

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

Atomic Bulldog Grid - フレックスボックスに部分的にフォールバックするCSSグリッドレイアウトです。

 

 

 

BuddyCSS - ウェブ制作をより簡単にできるシンプルなCSSフレームワークです。

 

 

 

60GS  60と言う数値を元にCSS Gridベースで設計されたシステムです。

 

 

 

TeutonicCSS  たったの12KBという軽量でモダンCSSフレームワークです。

 

 

 

ModestaCSS    ダークとレスポンシブを両方かけ備えたクリーンなCSSフレームワークです。

 

 

 

Flat Remix CSS Library  開発スピード向上のためにあらかじめデザインされた基本的な要素が施されております。

 

 

 

FICTOAN    UIkitなどライトに使用できるシステムが備わっていて、直感的に使うことができるSCSSです。

 

 

 

Mustard UI    実際に見た目がいいと言われているCSSフレームワークです。

 

 

 

Material  Bootstrap 4 と、グーグルのマテリアルデザインを結合させたフレームワークです。

 

 

 

Smart CSS Grid    超軽量でレスポンシブなCSS Gridシステムです。

 

 

 

Biomatic UI    フレキシブルでアトミックフォーカスを中心としたCSSフレームワークです。

 

 

 

Tailwind CSS    UI開発速度を上げるために作られたユーティリティーファーストなCSSフレームワークです。

 

 

 

PaperCSS    カジュアルなCSSフレームワークです。

 

 

 

もっとCSSレイアウトフレームワークをみたいという方は、こちらからチェックしてみてください!

 

 

CSS Flexboxフレームワーク

Frow CSS    Flexboxを使ったオープンソースのHTMLとCSSフレームワークです。

 

 

 

Cirrus    Flex boxを使ったレスポンシブなCSSフレームワークです。

 

 

 

Butter Cake    FlexboxをベースとしたオープンソースなCSSフレームワークです。

 

 

 

Flexit    シンプルでクリーンなCSS Flexbox グリッドです。

 

 

 

Strawberry    軽量なCSS flexboxフレームワークです。

 

 

 

Katana.scss    CSS Flexboxベースのレイアウトシステムです。

 

 

 

Flexible Grid    CSS flexboxの実装をより簡単にするフレームワークです。

 

 

その他のFlexboxのリソースはこちらをチェックしてみてください。

 

 

ウェブベースのCSSツールとジェネレーター

FlexBox Parent Attribute Visualizer    さまざまなCSSFlexboxのセッティング効果をインタラクティブに確認する事ができます。

 

 

 

Fancy Border Radius Generator    ベーシックな形状を上回るユニークなツールになっております。

 

 

 

TinyEditor    この超軽量なアプリで、HTML、CSSやJSなどを加工をしてみてください。

 

 

 

css-doodle    CSSを使ってパターンを描いてみる事ができるウェブベースのツールになっております。

 

 

 

Fonty    ライブウェブサイト上でウェブフォントを直接的にテストできるツールです。

 

 

 

CSS Duotone Generator  HTMLとCSSを使って、カスタマイズされた最高のダブルトーン画像を製作してみましょう!

 

 

 

StyleURL    互いに協力してCSSの修正や改善を可能にするツールです。

 

 

 

GradientJoy    グラデーションなダミー画像を使うことができます。

 

 

 

Font Playground    さまざまなフォントを使ってみることができるサイトです。

 

 

 

Keyframes.app    CSSアニメーション製作のための、ウェブアプリやグーグルクロム拡張機能(エクステンション)です。

 

 

 

Visually Build Responsive Layouts with CSS Grid    レスポンシブなCSSグリッドを作る手助けをしてくれるツールです。

 

 

 

CSS Alignment Cheatsheet    イラスト付きのガイドがあるので、アレンジをより簡単にすることができます。

 

 

 

Clippy    CSS Clip-Pathを作成するときに手軽に使えるオンラインツールです。

 

 

 

GradPad    CSSグラデーションカラーを作成するためのオンラインです。

 

 

 

Trianglify.io    ポリゴン風のパターンの画像をPNGやSVGでカスタマイズできるジェネレーターです。

 

 

 

cssgr.id    インタラクティブなCSSグリッドジェネレーターです。

 

 

 

Layout it!    インタラクティブなCSSグリッド作成用のツールです。

 

 

 

Gradientify    TopのグラデーションとCSSコードをコピーとペーストできるコレクションです。

 

 

無料ウェブサイトベースのCSSツールとジェネレーターをもっとチェックしてみたいという方はこちらからどうぞ!

 

 

CSSを学習できるリソース

Learn CSS Grid for free    14のインタラクティブなスクリーンキャストでビギナーからアドバンスまで学習することができます。

 

 

 

CSS Layout cookbook    よくあるレイアウトの作成“レシピ”にアクセスすることができます。

 

 

 

Guidelines for Brutalist Web Design    ブルータリズムデザインを正しい方法で実行するガイドラインです。

 

 

 

Accessibility Cheatsheet    便利なチェックリストであなたのデザインのアクセシビリティを確認できます。

 

 

 

MODALZ MODALZ MODALZ    どんなときにモーダルを使えばいいか学習できるガイドです。

 

 

 

GRID    CSSのためのカンニングペーパーです。

 

 

 

A11Y Style Guide    パターンライブラリとアクセシビリティを考えて作られたガイドです。

 

 

 

The Font Loading Checklist    ユーザーの経験とパフォーマンスを最大に活かしてくれるチェックリストです。

 

 

 

What is Modular CSS? ー     CSSをスケールで詳しく説明がされたガイドです。

 

 

 

Learn Flexbox    CSS Flexboxのさまざまなプロパティーを紹介しているオンラインツールです。

 

 

 

Hot Tips CSS    厳選されたCSSスニペットのセレクションであなたのプロジェクトをより良くしてくれます。

 

 

 

CSS Cheat Sheet    しっかりと企画されたCSSプロパティーの参考書です。

 

 

The Font-End Design Checklist      クオリティーが高いデザインにするために徹底されたチェックリストです。

 

 

 

Grid to Flex    CSS グリッドを使ったプロジェクトのためのCSS Flexboxフォールバックです。

 

 

 

Component Based Design System With Tachyons    実用的なCSSフレームワークやデザインシステムの紹介をしています。

 

 

 

30 Seconds of CSS    30秒かそれ以下で簡単に理解することができる便利なCSSスニペットの選ばれ抜いたコレクションです。

 

 

 

100 Days CSS Challenge    ユニークなものの作成や、スキル向上を目指したい方にはぴったりなサイトです。

 

 

 

How CSS work Understanding the cascade  ー      効率的なCSSコードの基本を習ってみたい方にはもってこいのサイトです。

 

 

 

Manageable Utility System with CSS Variables      Sass変数と新しいCSS変数の違いを確認することができるサイトです。

 

 

クールなCSSクリエイション

Piano Keyboard    ありがたい事にこのCSS/JSサイトでは、キーボードやマウスを使ってピアノを弾くことができます。

 

 

 

CSS Snake & Ladders      HTMLやCSSによって開発された多数のプレイヤーでゲームができます。

 

 

 

Solar System Explorer in CSS    シミュレーションを見たり、ジャバスクリプトなしで作成できるサイトです。

 

 

 

Pure CSS Francine    18世紀の油絵のHTMLとCSSレンダーリングです。

 

 

 

Air Bomb    ピュアなCSSで作成された面白いゲームです。(JSは不必要)

おすすめ新着記事

おすすめタグ