驚くほど簡単!コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches

ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで驚くほど簡単に作成できてしまう無料オンラインツールを紹介します。

FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには、一般的に使用されているコンポーネントが揃っています。HTMLの作業は必要なく、自分用のHTMLファイルを短時間で作成できます。

HTMLのテンプレートを作成中

Stitches
Stitches -GitHub

使い方は、簡単です。
登録やメールアドレス入力など、面倒なことは一切必要ありません。

まずは、サイトにアクセスします。

サイトのキャプチャ

Stitches

左のコンポーネント一覧から、ヒーローヘッダやフッタ、ナビゲーション、タブ、フォームなどをドラッグ&ドロップで、右のパネルに配置します。

サイトのキャプチャ

ヒーローヘッダをドラッグ&ドロップ

CSSはtailwind.cssが使用されており、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめられています。
参考: 便利なのが登場!レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS

サイトのキャプチャ

レイアウトの完成!

上部の「Generate HTML」をクリックすると、HTMLファイルがダウンロードできます。

サイトのキャプチャ

作成したHTMLをブラウザで表示

sponsors

top of page

©2018 coliss