bootstrap3のグリッドシステムの使い方

img_bst

グリッドシステムを制すものはbootstrapを制す!
というわけで、グリッドシステムを理解するのに私は少し時間がかかりましたので、他にもそんな兄貴が存在するだろうと勝手に思い、解説してみました。

スポンサーリンク

グリッドシステムとは?

そもそもグリッドシステムというのはbootstrapだけの物ではなく、それ以前から格子状のレイアウトデザインの仕組みが使われていて、これがグリッドシステムという手法でした。格子状に並べる事で整然とレイアウトすることが可能で、海外のサイト等ではよく使われていました。

bootstrapのグリッドシステム

bootstrapはレスポンシブウェブデザインを提供するフレームワークなのでしっかりレスポンシブ対応なグリッドシステムが用意されています。覚えるとすんごい便利なので是非覚えていってねっ!

使用方法

まずは基本の形です。containerとrowというclassを設定したdivで囲んであげましょう
今回は例として2つのボックスを用意します。


<div class="container">
  <div class="row">
    <div class="col-md-6">
    ボックス1
    </div>
    <div class="col-md-6">
    ボックス2
    </div>
  </div>
</div>

要は一番外側にcontainerクラス、次にrowクラス、最後にcol-****というクラスでくくってやればいいんだね!?そういうことです。ちなみに「col-****」と表現したのは、ここがbootstrapグリッドシステムの大事な所だからです。

カラムによる領域確保

「col-****」を知る前にbootstrap3のグリッドシステムにおけるカラムの概念を知っていただきたい。知っていただきたいんだ!
bootstrap3のグリッドシステムは12カラムで成立しています。containerクラスの幅を最大値として12分割のカラム概念を持っているのです。
containerクラスが1200pxだったとすると、1カラムが100pxになります。
containerクラスが600pxだったとすると、1カラムが50pxになります。
そしてbootstrap3のグリッドシステムでは幅の指定をカラム数で指定します。ブラウザサイズによって箱のサイズが変わる為、px指定は出来ないですもんね。

つまり

containerクラスが1200pxの時に3カラムのサイズを指定したボックスを作ると300px分の領域のボックスが出来上がります。
containerクラスが600pxの時に3カラムのサイズを指定したボックスを作ると150px分の領域のボックスが出来上がります。
そしてrowの幅を100%としてカラム数に応じ領域が変わります。
領域を半分ずつであれば12分割なので6:6になります。
4:8等で領域を変えることができます。
イメージとしてはこんな感じです。

img_bst01

わかったかな?わからなくても次にいきますけどね!!

条件とカラム数を同時に指定

「col-****」なんですが、あらかじめ定められた表現により
col-“条件”-“カラム”
というように設定する事で、その条件下におけるボックスのサイズを同時に指定する事ができます。
つまり例としては

col-md-6 と書くと
col-md(992px以上の場合)-6(6カラム分のサイズ)というような設定が可能です。
条件部分に関しては以下のように指定が可能です。
xs 全サイズ
sm 768px以上
md 992px以上
lg 1200px以上
なのでcol-xs-12 col-md-6と書くと
ブラウザサイズが992未満の場合は12カラム(全幅表示)で
992以上になると6カラム(半分表示)にするという書き方ができるのです。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
    ボックス1
    </div>
    <div class="col-xs-12 col-md-6">
    ボックス2
    </div>
  </div>
</div>

イメージ的にはこんな感じ。

992未満の時

img_bst03

992以上の時

img_bst02

ブラウザの大きさをひょいひょい変えてみると変化がよくわかりますね。

まとめ

bootstrap3のグリッドシステムはレスポンシブが初めての人には少しわかりにくい概念かもしれませんが、一度覚えると超絶便利なのでマスターしてレスポンシブりまくっていただければと思います。

流行の格安スマホ

格安スマホって微妙な機種しかなかったりして、いまいち使ってみようという意欲が沸かなかったんですが
so-netからXperiaの格安スマホが出てるらしいです。有名な機種だと安心できますなぁ。
格安スマホにXperiaがやってきた!



スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>