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軽量化など。

sponsors

top of page

©2021 coliss