Twitter BootstrapでWebサイト構築したいなあって人はこれ見とけばいいかもしれないよ的なまとめを作る試み

最近はやってますよね、Twitter Bootstrap。もっと早く知っていたらきっとしあわせになれたんじゃないかなって人も多いと思います。ようやくかよ(笑)とか言わないでくださいお願いします

そこで、Twitter Bootstrapを使うために回るといいよっていうサイトをいくつかご紹介。

用意する

いざ使うとなっても、モノがないと話になりません。公式サイトから引っ張ってきてもいいのですが、それだとちょっとナンセンスかなーってお思いの方はこちらへどうぞ。

HTML5 Initializer

このサイトはマウスをぽちぽちするだけで超簡単にTwitter Bootstrapの準備ができます。

一番右の「Bootstrap」をクリックすると細かいチューニング画面が出てくるので、気の向くままにﾌﾝﾌﾌﾝと必要なものやら気になるものやらを選んでいき、あとは「Download it!」をクリックするとZipファイルがダウンロードできます。この間ものの30秒ほど。どこぞの人から「42秒で支度しな！」とふっかけられても余裕ですね。

調整する

これでひとまずTwitter Bootstrapを使ったWebサイトを作ることができますが、Twitterっぽい配色がいや！っていう人もいるでしょう。でもCSSを直接いじるのはちょっと…そんな時はこちらをどうぞ。

まず簡単に済ませるにはこちら。

Bootswatch: Free themes for Twitter Bootstrap

ここには無料で使えるTwitter Bootstrapのカスタムテーマをダウンロードできます。テーマは11種類、一部はweb fontsなんかも使っているので、デフォルトのテーマとはかなり趣も異なります。お持ち帰りするときは青いボタンの▼をクリック→出てきたメニューの項目を右クリックで保存しましょう。クリックしてしまうと、画面にCSSが表示され、ひょっとしたら白目をむくことになるかもしれないですよ？

※ちなみに、Lessの場合はちゃんとダウンロードしてくれます。

そしてもう少しだけこだわりたい時には。

StyleBootstrap.info

先のサイトにあるテーマでは満足できない場合はこちらをどうぞ。見た目を確認しながら細かい調整ができます。項目がだいたいパーツごとにわかれていて見やすいですね。納得のいく設定ができたらダウンロードしましょう。とりあえず押し間違えたり押し損ねたりすることはないであろうサイズのでっかいボタンが下の方にあるので押すとCSSを作成してくれます。すると右上にボタンが出現するので右クリックで保存しましょう。クリックしてしまうと(ry

組み合わせる

そうして持ってきたTwitter BootstrapのCSSやJavaScriptをまま使うなんてことはまずなくて、たいていは何らかのアプリケーションフレームワークなんかと一緒に使うとおもいます。そこで使えそうなものをいくつかご紹介。

Kickstrap

jQuery UIにTwitter Bootstrapをかぶせたものです。こちらはスタイルの調整にLessを使っており、メンテナンスの手間がかなり省けるかと思います。これを期にLessを導入したいとお考えならばCss2Lessというサイトは覚えておいて損はないでしょう。紹介されているブログがこちらにあります。

CSSからLESS形式に変換!! CSSを記述するだけで自動的にLESS形式に「Css2Less」｜PCあれこれ探索

http://pc.mogeringo.com/archives/16583

 <?php
 class AppController  extends Controller {
     public $helpers = array(
 Session', 'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'),
 'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'),
     );
 }

とします。

準備はこれだけ。そうするとCakePHPのヘルパーがTwitter Bootstrapの仕様にあったHTMLを作ってくれるようになります。リファクタリングの必要一切なし！

ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。