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

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

Stitches

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

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

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


  • ワールドカップのユニフォームのパターンをまとめた「World Cup in Pattern」
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • デザインの最新トレンドをチェックできるサービス「Panda」
  • サイトで使用していないCSSセレクタを調べられる「Unused CSS」
  • データの視覚化(グラフ・表)をまとめたサイト「Data Viz Project」
RELATED POSTS
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • 魅力的なチルトホバーエフェクトを実装できる「Tilt Hover Effects」
  • クオリティの高いグラフを描画するjsライブラリ「Chart.js」
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」