デザインやCSSやJavaScriptなど、ウェブ制作に役立つ時短ツールが豊富に揃っていて便利！ -Coveloping

box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。

FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。

Coveloping

便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。
これからもどんどん増えていくそうです。

その中から、いくつか紹介します。

Aspect Ratio Calculator
アスペクト比の計算ツール。黄金比や白銀比などの計算も簡単にできます。

Colour Shades Generator
一つのカラーを元に、ブラックとホワイトを加えたカラーを生成します。

Box Shadow Generator
box-shadowを使ってふわりと浮かんでいるようなエフェクトを生成します。

Border Radius Generator
4つのコーナーそれぞれに角丸を設定でき、ラインもソリッド・点線・二重線などを使ったボーダーのCSSを生成します。

CSS nth-child Tester
:nth-child()疑似クラスがどのように適用されるかテストできます。

CSS Shapes Generator
CSSでさまざまな図形を描きます。デフォルトでもたくさん用意されており、オリジナルも作成できます。

Pricing Tables
ホバー時にその箇所が拡大して表示される価格表のリストをデザインできます。

jQuery easing tester
jQueryのアニメーションのエフェクトをテストできます。

CSS Minifier
手元のスタイルシートから無駄なスペースや改行、コメントなどを削除し軽量化します。削除項目は全てオプションで選択できます。

JS Minifier
こちらはJavaScriptを軽量化します。

Google Maps Generator
Google Mapsを生成します。地図のデザインやマーカーの設置も簡単にできます。

Email Obscurer
スパムボットからメールアドレスを隠すため、ASCIIに変換します。

Open Graph Tag Tester
FacebookのOPGタグがサイトやブログにきちんと適用されているかテストします。