Web制作にすごい役立つ！無料で使える便利なオンラインツールのまとめ -Tiny Helpers

CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。

無料で利用できるツールがまとめてあるので、非常に便利です。

Tiny Helpers

ツールはカテゴリごとに分けられており、その中からいくつか紹介します。

CSSのオンラインツール

CSS FlexboxやGridのレイアウトをはじめ、シャドウや角丸やclip-pathの生成、チートシートなどがあります。

HTMLのオンラインツール

HTMLからCSSを抽出ツール、Metaタグ生成、プレースホルダーの画像ジェネレーターなど。

JavaScriptのオンラインツール

配列メソッド、キーボードイベントのキーコードを取得、パーサーによって生成されたASTを調べるなど。

アニメーションのオンラインツール

アニメーションにcubic-bezierは欠かせませんね。コピペで使えるイージングなどもあります。

アクセシビリティのオンラインツール

コントラストのチェッカーが多く掲載されています。Color.reviewが一番お勧め。

カラーのオンラインツール

コントラストのチェッカーがかぶってますが、カラースキームジェネレーター、明るい色合いと暗い色合いを生成など、便利です。

HTTPのオンラインツール

URLリダイレクトチェーン、ステータスコード、レスポンスヘッダ、リダイレクトチェーンの確認など。

フォントのオンラインツール

Googleフォントの支援ツール、フォントサイズの計算ツールなど。

パフォーマンスのオンラインツール

レスポンシブ用にブレイクポイント作成、画像軽量化など。

SVGのオンラインツール

SVGアイコン、SVGパターンをはじめ、SVG軽量化など。