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で出力することも可能。

6. CSS三角形作成ツール

キャプチャ⑥.PNG

広告のランディングページ等で、画面下へスクロールを促す際に活用することの多い三角形を作成するジェネレーターです。それ以外では、フロー図としても活用シーンがあるのではないでしょうか。

7. CSS Border Radius Generator

キャプチャ⑧.PNG
http://border-radius.com/

その名の通り、border-radius（輪郭を丸めるプロパティ）に特化したツールです。4隅を個別に調整できるので、クローバーの葉っぱのような形や、半月形なども作れます。WebKit, Gecko, CSS3すべて表示してくれます。

8. Css3 drop shadow generator

キャプチャ⑨.PNG
http://www.themeshock.com/css-drop-shadow/

Boxに影をつけるツールで、影の種類も複数揃っています。Shadow Styleから選択したら、座標やBlur等で調整しましょう。際立たせたいBoxがあるときには効果付けとして重宝します。Boxの高さ・幅も一緒に構成できてしまうので便利です。

まとめ

冒頭でも述べたように、デザインが固まっていれば上記で紹介したいずれかのジェネレーターを使えば、簡単にパーツを作成できます。

CSSを勉強中の方も熟練されている方も、これらジェネレーターサイトをブックマークして効率的に学習・デザインを進めていきましょう。

このニュースを読んだあなたにオススメ

意外とわからない？読みづらいHTMLタグ・属性20個の読み方まとめ
ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選

このニュースに関連するカリキュラム

HTMLの基本構造を学ぼう

HTMLの基本構造を学ぼう

HTMLは「Hypertext Markup Language」の略語で、ウェブページを記述する際に用いられる言語です。「Markup」とはテキストを「構造化」することを意味します。「構造化」とは、テキスト等を単にベタ書きするのではなく、この部分は見出し、強調、リンク、リスト……などと意味付けをすることです。今回は、ほぼすべてのHTMLドキュメントで記述するHTMLの基本構造を説明します。