2017/08/22

【bootstrap ジェネレーター】無料・会員登録なし・ドラッグアンドドロップで直観的に作れるlayoutit!

bootstrapジェネレーター

いくつかのbootstrapジェネレーターサイトを使ってみて一番使いやすかったのがlayoutitです。大まかなレイアウトをジェネレーターで作ることができます。

bootstrapジェネレーターの利点

無料・会員登録なし

bootstrapが出始めて頃はジェネレーターサイトも多数ありましたが閉鎖、有料などに様変わりした感じです。

現在するジェネレーターサイトも多数ありますが会員登録が必要で面倒です。

こちらで紹介しているlayoutitは無料・会員登録なしで使いやすいです。

直観的に作れる

ページレイアウトの作り方は左側にあるdragボタンをマウスで遷移して配置することができます。また、作り始める前に3種類の基本レイアウトから作りはじめることもできます。

CSS

レイアウトを複数作成してダウンロード取得してもCSSはすべて共通です。

レイアウト毎にCSSが変わることはありません。

なので自分でCSSを変更してカスタマイズしたデザインをマージ(整合性)する必要がありません。

レスポンシブル

bootstrapなので当然ですがレスポンシブルです。

パソコン、タブレット、スマートフォンで共通に使いえます。

bootstrapジェネレーターの使い方

基本レイアウトの選択

サイトの下にスクロールすると3種類のレイアウトが現れます。好きな基本レイアウトを選択して下さい。基本レイアウトにあるコンテンツを削除(remove)することもできます。
layoutit1

ドラッグ アンド ドロップ

左側にあるコンテンツをドラッグ アンド ドロップしてコンテンツを作っていけます。実際にドラッグ アンド ドロップでコンテンツを追加してみて下さい。コンテンツタイトルから追加されるものはだいたいわかりますが、実際にドラッグ アンド ドロップすると追加されるコンテンツがわかります。

一からレイアウトを作成する場合にはGRID SYSTEMから追加して下さい。GRID SYSTEMで追加したコンテンツの中味をBASE SYSTEM、 COMPONENTSで追加していきます。
layoutit2

プレビュー、ダウンロード

ジェネレーターの上部にプレビューとダウンロードボタンがあります。

作成したレイアウトを確認したい場合にはプレビューボタンをクリック。

特に修正がなければ、ダウンロードボタンをクリックしてダウンロード。

layoutit3

最後に

大枠のレイアウトをlayoutitで作成してオリジナルデザインを追加することができます。

固定のbootstrapをダウンロードできるサイトも複数あるのでそちらを利用する手もありかも。

bootstrapは日本語FONTの設定にはなっていないのでcssのfont-familyに日本語FONTを指定するとより美しいサイトを作成することができます。外国産CSS(ワードプレステーマ、bootstrap)の日本語化は後日、記事で紹介させて頂きます。

(Visited 783 times, 2 visits today)