フロントエンドコーディング時によく利用するジェネレーターサイト

CSS

CSS Gradient

CSSグラデーションのジェネレーターサイトはたくさん利用してみましたが、このサイトのUIが一番使いやすかったので利用しています。

Sass Color Generator

Sassの色を調整する関数はCSS変数を扱えないので、CSS変数で管理している色をルールに基づき調整したい時に使っています。

CSS clip-path maker

CSSの clip-path は表示を見ながらじゃないと設定値がわからないのでとっても便利です。

Layoutit Grid

CSS Grid Layout はコードだけだとレイアウトがイメージしにくいので、直感的で便利です。

Autoprefixer CSS online

ベンダープレフィックスを自動で付与する環境がない時に利用しています。

Sass

SassMeister

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

Javascript

You might not need jQuery

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

正規表現チェッカー

もっと高機能なものがありますが使いこなせなかったのでこちらを利用しています。

画像

Patternify

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

patternico

シームレスなパターン画像がつくれます。

Placeholder.com

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

フォント

Google Fonts

いつの間にか日本語フォントが増えています！

Fontello

アイコンフォントの作成において以下の点が便利です！

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

アイコン

Faviconジェネレーター

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

Favicon Generator for perfect icons on all browsers

様々なデバイスに対応したアイコンを作成してくれます。

その他

sitemap.xml Editor

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

ベーシック認証用 .htacess 作成ツール

ベーシック認証に必要な .htaccess と .htpasswd の記述内容を作成してくれます。
9文字以上のパスワードに対しては、アルゴリズムをMD5にする必要があるのをここで知りました。

関連記事

• フロントエンドコーディング後によく利用するチェックサイト