更新履歴
- 2022/05/11：「Blob Animation」を掲載しました
- 2022/03/28：「CSS Polka Dot Generator」を掲載しました
- 2022/03/25：「Regex Vis」を掲載しました
- 2022/01/31：「CSS Gradient Generator」を掲載しました
- 2022/01/31：「CSS2Sass」を掲載しました
- 2022/01/24：「Font-size Clamp Generator」を掲載しました
- 2022/01/13：「MESHER」を掲載しました
- 2021/12/22：「Meta Tags」を掲載しました
- 2021/12/22：「CSS Stripes Generator」を掲載しました
- 2021/12/22：「Glassmorphism Generator」を掲載しました
- 2021/12/22：「Neumorphism Generator」を掲載しました
- 2021/11/19：「Tree」を掲載しました
- 2021/10/01：「Smooth Shadow」を掲載しました
- 2021/08/30：ダミー画像作成サイトを「Placeholder.com」から「Placehold.jp」に変更しました
- 2021/04/03：「Glob tester」を掲載しました
- 2021/03/05：「アスペクト比計算ツール」を掲載しました
- 2021/02/26：「TRIANGLE GENERATOR」を掲載しました
- 2021/02/16：「HTML2Jade」を掲載しました
- 2021/02/15：「Compressor.io」を掲載しました
- 2021/02/15：「SVGOMG」を掲載しました
- 2021/02/15：「Excel To Json Converter」を掲載しました
- 2021/02/05：「Free Markdown to HTML Converter」を掲載しました
- 2021/02/05：「Markdown to PugJS」を掲載しました
- 2021/01/28：「Table Convert Online」を掲載しました
- 2021/01/22：「Web App Manifest Generator」を掲載しました
- 2021/01/19：「Print1」を掲載しました
HTML
HTML2Jade
HTML と Pug の相互変換ができてとっても便利です。
CSS
Font-size Clamp Generator
CSSのclamp関数を作成できます。
指定した最小幅から最大幅の間の推奨値を計算してくれるのでとっても便利です。
Blob Animation
動く流体シェイプがとっても簡単に作れます。
CSS Polka Dot Generator
ポルカドットの大きさ、数を自由に変更できるパターン柄が作れます。
CSS Stripes Generator
ストライプの角度、色、数を自由に変更できて便利です。
Glassmorphism Generator
グラスモーフィズムエフェクトを作成できます。
Neumorphism Generator
ニューモーフィズムエフェクトを作成できます。
Smooth Shadow
複数のシャドウを重ねて現実の影のようなシャドウを作成できます。
TRIANGLE GENERATOR
CSSのborderプロパティを利用した三角形を作るサイトです。
CSS Gradient
CSSグラデーションのジェネレーターサイトはたくさん利用してみましたが、このサイトのUIが一番使いやすかったので利用しています。
CSS Gradient Generator
グラデーションの中央がグレーに濁らないHSLモードでグラデーションを作成できます。
MESHER
複雑なメッシュグラデーションのCSSを簡単に作成できます。
Sass Color Generator
Sassの色を調整する関数はCSS変数を扱えないので、CSS変数で管理している色をルールに基づき調整したい時に使っています。
CSS clip-path maker
CSSの clip-path は表示を見ながらじゃないと設定値がわからないのでとっても便利です。
Layoutit Grid
CSS Grid Layout はコードだけだとレイアウトがイメージしにくいので、直感的で便利です。
Autoprefixer CSS online
ベンダープレフィックスを自動で付与する環境がない時に利用しています。
Sass
CSS2Sass
CSSをSassに変換してくれます。
SassMeister
Sassのコンパイル結果が確認できます。
mixinやループ処理が正常に動作しているか確認する時に利用しています。
Javascript
You might not need jQuery
jQueryの記述をネイティブなJavaScript（Vanilla JS）へと変換してくれます。
正規表現チェッカー
もっと高機能なものがありますが使いこなせなかったのでこちらを利用しています。
Regex Vis
正規表現ロジックを可視化しながら確認できてわかりやすい。
Markdown
Free Markdown to HTML Converter
マークダウンを HTML に変換してくれます。
Markdown to PugJS
マークダウンを Pug に変換してくれます。
画像
Compressor.io
画像の圧縮ができます。
対応してる拡張子が jpg, png, gif, svg, webp と何でもコイの頼もしいやつ。
可逆圧縮、非可逆圧縮も選べます。
SVGOMG
SVG画像のファイルから不要なデータを取り除き、ファイルサイズを削減します。
実際のSVGファイルの変化を確認しながら取り除くデータを細かく設定できます。
Patternify
ちょっとしたパターンを Base64 に変換してくれます。
わざわざパターン画像を作らなくてすむのでとっても便利です。
patternico
シームレスなパターン画像がつくれます。
Placehold.jp
ダミー画像を提供してくれているサイト。
CMSのテンプレート作成時、登録画像が表示される部分に利用しています。
画像内の文字や色も簡単に変更できて便利です。
フォント
Google Fonts
いつの間にか日本語フォントが増えています！
Fontello
アイコンフォントの作成において以下の点が便利です！
- 独自アイコンの追加が可能
- 登録したアイコンの一覧が確認できるhtmlファイルが作成される
- 登録したアイコン情報がjsonファイルとして作成され、後からでもフォントの追加が可能
アイコン
Faviconジェネレーター
マルチアイコンに対応したFaviconを作成してくれます。
マルチアイコンのサイズが多いので使ってます。
Favicon Generator for perfect icons on all browsers
様々なデバイスに対応したアイコンを作成してくれます。
その他
Meta Tags
Google、Facebook、Twitterでのメタタグの見え方を確認できます。
Tree
ディレクトリ構造を簡単にテキストで表現してくれます。
ドキュメント作成時に便利！
Glob tester
gulp のパスの指定で利用するglobパターン。
今までタスクを実行してパスが合っているか確認していましたが、事前にチェックできてとっても便利！
アスペクト比計算ツール
動画のレスポンシブ対応でよく利用するアスペクト比ですが、CMSの投稿画像や任意のオブジェクトのレスポンシブ対応時にサクッと計算できて便利です！
Excel To Json Converter
Excelファイルのデータを JSON に変換できます。
このツールは Beautify Tools というサイトに掲載されているツールの1つになります。
他にもめちゃくちゃたくさんのツールが掲載されています！！
Table Convert Online
表組みを様々な形式に変換できます。
Web App Manifest Generator
manifest.json のジェネレーターサイトは色々ありましたが、設定項目が多かったので利用しています。
Print1
長ーいページでも1枚の紙に収めて印刷できます。
sitemap.xml Editor
最大1000URLまでのXMLサイトマップを作成してくれます。
除外ディレクトリも指定できるので便利です。
ベーシック認証用 .htacess 作成ツール
ベーシック認証に必要な .htaccess と .htpasswd の記述内容を作成してくれます。
9文字以上のパスワードに対しては、アルゴリズムをMD5にする必要があるのをここで知りました。
