CSSの実装が楽になる! 便利ツール

CSSの実装が楽になる! 便利ツール

今回は、ちょっとだけCSSの実装が楽になる便利ツールをご紹介します。

Animated CSS Background Generator

アニメーション付きの背景デザインを作成し、コードを取得できるオンラインツール。
JS不要。すべてCSS3のアニメーションで動きます。
https://wweb.dev/resources/animated-css-background-generator

Joni Bologna’s fruity Flexbox Cheatsheet

何気にややこしいflexbox。
出題される質問にYES/NOで答えることで、どのようにスタイリングすれば良いのか一眼でわかるチートシートです。
https://jonibologna.com/flexbox-cheatsheet

Easing Functions Cheat Sheet

イージングのパラメーターの変化を、サンプルと一緒に確認できるチートシート。
普段はなんとなく設定アニメーションも、イージングをいじるだけで印象がかなり変わります。
https://easings.net/en

Clippy

CSSだけで、画像をさまざまなシェイプに切り抜くことができるツール。
※IE非対応。
ユーザーがIEを使用している場合は、まず最初のIE以外のブラウザのインストール方法を説明することをお勧めします。
https://bennettfeely.com/clippy/

Trianglify.io

ポリゴンスタイルのパターンテクスチャを作成できます。
背景に何か敷きたいときにオススメです。
https://trianglify.io/

導入して一手間加えるだけで、
サイトのクオリティがぐっと上がると思います。
是非使ってみてください。