Help us understand the problem. What is going on with this article?

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

更新履歴

HTML

HTML2Jade

HTMLPug の相互変換ができてとっても便利です。

html2jade.png

CSS

CSS Gradient

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

cssgradient.png

Sass Color Generator

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

scg.png

CSS clip-path maker

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

clippy.png

Layoutit Grid

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

layoutit.png

Autoprefixer CSS online

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

autoprefixer.png

Sass

SassMeister

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

sassmeister.png

Javascript

You might not need jQuery

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

youmightnotneedjquery.png

正規表現チェッカー

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

regexp.png

Markdown

Free Markdown to HTML Converter

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

markdowntohtml.png

Markdown to PugJS

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

markdown-to-pug.png

画像

Compressor.io

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

compressor.png

SVGOMG

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

svgomg.png

Patternify

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

patternify.png

patternico

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

patternico.png

Placeholder.com

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

placeholder.png

フォント

Google Fonts

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

goole-fonts.png

Fontello

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

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

fontello.png

アイコン

Faviconジェネレーター

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

favicon-generator.png

Favicon Generator for perfect icons on all browsers

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

realfavicongenerator.png

その他

Excel To Json Converter

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

excel-to-json-converter.png

このツールは Beautify Tools というサイトに掲載されているツールの1つになります。
他にもめちゃくちゃたくさんのツールが掲載されています!!

beautifytools.png

Table Convert Online

表組みを様々な形式に変換できます。

tableconvert.png

Web App Manifest Generator

manifest.json のジェネレーターサイトは色々ありましたが、設定項目が多かったので利用しています。

appmanifest.png

Print1

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

print1.png

sitemap.xml Editor

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

sitemapxml.png

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

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

basic-auth.png

関連記事

taqumo
東京でフロントエンドエンジニアやってます。 ラーメン大好きっ子です!
https://taqumo.me/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away