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で画面の大きさごとに表示・非表示を指定するには、自分で工夫しなければなりません。

Responsive Grid System - Big Drop Inc Blog
CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, ...

 

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対応、見やすさなどに気を配らなければなりません。

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