デザインや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タグがサイトやブログにきちんと適用されているかテストします。

top of page

©2017 coliss