コーディングする時にあったり便利なジェネレーターをまとめてみました。
他にも何かいいジェネレーターをご存知の方、いらっしゃったら是非教えていただけると嬉しいです！
レイアウト
テーブルタグ
今となってはあまり使うことはないけど、テーブルタグを簡単に作成してくれるジェネレーター。
セルの結合とか分割が簡単にできるので、便利。
フレックスボックス
フレックスボックスのジェネレーター。
画面右側に実際のレイアウトが表示されるので、初学者の学習としても使えるかも。
フレックスボックスジェネレーター
グリッドレイアウト
IEのサポート終了に伴い、以前より使いやすくなったグリッドレイアウトのジェネレーター。
フレックスボックスと同様にこちらも学習目的での使用もおすすめ。
グリッドジェネレーター
clampジェネレーター
上限と下限を決めたら、あとはその間を可変サイズでよしなに対応してくれるclamp関数。
それを数値を入力するだけで自動的に吐き出してくれるジェネレーターです。
レスポンシブのサイトにめちゃくちゃ便利。
clampジェネレーター
デザイン
背景グラデーション
背景色が時間とともに変わるグラデーションのアニメーションのCSSが簡単に生成できるサイトです。
色も簡単に変更できるので、簡単におしゃれな雰囲気に。
CSS GRADIENT ANIMATOR
ニューモフィズム
一時期話題になったニューモフィズムデザインのジェネレーター。
使ってみたいけど、なかなか使う機会がない。
Neumorphism.io
box-shadowジェネレーター
ボタンとかカードのコンポーネントに使うbox-shadowジェネレーター。
影の方向や広がり具合を実際に見ながら作成できるのでおすすめ。
box-shadowジェネレーター
三角形CSSジェネレーター
吹き出しとかボタンのアイコンとかで地味に使う三角形を作成してくれるジェネレーター。
これも地味に便利。
三角形CSSジェネレーター
SVGアニメーションジェネレーター
文字を描いているようなアニメーションを実装できるSVGアニメーションが簡単に実装できるジェネレーター。
コードを吐き出してくれるので、コードとしても画像ファイルとしても扱えるのはいい。
SVGアニメーションジェネレーター
