カメレオンデイズ

読者です 読者をやめる 読者になる 読者になる

カメレオンデイズ

7色の顔を持つdoubleMの「非」日常✦ 今日は何して遊ぼっか?

【ブックマーク推奨】全力で手を抜くために!便利なCSSジェネレータ集めました

デザイン ツール

f:id:doubleM:20151209160019p:plain
愚直にやるのは大事なとこだけ。それ以外はぜーんぶ自動化できればいいのに!と常々思っているdoubleMです。今日は、そんな私がコーディングでズルをするために日頃よくお世話になっているジェネレータ系サイトをまとめてみました。


手軽にナビゲーションメニューが作れる!CSSメニュージェネレータ

f:id:doubleM:20151209145815p:plain
CSS MenuMaker | HTML, CSS, & jQuery Menus
イチから書こうとすると、ちょっぴり面倒くさいグローバルナビゲーションメニューのcss。基本的なコードをサクッと手に入れて、あとは自由にカスタマイズしたいという人は無料の範囲でも十分使えます!すでに出来上がった美しいコードが欲しい!という方は有料のものから取得してみてくださいな。

手軽にCSSグラデーションが作れる!ブレンド

[http://colinkeany.com/blend/f:id:doubleM:20151209160143p:plain
「FLAT UI」カラーや「マテリアル」カラーをベースに、ベンダープレフィックス付きのcssコードを生成してくれます。

手軽に角丸が設定できる!ボーダーラディウスドットコム

f:id:doubleM:20151209151532p:plain
CSS Border Radius Generator
とってもピンポイント。4隅の角丸に指定した数値をcssコードを生成してくれるジェネレータ。
ベンダープレフィックスもまとめて記述してくれるのが楽ちんですね。

手軽に凝ったストライプ(斜線)デザインが作れる!ストレイプジェネレータ

f:id:doubleM:20151209150614p:plain
http://patternizer.com/
背景ストライプにいたっては、これがあればphotoshopが必要ないレベル。線の太さや色だけでなく、角度や透過度も調節出来るところがいいですね。cssコードを生成してくれます。

合わせてこちらもどうぞ。
f:id:doubleM:20151209145911p:plain
Stripe Generator - ajax diagonal stripes background designer
こちらは見た目がちょっぴり前時代的ですが、現状ダントツで使いやすいのがこのサイト。数値管理でお手軽にストライプ画像が生成できるツールです。

CSS3のコードを自動で色々生成してくれる!css3ジェネレータ

f:id:doubleM:20151209151839p:plain
CSS3 Generator
CSS3の書き方がわからなくなってしまった時、そもそも覚える気が無いときに役立つジェネレータ。

CSSで作れる吹き出しジェネレータ、CSSアロープリーズ

f:id:doubleM:20151209152927p:plain
cssarrowplease
ゼロから書こうとすると思いのほか文字数の多い吹き出し用CSS。細かい調整はできないので、基本のコードを取得して、微調整を行うのが良いかもしれません。

フラット時代にも人気のCSSリボンが作れる!リボンビルダー

f:id:doubleM:20151209153810p:plain
Live Tools - Ribbon Builder
widthを直感的に変えられて、スティッチの有り無しやシャドウの有り無しまで選択できる、至れり尽くせりなジェネレータ!

まとめ

毎度ながら、こんなに便利なツールを提供してくださっているクリエイターの方々、ありがとうございます。

「労働」から逃れるコツは、「自分でなくても出来る作業」を自動化すること!
役に立つツールばかりなので、みなさまもぜひブックマークの上、ご活用下さいな。