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

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

Stitches

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

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

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



RELATED POSTS
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • 直感的に操作できるサイトツアーを実装できるライブラリまとめ
  • 【jQuery】画像のドミナントカラーを背景色にする「jquery.adaptive-backgrounds.js」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
  • 【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
PICKUP
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • 長いURLを短くする短縮URLサービス8選
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
RECENT POSTS
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • アイソメトリックなイラストを作成できるオンラインツール「Explore Isobuild」
  • Googleのプログラミング学習ツール「Grasshopper」にデスクトップ版がリリース
TAG LIST
  • Webサービス

    84

  • CSS

    58

  • jQuery

    34

  • 素材

    30

  • エフェクト

    29

  • ジェネレーター

    25

  • JavaScript

    23