cssフレームワーク　Twitter Bootstrap

最近マイブームのフレームワークのご紹介。マイブームって・・・死語。

PC、スマホ、タブレット対応のフレームワークで使いやすくてカスタマイズしやすいものはないかと探しまわった結果、Twitter Bootstrapが使いやすかった。
このブログのテーマもTwitter Bootstrapで作ってます。

WordPressでブログやサイトを構築してスマホ対応させようと思ったら、たぶんWPTouchとかプラグインを使用する方がほとんどだと思いますが、このTwitter Bootstrapは画面サイズでレイアウトを変更してくれるスグレモノ！
PCのときは2カラム、スマホのときは1カラムなんてことを勝手にやってくれます。

その他、色んなスタイルが用意されていて、クラスを追加していくだけの使いやすさです。

レイアウトは固定(940px)と可変が組めて自由度は高いですが、複雑なレイアウトはちょっと難しい？

導入方法は簡単。

Twitter Bootstrapからパッケージをダウンロードして下のコードをhtmlのhead内に挿入。

レイアウトは12個からなるグリッドレイアウトになっていてspan1～span12を組み合わせていくだけ。

幅940pxで4:8の2カラムのレイアウトを作りたいときは以下のように。

このように書いてあげればOK。

その他の要素はブートストラップスターターテンプレートv2.0.4を見ればなるほど～となると思います。

最初は取っ付きにくいかもしれませんが、慣れれば最高に楽。
近いうちにデモページ作成して更に詳しく書いてみたいと思います。