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