【ブックマーク推奨】全力で、手抜きしよう✦便利なCSSジェネレータ集めました

この記事の内容

めんどくさがり屋の遊び人クリエイターが手抜きをするために、日頃よくお世話になっているジェネレータ系サイトをまとめたよ♪

Kai

愚直にやるのは大事なとこだけ。それ以外は自動化したいね!

CSS MenuMaker | HTML, CSS, & jQuery Menus

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

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

サイトを見る

Blend|ブレンド

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

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

サイトを見る

CSS Border Radius Generator

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

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

サイトを見る

ストレイプジェネレータ

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

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

サイトを見る


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

数値管理でお手軽にストライプ画像が生成できる!

見た目がちょっぴり前時代的ですが、現状ダントツで使いやすいのがこのサイト。

サイトを見る

CSS3 Generator

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

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

サイトを見る

cssarrowplease

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

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

サイトを見る

Live Tools – Ribbon Builder

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

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

サイトを見る

おわりに

毎度ながら、こんなに便利なツールを提供してくださっているクリエイターの方々には頭があがりません!
役に立つツールばかりなので、みなさまもぜひブックマークの上、ご活用下さいな。

Kai

「労働」から逃れるコツは、「自分でなくても出来る作業」を自動化すること♪