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

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

CSSジェネレーター10選

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
http://apps.eky.hk/css-triangle-generator/ja

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

7. GRAD3

キャプチャ⑦.PNG
http://grad3.ecoloniq.jp/

国産のグラデーションツールです。レーダーのようなポインタを合わせれば、円形のグラデーションも簡単に作ることができます。グラデーションを切るポイントも、バー間の余白をクリックすれば新規でバーが立ち上がります。

細かく設定することが可能です。色も円形のパレットをドラッグしながら直感的に決めることができるので、悩んだ時にはこのツールで色々いじっていると、良いデザイン案が浮かんでくるかもしれません。

8. CSS Border Radius Generator

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

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

9. Css3 drop shadow generator

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

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

10. CSS3 Text Shadow Generator - CSS3gen

キャプチャ⑩.PNG
http://css3gen.com/text-shadow/

テキストに影を付けてくれるツールです。触ってみていただくと分かりますが、タイトル等の演出を簡単に行うことが可能です。Blurを弱めに設定するだけで、テキストを重ねて表示する装飾も簡単です。

他にも、本ツールの下部では関連ツールが紹介されています。StartとEndを設定してアニメーションを作れるCSS3 Animationや、3Dの箱を作ることができるCSS 3D Transformなど、同じ操作感で色々なツールを触ることができるので、このサイトのツールに慣れると効率的かもしれません。

まとめ

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

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

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

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

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

HTMLの基本構造を学ぼう

HTMLの基本構造を学ぼう

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