Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

2016年2月29日
カテゴリー ホームページ作成

Bootstrapのグリッドシステムの使い方を初心者へ向けておさらいする

Bootstrap、使ってますか? その便利さを物語るように、本当にいろいろなサイトで利用されてますね。

ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないだけで、じつは使っちゃってるという人もたくさんいると思いますよ。そんな人たちも含めれば、数あるなかで(以下参考リンク)、ダントツに一番人気のCSSフレームワークなんじゃないかな。

Bootstrapが、使用頻度の高いスタイルをひとまとめにしたパッケージであることはご存知の通りです。あらかじめ見ばえ良くいろんなスタイルが定義されているので、デザインに自信がない人でも、サクッと今風のウェブサイトを作れます。

特に「グリッドシステム」は大助かり。いまのこのモバイル時代にふさわしい、強力かつ柔軟な仕組みです。複雑なレイアウトでも爆速でレスポンシブにできます。

まずは目次から

1. グリッドシステムとは?

サイトの横幅を均等に分けるガイドラインを「グリッド」と呼びます。Bootstrapでは12本のグリッドが存在します。

グリッドシステム

グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなります。

このグリッドを活用してレイアウトできる仕組みを「グリッドシステム」というんですね。複雑なレイアウトでも簡単にレスポンシブにできます。こんなふうに。

レスポンシブの動きをgifアニメで表現

2. Bootstrapの実例

実際に、Bootstrapのグリッド・システムを利用している例を見てみましょう。

ひとつ目はこんなランディングページ。コーポレートサイトやポートフォリオに適したレイアウトですね。

ランディングページのパソコンの見えかた

これをスマホで見ると画面幅いっぱいにコンテンツが広がったレイアウトへ変わります。

ランディングページのモバイル

今度はECサイトです。商品が豊富なほど、ECサイトを利用するときの楽しさは増します。1ページでたくさんの商品を見せたい気持ちが伝わってくるレイアウトです。

ECサイトのパソコンの見えかた

モバイルだと横にたくさん並べた写真は小さくなりすぎて商品の見た目の良さがあまり伝わりません。画面幅いっぱいに写真を見せるレイアウトへ変えれば、スマホでもじゅうぶん大きく見せられます。

ECサイトのモバイルの見えかた

こんなふうに表示物をグリッドに沿って配置しておいたおかげで、画面幅が変わっても対応しやすくなります。でも、そのためのCSSをいちから書くのはやっぱり面倒。グリッドの幅や余白などの初期設定、レスポンシブの条件も、正しく記述するには数学的な難しさも加わります。初心者にはけっこうハードル高いですよね。そこでグリッドシステムが活躍します。

3. グリッドシステムを支える3つのクラス

container、row、collomn

Bootstrapのグリッドシステムはホントによくできてます。この3つのクラスさえ理解しておけば、複雑なレイアウトもなんのその。レスポンシブも余裕です。

  • .container
  • .row
  • .col

それぞれの使い方を見ていきます。

3-1. .container

container

コンテナに与えるクラスです。コンテナは格納庫という意味です。上の画像を見ると、.container.row.colを格納していることがわかります。

.containerは決められた幅を持ちます。レスポンシブデザインは、スマホ、タブレット、パソコンなど異なる画面幅に合わせてレイアウトを切り替えますよね。Bootstrapでは、閲覧側の画面幅を「極小から特大」までの5種類を想定し、.containerの幅も5段階に分け用意されてます。

ブレイクポイント図解

  • Extra small / 画面幅 極小(544px未満)
  • Small / 画面幅 小(544px以上 768px未満)
  • Medium / 画面幅 中 (768px以上 992px未満)
  • large / 画面幅 大 (992px以上 1200px未満)
  • Extra large / 画面幅 特大 (1200px以上)

この5種類の画面幅に対して、.containerの幅も5段階あります。以下のように。

Extra small / 画面幅 極小(544px未満)

極小

.containerの幅は「auto」になります。コンテナ幅は画面幅いっぱいに広がると考えていいですね。

Small / 画面幅 小(544px以上 768px未満)

小

.containerの幅は「576px」になります。

Medium / 画面幅 中 (768px以上 992px未満)

中

.containerの幅は「720px」になります。

large / 画面幅 大 (992px以上 1200px未満)

大

.containerの幅は「940px」になります。

Extra large / 画面幅 極大 (1200px以上)

特大

.containerの幅は「1140px」になります。

以上を表にもしてみました。画面幅に対する.containerの幅がひと目でわかります。

画面幅 Extra small Small Medium Large Extra large
.container幅 auto 576px 720px 940px 1140px

ちなみに、このレイアウトが切り替わる画面幅をブレイクポイントといいます。Bootstrapでは5つのブレイクポイントがあるというわけです。

.container-fluid

じつは、コンテナ用のクラスにはもう一つ.container-fluidがあります。覚えておくと便利です。

.container-fluidは、ブラウザのウィンドウ幅いっぱいに広がります。ウィンドウのサイズを狭くしたり広くしたりすると、.container-fluidの幅も流動的に変化します。

container-fluid

3-2. .row

row

行に与えるクラスです。.rowはコンテナを水平に分割し上から下へと並びます。.rowの中に.colを定義しレイアウトを組みます。

3-3. .col

collomn

列を表すクラスです。ウェブデザイナーにとっては、カラムという呼び方のほうが親しみがあるかも。.col.rowを縦に割り左から右へ並びます。

.colのあとに-(ハイフン)で文字列をつなぐことで、「この画面では、この個数のグリッド」ということを指定します。

ひとつめの-の後ろには画面幅を表す文字列が入ります。画面幅は5種類でした。「極小から特大まで」は次の表のように記述します。

画面幅 Extra small Small Medium Large Extra large
クラスの書き方 .col-xs- .col-sm- .col-md- .col-lg- .col-xl-

そして、ふたつ目の-のあとにグリッドの個数を数字で加えます。例えば、.col-md-4と記述すると、画面幅がMiduim以上のときはグリッドを4個持つカラムを生成します。

col-md-4の実例

じゃあこれは?

col-md-6が2つ

画面のサイズはMedium、グリッド6個のカラムが2個あるのでHTMLの記述法はこうなります。


<div class="col-md-6"></div>
<div class="col-md-6"></div>

この場合は?

col-md-3が3つ

グリッドを4個持つカラムが3つなのでこうですね。


<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

画面サイズを変えて、スモールの場合。

col-sm-4とcol-sm-8

HTMLはこうなります。


<div class="col-sm-4"></div>
<div class="col-sm-8"></div>

ここまで知ればたいていのレイアウトは組めるようになります。レスポンシブも簡単です。ブレイクポイントごとにクラスを複数与えるだけです。

4. レスポンシブ やってみる

今度はちゃんと.container.rowも使って書いてみます。.col.rowで挟み.containerの中に置きます。

注意したいのは、Bootstrapがモバイルファーストということです。モバイルからスタイルを定義していくので、レスポンシブさせるときは、「この画面幅より大きい場合はこのスタイル」というように書いていきます。

では、実例を。こんなふうにスマホとパソコンで横並びのカラム数が変わる場合は?

スマホとパソコンでカラムの数が変わるとき

各カラムに対してスマホ(極小=xs)とパソコン(大=lg)のクラスを記述すればOKです。1行で横並びするカラムの合計グリッド数に気をつけます。12をこえると、画面上でカラムは次の行へ下ります。


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

カラムを入れ子にすることもできます。サイドバーをつけたいときに便利ですね。

スマホとパソコンでカラムの数が変わるとき

図がちょっとわかりにくいかな。HTMLを書いて動きを確かめてみてください。


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


今回はここまで!

もっと複雑なレイアウトを組むために、カラムが始める位置をコントロールできるオフセットや、画面幅によってカラムの表示/非表示を決められるオプション用のクラスもあります。

また、今回はサクッと振り返ることを目的にしたので、レイアウトを組むときに注意したいmarginpaddingについての詳細も省きました。図解ではカラムの高さを考慮してないことも付け加えておいたほうがいいかな。

正確でより詳しい情報はBootstrapの公式ページでどうぞ。今回の記事は、まだアルファ版ですがBootstrap 4を基準に書きました。そこんところもヨロシクです。

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top