【2019最新版】コピペで簡単！CSSジェネレーターまとめ

グラデーションやbox-shadow、三角形などのCSSを書くときに便利な
CSSジェネレーターをまとめました。

CSSジェネレーターとは

様々なプロパティの値を、直感的に設定できる仕組みのサイト。

設定したCSSのコードは、コピペで使えることが多いので非常に便利です。

borderでつくる三角形

▼三角形作成ツール
http://apps.eky.hk/css-triangle-generator/ja

「三角形作成ツール」はborderで表示させる三角形のジェネレーターです。

とにかくシンプルでわかりやすい。

このジェネレーターなしでは三角形つくれないぐらいお世話になっています。

box-shadow、text-shadow

▼box-shadow
https://css-generator.net/box-shadow/

▼text-shadow
https://css-generator.net/text-shadow/

box-shadow、text-shadowは
「css-generator」のジェネレーターがおすすめです。

スムーズな操作性が非常に良いです。
ベンダープレフィックスの選択ができるところもポイント。

グラデーション

▼cssgradient
https://cssgradient.io

グラデーションのジェネレーターは、バーが操作しにくいものが多かったんですが、
「cssgradient」はバーが全面に設置されていて、操作しやすくなっています。

色数が多いグラデーションでもつくりやすいジェネレーターですね。

border-radiusで角丸

▼FANCY-BORDER-RADIUS
https://9elements.github.io/fancy-border-radius/

シンプルな角丸を作る場合、ジェネレーターは恐らく不要ですよね。

しかし不規則で複雑な角丸の場合には、「FANCY-BORDER-RADIUS」が便利です。

非常に柔軟に角丸具合を変えられるのでぜひお試しください。

transitionのイージング

▼CSS Easing Animation Tool
https://matthewlein.com/tools/ceaser

「CSS Easing Animation Tool」は、
transitionのイージング設定を、Left, Width, Height, Opacityの要素で確認できます。

プルダウンでメジャーなイージングを選択できるほか、グラフをいじってより細かい調整も可能です。

transformで変形

▼CSS3 Generator
http://ds-overdesign.com/

scaleで大きさを変えたり、rotateで回転させるtransform。

「CSS3 Generator」は日本語のサイトで操作しやすいです。
X,Y,Zそれぞれの設定、3Dモードも選択できたりと非常に細かい指定が可能。

Flexbox

▼FLEX LAYOUT GENERATOR
https://suiq.jp/flex-layout-generator/

最後はFlexboxのジェネレーターです。

親要素、子要素でタブが別れていて、それぞれ細かい指定が可能。
ボタンのアイコンがわかりやすく最高です。

まとめ

CSSジェネレーターは、
理想のイメージに近づけやすく、コピペで時短にもつながります。

ぜひ活用してもらえればと思います。随時更新予定。