Webデザインに使えるCSSジェネレーター&役立ちツール33選

CSSジェネレーターはコーディングの強い味方。アニメーションやレスポンシブのメニュー、統計情報を表示させたりソートを行ったり、円形のメニューを作成したりとWeb制作を行うときによく使うものや欲しいものが用意されたジェネレーターをご紹介します。

SVG画像作成

1. CIRCULUS.SVG

CIRCULUS.SVGは、SVGで円形のメニューを作るジェネレーターです。メニューの数、ボタンの位置、中心の軸の大きさなどを指定し、SVGでダウンロードできます。

CIRCULUS.SVG

2. SVGOMG

Webベースで使えるCSSジェネレーターアプリケーションのSVGOMG。SVGの最適化と制作が可能です。余白や宣言、コメント等を削除できます。

SVGOMG

3. SVGeneration

画像を使わなくても背景用のパターンが作成できるのは便利ですよね。SVGenerationは、SVGの背景画像を作成できるCSSジェネレーターです。SVGでダウンロードできるほか、CSSコードとして書き出すことも可能です。

SVGeneration

4. Glyphter

Glyphterは、SVGのアイコンフォントを作れるCSSジェネレーターです。ドラッグ&ドロップで操作できるので使いやすいです。

Glyphter

5. iconizr

iconizrは、SVGをCSSアイコンに変換すことができます。トップページにアイコンをドロップするだけ、という簡単操作です。

iconizr

6. iconmelon

GitHub上で公開されているiconmelonは、SVGアイコンのライブラリーを作成することのできるCSSジェネレーターです。カテゴリーわけがしっかりされているので、アイコンを選びやすいのが特徴。

iconmelon

アイコン検索＆成生

7. GlyphSearch

GlyphSearchは、Font Awesome、Glyphicons、IcoMoon、IoniconsなどのCSSジェネレーターサイトからアイコンを検索するためのツールです。より多くの選択肢から選びたい時に便利ですね。

GlyphSearch

8. FontAwesome Finder

FontAwesome Finderは、FontAwesomeのアイコンを検索するためのツールです。こちらも一括で検索できるので、時短を図る上でも試してみたいですね。

FontAwesome Finder

9. Fontello

Fontelloは、Font Awesome、Entypo、Typiconsのようなサービスからアイコンフォントを制作します。

Fontello

10. Fontsatic

Fontsaticは、6,000以上のアイコンからカスタムのアイコンフォントを作成できるCSSジェネレーターです。

Fontsatic

カラーパレット＆グラデーション生成

11. Clrs

Clrsは、プロトタイプに使用しやすいCSSクラスがまとめられています。デフォルトカラーとして使えるカラーパレットです。

Clrs

12. Pantone Sass

Pantone Sassは、PantoneのカラーがSASSの変数として定義されています。シンプルなUIで使いやすいです。

Pantone Sass

13. Flat UI Colors

Flat UI Colorsは、世界中のデザイナーが作ったカラーパレットが公開されています。上部のメニューバーからだいたいの色を選ぶと、紫なら紫系統、黄色なら黄色系統と、雰囲気の近い色が表示されます。

Flat UI Colors

14. BADA55.io

BADA55.ioは、良くないと感じたCSSのカラーがまとめられています。サイトのデザイン自体の美しさも特徴的です。

BADA55.io

タイポグラフィ設定

15. Font Library

Font Libraryは、Googleフォントをタグ付けして管理しています。オープンソースのプロジェクトとして運営しています。

Font Library

16. TypeWonder

指定したWeb ページを、好みのWeb フォントで表示してくれるサービスである、TypeWonder。使ってみたいWebフォントをテストするときに役立つツールです。トップページの検索窓に、試したいサイトのURLを入力するだけです。

TypeWonder

17. typesetwith.me

typesetwith.meは、Webブラウザ上で文字の読みやすさを確認できます。ただし英文のみ対応。

typesetwith.me

18. Type Scale

Type Scaleは、フォントのサイズを計算するのに役立つツールです。pxとemの比率を指定した上で、文字サイズの数値を表示できます。

Type Scale

アニメーション作成

19. CSSynth

CSSynthは、動きを指定してアニメーション作成します。同一画面上ですぐに確認できます。

CSSynth

20. Rocket

GiuHub上に公開されているRocketは、上へ向かって飛んでいくアニメーションが簡単に追加できます。リアルタイムで確認できないのが惜しい……！

Rocket

21. SpinKit

SpinKitには、いくつかの使いやすいローディングアニメーションが集められています。左右にスライドするとアニメーションが表示され、「Sorce」ボタンを押すとコードが表示されます。シンプルかつ、フラットを意識したモダンなデザインなので、おすすめです。

SpinKit

その他のコーディング補助ツール

22. CSS Ruler

CSS Rulerは、CSS RulerはCSSで使うpx、em、remという単位のサイズを比較するためのツールです。

html { font-size:  px; }

body { font-size:  px; }

.example { width: ; }

上記の３つの数値を指定すると、数字やボックス型のオブジェクトのサイズがリアルタイムで変更されます。

CSS Ruler

23. Visualize the box-model

Visualize the box-modelを使えば、ボックスモデルを可視化できます。

Visualize the box-model

24. EnjoyCSS

EnjoyCSSは、ボックス要素のCSSコードを生成します。テキスト、ボックスの色、影、角度など８つの項目から指定できます。直感的な操作で簡単なのが嬉しいですね。

EnjoyCSS

25. Flexy Boxes

Flexy Boxesは、CSSのフレックスボックスの挙動を確認したり、コードを生成したりができます。

Flexy Boxes

26. Create CSS3

Create CSS3は、とてもシンプルなCSS3のジェネレーターです。アコーディオン形式のメニューを開き、デザインしたい処理の数値を指定します。使いたいスタイルを自由に追加していけるので、複雑なCSSも生成できます。

Create CSS3

27. CSS3 Generator

CSS3 Generatorは、あらかじめ決められた項目に入力するだけで必要なコードを生成します。13のメニューがありますが、Create CSS3より自由度は低めです。

CSS3 Generator

28. Pie Menu Generator

Pie Menu Generatorは、簡単にパイメニューを作ることができます。形やメニューの数を決めるのも、パイメニューやスイッチで操作します。

Pie Menu Generator

29. CSSComb

CSSCombは、CSSのプロパティの整形をしてくれるプラグイン。特定の順番でCSSのプロパティやエレメントの書き順を揃えます。

CSSComb

30. One Click Encoding Decoding Tool

One Click Encoding Decoding Toolは、文字コードをASCIIに変換するツールです。エンコードとでコードがそれぞれできます。

One Click Encoding Decoding Tool

31. extractCSS

extractCSSは、HTMLからCSSのIDとCLASSを抽出してCSSへ記述します。

extractCSS

32. CSS Shrink

CSS Shrinkは、CSSを圧縮するためのツールです。サクサク動かして、UX改善に役立てましょう。

CSS Shrink

33. px-em

px-emは、px（ピクセル）からem（エム）に変換を行います。ピクセル単位の指定によく使われるpxは、環境によって変化しない絶対単位です。一方emは、文字の高さを基準にした単位で、1emは1文字分の長さを表します。
MacOSやWindowsなどの環境によって、単位の大きさが変わります。

px-em

34. NTH-TEST

NTH-TESTは、CSS3で追加されたセクレタのnth-childとnth-of-typeのテストツールです。

NTH-TEST

（執筆：Paul Andrew　翻訳：Asuka Nakajima　編集：Workship MAGAZINE編集部　提供元：speckyboy）