コーディング不要で簡単にデザインパーツが作成できるCSSジェネレーター10選
- 2016年8月10日
- 16,211
ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
>> 著者詳細はこちら
CSS では様々なデザインを設定できますが、記述が難しかったり、記述量が多かったりして億劫になることがあるかと思います。やりたいことさえ決まっているのなら、その記述方法を瞬時に提案してくれる「 CSS ジェネレーター」が便利。
今回はオススメの CSS ジェネレーターを10個に絞ってご紹介します。ぜひリッチなデザインのサイトを効率的に作っていきましょう。
CSS ジェネレーター10選
1. CSS 3 Generator
UI がとても使いやすく、調整できる項目も多いジェネレーターです。Border RadiusやRGBAなど設定したいメニューを選択し、イメージを見ながら調整してくれるので、最終的に作成したいものへ近づけながら、作っていくことが可能です。
順次必要な CSS の記述をCopyし、手元の CSS ファイルへ貼り付けていけば欲しい CSS が完成します。
2. CSS 3 Button Generator
ボタンに特化した CSS ジェネレーターです。画面上部のSHOWCASEメニューから、完成イメージに近いボタンを選択し、DETAIL画面で編集していきましょう。
こちらも各メニューから調整すると、ダイレクトにイメージに反映され、構成する HTML ・ CSS もその都度更新されます。 CSS が不慣れな方にとっても分かりやすく、 CSS の勉強をしたいという方にも良いでしょう。
ここで編集したコードは、出力できるので本番環境への反映にも便利です。
3. OneClickCSS
作成した HTML コードを貼り付けてボタンを押すだけで、すぐにid,クラス名に対応した CSS の箱を生成できるツールです。 HTML 上で設定してある順に CSS を表示してくれるので、作成する過程で汚くなってしまった CSS を整理するのにも便利です。
RubyやPHPなど余計な設定が HTML に含まれていても問題なく作動してくれます。また、SCSSやSassの形式にも対応しており、新しい記述方法を覚えることなく、効率的に対応することも可能。
4. css2sass
http://css2sass.herokuapp.com/
こちらは、もともとある CSS を一気にSassやSCSS等に変換してくれるサイトです。SassやSCSSを試してみたい方や、サイトリニューアルと合わせて一斉に記述方法をSassに統一したい方などにとって重宝します。
ただし、こちらのツールは、 フォント サイズや色の指定などで CSS 以外の言語が含まれているとエラーが出ますので、注意が必要です。
5. Ultimate CSS Gradient Generator - ColorZilla.com
http://www.colorzilla.com/gradient-editor/
グラデーションを作成してくれるツールです。Presetの一覧から作成したいイメージに近いものを選んで編集しましょう。グラデーションのかかっていないベタのPresetを選択して、自分で一から作成していくことも可能です。
また、import する機能も付いていますので、気になるサイトのグラデーションの CSS を取り込んで、それを編集することもできます。 CSS にはスポンサーのコメントが入っていますが、「Comments」のチェックを外せば取ることができます。hexやRGBAなどカラーコードを選んだり、「switch to scss」からSCSSで出力することも可能。
6. CSS 三角形作成 ツール
http://apps.eky.hk/css-triangle-generator/ja
広告 の ランディングページ 等で、画面下へスクロールを促す際に活用することの多い三角形を作成するジェネレーターです。それ以外では、フロー図としても活用シーンがあるのではないでしょうか。
7. GRAD3
国産のグラデーション ツール です。レーダーのようなポインタを合わせれば、円形のグラデーションも簡単に作ることができます。グラデーションを切るポイントも、バー間の余白をクリックすれば新規でバーが立ち上がります。
細かく設定することが可能です。色も円形のパレットをドラッグしながら直感的に決めることができるので、悩んだ時にはこのツールで色々いじっていると、良いデザイン案が浮かんでくるかもしれません。
8. CSS Border Radius Generator
その名の通り、border-radius（輪郭を丸めるプロパティ）に特化した ツール です。4隅を個別に調整できるので、クローバーの葉っぱのような形や、半月形なども作れます。WebKit, Gecko, CSS 3すべて表示してくれます。
9. Css3 drop shadow generator
http://www.themeshock.com/css-drop-shadow/
Boxに影をつける ツール で、影の種類も複数揃っています。Shadow Styleから選択したら、座標やBlur等で調整しましょう。際立たせたいBoxがあるときには効果付けとして重宝します。Boxの高さ・幅も一緒に構成できてしまうので便利です。
10. CSS 3 Text Shadow Generator - CSS 3gen
http://css3gen.com/text-shadow/
テキスト に影を付けてくれるツールです。触ってみていただくと分かりますが、 タイトル 等の演出を簡単に行うことが可能です。Blurを弱めに設定するだけで、 テキスト を重ねて表示する装飾も簡単です。
他にも、本ツールの下部では関連 ツール が紹介されています。StartとEndを設定してアニメーションを作れる CSS 3 Animationや、3Dの箱を作ることができる CSS 3D Transformなど、同じ操作感で色々な ツール を触ることができるので、このサイトの ツール に慣れると効率的かもしれません。
まとめ
冒頭でも述べたように、デザインが固まっていれば上記で紹介したいずれかのジェネレーターを使えば、簡単にパーツを作成できます。
CSS を勉強中の方も熟練されている方も、これらジェネレーターサイトをブックマークして効率的に学習・デザインを進めていきましょう。
このニュースを読んだあなたにオススメ
HTMLの基本構造を学ぼう
意外とわからない？読みづらいHTMLタグ・属性20個の読み方まとめ
ホームページ制作初心者のためのHTMLタグの基礎知識・書き方がわかる記事5選
このニュースに関連するカリキュラム
