あなたのWeb制作をサポートしてくれるオンラインツール10選
Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。
CSS 3D Transform Examples
CSS 3D Transform ExamplesCSSのみで表現する3Dデザイン用のコードを取得できるツール。transformを使ってどのように立体的に表現できるか確認することができます。hoverでアニメーションや、div一つで擬似要素を駆使したコーディングは応用できるので、コーディングの勉強にもなります。ぜひともおさえておきたいツールです。
Draggable Blend Generator
Draggable Blend GeneratorCSSのmix-blend-modeの表示確認ができるツール。IEには非対応なのですが来年6月にサポート対象外になるアナウンスが出たので、このプロパティの使い方を見出しておくといいと思います。
Blobs
Blobs丸みのあるかたちのsvg形式の画像とHTMLタグで取得できるBlobs。色や背景パターン、塗りつぶしではなく背景画像を配置させることも可能です。
Wordmark
WordmarkPCにインストールしてあるフォントを一覧で確認することができるツール。利用していないフォントは何気に忘れがちで「こんなフォントあったんだ！」ということは少なくないはず。私も年に数回チェックするようにしています。
Frontend Toolkit
フロントエンド開発をサポートするツール。jpgやsvgといった画像の最適化、カラーコード変換、CSSやJSなどのコードフォーマットなどのツールを1ページにまとめてあります。作業ごとに別サイトを訪れていた方はありがたいサービス。
Griddy
GriddyCSSのgridレイアウトを視覚的に設定できるツール。grid-template-columnsとGrid Template Rows、column-gapなど細かい設定が可能です。gridレイアウトの勉強に使えるので、本番で使用する前に確認しておくといいかと思います。
Neumorphism.io
Neumorphism.ioニューモーフィズムをCSSで設定するためのツール。トレンドとしては昔ほどの盛り上がりはなかったように感じますが、デザインによっては面白い表現ができるので選択肢の一つとしてもっておくと幅が広がると思います。少ないコードで表現できるのは嬉しいですね。
Dashed Border Generator
Dashed Border Generatorさまざまなサイズの破線をCSSで表現するためのツール。borderでも線の太さや色を変えて表現できるのですが、backgroundだと点線の長さ、点線の感覚の長さ、点線の角度なども変更することができます。視覚的に設定できるのは嬉しいですね。
Haikei
Haikeiさまざまな背景画像を作成できるツール。波線、ドット、ポリゴン、星など15パターンあります。淡い色合いで作成すると使いやすいと思います。
The VS Code Theme Editor
The VS Code Theme EditorVisual Studio Code(VSCode)用のテーマカラーを自作できるツール。人によって見やすい背景色やテキストカラーはあると思いますので、好みのものがなければ自作するのはありかと。
他の人が作成したテーマを使うことができますし、それをベースにして好みに変えるという方法もできます。
