集客に強いSEO対策完備のホームページ制作会社|新潟・東京・名古屋→全国対応
お電話

スタッフブログ

62 CSS3ジェネレータまとめ

2017/07/14 HTML

CSS3ジェネレータについて

CSS3ジェネレータを使用する事で、様々なコードを一瞬で生成してコピペで使用する事ができます。各ブラウザに対応したコードも一緒に生成されるので、うまく使えば作業の時間短縮にもなります。

ここでは、おすすめのジェネレータをいくつか紹介していきたいと思います。

CSS3 Generator

CSS3 Generator

CSS3 Generatorは、ボックスシャドウや角丸など、色々なコードを生成することができます。英語サイトですが、数値を入力するだけで画面内でスタイルが確認できるので、直感的に操作ができます。

CSS Gradient Generator

CSS Gradient Generator

CSS Gradient Generatorは、グラデーションのコードを生成することができます。カラーピッカーを使った簡単な操作で使用出来るので、おすすめです。

Button Maker

Button Maker

Button Makerは、画像を使用せずに、CSSのみでPhotoshopで作ったようなボタンを生成することができます。右側のバーでスタイルを調整して、左側のボタンをクリックするとコードが表示されます。

css3.0maker

css3.0maker

css3.0makerは、アニメーションなどの様々なプロパティを生成する事ができます。やれる事の幅が広く、どのブラウザに対応しているかも分かりやすいです。

Transforms

Transforms

Transformsは、2D、3D変形といった複雑なCSSを生成してくれます。あまり使う頻度は高くないと思いますが、勉強などに使えそうです。

cssarrowplease

cssarrowplease

cssarrowpleaseは、吹き出しを作る事ができるジェネレータです。これも使う頻度は少ないと思いますが、確実に時間短縮できると思います。

Grad3

Grad3

Grad3は、ボタン生成に特化した国産のサイトです。アイコンや背景を入れたりなど、出来る事の幅がかなり広いジェネレータです。

3D Ribbon Generator

3D Ribbon Generator

3D Ribbon Generatorは、立体的なリボンのグラフィクを生成してくれます。サイトの見出しなどに使えると思います。

Long Shadows Generator

Long Shadows Generator

Long Shadows Generatorは、テキストや要素に長い影をつけることの出来るジェネレータです。使いどころが絞られている分、シンプルで分かりやすいです。

CSS Animation Generator

CSS Animation Generator

CSS Animation Generatorは、アニメーションに特化したジェネレータで、全部で50種類以上のアニメーションを生成できます。セレクタを切り替えるだけで要素の動きを確認する事が出来るので、初心者にも分かりやすいです。

Form Builder

Form Builder

Form Builderは、フォームを生成する事の出来るジェネレータです。普通に一から作るとかなり時間がかかってしまうので、とても便利なジェネレータです。

関連記事