Advertisement

Web制作で日常的に使える無料のCSSやHTML、JSウェブツール50種類以上を提供しているToolb.dev

 

なにかと面倒な作業をパネル上で直感的に行うことができ、リアルタイムでのプレビュー機能や作成したコードはそのままコピペも可能、Web制作でも活用機会の多いツールが揃います。

 

クレジット表記不要で、ユーザー登録をせず利用できるのも嬉しいポイントです。Web制作をサポートする便利ツールも一緒にチェックしてみてはいかがでしょう。

 

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSV

 

 

Web制作の面倒な作業が楽になるツール50個を揃えたToolb.dev

 

「これどうやるんだっけ?」いつも忘れがちなWeb制作の工程をサポートしてくれるToolb.devで利用できるツールは50を超え、現在ベータ版での提供となります。それぞれのツールはCSSツールHTMLツールJSツールテキストツール画像ツールFetchツールのカテゴリにそれぞれ分けられています。

 

 

今回は、その中でも特に気になったツールを各カテゴリからいくつかピックアップしています。どのような機能があるのか詳しくみていきましょう。

 

CSSツール

Gradient Generator

ウェブ制作でもよく利用するCSSグラデーションを作成するツール。お好みで色数を変更でき、グラデーションスタイルも自由に選ぶことが可能。すぐに使えるテンプレートも揃っており、タブを切り替えるとCSSコードをコピペできます。

 

 

 

Palette Generatorは、配色アイデアに困ったとときにアイデアになるカラーパレットを揃えた巨大ライブラリ。テンプレートから選んでもよし、Settingsよりお好みで色合いや彩度、色相などをカスタマイズしてもOK。作成した配色はCSS Variablesとして自動生成されコピペも可能です。

 

1-palette-geneartor

 

 

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制作でも利用する機会の多いツールがひとまとめに揃ったオールインワンなプロジェクト。最新オンラインツールなど自分の用途に応じたものをうまく活用してみましょう。

 

この記事では、Webデザイン制作で役立つ便利な最新オンラインツール41個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆる
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンド
この記事では、「新しいもの好き」のデザイナーが、日頃のデザイン制作で愛用している最新のお役立ちツール10個をご紹介します。 ウェブデザインからグラフィ