Web制作でいつもお世話になっているBootstrap3。もう使い慣れすぎてこれ無しで作るのがめんどくさくなるほどでまさにBootstrap中毒と言えます。
そんなただでさえ便利なBootstrap3がさらに便利になるかもしれないWebツールがありました。それがこちら
LayoutIt
どんなツールかというと、ブラウザ上でドラッグ＆ドロップでグリッドやコンポーネントを配置してくれるというものです。
LayoutItで選択できるメニュー一覧
左のメニューからは以下のものが選択できます。
Grid System
デフォルトで以下の値がセットされていますが、自分で自由に設定することもできます。その際合計１２になるようにセットします（例えば、3 3 3 3など）。
- 12
- 6,6
- 8,4
- 4,4,4
- 2,6,4
Base CSS
- Title
- Paragraph
- Address
- Blockquote
- Unordered List
- Ordered List
- Description
- Table
- Form
- Horizontal Form
- Button
- Anchor Button
- Image
Conponents
- Button Group
- Button Dropdowns
- Navs
- Breadcrumb
- Pagination
- Label
- Badge
- Jumbotron
- Page Header
- Text
- Thumbnails
- Progress Bar
- Media Object
- List group
- Panels
Javascript
- Modal
- Navbar
- Tabs
- Alerts
- Collapse
- Carousel
LayoutItの使い方
では実際にこのWebツールを使ってBootstrap3のレイアウトを組んでみたいと思います。ドラッグ＆ドロップで簡単に作れるのでさくっと作ってみましょう。
まずはグリッドのセット
まずはグリッドの配置を行います。左のメニューからメイン画面にドラッグするだけ。
必要なコンポーネントをセット
その次はその中に必要なコンポーネントを配置していきます。コンポーネントはBootstrap3で用意されているモノと同じものを選択します。
このときただ配置するだけでなく、配置した後にスタイルの変更が可能です。
LayoutItで出来上がりをプレビュー
出来上がったら実際どんな見た目かを確認することができます。確認するには画面上部のプレビューを押すだけ。
完成したものをダウンロード
完成したらダウンロードしてみましょう。ダウンロードするには会員登録する必要があるので登録します。
zipファイルを解凍すると中身はこんな感じになってます。
ちなみに今回作ったのがこんな感じ。はじめてでも３分ほどでサクッとつくれます。
