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

Author: ウェブさえ |
2021年2月11日
カテゴリー ホームページ作成
本ページに記載の商品・サービスはプロモーションを含みます。
B!

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

Bootstrap、使ってますか?

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

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

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

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

ウェブさえプロフィール画像

著者情報:この記事を書いた人

ウェブさえ x facebook 株式会社ウェブさえ 著者のプロフィール

web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。

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も身につくウェブ制作レッスンはこちら

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

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

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

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

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

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

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

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

エンジニアを目指すなら

読み終わったらシェア!

B!

ウェブさえの無料サービス

どちらでもお好きな方を。もちろん両方でも。

ダウンロード
Top
ウェブさえ
@websae2012
ウェブさえマガジン
>詳しくはこちら