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

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

手軽にナビゲーションメニューが作れる!

CSS MenuMaker | HTML, CSS, & jQuery Menus

http://cssmenumaker.com/

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

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

Blend|ブレンド

http://colinkeany.com/blend/

「FLAT UI」カラーや「マテリアル」カラーをベースに、ベンダープレフィックス付きのcssコードを生成してくれます。
グラデーションがトレンドになっている2018年。非常に役立ちそうですね♪

手軽に角丸が設定できる!

CSS Border Radius Generator

http://border-radius.com/

とってもピンポイント。4隅の角丸に指定した数値をcssコードを生成してくれるジェネレータ。

ベンダープレフィックスもまとめて記述してくれるのが楽ちんですね。

手軽に凝ったストライプ(斜線)デザインが作れる!

ストレイプジェネレータ

http://patternizer.com/

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

合わせてこちらもどうぞ。

Stripe Generator – ajax diagonal stripes background designer

http://www.stripegenerator.com/

こちらは見た目がちょっぴり前時代的ですが、現状ダントツで使いやすいのがこのサイト。数値管理でお手軽にストライプ画像が生成できるツールです。

CSS3のコードを自動で色々生成してくれる!

CSS3 Generator

http://css3generator.com/

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

CSSで作れる吹き出しジェネレータ!

cssarrowplease

http://cssarrowplease.com/

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

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

Live Tools – Ribbon Builder

http://livetools.uiparade.com/ribbon-builder.html

widthを直感的に変えられて、スティッチの有り無しやシャドウの有り無しまで選択できる、至れり尽くせりなジェネレータ!

まとめ

毎度ながら、こんなに便利なツールを提供してくださっているクリエイターの方々、ありがとうございます。
「労働」から逃れるコツは、「自分でなくても出来る作業」を自動化すること!

役に立つツールばかりなので、みなさまもぜひブックマークの上、ご活用下さいな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です