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

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

Stitches

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

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

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


  • CSSで指定できるカーソルをパッと確認できる「CSS Cursor」
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • 2択のUIデザインから正しいデザインを選択していくゲーム「Can’t Unsee」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
RELATED POSTS
  • CSSで作成する吹き出しとデザインのアイデア
  • アニメーションアイコンのライブラリ「60 Free Animated Icons」
  • CSSアニメーション制作に役立つライブラリ・ツール14選
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • CSSでインスタグラムのようなフィルターを再現できる「Instagram.css」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 画像の人物を自動で切り抜きしてくれるWebサービス「remove.bg」
RECENT POSTS
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」