1. まとめトップ

CSSジェネレーターツール50種類超【無料】

Webデザイン制作に役立つCSSジェネレーターツール、ソースコードをコピペするだけなので、簡単に作れます。テキスト|見出し|グラデーション|ナビゲーション|タブメニュー|ボタン|ボックスシャドウ|テキストシャドウ|スイッチ|アニメーションCSS|コード整形|ツールチップ|オンラインエディタ

更新日: 2015年06月07日

6 お気に入り 16358 view
お気に入り追加

この記事は私がまとめました

nemusumeさん

cssコードのジェネレーターツールの紹介です。デザインを確認しながらコードを発行できます。
同じ項目の中で、複数あるジェネレーターは、個人的に使いやすい順に並べています。

CSSジェネレーター一覧。|目次

テキスト|見出し|グラデーション|ナビゲーション|
タブメニュー|ボタン|ボックスシャドウ|テキストシャドウ|
スイッチ|アニメーションCSS|コード整形|ツールチップ|オンラインエディタ

無料で作成できる
CSSジェネレーターツールです

ソースコードを取得してコピペするだけ

テキストツール

CSS Type Set
http://csstypeset.com/

フォントに関するCSSが設定できる。

http://www.cssportal.com/css-font-preview/

#demo {
font-family: verdana, sans-serif;
font-size: 12px;
color: #000000;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-align: left;
letter-spacing: 0px;
line-height: 20px;
}
フォントに関するCSSを設定&表示確認できます。

見出し

CSS見出し-ジェネレーター | WEB道

吹き出し はみ出しの見出しを作成してくれるジェネレーターツールです。

http://web-dou.com/tool/css_gen_h.php

cssarrowplease
http://cssarrowplease.com/

上下左右好きな方向に吹き出しの矢印を設定できる。

ボーダースタイルの好きな色が作れる見出しメーカー
http://midashi-maker.v-colors.com/

リボンツール
http://livetools.uiparade.com/ribbon-builder.html

CSSでリボンのデザインを作れるツールです。
自由自在に大きさや形を変更できます。

ボックスの飾り

http://www.cssportal.com/css-ribbon-generator/

ボックスの右上にリボンをつけた文字を
CSSで作成できます。

グラデーション

CSS3 グラデーション

http://gradients.glrzad.com/

グラデーションをパレットを見ながら追加出来る
ジェネレーター。

Ultimate CSS Gradient Generator - ColorZilla.com

http://www.colorzilla.com/gradient-editor/

すでに出来上がってるグラデーションを選んで、少しカスタマイズする事も可能。

http://css3pie.com/

グラデーションを上から下に2色設定できる、
シンプルなジェネレーター。

ナビゲーションメニュー

ナビゲーションメニューは、どのサイトもお勧め。
背景は画像で構成されているタイプ、CSSのみ、ドロップメニュー、
など種類が豊富、用途に合わせて選べます。

css menu maker
http://cssmenumaker.com/
オンラインで編集しなければ無料。好きなタイプのメニューを選んでダウンロードするタイプ。

html/css/jsファイルがついてくる。
幅を縮めるとスマホ用のメニューになる。

http://onlinehtmltools.com/menu-generator/

背景はCSSでカラーリングされている、
ソースコードコピペタイプ

検索フォームを入れるとjqueryのコードが
付いてくる。いらなければはずす。

http://www.cssportal.com/css-menu-generator/

背景は画像になっていて
ダウンロードするタイプです。

横メニュー
http://www.dynamicdrive.com/style/csslibrary/category/C1/
縦メニュー
http://www.dynamicdrive.com/style/csslibrary/category/C2/
凄くかっこいいメニューが揃っている。
ソースコードコピペタイプ

タブメニュー

http://onlinehtmltools.com/tab-generator/

タブメニューのジェネレーターです。
シンプルだけどとても綺麗なタブツール。
HTMLとCSSを出力します。コピペで利用。

box-shadow

http://www.bad-company.jp/demos/box-shadow/

box-shadow+ボーダースタイル+border-radius+色の設定/透明度。ボックスシャドウに必要な設定が一度に出来る

http://www.themeshock.com/css-drop-shadow/

after要素とbefore要素を設定できるので
立体的に出来る。

1 2 3