CSS系のツールやジェネレーターについてまとめました。CSS制作を効率化してくれるだけでなく、基礎的なスキルのみで思い通りのCSSを組むこともできるようになるでしょう。Webデザイナーを中心に参考にしていただければと思います。
総合系
CSSの複数のプロパティに対応しているジェネレーターです。
CSS3 Generator
box系のプロパティやテキストシャドウ、transformなど、10ほどのプロパティが生成できるジェネレーターです。画面の流れに沿って数値や項目を指定していくだけで、簡単にCSSを作ることができます。
CSS3.0 Maker
» CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
名前の通り、CSS3に対応したジェネレーターです。box shadowやtext rotation、transition、gradientなど生成できるCSSも多岐に渡っています。ダッシュボード風にまとまったページデザインもわかりやすく、使いやすいツールです。
CSS Portal
» CSS Portal – Templates, Tutorials, Books, Software, Code Examples – CSS Portal
box shadowやgradient、CSSスプライト、角丸、ボタンなど、さまざまなCSSプロパティが生成できるジェネレーターです。CSSジェネレーターのほかにも、バリデーターやplaygroundなど、CSS制作に役立つツールが備わっています。
CSS3プロパティジェネレーター
» CSS3プロパティジェネレーター | CSS-EBLOG
CSS3のプロパティが生成できるツールです。国産のツールなので、日本語で使うことができます。ドロップシャドウやテキストシャドウ、角丸などを生成することが可能です。
グラデーション
グラデーションが生成できるツール/ジェネレーターです。ボタンや背景素材など、グラデーションが必要になる場面は多いので上手に使っていきたいところです。
Grad3
» Grad3
グラデーションの種類やcolorなどを選択していくことで、簡単にグラデーションが生成できるツールです。右上には常にCSSコードが表示されているので、すぐにコピーして使うことができます。ベンダープレフィックスも任意に追加・削除ができます。
Ultimate CSS Gradient Generator
» Ultimate CSS Gradient Generator – ColorZilla.com
Photoshopと似た操作感でCSSのグラデーションが作れるジェネレーターです。コーディングがわからなくても、項目を指定していくだけでグラデーションを作っていくことができます。右上にプレビューが表示されるので、参考になります。
ボックス
ボックス要素に影をつけるbox shadowなど、ボックス関連のツールです。画像やボタンなど、幅広く活用できるでしょう。
CSS Corners
ボックス要素が生成できるジェネレーターです。cornerやgradientなど指定できる内容はシンプルですが、それだけに使いやすいツールにまとまっています。
Css3 drop shadow generator
その名の通り、CSS3のボックスシャドウが作れるジェネレーターです。shadowのスタイルやblur（ぼかし）、Opacity（透明度）などを指定するだけで、drop shadowを実装することができます。
ボタン
ページ要素としては欠かせない、ボタンに関するツール/ジェネレーターです。
CSS3 Button Generator
CSSボタンのジェネレーターです。backgroundやborder、shadowなどを指定していくことで、ボタンを作っていくことができます。画面左上にプレビューが表示されているので、それを見ながら変更を加えていくことができます。
Button Maker
こちらもCSSのボタンが作成できるジェネレーターになっています。マウスホバーやボタンがアクティブになっている時のcolorについても指定が可能です。シンプルなUIなので、使いやすいでしょう。
その他
ここまでプロパティなどの括りでご紹介してきましたが、それ以外に便利なツールを取り上げておきましょう。
CSS triangle generator
その名の通り、三角形のトライアングルを生成できるツールです。シンプルな機能ですが、案外使いどころは多いでしょう。
CSS ARROW PLEASE!
吹き出しが作成できるジェネレーターです。ポジションやサイズ、カラーなどを指定して、吹き出しを作っていきます。使い方もシンプルなので、こういった類いのツールに慣れていない方にもおすすめです。
3D Ribbon Generator
» 3D Ribbon Generator – CSS3d.net
3Dのリボンを生成できるジェネレーターです。用途は限られていますが、それだけに他にはない便利ツールと言えるでしょう。
border-image-generator
border-imageが生成できるツールです。border-imageに使う画像を指定したのち、offsetやrepeatなどの指定をするとCSSを生成してくれます。プレビュー表示もあるので、うまく使っていきましょう。
css2sass
» css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
CSSをSASS/SCSSに変換できるツールです。CSSを効率的に管理するにはSASSやSCSSは必須とも言えます。CSSの運用や管理に役立つでしょう。
なおSASS/SCSSについては下の記事で詳しく解説しています。よろしければそちらの記事もご覧ください。
» CSSコーディングを効率化する！SCSSの特徴と基本的な使い方
CSS Formatter and Beautifier
» CSS Formatter and Beautifier
CSSを見やすく整形してくれるツールです。CSSが散らかっていると保守管理もしづらくなります。こういったツールを活用することで、CSSも扱いやすくなるでしょう。
あとがき
CSS制作を効率化してくれるジェネレーターなどのツールについてご紹介しました。日ごろの業務にあたって、ジャンルや機能ごとに使えるツールをまとめておくと便利でしょう。記事でご紹介したツールを参考にしていただき、効率的にWebデザインを行っていただければと思います。