Bootstrapとは?

BootstrapはTwitter社がGithubで開発しているオープンソースのCSSフレームワーク。一定のルールに従った簡単なHTMLを記述することで、きれいなデザインのWebページを構築できるというものだ。手間をかけずに見栄えのよいWebページを作成できるため、デザインが不得手なエンジニアからの人気も高い。

図1 : BootstrapのWebサイト

今回はBootstrapと、Bootstrapを使用したWebページをWebブラウザ上でドラッグ&ドロップで作成できるJetstrapというサービスを紹介したい。

Bootstrapを使ってみよう

まずはBootstrapの基本的な使い方を見てみよう。Bootstrapの基本的な機能は、CSSをインポートするだけで利用できる。あとはBootstrapのルールに従ってマークアップを行えばよい。以下はBootstrapを使用した簡単な入力フォームのサンプルだ。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrapのサンプル</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Bootstrapのサンプル</h1>
      <form>
        <fieldset>
          <legend>コメント</legend>
          <div class="control-group">
            <label>お名前:</label>
            <div class="controls">
              <input type="text" placeholder="お名前をどうぞ">
            </div>
          </div>
          <div class="control-group">
            <label>メッセージ:</label>
            <div class="controls">
              <textarea rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">送信</button>
            <button type="reset" class="btn">リセット</button>
          </div>
        </fieldset>
      </form>
    </div>
  </body>
</html>

このHTMLをブラウザで表示すると、以下のように表示される。シンプルなHTMLがBootstrapによって洗練されたデザインの入力フォームに変換されているのがわかるだろう。

図2 : Bootstrapを使用したフォーム

Bootstrapにはこの他にもページのレイアウトのための機能や、タブやドロップダウンリスト、ダイアログなどJavaScriptを使用した高度なコンポーネントが用意されており、CSSフレームワークに留まらず、WebアプリケーションのGUI構築ツールキットとして活用することができる。BootstrapのWebサイトには様々なサンプルが用意されているので目を通してみるといいだろう。

JetstrapでBootstrapをさらに手軽に

このように非常に簡単に使うことのできるBootstrapだが、Jetstrapを使うと、さらに簡単にBootstrapを使用することができる。JetstrapはWebブラウザ上で動作し、ドラッグ&ドロップでBootstrapを使用したUIを作成できるサービスだ。

図3 : JetstrapのWebサイト

JetstrapはGoogle、Twitter、Githubのいずれかのアカウントで利用できる(ただし別途メールアドレスをJetstrapに登録する必要がある)。ログインすると、作成するページのレイアウトを選択するダイアログがまず表示される。

図4 : ページのレイアウトを選択

デザイン画面ではコンポーネントパレットから任意のコンポーネントをドラッグ&ドロップで配置することができ、作成したHTML/CSSはWebブラウザ上でソースを確認できるほか、ZIPファイルでダウンロードすることが可能だ。

図5 : HTMLソースの確認

また、画面上部のツールバーからは画面サイズを変更できるため、タブレットやスマートフォンなどの端末上で動作するWebブラウザでどのように表示されるかを簡単に確認することもできる。

図6 : 画面サイズを変更して表示

まとめ

本稿でも紹介したように、Bootstrapは簡単なマークアップで使用することができるが、それでも一定のHTMLの記述ルールを覚えなくてはならない。Jetstrapを使用することでBootstrapの記述ルールをマスターしていない開発者であっても手軽にBootstrapを使用したWebページを作成することができる。

Jetstrapはまだ荒削りな部分が多く、操作がこなれていなかったり、動作がやや不安定な部分がある。また、細かい調整を行うには結局HTMLを直接編集しなければならない。しかし、これで作成した雛形に手を入れて、実際のWebサイトを構築するといった使い方は充分に可能だろう。

BootstrapはCSSフレームワークとしてはもはや定番といっても差し支えない存在だが、今後はJetstrapのようにBootstrapの利用をサポートするツールの充実も期待したいところだ。