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

  • 2011/03/10
  • このエントリーをはてなブックマークに追加

スポンサーリンク

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

今回はこうしたジェネレータを実際に使用した結果、使いやすくてわかりやすい物をまとめてみました。
IT/Web業界に強い転職サイトGreen

便利な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ジェネレータを全て実際に使ってみて『使いやすくわかり易いもの』のみをキュレートしてご紹介しています。
特にレイアウトジェネレータがいくつか紹介されており、そのなかで使い易い物だけを選んでいます。興味があり、英語もばっちりと言う人は活用してみてください。

それでは、また。



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

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| |

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html