eye160812psd

Layout It !でBootstrapを体験しよう!

作成したレイアウトのダウンロウード方法

youtubeでは触れませんでしたが、画面左上の青色のバタン「Download」をクリックすると、画面で作成したレイアウトのソースがそのままダウンロードできます。

layoutit-screen-dl01

まずメアドを登録するか、snsのアカウントでの登録します。例ではGoogle+で登録してみます。

layoutit-screen-dl02

すると「Download」というHTMLのソースがインラインされた画面に切り変わります。ソースをそのままコピペしても良いですが「Download .zip」という青色のバタンをクリックするとPCにダウンロードできます。

layoutit-dl

ダウンロードしたファイルはこんな感じで、必要なcssとjs、webフォントのリンクがしっかり保たれた状態になっているので、そのままWebサーバにアップすればネット環境でアクセスできます。

即席使用レポート

layoutit-screen-dl03

あらかじめセットされているジャンボトロン(Botstrapにプリセットされている見出し用のパーツ)に日本語入力をしてみたところ。この下のサムネール部分も日本語入力できましたが、ナビゲーションやその他主要パーツは基本的に画面上では日本語入力できませんでした。あくまで、レイアウトをすることに特化させている模様です。

layoutit-screen-dl04

画面左メニューの「GRID SYSTEM」から8:4のグリッドを配置させ、同じくの「CONPONENTS」からグリッドの右側に「Media Object」、右側に「Panels」を配置させてみたところ。やはり日本語入力はできませんでした。

まとめ

ロゴを見ると「BETA」になっているので、まだ正式リリース前で、まだまだ改良するよ、ということなのでしょうが、この画面で作り込みをするのは、この先機能追加されても無理のようです。
あくまで「Layout It !」というサービス名が示す通り、グリッドと代表的なコンポーネントの配置をすることが目的で、作り込みはダウンロードしてゆっくりと、という使い方が正しいようです。

ただ、「Bootstrapって何?」「Bootstrapの基本機能を知る」「名称と具体的なコンポーネント等を一致させる」という目的で使用する分には、よいデモンストレーションになるのではないでしょうか。

Bootstrapについてもっと詳しく知りたい方は、「Bootstrap3基本コンポーネント集」をご覧ください。Bootstrapは非常に高性能なcssとjsのパーツ集と言えることができると思います。できることも、拡張性も非常に多岐に渡るので、いっぺんに覚えようとせず、1つ1つゆっくり理解していくとよいです。

Facebooktwittergoogle_plus

なるほど!と思ったら、すぐシェア♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

東京Webデザイナーズ交流会/10月のテーマ

WordPressで有料課金型会員制サイトを構築する方法

検索してもなかなか情報のない「会員制サイトを構築法」を解説します。