これはスゴイぞ!Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin

HTMLやCSSの知識は不要! 積み木感覚でレイアウトを組み立てるだけで、簡単にBootstrapのページ作成ができてしまうウェブサービスを紹介します。

ほんの数分で、今時のかっこいいページが本当に簡単にできちゃいます!

サイトのキャプチャ

lollytin

lollytinでつくってみた

ということで、所要時間1分ほどの成果物がこれ!

ページのキャプチャ

さくっと作ったデモページ

キャプチャは作成したページの半分しか見えていませんが、ヘッダ、ドロップダウンのナビゲーション、アニメーションのスライダー、スクロールエフェクトを備えたコンテンツ、フォーム、Google Mapsコンテンツ、フッタなどが配置されています。

lollytinの使い方

使い方は非常に簡単、HTML/CSSや英語の知識は必要ありません。
まずは、画面の説明から。

サイトのキャプチャ

lollytinの基本画面

パネル:左
コンポーネント(キャプチャはヘッダのパターン)
パネル:右
ページのレイアウト
アイコン:左
コンポーネントのカテゴリ
アイコン:右
作成したページの書き出し

では、右パネルのレイアウトを一旦削除して、使い方を説明します。
※削除方法は各コンポーネントの「×」をクリック。

サイトのキャプチャ

まずは左のアイコンからカテゴリを選択します。
カテゴリは、ヘッダ、フッタ、コンテンツ、ギャラリー、フォーム、サイドバーなどがあり、左のパネルに各コンポーネントが表示されます。
※キャプチャはヘッダのコンポーネント

サイトのキャプチャ

次に、コンポーネントを右のパネルに配置していきます。
↑は、ヘッダ・コンテンツ・フッタを配置したもの。

サイトのキャプチャ

配置変更はドラッグアンドドロップで簡単にできます。
↑は、サークルのコンテンツを上に移動したもの。

サイトのキャプチャ

完成したら、右のアイコンから作成したページのファイルをダウンロードできます。
上:HTMLファイルのみ、下:Bootstrapのファイル全て

Bootstrapのファイルが揃ってる人はHTMLファイルのみ、無い人はファイル全てをダウンロードすると便利です。

sponsors

top of page

©2024 coliss