コーディング不要で簡単にデザインパーツが作成できるCSSジェネレーター8選

更新日: 2018年05月25日

マイページにお気に入り

CSSでは様々なデザインを設定できますが、記述が難しかったり、記述量が多かったりして億劫になることがあるかと思います。やりたいことさえ決まっているのなら、その記述方法を瞬時に提案してくれる「CSSジェネレーター」が便利。

今回はオススメのCSSジェネレーターを8個に絞ってご紹介します。ぜひリッチなデザインのサイトを効率的に作っていきましょう。

CSSジェネレーター8選

1. CSS3 Generator

キャプチャ①.PNG
http://css3generator.com/

UIがとても使いやすく、調整できる項目も多いジェネレーターです。Border RadiusやRGBAなど設定したいメニューを選択し、イメージを見ながら調整してくれるので、最終的に作成したいものへ近づけながら、作っていくことが可能です。

順次必要なCSSの記述をCopyし、手元のCSSファイルへ貼り付けていけば欲しいCSSが完成します。

2. CSS3 Button Generator

キャプチャ②.PNG
http://css3button.net/

ボタンに特化したCSSジェネレーターです。画面上部のSHOWCASEメニューから、完成イメージに近いボタンを選択し、DETAIL画面で編集していきましょう。

こちらも各メニューから調整すると、ダイレクトにイメージに反映され、構成するHTML・CSSもその都度更新されます。CSSが不慣れな方にとっても分かりやすく、CSSの勉強をしたいという方にも良いでしょう。

ここで編集したコードは、出力できるので本番環境への反映にも便利です。

3. OneClickCSS

キャプチャ③.PNG
https://css.miugle.info/

作成したHTMLコードを貼り付けてボタンを押すだけで、すぐにid,クラス名に対応したCSSの箱を生成できるツールです。HTML上で設定してある順にCSSを表示してくれるので、作成する過程で汚くなってしまったCSSを整理するのにも便利です。

RubyやPHPなど余計な設定がHTMLに含まれていても問題なく作動してくれます。また、SCSSやSassの形式にも対応しており、新しい記述方法を覚えることなく、効率的に対応することも可能。

4. css2sass

キャプチャ④.PNG
http://css2sass.herokuapp.com/

こちらは、もともとあるCSSを一気にSassやSCSS等に変換してくれるサイトです。SassやSCSSを試してみたい方や、サイトリニューアルと合わせて一斉に記述方法をSassに統一したい方などにとって重宝します。

ただし、こちらのツールは、フォントサイズや色の指定などでCSS以外の言語が含まれているとエラーが出ますので、注意が必要です。

5. Ultimate CSS Gradient Generator - ColorZilla.com

キャプチャ⑤.PNG
http://www.colorzilla.com/gradient-editor/

グラデーションを作成してくれるツールです。Presetの一覧から作成したいイメージに近いものを選んで編集しましょう。グラデーションのかかっていないベタのPresetを選択して、自分で一から作成していくことも可能です。

また、import する機能も付いていますので、気になるサイトのグラデーションのCSSを取り込んで、それを編集することもできます。CSSにはスポンサーのコメントが入っていますが、「Comments」のチェックを外せば取ることができます。hexやRGBAなどカラーコードを選んだり、「switch to scss」からSCSSで出力することも可能。