741
Help us understand the problem. What are the problem?

posted at

updated at

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

更新履歴

HTML

HTML2Jade

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

html2jade.png

CSS

Font-size Clamp Generator

CSSのclamp関数を作成できます。
指定した最小幅から最大幅の間の推奨値を計算してくれるのでとっても便利です。

clamp.font-size.png

Blob Animation

動く流体シェイプがとっても簡単に作れます。

blobanimation.png

CSS Polka Dot Generator

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

polka.png

CSS Stripes Generator

ストライプの角度、色、数を自由に変更できて便利です。

stripesgenerator.png

Glassmorphism Generator

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

glassmorphism-generator.png

Neumorphism Generator

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

neumorphism-generator.png

Smooth Shadow

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

smooth-shadow.png

TRIANGLE GENERATOR

CSSのborderプロパティを利用した三角形を作るサイトです。

csstriangle.png

CSS Gradient

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

cssgradient.png

CSS Gradient Generator

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

gradient-generator.png

MESHER

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

mesher.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

CSS2Sass

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

css2sass.png

SassMeister

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

sassmeister.png

Javascript

You might not need jQuery

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

youmightnotneedjquery.png

正規表現チェッカー

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

regexp.png

Regex Vis

正規表現ロジックを可視化しながら確認できてわかりやすい。

regex-vis.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

Placehold.jp

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

placehold.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

その他

Meta Tags

Google、Facebook、Twitterでのメタタグの見え方を確認できます。

metatags.png

Tree

ディレクトリ構造を簡単にテキストで表現してくれます。
ドキュメント作成時に便利!

tree.png

Glob tester

gulp のパスの指定で利用するglobパターン。
今までタスクを実行してパスが合っているか確認していましたが、事前にチェックできてとっても便利!

globster.png

アスペクト比計算ツール

動画のレスポンシブ対応でよく利用するアスペクト比ですが、CMSの投稿画像や任意のオブジェクトのレスポンシブ対応時にサクッと計算できて便利です!

aspect_arc-one.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

関連記事

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
Sign upLogin
741
Help us understand the problem. What are the problem?