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

Bootstrap、使ってますか？

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

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

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

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

bootstrapとは？

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

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

• Bootstrap

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

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

• ラクするWeb制作「フレームワークなにソレ？」な初心者へおすすめの7選

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

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

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

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

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

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

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

グリッドシステムの実例

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

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

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

• Creative – One Page Bootstrap Theme – Start Bootstrap

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

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

• Hope- Responsive eCommerce Bootstrap Template – Site Templates

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

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

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

• .container
• .row
• .col

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

.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の幅がひと目でわかります。

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

.container-fluid

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

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

.row

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

.col

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

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

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

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

じゃあこれは？

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

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

この場合は？

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

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

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

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の使い方を知るには

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

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

正確でより詳しい情報は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：ボタンとラベルを作る

• 引用元：フロントエンドエンジニアになりたい人の Webプログラミング入門

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

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

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

もっともっと詳しくなりたいなら

2週間、気合い入れて集中トレーニングという方法もあります。

毎日8時間のチャットサポート付きで、準備〜基本を学び、応用のための課題をこなしてbootstrapマスターを目指せます。bootstrapの勉強を始めたばかりの同期から頭ひとつ抜き出られるかもしれません。

無料体験で、簡単なwebアプリを作ってみることができるので、オンライン講座の未経験者は試してみるといいですね。

2週間でBootstrapを習得。無料体験あり

本気でweb制作で稼ぎたいなら

現場で通用する実践的なスキルを「短期集中型」の勉強方法で身につけるのが一番成功します。以下の記事を参考にしてみてください。

webデザイナーを目指すなら

• おすすめwebデザインインスクール4校。実績13年目の現役webデザイナーが語る”選び方”
  

エンジニアを目指すなら

• おすすめは？プログラミングスクールの選び方と評判を比較