今回紹介する「Jetstrap」はTwitter BootstrapのUIをドラッグアンドドロップだけで、ブラウザ上で作成できるツールです。これからJetstrapの使い方をわかりやすく
解説していきます。
Twitter Bootstrapを利用するには、ある程度Webの知識を持っている人でないと難しい部分があります。
そこで今回登場するのがJetstrapです。
難しい説明抜きにドラッグアンドドロップでホイホイと今風のデザインができてしまいます。
ちょっとしたモックアップ等作るのであれば、これで充分ではないでしょうか。
Jetstrapは、アドビ社が提供するDreamweaverのように
サイトを作ることができるツールです。
早速使ってみましょう。
目次
1. Jetstrapにアクセス
上記URLにアクセスしたら、ログインをクリックし、
Twitterアカウント、Googleアカウント、GitHubアカウントのいずれかで
ログインしてください。
どのアカウントもお持ちでなければ、Sign upをクリックし、
新規でアカウントを作成してください。
2.プロジェクトを作成
ログインが完了すると、Jetstrapのエディタ画面が表示されます。
「＋」のアイコン部分をクリックすると、新規にプロジェクトを作成できます。
今回はプロジェクト名に「sample」と入力して進めていきます。
次にテンプレート画面を選択します。
今回は、Jumbotronを選択して進めます。
3.編集
編集画面が表示されたら、テキスト文字のところをダブルクリックしてみてください。
文字が編集できるようになります。ためしに「はじめてのJetstrap」と変更してみました。
4.実際のブラウザで表示される内容を確認
ある程度編集ができたら、画面赤い部分をTESTにスライドしてみてください。
実際のブラウザで表示された状態を確認することができます。
5.HTMLとして保存
編集が完了したら、保存をしましょう。
画面左側にあるダウンロードボタンをクリックすると、HTMLとして保存できます。
6.ダウンロードしたファイルをサーバーにアップすれば公開
ダウンロードしたファイルを契約しているサーバーにアップすれば
今風のサイトを短時間で公開することができます。
ぜひ、一度お試しください。
