【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ジェネレーターは、
理想のイメージに近づけやすく、コピペで時短にもつながります。
ぜひ活用してもらえればと思います。随時更新予定。
- トラックバック
- https://aoiyuwaku.com/blog/web/2019/css-generator/trackback/
コメントはこちら