Web制作にすごい役立つ!無料で使える便利なオンラインツールのまとめ -Tiny Helpers
Post on:2020年2月3日
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。
無料で利用できるツールがまとめてあるので、非常に便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-01.png)
ツールはカテゴリごとに分けられており、その中からいくつか紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-02.png)
CSS FlexboxやGridのレイアウトをはじめ、シャドウや角丸やclip-pathの生成、チートシートなどがあります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-03.png)
HTMLからCSSを抽出ツール、Metaタグ生成、プレースホルダーの画像ジェネレーターなど。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-04.png)
配列メソッド、キーボードイベントのキーコードを取得、パーサーによって生成されたASTを調べるなど。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-05.png)
アニメーションにcubic-bezierは欠かせませんね。コピペで使えるイージングなどもあります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-06.png)
コントラストのチェッカーが多く掲載されています。Color.reviewが一番お勧め。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-07.png)
コントラストのチェッカーがかぶってますが、カラースキームジェネレーター、明るい色合いと暗い色合いを生成など、便利です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-08.png)
URLリダイレクトチェーン、ステータスコード、レスポンスヘッダ、リダイレクトチェーンの確認など。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-09.png)
Googleフォントの支援ツール、フォントサイズの計算ツールなど。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-10.png)
レスポンシブ用にブレイクポイント作成、画像軽量化など。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202001/2020020201-11.png)
SVGアイコン、SVGパターンをはじめ、SVG軽量化など。
sponsors