驚くほど簡単!コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches
Post on:2018年7月25日
ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで驚くほど簡単に作成できてしまう無料オンラインツールを紹介します。
FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには、一般的に使用されているコンポーネントが揃っています。HTMLの作業は必要なく、自分用のHTMLファイルを短時間で作成できます。

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

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

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

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

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