Twitter Bootstrap

Twitter Bootstrapを導入してみよう!

どうもどうも。
最初「Twitter Bootcamp」と間違って検索して一向に答えに辿り着けなかった@kara_dだよ。

今回はTwitter Bootstrapのお話。

Twitter Bootstrapのトップページ

http://twitter.github.com/bootstrap/

Twitter Bootstrapは、Twitterの様々な試行錯誤を経て辿り着いたユーザーインターフェースのフレームワークだ。
オープンソースで公開されており、ダウンロードしてすぐに使ってみる事が出来る。

実はGreativeのサイトもTwitter Bootstrapで出来ていて、単に配置しただけではなくてPlay FrameworkというJava言語で動いているのフレームワーク上で使いやすいように配置してある。そのうちこっちのほうに置くにはどうするかとかの話もしようと思う。オープンしたばかりなので、構成については徐々に変えて行こうと思ってる。

Twitter Bootstrapのプロジェクトは、GitHubで管理されており、Gitをやったことがある人ならお気軽に試してみることが出来る。

GitHubで管理されておるよ

「Gitなんてしらん(怒)」

という人は、「Bootstrap on GitHub」というボタンをポチしたあとに出る画面の「Downloads」をクリックしよう。
その後出るモーダルウインドウより「Download .zip」を押してダウンロードをすることで取得が出来る。

Download .zipをクリック

Twitter Bootstrapでどういうものが出来るか知りたい人は、「Quick start examples」からいくつかのサンプルを見てみよう。

いろいろサンプルがある

まずは、Twitter Bootstrapのポイントについて書いてみる。
Twitter Bootstrap、というかCSSフレームワークで結構重用視されているのがレイアウト管理だ。

Twitter Bootstrapでも、様々なフレームワークで採用されているようなレイアウト方式を採用している。

ある一定の横幅に対して、細かなグリッドを定義しておき、そこをいくつまたぐかを決定していく事でレイアウトを実現するという方式だ。
Twitter Bootstrapのトップページでは、このグリッドを見る事が出来る。

用意されているグリッド

面白いのは、グリッドがない部分を定義したり、比率でグリッドを決めたりできる点。

比率で決めるとかもできる

あと、CSSフレームワークで欠かせないのが、各オブジェクトに対するスカフォルディングだ。スカフォルディングというのはWebアプリケーションのフレームワークではよく使われている言葉で、「足場」とかそういう意味がある。つまり、結構プレーンな状態のデザインされた要素を足場として自分のデザインにアレンジしていく手法を指している。

Twitter Bootstrapでは、例えばテーブルは、こんな感じでプレーンだけどいい感じの状態で用意されていたり、

シンプルなテーブル

ボタン類も、パターン化されたものが用意されている。

よく見た事があるボタンですね

Twitter Bootstrapで最も特徴的なのは、トップバーだ。トップバーと呼んでいるのは、Twitter Bootstrapのクラス名にそう書いてあるからである。このトップバーはTwitterで採用されているものと同様にヘッダー位置に固定されているため、スクロールしてもヘッダー位置が変わらない。

見た事があるトップバー

トップバーに関する実装はいろいろと充実していて、例えばプルダウンメニューとかも用意されている。

Twitter Bootstrapには、導入をして使う方法が下記の3パターン存在する。

  • そのままCSSをがりがり変えて使う方法。
  • lessを使って書いていき、JavaScriptを使って呼び出す方法
  • 黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

それについては、また今度書くよ〜。

Read More