Twitter Bootstrapのグリッドシステムのみ使いたい

Bootstrapタイトル

Twitter Bootstrapは真っ白な状態からビジュアルに富んだページを作るのに最適です。

その中でもっとも素晴らしいのが「グリッドシステム

グリッドシステムとは?

Bootstrapはページを横に12分割し、それぞれの大きさをspan1~12でカンタンに指定できます。

さらにResponsive対応!スマホなど幅の狭いデバイスなど、幅によってグリッドの形が変形。見やすい大きさに並べ替えられます。(実際の動作はBootstrapのページでご確認を)
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

image

いままで悩んでいたメインカラムとサイドバーの位置や大きさ、長年多くの人を悩ませた「カラム落ち」を一気に解消してくれます。

では単純にBootstrapを追加すればバラ色なのか?

すでにサイトがある場合、そのまんまBootstrapを追加するのは少し危険です

標準のBootstrapのスタイルシートを入れると、独自の文字設定や競合するCSSも現れます。とくにh1~h6などは指定が競合して、かなり見た目が変わることがあります。

すばらしいグリッドシステムのみが使いたい!

スタイルを変更せずにグリッドシステムのみを使いたいときは、Bootstrapのカスタマイズがオススメ。

Bootstrap

image

Grid Systemやレイアウト、Responsiveなど必要な部分のみを選択し、一番下のCustomize and Downloadを押せばOK。

既存のスタイルを変えずにResponsive対応のグリッドシステムを手に入れられます。(もちろんCSSの結合は必要ですが)

グリッドシステムのみもカンタンに入手できますね!Bootstrapは神。

俺は自分でやるんだ!

自分でなにもかも指定したい人には、グリッドシステムのベースのみを提供するスタイルがあります。

3つご紹介します。

Responsive Grid System

12カラム~24カラムまで対応しているグリッドシステムです。Responsive対応。
ファイル内容は非常に単純で、カラムを%指定しているだけです。Bootstrapのように@mediaで画面の大きさごとに表示・非表示を指定するには、自分で工夫しなければなりません。

http://responsive.gs/

Responsive Grid System

image

おんなじ名前ですが、12カラムまで対応するグリッドシステム。Responsive対応です。

ただ、Boostrapや上のGrid Systemと比較すると、Responsiveの変形がだいぶ小さな状態まで引っ張る感じです。(かなり細くなるまで変形しない)

そのあたりが調整できるのかは試してません。

Responsive Web Design just got Easier with the Responsive Grid System
This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.

Columnal

image

原稿執筆時点でVer.0.85ということで、まだテスト段階的なグリッドシステム。

でもページを見る限り問題は無さそうです。

Index of /

まとめ

グリッドシステムはホントに便利です。

現在はスマホ~27インチディスプレイまで、あらゆる大きさのマシンでWebサイトが見られています。Responsive対応、見やすさなどに気を配らなければなりません。

上記のようなグリッドシステムを導入しておけば、大幅なレイアウト変更にも余裕を持って対応できるはずです。