ホームページを作る人のネタ帳

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

CSSジェネレータ特集
ウェブ上には様々な便利ツールがあります。以前紹介した『CSS3.0Maker』もそうですが、わずか数秒で希望のCSSが出来上がればそれに越した事はないですよね。

今回はこうしたジェネレータを実際に使用した結果、使いやすくてわかりやすい物をまとめてみました。

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




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


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

まずはじめに、HTMLでコーディングしてしまいます。
その後、そのHTMLをコピーして貼り付けします。
Primer
貼り付けたら「PRIME IT」をクリック。
使われているID名、クラス名が一覧化する
使い方はとても簡単ですね。
目次にもどる



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


Spritebox - Create CSS from Sprite Images
classやidのバックグラウンドCSSを生成
こちらは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
CSSでグラデーションを作成
これまたアンビリーバボーな便利ツール。
左上でパターンを選んで右上でサイズを決定するだけでグラデーションを書き出してくれます。

デフォルトで用意されているパターンも豊富です。
パレットパターン
すばらしいサービスですね!
目次にもどる



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


CSS Layout Generator | CSS Creator
人の手作業をいかに省くかを考えられたジェネレータ。
必要とされるサイズやバックグラウンドの色を決めてコードを生成するだけ。
右カラム、左カラム、ヘッダー、フッター、それぞれの有無を決める事が出来る。
CSSレイアウトジェネレータ
このあたりは説明不要なほどです。というかある程度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ダイエットマシーン。
CSSダイエット
作成したコードを左側に貼り付け、右側の項目である程度の設定を行います。
コメントアウトを消されるとまずい場合はそのあたりの設定をしておくと良いかも。
各種設定
GoogleChromeで翻訳すれば英語が読めないそんなあなたにもばっちり読めます。
ちなみにネタ帳のCSSをこれで最大圧縮で絞ると「1行になりコメントもアウトされる」為、めっちゃ見ずらくなりますが、以下のようになります。
ダイエット効果
まぁ・・・ダイエットも程ほどにということで。
目次にもどる



メニューCSSジェネレータ


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

メニューCSSジェネレータ

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

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


水平メニューCSS
水平メニューのCSS


垂直メニューCSS
垂直メニューのCSS


多段ドロップダウンメニュー(有償)
これだけ有料。というか作成ソフトを買ってくださいって言うことらしい。
多段メニューCSS
目次にもどる



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


こちらは水平メニューオンリー。
CSS Menu Generator
CSSメニュージェネレータ
デザイン選ぶだけ。カスタマイズも対応している優れもの。
ダウンロード画面
目次にもどる



タブ作成ジェネレータ


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



丸角CSSジェネレータ


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



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

それでは、また。

@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 1

There are no comments yet.

rossy  

使われているclassやIDを抽出するサイト

PrimerCSSって精度悪くないですか?

個人的な使用感ですが、類似サービスを比較すると
http://lab.xms.pl/css-generator/  [細かい]
http://masareukey.com/idClass/  [普通]
http://primercss.com/index.php  [荒い]

こんな感じです。

自分的には細かく抽出したいので、一番上のを使ってます(@_@;)

2011/03/10 (Thu) 15:54

Leave a reply