Twitter Bootstrapの導入への3ステップ


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

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

と前回書いた。

ので、それらがどういうものかを書いていこうと思う。

まず、「そのままCSSをがりがり変えて使う方法」から見ていこう。

そのままCSSをがりがり変えて使う方法

Twitter Bootstrapは、CSSフレームワーク(というくくりにはいれないほうがいい気がする。UIフレームワークという位置づけがいいかもしれない)の中では、新しい世代のものだ。というのも、純粋なCSSの元ファイルがあり、それを継承したりいろいろして使うというタイプではなく、lessというスタイルシートコンパイラ的なアプリケーションを使って、より効率的にCSSをデベロップすることができるからだ。

と書くと、なんだか敷居があがってしまうかもしれない。
Twitter Bootstrapがlessを活かしたフレームワークだからといって、lessを使わないといけないわけではない。

そこで、手っ取り早いのは、ダウンロードしてついてくる「bootstrap.css」をそのまま使う点だ。

方法としては、「bootstrap.css」をそのままHTML上で読み込んで、別のオリジナルCSSを利用して上書きをするという手法が考えられる。標準のCSSをどうしても変更したい場合は「bootstrap.css」自体を編集してしまってもよい。

lessを使って書いていき、JavaScriptを使って呼び出す方法

泣く子もだまるlessの本家サイト

http://lesscss.org/

CSSをそのまま使う手法に慣れてきたら、JavaScriptで呼び出す手法を試してみよう。JavaScriptで呼び出す手法は、lessのトップページにも書かれていて、「less.js」を使って、「lib」ディレクトリに入っている

  • bootstrap.less
  • forms.less
  • mixins.less
  • patterns.less
  • reset.less
  • scaffolding.less
  • tables.less
  • type.less
  • variables.less

を動的にコンパイルをしてCSSとして呼び出す方法となる。
面白いのは「link rel=”stylesheet/css”」ではなく「link rel=”stylesheet/less”」となる点。

ちょい変則的な書き方

でも、この方法は実は中間点地点にしか過ぎないと思ってる。
というのも、ユーザーがアクセスするたびにコンパイルされるのは、表示の際のオーバーヘッドが大きすぎると思うからだ。何かアクセスごとに変化するようにしてあるのならともかく、何度アクセスしても変わらないものを出力するのにJavaScriptを使うのは非効率な気がする。

ただし、lessの練習をするには、うってつけだと思う。そもそもlessってなんぞや?って人もいるのではないだろうか。でもその話は長くなるからまた今度。

3つ目の「黒い画面で専用のシェルスクリプトを使ってコンパイルする方法」への移行もおすすめしておく。

黒い画面で専用のシェルスクリプトを使ってコンパイルする方法

Twitter Bootstrapはここにきてぐっとハードルがあがる。
ローカル環境でのコンパイルに必要なハードルは以下の5つ

  • 黒い画面での作業
  • node.jsのインストール
  • npmのインストール
  • lessのインストール
  • コンパイルコマンドの入力

具体的なインストールについては後日Mac版の話をしようと思う。

Twitter Bootstrapをこの方法で導入することによるメリットのほうを書いておきたいと思う。
まず、Twitter Bootstrapをこの方法で導入すると、出力ファイルが「bootstrap-min.css」のように
小さいサイズに出来る点がある。

加えて、これら出力ファイルの名前もシェルスクリプトの変更によりカスタマイズすることが出来る。

おまけに、lessのサーバー側での変換、node.js(あこがれているけど導入してないひと多いげ?)の導入、npmの勉強なども出来てしまうのだ。

ということで、3つ目の方法でいくのがいいっすね!

続きはまた書くよー。

Comments are closed.