あなたのWeb制作をサポートしてくれるオンラインツール10選

Web制作をサポートしてくれるツールを10個紹介します。mix-blend-mode
やgrid
レイアウト、transform
などのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。
CSS 3D Transform Examples

CSSのみで表現する3Dデザイン用のコードを取得できるツール。transform
を使ってどのように立体的に表現できるか確認することができます。hoverでアニメーションや、div一つで擬似要素を駆使したコーディングは応用できるので、コーディングの勉強にもなります。ぜひともおさえておきたいツールです。
Draggable Blend Generator

CSSのmix-blend-mode
の表示確認ができるツール。IEには非対応なのですが来年6月にサポート対象外になるアナウンスが出たので、このプロパティの使い方を見出しておくといいと思います。
Blobs

丸みのあるかたちのsvg形式の画像とHTMLタグで取得できるBlobs。色や背景パターン、塗りつぶしではなく背景画像を配置させることも可能です。
Wordmark

PCにインストールしてあるフォントを一覧で確認することができるツール。利用していないフォントは何気に忘れがちで「こんなフォントあったんだ!」ということは少なくないはず。私も年に数回チェックするようにしています。
Frontend Toolkit

フロントエンド開発をサポートするツール。jpgやsvgといった画像の最適化、カラーコード変換、CSSやJSなどのコードフォーマットなどのツールを1ページにまとめてあります。作業ごとに別サイトを訪れていた方はありがたいサービス。
Griddy

CSSのgrid
レイアウトを視覚的に設定できるツール。grid-template-columns
とGrid Template Rows
、column-gap
など細かい設定が可能です。grid
レイアウトの勉強に使えるので、本番で使用する前に確認しておくといいかと思います。
Neumorphism.io

ニューモーフィズムをCSSで設定するためのツール。トレンドとしては昔ほどの盛り上がりはなかったように感じますが、デザインによっては面白い表現ができるので選択肢の一つとしてもっておくと幅が広がると思います。少ないコードで表現できるのは嬉しいですね。
Dashed Border Generator

さまざまなサイズの破線をCSSで表現するためのツール。border
でも線の太さや色を変えて表現できるのですが、background
だと点線の長さ、点線の感覚の長さ、点線の角度なども変更することができます。視覚的に設定できるのは嬉しいですね。
Haikei

さまざまな背景画像を作成できるツール。波線、ドット、ポリゴン、星など15パターンあります。淡い色合いで作成すると使いやすいと思います。
The VS Code Theme Editor

Visual Studio Code(VSCode)用のテーマカラーを自作できるツール。人によって見やすい背景色やテキストカラーはあると思いますので、好みのものがなければ自作するのはありかと。

他の人が作成したテーマを使うことができますし、それをベースにして好みに変えるという方法もできます。