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

2018年7月11日
カテゴリー ホームページ作成

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

Bootstrap、使ってますか?

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

ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。

今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。

グリッドシステムは、頭で理解しようとせず、目で見て動きを知るほうが、マスターへの近道です。図解とアニメーションで優しく説明していきますよ。

bootstrapとは?

まずは、「bootstrapってなに?」をおさらい。

Bootstrapは、Twitter社が開発しているCSSフレームワークです。

たぶん数あるなかで、ダントツに一番人気のCSSフレームワークなのではないでしょうか。

「フレームワークって何?」という初心者さんは、ぜひ下のリンクを訪れてみてください。フレームワークの使い方とメリットが理解できます。

Bootstrapが、ウェブサイト制作時に使用頻度の高いスタイルをひとまとめにしたパッケージであることはご存知の通りです。

あらかじめ見映えの良いスタイルが色々と準備されているので、デザインに自信がない人でも、サクッとおしゃれなウェブサイトが作れます。

そんなbootstrapを使いこなすための肝が「グリッドシステム」。いまのこのモバイル時代にふさわしい、強力かつ柔軟な仕組みで、複雑なレイアウトでも爆速でレスポンシブデザインを実現できます。

bootstrapのグリッドシステムとは?

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

グリッドシステム

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

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

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

グリッドシステムの実例

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

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

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

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

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

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

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

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

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

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

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

container、row、collomn

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

  • .container
  • .row
  • .col

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

.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

.row

row

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

.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>

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

レスポンシブデザインをbootstrapで作ってみる

今度はちゃんと.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>


もっと詳しくBootstrapの使い方を知るには

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

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

正確でより詳しい情報はBootstrapの公式ページでどうぞ。

さらにBootstrapを使いこなしたい場合は、オンライン講座という方法もあります。

以下のようなBootstrapを勉強できる講座を見つけました。

フロントエンドエンジニアになりたい人の Webプログラミング入門」という講座。

実際に受講してみると、以下のような内容を動画で学習することができました。

  • HTML/CSSのおさらい
  • Bootstrapのグリッド機能の実例
  • JavaScriptでアプリ作成

Bootstrapに関しては、「Bootstrapで素早く Webページを作ろう」ということで、以下のレッスンに分かれています。

  • Bootstrapを、CDNで利用する
  • Bootstrap:Containerを使う
  • Bootstrap:グリッドシステムを使う
  • Bootstrap/HTML:オフセットとフォームパーツ
  • Bootstrap/HTML:フォームのスタイルと placeholder属性
  • HTML:ドロップダウンリスト(リストボックス)を作る
  • HTML:チェックボックスを作る
  • HTML/CSS:ラジオボタンと、!important指定
  • Bootstrap:ボタンとラベルを作る

これだけ一通り動画を見れば、Bootstrapの基本はもう身につくでしょう。嬉しいのが、動画を見るだけじゃなくて、質問もできるところです。理解できなかったところをほったらかしにせずに済みますね。

質問できる!

HTML/CSSの基本からウェブ制作に必要な開発技術を全般的に学習できるので、特に初心者さんでこれから現場を目指したい人に良さそうです。詳細は以下からどうぞ。

Bootstrapも身につくウェブ制作レッスンはこちら

ついに再開!ウェブさえのHP作成サービスはこちら

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

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

コメントも大歓迎!

Top