色々なCSSジェネレータで出来るあれこれまとめ

便利なCSSジェネレータ１０選 目次

• 使われているclassやIDを抽出してCSSの開始を楽にする
• classやidのバックグラウンドのCSSを作成
• HTMLのリストをいじるだけでサイトマップが完成してしまうCSS
• CSSでグラデーションカラーを書き出すジェネレータ
• html5対応のCSSレイアウトジェネレータ
• CSSを絞るCSSダイエットジェネレータ
• メニューCSSジェネレータ
• メニューCSSジェネレータ２
• タブ作成ジェネレータ
• 丸角CSSジェネレータ

使われているclassやIDを抽出してCSSの開始を楽にする

PrimerCSS
ちょっと何いってんのかわかんないっていう声も聞こえて来そうですが、具体的にどうなるかと言うのと以下のようになります。

まずはじめに、HTMLでコーディングしてしまいます。
その後、そのHTMLをコピーして貼り付けします。

貼り付けたら「PRIME IT」をクリック。

使い方はとても簡単ですね。
目次にもどる

classやidのバックグラウンドのCSSを作成

Spritebox - Create CSS from Sprite Images

こちらはclassやidのバックグラウンドの画像の設定を行い、それにともなうCSSを吐き出すジェネレータ。

}は一個付け加える必要があります。classなら.の前、IDなら#の前に。

以下のように赤い部分を調節する事で画像の領域を設定出来ます。

コピペしたあと
#header{width:345px;
height:231px;
background-position:-96px -46px;display:block;
background-repeat:no-repeat;}←こいつ追加
#header {background-image:url();}

image:url()は画像の位置を指定してください。

<div id="header">テスト</div>
こんな感じで使います。
目次にもどる

HTMLのリストをいじるだけでサイトマップが完成してしまうCSS

SlickMap CSS

ジェネレータと言うよりも、すごいCSSと言った方がいいかもしれないが、これは便利かも。
ジェネレータじゃないので、ある程度HTMLを編集するスキルが求められますが、それほど難しいものでもないので、「htmlを触ればわかる」かと思います。

ひとまずサンプルを開いてみてください。そしてソースを表示してソースをよく見てください。
サンプルデモ

例えば右上にあるログインやヘルプなどの箇所

これは以下のようなコードで表示している。
<ul id="utilityNav">
<li><a href="/register">Register</a></li>
<li><a href="/login">Log In</a></li>
<li><a href="/smap">Site Map</a></li>
</ul>
URLを追加すればそのURLを示します。


こちらも以下のように。
<li><a href="/contact">Contact</a>
　<ul>
　　<li><a href="/contact/offices">Offices</a>
　<ul>
　　<li><a href="contact/map">Map</a></li>
　　<li><a href="contact/form">Contact Form</a></li>
　</ul>
</li>
ulとliによるリスト表示だけでこのようにきれいに整理されたマップが作成できると言うCSSです。お試しあれ。
SlickMap CSS
目次にもどる

CSSでグラデーションカラーを書き出すジェネレータ

Ultimate CSS Gradient Generator

これまたアンビリーバボーな便利ツール。
左上でパターンを選んで右上でサイズを決定するだけでグラデーションを書き出してくれます。

デフォルトで用意されているパターンも豊富です。

すばらしいサービスですね！
目次にもどる

html5対応のCSSレイアウトジェネレータ

CSS Layout Generator | CSS Creator
人の手作業をいかに省くかを考えられたジェネレータ。
必要とされるサイズやバックグラウンドの色を決めてコードを生成するだけ。
右カラム、左カラム、ヘッダー、フッター、それぞれの有無を決める事が出来る。

このあたりは説明不要なほどです。というかある程度CSSがわかってないと、ここで生成されたものを更に加工とか無理なので、わかってる人向けになっていますね。生成後はHTMLとCSSをダウンロードして使えます。
さりげなく
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
IE用にGooglecodeのhtml5.jsが含まれているのポイントですねー。
目次にもどる

CSSを絞るCSSダイエットジェネレータ

Clean CSS
肥大したCSSの余計な部分を省き、必要な部分のみを表示するCSSダイエットマシーン。

作成したコードを左側に貼り付け、右側の項目である程度の設定を行います。
コメントアウトを消されるとまずい場合はそのあたりの設定をしておくと良いかも。

GoogleChromeで翻訳すれば英語が読めないそんなあなたにもばっちり読めます。
ちなみにネタ帳のCSSをこれで最大圧縮で絞ると「１行になりコメントもアウトされる」為、めっちゃ見ずらくなりますが、以下のようになります。

まぁ・・・ダイエットも程ほどにということで。
目次にもどる

メニューCSSジェネレータ

CSS Menu Generator
すばらしいの一言。わずか３クリックだけで素敵なメニューCSSがダウンロードできる。



最初に選ぶメニューは４つ。あとはデザインを選べば即ダウンロード。

ドロップダウンメニューCSS



水平メニューCSS



垂直メニューCSS



多段ドロップダウンメニュー（有償）
これだけ有料。というか作成ソフトを買ってくださいって言うことらしい。

目次にもどる

メニューCSSジェネレータ２

こちらは水平メニューオンリー。
CSS Menu Generator

デザイン選ぶだけ。カスタマイズも対応している優れもの。

目次にもどる

タブ作成ジェネレータ

Tabs Generator
タブの作成のみに特化したジェネレータ。向きも４方向選べる。グラデーションなども選べるようになってます。

目次にもどる

丸角CSSジェネレータ

Cornershop - Rounded Graphics for CSS Box Corners

このジェネレータの特徴は、CSSだけで角丸を実現することが目的ではありません。指定したコーナーサイズ【CornerRadius】で設定したコーナーサイズと、バックグラウンド、及び中の色を設定し、その色とサイズのgif画像を作る事が目的となります。
そのgif画像と下に現れるCSSをコピペして使う形になります。

目次にもどる



以上１０このCSSジェネレータでした。
なお、このエントリーは30+ Handy CSS Tools and Generatorsで紹介された３０のCSSジェネレータを全て実際に使ってみて『使いやすくわかり易いもの』のみをキュレートしてご紹介しています。
特にレイアウトジェネレータがいくつか紹介されており、そのなかで使い易い物だけを選んでいます。興味があり、英語もばっちりと言う人は活用してみてください。

それでは、また。