WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。
CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。
この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
CSSツールとジェネレーター
Tabs Generator
タブジェネレーターはCSSナビゲーション・タブメニュー作成用のジェネレーターで、「サイズ」「色」「コーナー」などなど自分の好きなように微調整してデザインすることが出来ます。デザイン完成後、ダウンロードすることが出来ます。
My CSS Menu
My CSSメニューはブラウザ互換性のあるCSSメニューを作成してくれます。複雑なHTMLやCSSの知識が無くともこのツールがあればWEBナビゲーションを簡単に作成することが出来ます。
CSS Layout Generator
CSS CreatorによるCSSレイアウトジェネレーターは、魅力的なHTMLとCSSを使って個人的なホームページのテンプレートを作成する際に非常に役に立ちます。ヘッダーやフッターの付いた最大３列までの、可変もしくは固定のフロートコラムレイアウトを作成することが出来ます。
Fonttester
フォントテスターを使うと、インラインの高さ、フォントの太さ、フォントのスタイルやバリアント、テキストのインデントやトランスフォーム、単語や文字間隔など沢山のCSSプロパティをテストすることが出来ます。
Gradient Image Maker
このグラデーション画像作成ツールは、3種類のグラデーション画像を簡単作成出来るツールでプレビュー機能もついています。このツールで作成したグラデーション画像は、自分のWEBページデザイン上のどこにでも使用することが出来ます。
CSS Table Wizard
このCSSテーブルウィザードを使うと、テーブルのボーダースタイルを試したり、スタイルのソースコードを作成することが出来ます。このウィザードはテーブルスタイルを変更してもその都度ページを読み込む必要は無く、スタイルを変更すると自動的にプレビューも変更してくれます。
Grid Designer
グリッドデザイナーは、列数（Columns）や全体の幅（Pixels）、列間の幅（Gutters）や外枠のマージン（Margins）を調整しながら、グリッド設計することが出来るツールです。
Ultimate CSS Gradient Generator by ColorZilla
ColorZillaがプロデュースしたCSSグラデーションジェネレーターは、クロスブラウザサポートに対応したCSSグラデーションを作成出来る素晴らしいツールです。
CSS – Sprit.es
このCSSスプライト作成の補助ツールを使うと、苦労することなくCSSやHTMLコードを生成出来ます。CSSスプライトで使用したいファイルをアップロードしてボタンをクリックするだけで、全ての画像を１つのファイルにまとめてくれます。またロールオーバー効果を加えることも出来ます。
The 1KB CSS Grid
こちらもCSSグリッド関連ですが、コンテンツ管理システム用のページテンプレートを簡単に生成してくれるツールで、データがとても軽いのが特徴です。
Variable Grid System
こちらもCSSグリッド関連で、WEBサイトの基盤となるCSSグリッドを作成し、960 Grid SystemをベースにしたCSSジェネレーターファイルをダウンロードすることが出来ます。
YAML Builder
YAMLビルダーはYAMLをベースとしたCSSレイアウトの可能性を拡げるようにデザインされます。
Gridinator
Gridinatorもグリッド生成ツールで、基本的なグリッドを作成することが出来ます。
Blueprint Grid CSS Generator
こちらのCSSグリッドジェネレーターは更にフレキシブルなgrid.cssやcompressed.css、grid.pngと言ったファイルの青写真を生成してくれます。
CSS Grid Calculator
このCSSグリッド計算機を使えば、ページレイアウトの視覚化や様々な範囲のグリッドを簡単に実現出来ます。テキストブロックやページの各部分が実際にブラウザではどのように見えるのか、スタイルシートにコピペする為のコード含め正確なフィードバックを提供しています。
Button Maker Online
このボタン・メーカー・オンラインを使うとXHTMLに適用する８０ｘ１５サイズのボタンバナーを作成することが出来ます。８８ｘ３１ともう少し大きめのボタンバナーも作ることが出来ます。
Templatr
これはテンプレートジェネレーターで、HTMLやCSSの知識無しにオリジナリティに富んだブログやWEBサイト用のデザインを作成することが出来ます。
Free CSS Template Code Generator
こちらはテーブルを使うことなく、3列のレイアウトを実現するHTMLとCSSのテンプレートジェネレーターです。このジェネレーターはカスタマイズしたテンプレートをその場でWEBページとして確認することが出来、出力される3列のレイアウトは充実した機能の元作成されます。その為あなた好みのスタイルに合わせて簡単にテンプレートをカスタマイズすることが出来ます。
Firdamatic: the Design Tool for the Uninspired Webloggers
Firdamaticはオンラインのレイアウトジェネレーターで、シンプルなフォームを埋めるだけでテーブルを使わず簡単にWEBレイアウトの作成及びカスタマイズが出来ます。このツールを使えばあなた自身のFirdamaticベースのレイアウト用のスキンが楽々完成します。
CSS Button & Text Field Generator
こちらのツールはマウスでクリックするだけで、簡単にCSSボタンやテキストフィールドを作成出来るジェネレーターです。
CSS Font and Text Style Wizard
さて、今度はサンプルのCSSスタイルのソースコードを生成する為に、様々なフォントやテキストを試すことが出来るウィザードです。スタイルを変更する度にリロードする必要はなく、自動でスタイルが更新されます。
XHTML/CSS Markup Generator
またまた別のXHTMLやCSSコード用のマークアップジェネレーターで、仕事の手順では初めの方にあたる極めて退屈なフレーム決めのコーディング作業を根絶してくれます。このツールの中心的な機能は、XHTMLマークアップやCSSフレームを直感的で無駄のないシンタックスで生成することで作業を迅速にしてくれることです。その為、簡単に要素のスタイリングに移ることが出来ます。
CSS Color Codes
CSSカラーコードは16進数とRGBカラーコードの２つの選択肢があり、左側のカラーピッカーから色を選択し、右側のフィールドに表示された数値をコピーするだけ使用出来ます。
Sky CSS Tool
こちらのSky CSSを使用すると、手作業でコーディングすることなくCSSクラスを生成することが出来ます。適切に機能させるにはJavaScript互換ブラウザが必要です。
Spiffy Corners – Purely CSS Rounded Corners
Spiffy Cornersは画像もJavaScriptも使用せずアンチエイリアス処理されたコーナーを生成する為に必要なCSSとHTMLを作成する簡単な方法です。
Spritebox
これは１つのスプライト画像からCSSクラスやIDをいとも簡単に作成するWYSIWYGツールです。jQuery、CSS3とHTML5から作られ勿論無料のツールです。
CSS Generator
このツールはWEBページのスタイルを決定するのに役立ちます。様々なカスケードスタイルシート属性をライブプレビューで試すことが出来、該当フィールドで使用したい色を選んでHTMLタグやカラー設定をすることが出来ます。
Cascading Style Sheet CSS Generator
こちらもまたWEBページのカスケードスタイルを作成する為の無料のCSSツールです。追加したいスタイルシートを好きなだけ挿入することが出来ます。
SlickMap CSS
このツールはULリストで書いたナビゲーションを、完璧なサイトマップとして表示してくれるシンプルで簡単なツールです。ほぼ全てのWEBサイトで３階層までのページナビゲーションを収納することが出来、リンク集を加えることが出来ます。簡単にカスタマイズすることが可能な為、お好みのニーズやブランディングまたスタイル設定をいとも簡単に実装することが出来ます。
CSS Layout Generator – CSS Portal
このCSSレイアウトジェネレーターを使うと、ヘッダーやフッターそしてメニュー付きで最大３列までの可変もしくは固定幅の列レイアウトを作成することが出来ます。値はピクセルだけではなく、パーセントでの指定も可能です。
CSS Menu Maker
CSSメニューメーカーはクロスブラウザ互換性のあるWEBサイトメニューを簡単に生成する為のツールです。
Clean CSS
クリーンCSSは非常に優れたCSSの最適化及びフォーマットツールです。主に既存のCSSコードの無駄を排除し更に適したものへと整えてくれます。
CSS3 Please!
CSS3 Please!は要素を変更すると、瞬時に上部に固定された画像で完成形を表示してくれる便利なツールです。デザイナーにもディベロッパーにも非常にありがたいツールです。
CSS Sorter
CSSソーターはCSSファイルを並び替えする為の、無料のオンラインCSSツールです。CSSファイルを簡単に管理出来る様、CSSの各ルールをアルファベット順に並び替えてくれます。
CSS Type Set
CSSタイプセットは、デザイナーやディベロッパーがWEBコンテンツをどのようにスタイリングするか色々試すことが出来る、実用的なタイポグラフィのツールです。
quickCSS – Online-CSS-Generator
このツールを使えば、たったの１クリックでCSSを作成することが出来ます。
Website Performance (CSS Sprite Generator)
こちらのツールではソースファイルをアップロードするとスプライトイメージとCSSを生成してくれます。重複画像の削除やソースイメージのサイズ変更、スプライトの決定と言った機能も備えており、その他にも水平方向垂直方向のオフセット、背景色、クラスの接頭辞や接尾辞と言ったCSS選択肢の機能もついています。
Layout Generator
このレイアウトジェネレーターでは、パーセントやピクセル、EMなどを使ってCSS2.0のテクニックで複数列やグリッドレイアウトを生成することが出来ます。
Em Calculator
Em CalculatorはJavaScriptで作られたコンパクトなツールで、サイズ変更が可能でアクセス可能なCSSデザインの作成をサポートします。テキストのサイズに基づいて、ピクセルの単位をEMの単位に変換してくれます。
Colors Pallete Generator
カラーパレットジェネレーターは、アップロードした画像から特定の色をささっと抜出して表示してくれるツールで、フォトショップの色見本やCSSスタイルの生成も可能です。
CSS Menu Generator by Webmaster Toolkit
こちらのCSSメニュージェネレーターは、依然として人気のあるテキストベースのナビゲーションボタンセット用に必須なCSSとHTMLのコードを作成します。テキストリンクは検索エンジン最適化の面から考えると、画像よりも好まれる傾向にあります。このツールを使えば既存の味気ないテキストリンクではなく、もっと改良された外観と有用性を実現することが出来ます。
CSS Layout Generator
CSSレイアウトジェネレーターはXHTMLやHTMLのstrictやtransitionalと言ったDOCTYPEを設定し、「ヘッダー」「フッター」「サイドバー」「レイアウト幅」などの設定を、同じページ上でプレビューを観ながら試してみることが出来ます。
Simple CSS
シンプルCSSは、みなさんお馴染みのポイント・アンド・クリックインターフェースで、カスケードスタイルシートを難なくゼロから作成または既存のものなら変更することが出来るツールです。
CSS font style
CSSフォントスタイルは、フォントのスタイルを斜体などに変更する為に用いられます。
CSS Colors
CSSカラーズを使用すると、０から２５５までのRGBの組合せで合計１６００万以上のカラーを簡単に見つけることが出来ます。
WordPress Theme Generator
WordPressテーマジェネレーターを使えば、HTMLやPHP、CSSやJSの知識無しに自分好みのWordPress用のテーマのカスタマイズをすることが出来ます。色や設定やレイアウトを変更しプレビュー表示で確認してから「save」ボタンをクリックすればオリジナルのWordPressテーマをZIPファイルでダウンロード出来ます。
Csstxt
CsstxtはPタグやDIVタグを使って文章にスタイル装飾を施すいくつもの方法をサンプル表示してくれるオンラインツールです。
List-O-Matic
このList-O-Maticは割と知名度の高いツールかと思いますが、リストベースのナビゲーションメニューのコンテンツやレイアウトを選択しデモンストレーションさせることが出来ます。
Typetester
Typetesterは画面上でフォントを比較することが出来る、またちょっと違ったオンラインアプリケーションです。最も重要な役割はWEBデザイナーの生活を楽にすることです！一般的なフォントのリストの他に、各OS毎のデフォルトフォントがグループ分けしてあります。
終わりに・・・
CSSツールやジェネレーターはWEBディベロッパーやデザイナーの時間短縮の為に開発された、最高に便利なツールです。これらのツールは最もややこしい作業をシンプル化してくれ、その使い易さは大量のコーディングワークから我々を解放してくれます。
CSSツールやジェネレーターはディベロッパーの仕事を簡単かつ迅速にするのみでなく、生産性の向上をも可能にしてくれます。おそらく殆どのディベロッパーが何らかのCSSツールの類を使用しているのではないでしょうか。どんなCSSツールが役に立っているか是非教えてください。お気に入りのCSSツールやジェネレーターを教えていただけたら幸いです。
