【随時更新】コーディングする時に役に立つHTML・CSS ジェネレーターまとめ

  • URLをコピーしました!

コーディングする時にあったり便利なジェネレーターをまとめてみました。

他にも何かいいジェネレーターをご存知の方、いらっしゃったら是非教えていただけると嬉しいです!

目次

レイアウト

テーブルタグ

今となってはあまり使うことはないけど、テーブルタグを簡単に作成してくれるジェネレーター。

セルの結合とか分割が簡単にできるので、便利。

フレックスボックス

フレックスボックスのジェネレーター。

画面右側に実際のレイアウトが表示されるので、初学者の学習としても使えるかも。

フレックスボックスジェネレーター

グリッドレイアウト

IEのサポート終了に伴い、以前より使いやすくなったグリッドレイアウトのジェネレーター。

フレックスボックスと同様にこちらも学習目的での使用もおすすめ。

グリッドジェネレーター

clampジェネレーター

上限と下限を決めたら、あとはその間を可変サイズでよしなに対応してくれるclamp関数。

それを数値を入力するだけで自動的に吐き出してくれるジェネレーターです。

レスポンシブのサイトにめちゃくちゃ便利。

clampジェネレーター

デザイン

背景グラデーション

背景色が時間とともに変わるグラデーションのアニメーションのCSSが簡単に生成できるサイトです。

色も簡単に変更できるので、簡単におしゃれな雰囲気に。

CSS GRADIENT ANIMATOR

ニューモフィズム

一時期話題になったニューモフィズムデザインのジェネレーター。

使ってみたいけど、なかなか使う機会がない。

Neumorphism.io

box-shadowジェネレーター

ボタンとかカードのコンポーネントに使うbox-shadowジェネレーター。

影の方向や広がり具合を実際に見ながら作成できるのでおすすめ。

box-shadowジェネレーター

三角形CSSジェネレーター

吹き出しとかボタンのアイコンとかで地味に使う三角形を作成してくれるジェネレーター。

これも地味に便利。

三角形CSSジェネレーター

SVGアニメーションジェネレーター

文字を描いているようなアニメーションを実装できるSVGアニメーションが簡単に実装できるジェネレーター。

コードを吐き出してくれるので、コードとしても画像ファイルとしても扱えるのはいい。

SVGアニメーションジェネレーター

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

神奈川生まれ沖縄育ちの88年生まれ。WEB制作3年目。
31歳まで舞台俳優を目指して活動していましたが、将来が不安になり未経験からWEB制作業界へ。
現在はWEB制作会社で働いています。たまに演劇経験を活かしてイベントスタッフも。

目次
閉じる