アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

超便利!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アプリケーションを作って下さい!