WEBデザイナーやディベロッパーのみなさんは、WEBサイトのデザインや開発にかける時間をいかに短縮するか絶えず模索していらっしゃるのではないでしょうか。そうすることによりWEBサイト構築の生産性を向上させ、自分の仕事を最大限に活用出来るよう改善していらっしゃるんですよね。ここではみなさんの貴重な時間を節約出来る、数々の優れたCSSツールやジェネレーターをご紹介していきたいと思います。

cssgenerator CSSツール・ジェネレーター お役立ちツール

CSSツールは魔法のランプの様に機能し仕事をシンプル化してくれるので、WEBディベロッパーのみならずWEBデザイナーのみなさんにも不可欠なツールです。ほぼ全ての開発ツールは時間短縮を実現してくれるので、優雅で機能的で高度に最適化されたWEBサイトを近道しながら作り上げることが出来ます。

この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

CSSツールとジェネレーター

cssgenerator1 CSSツール・ジェネレーター お役立ちツール

Tabs Generator

タブジェネレーターはCSSナビゲーション・タブメニュー作成用のジェネレーターで、「サイズ」「色」「コーナー」などなど自分の好きなように微調整してデザインすることが出来ます。デザイン完成後、ダウンロードすることが出来ます。

cssgenerator2 CSSツール・ジェネレーター お役立ちツール

My CSS Menu

My CSSメニューはブラウザ互換性のあるCSSメニューを作成してくれます。複雑なHTMLやCSSの知識が無くともこのツールがあればWEBナビゲーションを簡単に作成することが出来ます。

cssgenerator3 CSSツール・ジェネレーター お役立ちツール

CSS Layout Generator

CSS CreatorによるCSSレイアウトジェネレーターは、魅力的なHTMLとCSSを使って個人的なホームページのテンプレートを作成する際に非常に役に立ちます。ヘッダーやフッターの付いた最大3列までの、可変もしくは固定のフロートコラムレイアウトを作成することが出来ます。

cssgenerator4 CSSツール・ジェネレーター お役立ちツール

Fonttester

フォントテスターを使うと、インラインの高さ、フォントの太さ、フォントのスタイルやバリアント、テキストのインデントやトランスフォーム、単語や文字間隔など沢山のCSSプロパティをテストすることが出来ます。

cssgenerator5 CSSツール・ジェネレーター お役立ちツール

Gradient Image Maker

このグラデーション画像作成ツールは、3種類のグラデーション画像を簡単作成出来るツールでプレビュー機能もついています。このツールで作成したグラデーション画像は、自分のWEBページデザイン上のどこにでも使用することが出来ます。

cssgenerator6 CSSツール・ジェネレーター お役立ちツール

CSS Table Wizard

このCSSテーブルウィザードを使うと、テーブルのボーダースタイルを試したり、スタイルのソースコードを作成することが出来ます。このウィザードはテーブルスタイルを変更してもその都度ページを読み込む必要は無く、スタイルを変更すると自動的にプレビューも変更してくれます。

cssgenerator7 CSSツール・ジェネレーター お役立ちツール

Grid Designer

グリッドデザイナーは、列数(Columns)や全体の幅(Pixels)、列間の幅(Gutters)や外枠のマージン(Margins)を調整しながら、グリッド設計することが出来るツールです。

cssgenerator8 CSSツール・ジェネレーター お役立ちツール

Ultimate CSS Gradient Generator by ColorZilla

ColorZillaがプロデュースしたCSSグラデーションジェネレーターは、クロスブラウザサポートに対応したCSSグラデーションを作成出来る素晴らしいツールです。

cssgenerator9 CSSツール・ジェネレーター お役立ちツール

CSS – Sprit.es

このCSSスプライト作成の補助ツールを使うと、苦労することなくCSSやHTMLコードを生成出来ます。CSSスプライトで使用したいファイルをアップロードしてボタンをクリックするだけで、全ての画像を1つのファイルにまとめてくれます。またロールオーバー効果を加えることも出来ます。

cssgenerator10 CSSツール・ジェネレーター お役立ちツール

The 1KB CSS Grid

こちらもCSSグリッド関連ですが、コンテンツ管理システム用のページテンプレートを簡単に生成してくれるツールで、データがとても軽いのが特徴です。

cssgenerator11 CSSツール・ジェネレーター お役立ちツール

Variable Grid System

こちらもCSSグリッド関連で、WEBサイトの基盤となるCSSグリッドを作成し、960 Grid SystemをベースにしたCSSジェネレーターファイルをダウンロードすることが出来ます。

cssgenerator12 CSSツール・ジェネレーター お役立ちツール

YAML Builder

YAMLビルダーはYAMLをベースとしたCSSレイアウトの可能性を拡げるようにデザインされます。

cssgenerator13 CSSツール・ジェネレーター お役立ちツール

Gridinator

Gridinatorもグリッド生成ツールで、基本的なグリッドを作成することが出来ます。

cssgenerator14 CSSツール・ジェネレーター お役立ちツール

Blueprint Grid CSS Generator

こちらのCSSグリッドジェネレーターは更にフレキシブルなgrid.cssやcompressed.css、grid.pngと言ったファイルの青写真を生成してくれます。

cssgenerator15 CSSツール・ジェネレーター お役立ちツール

CSS Grid Calculator

このCSSグリッド計算機を使えば、ページレイアウトの視覚化や様々な範囲のグリッドを簡単に実現出来ます。テキストブロックやページの各部分が実際にブラウザではどのように見えるのか、スタイルシートにコピペする為のコード含め正確なフィードバックを提供しています。

cssgenerator16 CSSツール・ジェネレーター お役立ちツール

Button Maker Online

このボタン・メーカー・オンラインを使うとXHTMLに適用する80x15サイズのボタンバナーを作成することが出来ます。88x31ともう少し大きめのボタンバナーも作ることが出来ます。

cssgenerator17 CSSツール・ジェネレーター お役立ちツール

Templatr

これはテンプレートジェネレーターで、HTMLやCSSの知識無しにオリジナリティに富んだブログやWEBサイト用のデザインを作成することが出来ます。

cssgenerator18 CSSツール・ジェネレーター お役立ちツール

Free CSS Template Code Generator

こちらはテーブルを使うことなく、3列のレイアウトを実現するHTMLとCSSのテンプレートジェネレーターです。このジェネレーターはカスタマイズしたテンプレートをその場でWEBページとして確認することが出来、出力される3列のレイアウトは充実した機能の元作成されます。その為あなた好みのスタイルに合わせて簡単にテンプレートをカスタマイズすることが出来ます。

cssgenerator19 CSSツール・ジェネレーター お役立ちツール

Firdamatic: the Design Tool for the Uninspired Webloggers

Firdamaticはオンラインのレイアウトジェネレーターで、シンプルなフォームを埋めるだけでテーブルを使わず簡単にWEBレイアウトの作成及びカスタマイズが出来ます。このツールを使えばあなた自身のFirdamaticベースのレイアウト用のスキンが楽々完成します。

cssgenerator20 CSSツール・ジェネレーター お役立ちツール

CSS Button & Text Field Generator

こちらのツールはマウスでクリックするだけで、簡単にCSSボタンやテキストフィールドを作成出来るジェネレーターです。

cssgenerator21 CSSツール・ジェネレーター お役立ちツール

CSS Font and Text Style Wizard

さて、今度はサンプルのCSSスタイルのソースコードを生成する為に、様々なフォントやテキストを試すことが出来るウィザードです。スタイルを変更する度にリロードする必要はなく、自動でスタイルが更新されます。

cssgenerator22 CSSツール・ジェネレーター お役立ちツール

XHTML/CSS Markup Generator

またまた別のXHTMLやCSSコード用のマークアップジェネレーターで、仕事の手順では初めの方にあたる極めて退屈なフレーム決めのコーディング作業を根絶してくれます。このツールの中心的な機能は、XHTMLマークアップやCSSフレームを直感的で無駄のないシンタックスで生成することで作業を迅速にしてくれることです。その為、簡単に要素のスタイリングに移ることが出来ます。

cssgenerator231 CSSツール・ジェネレーター お役立ちツール

CSS Color Codes

CSSカラーコードは16進数とRGBカラーコードの2つの選択肢があり、左側のカラーピッカーから色を選択し、右側のフィールドに表示された数値をコピーするだけ使用出来ます。

cssgenerator24 CSSツール・ジェネレーター お役立ちツール

Sky CSS Tool

こちらのSky CSSを使用すると、手作業でコーディングすることなくCSSクラスを生成することが出来ます。適切に機能させるにはJavaScript互換ブラウザが必要です。

cssgenerator25 CSSツール・ジェネレーター お役立ちツール

Spiffy Corners – Purely CSS Rounded Corners

Spiffy Cornersは画像もJavaScriptも使用せずアンチエイリアス処理されたコーナーを生成する為に必要なCSSとHTMLを作成する簡単な方法です。

cssgenerator26 CSSツール・ジェネレーター お役立ちツール

Spritebox

これは1つのスプライト画像からCSSクラスやIDをいとも簡単に作成するWYSIWYGツールです。jQuery、CSS3とHTML5から作られ勿論無料のツールです。

cssgenerator27 CSSツール・ジェネレーター お役立ちツール

CSS Generator

このツールはWEBページのスタイルを決定するのに役立ちます。様々なカスケードスタイルシート属性をライブプレビューで試すことが出来、該当フィールドで使用したい色を選んでHTMLタグやカラー設定をすることが出来ます。

cssgenerator28 CSSツール・ジェネレーター お役立ちツール

Cascading Style Sheet CSS Generator

こちらもまたWEBページのカスケードスタイルを作成する為の無料のCSSツールです。追加したいスタイルシートを好きなだけ挿入することが出来ます。

cssgenerator29 CSSツール・ジェネレーター お役立ちツール

SlickMap CSS

このツールはULリストで書いたナビゲーションを、完璧なサイトマップとして表示してくれるシンプルで簡単なツールです。ほぼ全てのWEBサイトで3階層までのページナビゲーションを収納することが出来、リンク集を加えることが出来ます。簡単にカスタマイズすることが可能な為、お好みのニーズやブランディングまたスタイル設定をいとも簡単に実装することが出来ます。

cssgenerator30 CSSツール・ジェネレーター お役立ちツール

CSS Layout Generator – CSS Portal

このCSSレイアウトジェネレーターを使うと、ヘッダーやフッターそしてメニュー付きで最大3列までの可変もしくは固定幅の列レイアウトを作成することが出来ます。値はピクセルだけではなく、パーセントでの指定も可能です。

cssgenerator31 CSSツール・ジェネレーター お役立ちツール

CSS Menu Maker

CSSメニューメーカーはクロスブラウザ互換性のあるWEBサイトメニューを簡単に生成する為のツールです。

cssgenerator32 CSSツール・ジェネレーター お役立ちツール

Clean CSS

クリーンCSSは非常に優れたCSSの最適化及びフォーマットツールです。主に既存のCSSコードの無駄を排除し更に適したものへと整えてくれます。

cssgenerator33 CSSツール・ジェネレーター お役立ちツール

CSS3 Please!

CSS3 Please!は要素を変更すると、瞬時に上部に固定された画像で完成形を表示してくれる便利なツールです。デザイナーにもディベロッパーにも非常にありがたいツールです。

cssgenerator34 CSSツール・ジェネレーター お役立ちツール

CSS Sorter

CSSソーターはCSSファイルを並び替えする為の、無料のオンラインCSSツールです。CSSファイルを簡単に管理出来る様、CSSの各ルールをアルファベット順に並び替えてくれます。

cssgenerator35 CSSツール・ジェネレーター お役立ちツール

CSS Type Set

CSSタイプセットは、デザイナーやディベロッパーがWEBコンテンツをどのようにスタイリングするか色々試すことが出来る、実用的なタイポグラフィのツールです。

cssgenerator36 CSSツール・ジェネレーター お役立ちツール

quickCSS – Online-CSS-Generator

このツールを使えば、たったの1クリックでCSSを作成することが出来ます。

cssgenerator37 CSSツール・ジェネレーター お役立ちツール

Website Performance (CSS Sprite Generator)

こちらのツールではソースファイルをアップロードするとスプライトイメージとCSSを生成してくれます。重複画像の削除やソースイメージのサイズ変更、スプライトの決定と言った機能も備えており、その他にも水平方向垂直方向のオフセット、背景色、クラスの接頭辞や接尾辞と言ったCSS選択肢の機能もついています。

cssgenerator38 CSSツール・ジェネレーター お役立ちツール

Layout Generator

このレイアウトジェネレーターでは、パーセントやピクセル、EMなどを使ってCSS2.0のテクニックで複数列やグリッドレイアウトを生成することが出来ます。

cssgenerator39 CSSツール・ジェネレーター お役立ちツール

Em Calculator

Em CalculatorはJavaScriptで作られたコンパクトなツールで、サイズ変更が可能でアクセス可能なCSSデザインの作成をサポートします。テキストのサイズに基づいて、ピクセルの単位をEMの単位に変換してくれます。

cssgenerator40 CSSツール・ジェネレーター お役立ちツール

Colors Pallete Generator

カラーパレットジェネレーターは、アップロードした画像から特定の色をささっと抜出して表示してくれるツールで、フォトショップの色見本やCSSスタイルの生成も可能です。

cssgenerator41 CSSツール・ジェネレーター お役立ちツール

CSS Menu Generator by Webmaster Toolkit

こちらのCSSメニュージェネレーターは、依然として人気のあるテキストベースのナビゲーションボタンセット用に必須なCSSとHTMLのコードを作成します。テキストリンクは検索エンジン最適化の面から考えると、画像よりも好まれる傾向にあります。このツールを使えば既存の味気ないテキストリンクではなく、もっと改良された外観と有用性を実現することが出来ます。

cssgenerator42 CSSツール・ジェネレーター お役立ちツール

CSS Layout Generator

CSSレイアウトジェネレーターはXHTMLやHTMLのstrictやtransitionalと言ったDOCTYPEを設定し、「ヘッダー」「フッター」「サイドバー」「レイアウト幅」などの設定を、同じページ上でプレビューを観ながら試してみることが出来ます。

cssgenerator43 CSSツール・ジェネレーター お役立ちツール

Simple CSS

シンプルCSSは、みなさんお馴染みのポイント・アンド・クリックインターフェースで、カスケードスタイルシートを難なくゼロから作成または既存のものなら変更することが出来るツールです。

cssgenerator44 CSSツール・ジェネレーター お役立ちツール

CSS font style

CSSフォントスタイルは、フォントのスタイルを斜体などに変更する為に用いられます。

cssgenerator45 CSSツール・ジェネレーター お役立ちツール

CSS Colors

CSSカラーズを使用すると、0から255までのRGBの組合せで合計1600万以上のカラーを簡単に見つけることが出来ます。

cssgenerator46 CSSツール・ジェネレーター お役立ちツール

WordPress Theme Generator

WordPressテーマジェネレーターを使えば、HTMLやPHP、CSSやJSの知識無しに自分好みのWordPress用のテーマのカスタマイズをすることが出来ます。色や設定やレイアウトを変更しプレビュー表示で確認してから「save」ボタンをクリックすればオリジナルのWordPressテーマをZIPファイルでダウンロード出来ます。

cssgenerator47 CSSツール・ジェネレーター お役立ちツール

Csstxt

CsstxtはPタグやDIVタグを使って文章にスタイル装飾を施すいくつもの方法をサンプル表示してくれるオンラインツールです。

cssgenerator48 CSSツール・ジェネレーター お役立ちツール

List-O-Matic

このList-O-Maticは割と知名度の高いツールかと思いますが、リストベースのナビゲーションメニューのコンテンツやレイアウトを選択しデモンストレーションさせることが出来ます。

cssgenerator49 CSSツール・ジェネレーター お役立ちツール

Typetester

Typetesterは画面上でフォントを比較することが出来る、またちょっと違ったオンラインアプリケーションです。最も重要な役割はWEBデザイナーの生活を楽にすることです!一般的なフォントのリストの他に、各OS毎のデフォルトフォントがグループ分けしてあります。

cssgenerator50 CSSツール・ジェネレーター お役立ちツール

終わりに・・・

CSSツールやジェネレーターはWEBディベロッパーやデザイナーの時間短縮の為に開発された、最高に便利なツールです。これらのツールは最もややこしい作業をシンプル化してくれ、その使い易さは大量のコーディングワークから我々を解放してくれます。

CSSツールやジェネレーターはディベロッパーの仕事を簡単かつ迅速にするのみでなく、生産性の向上をも可能にしてくれます。おそらく殆どのディベロッパーが何らかのCSSツールの類を使用しているのではないでしょうか。どんなCSSツールが役に立っているか是非教えてください。お気に入りのCSSツールやジェネレーターを教えていただけたら幸いです。