パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」

 
パーツ・セクションを組み合わせるだけで簡単にHTMLを生成してくれるジェネレーター「Stitches」の紹介です。メインビジュアルからナビゲーション・プライス表まで一般的なWebサイトで多く見られるパーツをラッグするだけで簡単にWebサイトが作成できます。

Stitches

使い方は左側のWebサイトのパーツから好きなパーツを右側のエリアへドラッグしてレイアウトを決めるだけです。

最後にGenerate HTML with Functional CSSをクリックしてHTMLを保存します。↓生成したHTMLのキャプチャーです。

生成したHTMLはtailwind.cssを使用しているので、ある程度カスタマイズも柔軟にできる仕様となっているようです。以上、パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」の紹介でした。


  • 英語フォントの組み合わせをコレクションした「Fonts That People Actually Use」
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
  • ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
  • 2択のUIデザインから正しいデザインを選択していくゲーム「Can’t Unsee」
  • 有名な企業・サービスのロゴをダウンロードできる「Instant Logo Search」
RELATED POSTS
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • グラデーションのアニメーションを実装できる「Granim.js」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
  • 【jQuery】要素を3D回転させるプラグインTURNBOX.js
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」