あなたのWeb制作をサポートしてくれるオンラインツール10選 | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

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)用のテーマカラーを自作できるツール。人によって見やすい背景色やテキストカラーはあると思いますので、好みのものがなければ自作するのはありかと。

Create VS Code Themes Easily — The VS Code Theme Editor

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