驚くほど簡単!コーディング作業不要で、まざまなHTMLページを積み木感覚で作成できる無料ツール -Stitches
Post on:2018年7月25日
ランディングページやポートフォリオなど、レスポンシブ対応のペライチ縦長ページをドラッグ&ドロップで驚くほど簡単に作成できてしまう無料オンラインツールを紹介します。
FlexboxベースのTailwind CSSが使用されており、ヘッダやフッタやコンテンツには、一般的に使用されているコンポーネントが揃っています。HTMLの作業は必要なく、自分用のHTMLファイルを短時間で作成できます。
![HTMLのテンプレートを作成中](http://coliss.com/wp-content/uploads-201803/2018072001.gif)
使い方は、簡単です。
登録やメールアドレス入力など、面倒なことは一切必要ありません。
まずは、サイトにアクセスします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018072202-01.png)
左のコンポーネント一覧から、ヒーローヘッダやフッタ、ナビゲーション、タブ、フォームなどをドラッグ&ドロップで、右のパネルに配置します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018072202-02.png)
ヒーローヘッダをドラッグ&ドロップ
CSSはtailwind.cssが使用されており、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめられています。
参考: 便利なのが登場!レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018072202-03.png)
レイアウトの完成!
上部の「Generate HTML」をクリックすると、HTMLファイルがダウンロードできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201803/2018072202-04.png)
作成したHTMLをブラウザで表示
sponsors