これはスゴイぞ!Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin
Post on:2014年7月8日
HTMLやCSSの知識は不要! 積み木感覚でレイアウトを組み立てるだけで、簡単にBootstrapのページ作成ができてしまうウェブサービスを紹介します。
ほんの数分で、今時のかっこいいページが本当に簡単にできちゃいます!
![サイトのキャプチャ](/wp-content/uploads-201403/2014070802.png)
lollytinでつくってみた
ということで、所要時間1分ほどの成果物がこれ!
![ページのキャプチャ](/wp-content/uploads-201403/2014070805.png)
さくっと作ったデモページ
キャプチャは作成したページの半分しか見えていませんが、ヘッダ、ドロップダウンのナビゲーション、アニメーションのスライダー、スクロールエフェクトを備えたコンテンツ、フォーム、Google Mapsコンテンツ、フッタなどが配置されています。
lollytinの使い方
使い方は非常に簡単、HTML/CSSや英語の知識は必要ありません。
まずは、画面の説明から。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070803-01.png)
lollytinの基本画面
- パネル:左
- コンポーネント(キャプチャはヘッダのパターン)
- パネル:右
- ページのレイアウト
- アイコン:左
- コンポーネントのカテゴリ
- アイコン:右
- 作成したページの書き出し
では、右パネルのレイアウトを一旦削除して、使い方を説明します。
※削除方法は各コンポーネントの「×」をクリック。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070804-01.png)
まずは左のアイコンからカテゴリを選択します。
カテゴリは、ヘッダ、フッタ、コンテンツ、ギャラリー、フォーム、サイドバーなどがあり、左のパネルに各コンポーネントが表示されます。
※キャプチャはヘッダのコンポーネント
![サイトのキャプチャ](/wp-content/uploads-201403/2014070804-02.png)
次に、コンポーネントを右のパネルに配置していきます。
↑は、ヘッダ・コンテンツ・フッタを配置したもの。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070804-03.png)
配置変更はドラッグアンドドロップで簡単にできます。
↑は、サークルのコンテンツを上に移動したもの。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070804-04.png)
完成したら、右のアイコンから作成したページのファイルをダウンロードできます。
上:HTMLファイルのみ、下:Bootstrapのファイル全て
Bootstrapのファイルが揃ってる人はHTMLファイルのみ、無い人はファイル全てをダウンロードすると便利です。
sponsors