Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev。
なにかと面倒な作業をパネル上で直感的に行うことができ、リアルタイムでのプレビュー機能や作成したコードはそのままコピペも可能、Web制作でも活用機会の多いツールが揃います。
クレジット表記不要で、ユーザー登録をせず利用できるのも嬉しいポイントです。Web制作をサポートする便利ツールも一緒にチェックしてみてはいかがでしょう。
Web制作の面倒な作業が楽になるツール50個を揃えたToolb.dev
「これどうやるんだっけ？」いつも忘れがちなWeb制作の工程をサポートしてくれるToolb.devで利用できるツールは50を超え、現在ベータ版での提供となります。それぞれのツールはCSSツール、HTMLツール、JSツール、テキストツール、画像ツール、Fetchツールのカテゴリにそれぞれ分けられています。
今回は、その中でも特に気になったツールを各カテゴリからいくつかピックアップしています。どのような機能があるのか詳しくみていきましょう。
CSSツール
ウェブ制作でもよく利用するCSSグラデーションを作成するツール。お好みで色数を変更でき、グラデーションスタイルも自由に選ぶことが可能。すぐに使えるテンプレートも揃っており、タブを切り替えるとCSSコードをコピペできます。
Palette Generatorは、配色アイデアに困ったとときにアイデアになるカラーパレットを揃えた巨大ライブラリ。テンプレートから選んでもよし、Settingsよりお好みで色合いや彩度、色相などをカスタマイズしてもOK。作成した配色はCSS Variablesとして自動生成されコピペも可能です。
Transform Generatorは、設定が面倒な要素の立体的な回転をつまみひとつで調整できる便利CSSツール。もちろんそのままCSSコードをコピペできます。
Triangle Generatorは、吹き出しデザインをCSSで再現、調整できるツールで、ダブルクリックで三角形の位置を変更したり、トガリ具合を変更できます。
Code Prettierは、ぐちゃぐちゃになったCSSコードを再整形してくれるお助けツール。
Grid Generatorは、CSS Gridプロパティを利用して自由自在なグリッドレイアウトをボタンクリックで作成できます。
HTMLツール
Button Generatorは、CSSボタンのフォントサイズやボーダー、box-shadow、ぼかしなどのCSSフィルタ機能など細かくカスタマイズできるツール。サンプル用テンプレートをカスタマイズすることで、作業時間の短縮にも。
HTML to JSONは、その名前どおり任意のHTMLファイルをJSONファイルに自動変換してくれるツール。
JSツール
ベンチマーク計測ができるBenchmarks。
JavaScriptを圧縮・軽量化(Minify)するCode Minifier。
テキストツール
あまり利用する機会はないかもしれませんが、文字列を逆リバース表示してくれるText Reversever。
URLリンクなどを入力すると瞬時にスマホなどで読み取り可能なQRコードに変換してくれるText Base64。
画像ツール
手元の画像をアップロードすると正方形またはサークル状に切り抜くことができるクロップツールImage Crop。
画像を文字のみで表現するアスキーアート自動生成ツールImage Ascii。
画像エフェクトとして人気の高いハーフトーン・エフェクトImage Polka、丸ドットのサイズや角度のカスタマイズも可能。
Fetchツール
アバター画像や名前、住所などさまざまなダミーデータを自動生成、表示できるPlaceholder Generator。
Web制作でも利用する機会の多いツールがひとまとめに揃ったオールインワンなプロジェクト。最新オンラインツールなど自分の用途に応じたものをうまく活用してみましょう。
