CSSを生成できるオンラインツールのまとめ記事。どんなものがあるかというと、レイアウト、フォント関係、コード圧縮、バリデーション、ブラウザごとの確認、グリッドレイアウトのためのジェネレーター、メニュービルダー、フォーム装飾、丸角ジェネレーター、段組レイアウト、CSS Spriteコード生成、カラーパレット、EmやPxなどの単位変換などがその内容。面倒な部分はこうしたオンラインツールに頼るってのも、ひとつの手ですね。フォント関係とか結構重宝します。

40 Powerful CSS Tools And Generators To Automate Your Workflow

CSSによるレイアウトやテキスト指定、CSSファイルの圧縮、W3Cによるバリデーションなどの、CSS関連の便利ツールがまとめられた記事。特にレイアウト関連のツールが多く紹介されてて、YUIやBluePrintなどの、グリッドレイアウトのためのCSSフレームワークベースのジェネレーターなども入ってます。CSS関連のジェネレーターとはいえ、初級者向きというよりは中級者以上推薦といった感じです。フォント指定の便利サイト、Typetesterは自分も好んでよく使っております。

11 Useful Online Tools for Better CSS Development

Twitterの背景画像をデザインして、そのまま適用できるウェブサービスを、ColorLoversが公開してます。ただのテクスチャジェネレータならいくらでもありますが、これのナイスな点は、ウェブサービス側からTwitterにログインする事で、背景を直接適用できる点。Twitterアカウントを使ってログインすると、編集画面に自分のTwitterホームが出てきます。あとはテクスチャの種類と色を自由にカスタマイズして、ページ最下部の“save changes”をクリックするだけ。テクスチャを作ってからローカルに保存して、Twitterにアップロードして・・・という流れが必要ないので便利。またTwitter関係なしに、ただのテクスチャジェネレーターとしても使えます。色と種類を個別にカスタマイズできる点がナイス。

themelon : Twitter Profile Designer

オンラインで素材を生成する事のできるサイトが各種紹介された記事。パターン、テクスチャ、CSS、アイコン、バッジ、ボタン、バッジ、グラフ、ファビコン、カラーパレット、ウェブフォームなどなど、もう素材だけでウェブ作れるんじゃないかってくらい揃ってます。デザインする上でのスキルやツールがない場合、これらの素材生成サイトはかなり役だってくれそうです。「Beta!!」みたいなバッジって、ちょっと最近じゃ古い感じもしますが。

55 Astonishing Online Generators for Web Designers

ウェブデザイナーのためのタイポグラフィーツールとして機能する、各種ウェブアプリが紹介された記事。その内容はCSSによるフォント指定補助ツール、フォント検索、フォント作成、pxやemの単位変換、フォントテスター、フォントブラウザ、sifr変換ツールといった感じ。リアルタイムにCSS指定後の字面を見る事ができる補助ツールや、単位変換、あとテキストをsifr化してくれるサービスあたり便利そうです。Typetesterは自分も愛用しております。

14 Best Online Typography Tools for Web Designers

便利なCSSジェネレーターサイトが50個もまとめて紹介されてます。グリッドレイアウト生成、CSSフレームワーク、フォント関連ツール、メニューボタンテンプレート、角丸DIV生成、CSSスプライト関連、フォームカスタマイズといった感じで、カテゴリごとに分けられてます。フォント関連ツールとか地味だけど実用的ですな。あとCSSフレームワーク関連も個人的にはアツいところ。

50 Useful Tools and Generators for Easy CSS Development

CSSジェネレーターサイトが40個紹介されてます。フォント定義、CSSスプライト、CSSボタン生成、バリデーション、グリッドレイアウト補助ツール、レイアウト生成、単位変換ツール、CSSメニュー生成、CSSフレームワーク、スタイルウィザードなどなど盛りだくさん。こうやって並べてみると、数年前に比べて多くのデザイン要素をCSSに移行してるんだなーと改めて思ったり。この手のウェブアプリというか便利ツールって意外と使えるんスよね。特にフォントや単位変換などは実用的でオススメ。

40+ “Must see” CSS Tools

あの名作中の名作、ドラクエ3風のステータスを生成してくれるというジェネレーター。早速やってみましたやってみました。“クワトロ”と入力すると、なんと女にっ！　しかも戦士！　女戦士と言えばあのちょっとピンクのビキニ鎧がエッチな印象が思い出深いですな。こうらのよろい、おなべのフタ装備のくせして、はかいのつるぎとはんにゃのめんで武装！　どんどん呪われていきたいという強い意志が感じられます。破壊神として君臨できそうなダークサイドに完全に墜ちたキャラができて満足であります。

ドラクエ3 風 ステータス ジェネレーター >>

任意の写真をアップロードする事で、西部劇風のWanted張り紙にしてくれるジェネレーター。早速尊敬する江頭先生の画像でやってみました。見事に指名手配されてますね。iPhone用にもちょうどいいサイズなので、友達の写真で勝手に作ってアドレス帳に指定してやれるとイイ感じ。

Create a Wanted Poster >>

文字をタイプするだけで、Twitterっぽいロゴをサクっと生成してくれるジェネレーター。入力フォームに文字列を叩いて、“make”ボタンを押すだけ。また“advance options”をクリックすれば、フォントサイズ、フォントカラー、輪郭のカラーの3項目をカスタマイズすることもできます。Twitterホーム画面のバックグラウンドなんかにイイかもしんない。

Twitlogo >>

ウェブの背景画像にピッタリのテクスチャを生成してくれるウェブサービスがまとめられてます。よく知られてたり、過去にmBlogで紹介したサイトも多く掲載されてますが、いくつか知らないトコもあったので紹介。これ系のジェネレーターって、背景の素体作りに便利なんスよねー。

10 Quick & Dirty Tricks for Easy Custom Web Backgrounds >>

もいっちょCSS3ガラみのサイトを紹介。CSS3で使えるようになる、グラデーション表現のCSS記述のジェネレーターサイトです。左パネル内から、始点と終点の色、グラデーションの方向と位置などの各種指定を行えば、右のパネル内にCSS記述が生成されます。CSS 3に対応したブラウザを使えばプレビューもされるようです。現状Safari 4しか対応してませんが、FireFoxなどもいずれ対応するでしょう。こうしたCSS 3関係のジェネレイトサイトも今後増えていきそうです。

Gradientifier >>