ブログ

  1. トップ
  2. ブログ
  3. Web開発を効率化する!CSS系オンラインツール、ジェネレーター16選

Web制作

Web開発を効率化する!CSS系オンラインツール、ジェネレーター16選

CSS系のツールやジェネレーターについてまとめました。CSS制作を効率化してくれるだけでなく、基礎的なスキルのみで思い通りのCSSを組むこともできるようになるでしょう。Webデザイナーを中心に参考にしていただければと思います。

総合系

CSSの複数のプロパティに対応しているジェネレーターです。

CSS3 Generator

CSS3 Generator

» CSS3 Generator

box系のプロパティやテキストシャドウ、transformなど、10ほどのプロパティが生成できるジェネレーターです。画面の流れに沿って数値や項目を指定していくだけで、簡単にCSSを作ることができます。

CSS3.0 Maker

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

» CSS Portal – Templates, Tutorials, Books, Software, Code Examples – CSS Portal

box shadowやgradient、CSSスプライト、角丸、ボタンなど、さまざまなCSSプロパティが生成できるジェネレーターです。CSSジェネレーターのほかにも、バリデーターやplaygroundなど、CSS制作に役立つツールが備わっています。

CSS3プロパティジェネレーター

CSS3プロパティジェネレーター

» CSS3プロパティジェネレーター | CSS-EBLOG

CSS3のプロパティが生成できるツールです。国産のツールなので、日本語で使うことができます。ドロップシャドウやテキストシャドウ、角丸などを生成することが可能です。

グラデーション

グラデーションが生成できるツール/ジェネレーターです。ボタンや背景素材など、グラデーションが必要になる場面は多いので上手に使っていきたいところです。

Grad3

Grad3

» Grad3

グラデーションの種類やcolorなどを選択していくことで、簡単にグラデーションが生成できるツールです。右上には常にCSSコードが表示されているので、すぐにコピーして使うことができます。ベンダープレフィックスも任意に追加・削除ができます。

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

» Ultimate CSS Gradient Generator – ColorZilla.com

Photoshopと似た操作感でCSSのグラデーションが作れるジェネレーターです。コーディングがわからなくても、項目を指定していくだけでグラデーションを作っていくことができます。右上にプレビューが表示されるので、参考になります。

ボックス

ボックス要素に影をつけるbox shadowなど、ボックス関連のツールです。画像やボタンなど、幅広く活用できるでしょう。

CSS Corners

CSS Corners

» CSS Corners, CSS3 Gradient

ボックス要素が生成できるジェネレーターです。cornerやgradientなど指定できる内容はシンプルですが、それだけに使いやすいツールにまとまっています。

Css3 drop shadow generator

Css3 drop shadow generator

» Css3 drop shadow generator

その名の通り、CSS3のボックスシャドウが作れるジェネレーターです。shadowのスタイルやblur(ぼかし)、Opacity(透明度)などを指定するだけで、drop shadowを実装することができます。

ボタン

ページ要素としては欠かせない、ボタンに関するツール/ジェネレーターです。

CSS3 Button Generator

CSS3 Button Generator

» CSS3 Button Generator

CSSボタンのジェネレーターです。backgroundやborder、shadowなどを指定していくことで、ボタンを作っていくことができます。画面左上にプレビューが表示されているので、それを見ながら変更を加えていくことができます。

Button Maker

Button Maker

» Button Maker

こちらもCSSのボタンが作成できるジェネレーターになっています。マウスホバーやボタンがアクティブになっている時のcolorについても指定が可能です。シンプルなUIなので、使いやすいでしょう。

その他

ここまでプロパティなどの括りでご紹介してきましたが、それ以外に便利なツールを取り上げておきましょう。

CSS triangle generator

CSS triangle generator

» CSS triangle generator

その名の通り、三角形のトライアングルを生成できるツールです。シンプルな機能ですが、案外使いどころは多いでしょう。

CSS ARROW PLEASE!

CSS ARROW PLEASE!

» cssarrowplease

吹き出しが作成できるジェネレーターです。ポジションやサイズ、カラーなどを指定して、吹き出しを作っていきます。使い方もシンプルなので、こういった類いのツールに慣れていない方にもおすすめです。

3D Ribbon Generator

3D Ribbon Generator

» 3D Ribbon Generator – CSS3d.net

3Dのリボンを生成できるジェネレーターです。用途は限られていますが、それだけに他にはない便利ツールと言えるでしょう。

border-image-generator

border-image-generator

» border-image-generator

border-imageが生成できるツールです。border-imageに使う画像を指定したのち、offsetやrepeatなどの指定をするとCSSを生成してくれます。プレビュー表示もあるので、うまく使っていきましょう。

css2sass

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 Formatter and Beautifier

CSSを見やすく整形してくれるツールです。CSSが散らかっていると保守管理もしづらくなります。こういったツールを活用することで、CSSも扱いやすくなるでしょう。

あとがき

CSS制作を効率化してくれるジェネレーターなどのツールについてご紹介しました。日ごろの業務にあたって、ジャンルや機能ごとに使えるツールをまとめておくと便利でしょう。記事でご紹介したツールを参考にしていただき、効率的にWebデザインを行っていただければと思います。