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

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

Stitches

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

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

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



  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
  • 【CSS】フォントサイズの単位を相対比較できる「PXtoEM.com」
  • 指定したWebサイトが他国でどのように表示されるかチェックできる「GeoScreenshot」
  • 英語フォントの組み合わせをコレクションした「Fonts That People Actually Use」
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
RELATED POSTS
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
  • CSSで出力できるドット絵ジェネレーター「Pixel Art to CSS」
  • 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選