HTMLとCSSを使ってウェブデザインを行うとき、面倒なコードってありますよね。
たとえば、グラデーションやストライプをかけたりするのってかなりコードが長くなるので覚えるのも大変ですよね。
オシャレなWebパーツを作るためにはそれなりの知識が必要で、しかもコードが長いので覚えにくい・・・というか覚える気が起きない人もいることでしょう。
となると、そんなときに非常に役に立つのがジェネレーターと呼ばれるツールです。
ジェネレータとは、数値を入力するだけで簡単にCSSのグラデーションやストライプを生成してくれるツールなのです。
こうしたツールを活用すれば、作業時間や調べ物の時間が大幅にカットできるので、非常に効率的に作業を進めることができます。
ここは、ふだん僕が使っているジェネレータをリストアップしておくページです。
製作者の方々に感謝しつつ、有り難く使わせていただきましょう。
CSS Sample
このサイトは、CSSのストライプやグラデーションを簡単に生成できるサイトです。
ストライプは縦縞と横縞のほか、斜めのストライプやチェックにも対応しているため、様々な模様を生成することができます。
本当にシンプルで使いやすいので、数あるジェネレータの中でも特によく使わせていただいているサイトです。
こちらはCSSでグラデーションを生成してくれるジェネレーターサイトです。
このサイトの特徴は、非常に多彩なグラデーションを生成できるという点です。
2色のグラデーションはもちろん、5色や6色といった多くの色を使ったグラデーションも簡単に生成できます。
また、斜めグラデーションや円形のグラデーションにも対応しており、グラデーション生成ならこのサイトを使えばできないことは無いといっても過言ではありません。
Ultimate CSS Gradient Generatorに行く
CSS Button Creator
このサイトは、CSSでボタンを生成するサイトです。
ボタンのデザインを細かく設定できることが特徴で、ボタンの色や文字の色はもちろん、ドロップシャドウやボタンの背景なども細かく設定できることが特徴です。
CSS デザインジェネレーター
こちらのCSSデザインジェネレーターは、CSSでボタンや吹き出しを簡単に生成できるサイトです。
ボタンのジェネレーターを提供しているサイトはそれなりにたくさんあるのですが、CSSで吹き出しを生成できるジェネレーターは珍しいので、知っていると重宝します。
パラメーターも細かく設定することができ、好みの形の吹き出しを作ることができるでしょう。
CMAN
CMANさんは様々なジェネレーターを公開しているサイトで、特に文字装飾系のジェネレータが非常に充実しています。
CSSで文字の縁取りをしたり、影をつけたり、文字を回転させたりと、いろいろなパターンが用意されているので、文字装飾で困ることはありません。
しかも、動く系の文字装飾にはJQueryを使っていないのでCSSだけで利用可能という点も非常に使いやすいです。