2012年4月2日

超便利！Twitter BootstrapでさくさくWeb開発

新年度です！
新入学、新入社を迎えるみなさん、おめでとうございます。

エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？
カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。
ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！

Twitter Bootstrapとはなにか

Twitter Bootstrap
CSSのフレームワークです。
Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。
今回ご説明しているのは、Twitter Bootstrap 2についてです。

サイトにTwitter Bootstrapを導入しよう！

一番簡単な導入方法は、CSSをダウンロードして設置するだけです！
公式サイトのデカ白ボタン「Download Bootstrap」をクリックし、zipファイルをダウンロードしましょう。
解凍してできたcss、img、jsのディレクトリごと設置します。


<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

bootstrap.jsは、BootstrapのJavascriptプラグインを含んでいるjsファイルです。
プラグインを読み込むと、モーダルウィンドウやドロップダウン、タブといった動きのあるコンポーネントを簡単に表現することができます。
jqueryに依存しているので、jquery→bootstrap.jsの順で読み込みましょう。
bootstrap.jsのように、すべてのコンポーネントをまとめたものではなく、個別のコンポーネントで良い！という場合は、
一覧ページ（http://twitter.github.com/bootstrap/javascript.html）から好きなコンポーネントのjsファイルをダウンロードしてください。

レイアウト

Twitter Bootstrapが提供しているレイアウトは、大きくわけて二つです。
固定幅レイアウト：940pxからなる固定幅レイアウトです。
流動幅レイアウト：画面のサイズに併せて流動的なサイズになるレイアウトです。

これらをコンテナと呼びましょう。
コンテナの中に、ボックスを置くようにコンテンツを置きたい場合があります。そこで使うのがgridです。
グリッドは横幅を12個に分割しており、span1〜span12で表します。

上記の例だと、span4とspan8、4:8のグリッド領域がわかると思います。
Hello, world!のグリッド領域がspan12なので、どのように分かれているかわかりやすいですね。

それぞれのレイアウトでグリッドを使うと、下記のようになります。
・固定幅レイアウト


<div class="container">
  <div class="row">
    <div class="span4">
      Span4の中身
    </div>
    <div class="span8">
      Span8の中身
    </div>
  </div>
</div>

・流動幅レイアウト


<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      Span4の中身
    </div>
    <div class="span8">
      Span8の中身
    </div>
  </div>
</div>

Preタグで囲むコード

エンジニアの皆さんなら、ブログにコードを書きたいですよね。
Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。

・codeタグで囲む
赤くなります。
・preタグで囲む
囲み枠がつき、灰色になります。
・Preタグ+Google Prettifyを使う
preタグのclassに、prettyprint linenums を入れましょう。
これが超かっこいい！！コードを見せるならこれがよさそうですね！

さて、かっこいいGoogle Prettifyですが、こちら、ちょっと頑張らないとかっこ良くならないようです。
ここからGoogle Code Prettifyのjsファイルをダウンロードします。
http://code.google.com/p/google-code-prettify/
そして、このCSSを保存し、JSと共に読み込んで下さい。


.com {
      color: #93A1A1;
}
.lit {
      color: #195F91;
}
.pun, .opn, .clo {
      color: #93A1A1;
}
.fun {
      color: #DC322F;
}
.str, .atv {
      color: #DD1144;
}
.kwd, .linenums .tag {
      color: #1E347B;
}
.typ, .atn, .dec, .var {
      color: teal;
}
.pln {
      color: #48484C;
}
.prettyprint {
      background-color: #F7F7F9;
      border: 1px solid #E1E1E8;
      padding: 8px;
}
.prettyprint.linenums {
      box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
      margin: 0 0 0 33px;
}
ol.linenums li {
  color: #BEBEC5;
  line-height: 18px;
  padding-left: 12px;
  text-shadow: 0 1px 0 #FFFFFF;
}

どうやら、Google Codeのバージョンが上がったか何かで、Twitter Bootstrapの思う通りに表示されないようです。
（上記のCSSは、Twitter Bootstrapの公式サイトがローカルから読み込んでいるものと同じ内容です。）

テーブル

クラスを付けない状態だと罫線が表示されませんが、クラスをつけることによって、5種類のスタイルを利用できます。
1: table
行ごとに下線が引かれます。
2: table table-striped
行ごとに下線が引かれたうえに、偶数行に背景色がつきます。
3: table table-bordered
テーブルのセルに全て線が入ります。テーブル自体は角丸になります。
4: table table-condensed
tableよりも、無駄な余白が少なくなります。
5: table table-striped table-bordered table-condensed
上記の全部入り！

フォーム

フォームはさまざまなプロパティがあるので、ここで説明するよりも公式サイトを見たほうが早いかと思います。
spanでinputタグの幅を指定できたり、フォーカスが当たると青い影がついたり、とても便利です。

ボタン、ラベル

inputタグとaタグは、btnというクラスを付加するだけで簡単にきれいなボタンになります。
画像を使わずにこのボタンが表現できるのは嬉しいですね！
大きさも3種類、色も場面によって使い分けられます。
ラベルはボタンクラスの「btn」を「label」と読み替えるだけで作成できます。親戚のようなかんじです。

アイコン

iタグにアイコン名を指定するだけで、かわいいアイコンを全部使うことができます！
解答したbootstrapの画像ディレクトリに、2つの画像が入っていたと思います。これは、黒いアイコンの画像集と白抜きアイコンの画像集です。
これらのアイコンは、ボタンなどと組み合わせて使うことができます。
背景が暗めのボタンでは白抜きのアイコンを使うよう、CSSで指定できます。


<a class="btn"><i class="icon-pencil"></i> 黒いアイコンを使うとき</a>
<a class="btn btn-primary"><i class="icon-pencil icon-white"></a> 白抜きアイコンを使うとき</a>

アラートボックス

divタグにクラスalertをつけると、アラートメッセージが出せるようになります。
色は4種類あり、黄色以外のボックスにするには、alertとalert-successなど、色に対応したクラスを一緒に付与します。

ひな形がほしい！

公式サイトに、ベーシックな3種類の型が置いてあります。
http://twitter.github.com/bootstrap/examples.html

色を変えたい！

このサイトから、好きな色を探してみては？
http://bootswatch.com/

Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか？
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html

はじめは少々戸惑うかもしれませんが、慣れれば心強いCSSフレームワーク。
Twitter bootstrapを使ってどんどんWebアプリケーションを作って下さい！