[Bootstrap] グリッドシステムについての理解を整理

グリッドシステムについて理解を整理する。

グリッドとは何か

サイトの横幅を均等に分けたラインのこと。

このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。

Bootstrapでは12本のグリッドが存在する。

どんなレイアウトができる？

12本のグリッドに合わせることができれば、柔軟にレイアウトの対応ができる。

縦三列のようなかたちとか。

色々な大きさを合わせてみたり。

とにかく12本のグリッドに合わせられるなら、柔軟に対応できる。

スマホのデザインの時はどうなるの？

スマホデザインも基本的に同じ12本のグリッドを元に使う。

但し横幅は狭くなるので、グリッドの配置には工夫が必要。

rowクラスとcolクラスで大きさを指定

Bootstrapのクラスを使う際には、二つのクラスが必要になる。

rowクラスとcolクラスについてみていく。

rowクラス

rowクラスは行を表すクラス。

rowクラスの中で、colクラスがいくつ必要なのか定義していく。

colクラス

colクラスはrowクラスの中で定義するクラス。

col -3 とか col – 6とかのように、「col – ○」を指定することで、いくつのグリッドを使うのか、幅を設定できる。

画面幅に合わせてcolクラスを定義する

colクラスは画面幅によって、いくつグリッドを使うのかを変更することができる。

Bootstrapで決められている画面幅の名前を指定することで、その幅に合わせて、いくつグリッドを使うかを決められる。

画面幅の名前

画面幅をcolで指定するためには、画面幅をしている必要がある。

下記はBootstrapで決められている、画面幅のまとめ。

画面幅を指定する際のcolの書き方は、「col-画面幅-グリッド数」という形になる。

• Extra small (col-xs-): ～575px
• Small (col-sm-): 576～767px
• Medium(col-md-) : 768～991px
• Large(col-lg-) : 992～1199px
• Extra Large(col-xl-) : 1200px～

複数colクラスを指定して、レスポンシブに対応する

colクラスを複数指定して、レスポンシブにも対応できるデザインにすることができる。

例えば下記のように表記する。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-lg-8"></div>
        <div class="col-xs-6 col-lg-4"></div>
    </div>
　　<div class="row">
        <div class="col-xs-6 col-lg-3"></div>
        <div class="col-xs-6 col-lg-3"></div>
        <div class="col-xs-6 col-lg-3"></div>
    </div>
</div>

画面幅が、992 – 1199pxのLargeサイズの時は、「col-lg-○」クラスが適用されるため、下記のようになる。

画面幅が、～575pxサイズの時は、「col-lg-○」クラスが適用されるため、下記のようになる。