フロントエンドコーディング時に便利なジェネレーターサイト（随時更新）

HTML と Pug の相互変換ができます。

フォントサイズ、スペース、角丸、影などのバリエーションを自動で作成し、CSS変数としてエクスポートできます。

最小幅から最大幅の間をレスポンシブにするclamp関数を作成できます。

スクロールバーのデザインを変更するCSSを、表示を確認しながら作成できます。

CSSの border プロパティを利用した三角形を作成できます。

CSSの clip-path プロパティをドラッグしながら作成できます。

さまざまなタイプの吹き出しを作成できます。

ポルカドットの大きさ、数を自由に変更できるパターン柄を作成できます。

ストライプの角度、色、数を自由に変更できるストライプ柄を作成できます。

CSSの filter プロパティを利用して、確認しながら画像加工できます。

CSSの mix-blend-mode と filter プロパティを確認しながら作成できます。

グラスモーフィズムエフェクトを作成できます。

ニューモーフィズムエフェクトを作成できます。

グラデーションを作成できます。

グラデーションの中央がグレーに濁らないHSLモードでグラデーションを作成できます。

複雑なメッシュグラデーションを作成できます。

複数のシャドウを重ねて、現実の影のようなシャドウを作成できます。

光源の位置や影の大きさを調整しながら、大中小のシャドウのセットを作成できます。

シャドウの重ねがけを確認しながら作成できます。

アニメーションのイージングを確認しながら作成できます。

CSS Grid Layout のCSSを確認しながら作成できます。

CSS Grid Layout のCSSを直感的に作成できます。
前述の「Layoutit Grid」より設定項目が少ないですが、その分シンプルで使いやすいです。

入力したCSSに必要なベンダープレフィックスを付与してくれます。

CSSをSassに変換してくれます。

Sassのコンパイル結果が確認できます。
mixinやループ処理が正常に動作しているか確認する時に利用しています。

jQueryの記述をネイティブなJavaScript（Vanilla JS）に変換してくれます。

正規表現を検証できます。

正規表現ロジックをカラフルでわかりやすく可視化してくれます。

正規表現ロジックを可視化しつつ、マッチするか検証できます。

マークダウンを HTML に変換してくれます。

マークダウンを Pug に変換してくれます。

画像の圧縮ができます。
対応してる拡張子が jpg, png, gif, svg, webp と何でもコイの頼もしいやつ。
可逆圧縮、非可逆圧縮も選べます。

SVG画像のファイルから不要なデータを取り除き、ファイルサイズを削減します。
実際のSVGファイルの変化を確認しながら取り除くデータを細かく設定できます。

ドットで作成したパターンを Base64 に変換してくれます。
わざわざパターン画像を作らなくてすむのでとっても便利です。

シームレスなパターン画像を作成できます。

ダミー画像を提供してくれているサイト。
CMSのテンプレート作成時、登録画像が表示される部分に利用しています。
画像内の文字や色も簡単に変更できて便利です。

1色のHEXカラーコードから、11段階のシェードパレットを生成してくれます。

「Web Content Accessibility Guidelines (WCAG)」に基づいた、最適な文字色と背景色の組み合わせを作成できます。

Googleが提供する無料のWebフォントサービス。

アイコンフォントを作成できます。
以下の点が便利です！

• 独自アイコンの追加が可能
• 登録したアイコンの一覧が確認できるhtmlファイルが作成される
• 登録したアイコン情報がjsonファイルとして作成され、後からでもフォントの追加が可能

マルチアイコンに対応したFaviconを作成できます。
マルチアイコンのサイズが多いので使ってます。

さまざまなデバイスに対応したアイコンを作成できます。

WEBの魚拓サイト。
リニューアル前のサイトを見たくなった時に助かります。

ディレクトリ構造をテキスト（ASCII文字）で表現してくれます。

globパターンの検証ができます。

アスペクト比の計算ができます。

ExcelファイルのデータをJSONに変換できます。

表組みをさまざまな形式に変換できます。

manifest.json を作成できます。

長ーいページでも1枚の紙に収めて印刷できます。

最大1000URLまでのXMLサイトマップを作成できます。
除外ディレクトリも指定できるので便利です。

ベーシック認証に必要な .htaccess と .htpasswd に記述するコードを作成できます。