6日でできる 新HTML&CSS入門｜Bootstrapグリッドの基本

12分割の考え方を使えば、複雑なレイアウトも整理しやすくなる。
Bootstrapグリッドを理解して、スマートフォンにもパソコンにも対応できる横並びレイアウトを作ろう。

Webページを作るとき、横並びのレイアウトをきれいに整えるのは意外と難しいものです。たとえば、左にメニュー、右に本文を置いたり、3つのカードを横に並べたり、画面幅に合わせてスマートフォンでは縦並びにしたりする場合、CSSを一から書くと細かな調整が必要になります。

そこで便利なのが、Bootstrapのグリッドシステムです。Bootstrapグリッドは、ページの横幅を12分割して考えるレイアウトの仕組みです。12個の枠をどのように配分するかによって、2列、3列、4列などのレイアウトを簡単に作れます。

たとえば、4 : 8のように分ければ、左側を少し狭く、右側を広く使う2列レイアウトになります。3 : 3 : 3 : 3にすれば、同じ幅の4列レイアウトになります。2 : 2 : 2 : 6のように指定すれば、前半に小さな列を3つ、後半に大きな列を1つ配置できます。

さらにBootstrapでは、画面幅に応じてレイアウトを切り替えるブレークポイントも用意されています。col-md-6のように指定すると、md以上の画面幅では6カラム分の幅で表示され、それより狭い画面では自動的に縦並びになります。これにより、パソコンでは横並び、スマートフォンでは縦並びというレスポンシブ対応を作りやすくなります。

この記事では、Bootstrapグリッドの基本となるcontainer、row、colの役割、12分割の考え方、ブレークポイント、枠線や余白の指定方法を、サンプルHTMLを使いながら分かりやすく解説していきます。

Bootstrapグリッドシステムとは

Bootstrapグリッドシステムとは、Webページの横幅を12分割して、列の幅を指定しながらレイアウトを作る仕組みです。Bootstrapが用意しているclassをHTMLに指定するだけで、CSSを細かく書かなくても横並びのレイアウトを作れます。

グリッドでは、まず全体を囲むcontainerまたはcontainer-fluidを用意し、その中にrowを作ります。さらにrowの中にcolを入れて、列を作ります。

用語意味
グリッドページを格子状に分けてレイアウトする考え方
containerグリッド全体を包む外枠
container-fluid画面幅いっぱいに広がる外枠
row横方向の行を作るclass
col行の中に配置する列を作るclass
ブレークポイント画面幅ごとにレイアウトを切り替える基準

Bootstrapグリッドでは、container、row、colの順番が大切です。containerの中にrowを置き、rowの中にcolを置く、という形で書くと、Bootstrapのレイアウトが正しく働きます。

<div class="container">
  <div class="row">
    <div class="col">左の列</div>
    <div class="col">右の列</div>
  </div>
</div>

この基本形を覚えておくと、2列レイアウト、3列レイアウト、サイドバー付きレイアウトなどに応用しやすくなります。

図1：Bootstrapグリッドはcontainer、row、colで作る

この図から分かること

Bootstrapグリッドでは、containerで全体の外枠を作り、その中にrowで行を作り、さらにcolで列を配置します。この順番を守ることで、横並びのレイアウトを作りやすくなります。グリッドは複雑に見えますが、基本構造はcontainer、row、colの3つで考えると分かりやすくなります。

12分割の考え方

Bootstrapグリッドの大きな特徴は、横幅を最大12カラムとして考えることです。1行の中で、各列が何カラム分の幅を使うかを指定します。

たとえば、col-md-4を3つ並べると、4 + 4 + 4 = 12となり、同じ幅の3列レイアウトになります。col-md-3を4つ並べると、3 + 3 + 3 + 3 = 12となり、同じ幅の4列レイアウトになります。

分割例合計配置イメージ
6 : 612半分ずつの2列
4 : 812左を狭く、右を広くする2列
3 : 3 : 3 : 312同じ幅の4列
2 : 2 : 2 : 612小さな列3つと大きな列1つ
5 : 51010カラム分を使い、残りは余白

合計が必ず12でなければならない、というわけではありません。合計が12未満の場合は、残りの幅が空きとして残ります。ただし、レイアウトを分かりやすく整えるには、最初は合計が12になるように考えると理解しやすいです。

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

この例では、md以上の画面幅で、左の列が4カラム分、右の列が8カラム分になります。合計が12なので、1行いっぱいを使った2列レイアウトになります。

rowとcolの関係

rowは行を作るclassです。colはその行の中に置く列です。横並びにしたい要素は、同じrowの中に入れます。

<div class="row">
  <div class="col-md-3">左</div>
  <div class="col-md-3">中央</div>
  <div class="col-md-6">右</div>
</div>

このように書くと、md以上の画面幅では、3 : 3 : 6の横並びになります。Bootstrapのグリッドでは、rowの中にcolを置くことで、列同士の横並びや余白調整が行われます。

class役割
row横並びの行を作る
col自動幅の列を作る
col-数字すべての画面幅で指定カラム幅にする
col-md-数字md以上の画面幅で指定カラム幅にする
col-lg-数字lg以上の画面幅で指定カラム幅にする

colだけを指定すると、列数に応じて自動的に同じ幅で分割されます。細かく幅を指定したい場合は、col-md-4やcol-md-8のように数字付きのclassを使います。

containerとcontainer-fluidの違い

Bootstrapのグリッドでは、外枠としてcontainerまたはcontainer-fluidを使います。どちらもページの内容を入れるための枠ですが、横幅の扱いが違います。

class特徴向いている場面
container画面幅に応じた最大幅を持ち、中央寄せになる一般的な本文エリア
container-fluid画面幅いっぱいに広がる横幅を広く使いたいレイアウト

containerは、画面が広くなっても本文が広がりすぎないように調整されます。読みやすい幅で中央に配置されるため、記事ページや通常のコンテンツに向いています。

container-fluidは、画面幅いっぱいに広がります。横幅を広く使いたい管理画面、ダッシュボード、全幅のレイアウトなどに向いています。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">サイド</div>
    <div class="col-md-10">メイン</div>
  </div>
</div>

このようにcontainer-fluidを使うと、横幅を広く使ったレイアウトを作れます。

BootstrapグリッドのサンプルHTML

ここでは、2 : 2 : 2 : 6の分割を使って、Bootstrapグリッドの基本を確認します。パソコン幅では4つの列が横並びになり、スマートフォン幅では縦並びになります。

ファイル名： lesson53_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrapグリッドの基本</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <header class="bg-primary text-white text-center p-3">
    Bootstrapグリッド練習ページ
  </header>

  <div class="container-fluid my-3">
    <div class="row">
      <div class="col-md-2 border border-dark text-center py-2">
        2
      </div>
      <div class="col-md-2 border border-dark text-center py-2">
        2
      </div>
      <div class="col-md-2 border border-dark text-center py-2">
        2
      </div>
      <div class="col-md-6 border border-dark text-center py-2">
        6
      </div>
    </div>
  </div>

  <footer class="bg-dark text-white text-center p-3">
    フッター
  </footer>

  <script src="js/bootstrap.min.js"></script>
</body>
</html>

ブラウザの表示例

パソコン幅で表示すると、4つのカラムが横並びになります。左から2、2、2、6の幅で配置されるため、最後の6の列がほかの列より広く表示されます。

表示イメージは次のようになります。

スマートフォン幅のように画面が狭くなると、col-md-2やcol-md-6のmd指定が効かなくなり、各カラムは自動的に縦並びになります。

このように、Bootstrapグリッドを使うと、パソコンでは横並び、スマートフォンでは縦並びというレスポンシブレイアウトを簡単に作れます。

サンプルHTMLの構造を確認する

サンプルHTMLでは、BootstrapのCSSを読み込み、container-fluid、row、col-md-2、col-md-6を使ってグリッドを作っています。

コード役割
link href="css/bootstrap.min.css" rel="stylesheet"BootstrapのCSSを読み込む
meta name="viewport"スマートフォン表示に対応するための設定
header class="bg-primary text-white text-center p-3"青背景、白文字、中央揃え、余白付きのヘッダー
div class="container-fluid my-3"画面幅いっぱいの外枠と上下余白
div class="row"グリッドの行
div class="col-md-2"md以上で2カラム分の幅を使う列
div class="col-md-6"md以上で6カラム分の幅を使う列
border border-dark暗い色の枠線を表示する
text-center py-2文字を中央揃えにし、上下の余白を付ける
script src="js/bootstrap.min.js"BootstrapのJavaScriptを読み込む

このサンプルで重要なのは、col-md-2とcol-md-6です。mdはブレークポイントを表し、768px以上の画面幅で指定されたカラム幅になります。それ未満の画面では、各列が縦に積み重なるように表示されます。

col-md-2やcol-md-6の読み方

Bootstrapのグリッドclassは、分解して読むと意味が分かりやすくなります。

class読み方意味
col-md-2カラム、md以上、2幅768px以上で12分割中2カラム分の幅
col-md-6カラム、md以上、6幅768px以上で12分割中6カラム分の幅
col-4カラム、すべての幅、4幅すべての画面幅で4カラム分の幅
col-lg-3カラム、lg以上、3幅992px以上で3カラム分の幅

col-md-2の場合、md以上の画面幅では2カラム分の列になります。2カラム分ということは、全体12分割のうちの2つ分なので、比較的細い列になります。

col-md-6の場合は、12分割のうち6つ分なので、半分の幅になります。サンプルでは、2 + 2 + 2 + 6 = 12になっているため、1行の幅をぴったり使っています。

図2：Bootstrapグリッドは12分割で幅を考える

この図から分かること

Bootstrapグリッドでは、1行の横幅を最大12カラムとして考えます。2 : 2 : 2 : 6のように指定すると、合計12になり、1行の幅を使い切るレイアウトになります。列の幅は数字で指定できるため、複雑な横並びも整理して考えやすくなります。

ブレークポイントとは

ブレークポイントとは、画面幅によってレイアウトを切り替える基準のことです。Bootstrapでは、画面幅に応じてxs、sm、md、lg、xl、xxlといった区切りが用意されています。

prefix画面幅の目安用途例
xs575px以下スマートフォン
sm576px以上大きめのスマートフォン、小型タブレット
md768px以上タブレット、パソコン小
lg992px以上パソコン
xl1200px以上大きめの画面
xxl1400px以上超ワイド画面

col-md-6は、md以上の画面幅で6カラム分になるという意味です。画面幅がmd未満の場合、指定された横並びは解除され、縦並びになります。

この仕組みによって、スマートフォンでは縦に読みやすく、パソコンでは横に広く使うレイアウトを作れます。

col-数字とcol-md-数字の違い

Bootstrapグリッドでは、col-数字とcol-md-数字の違いを理解することが大切です。

class効き方
col-6すべての画面幅で6カラム分になる
col-md-6md以上の画面幅で6カラム分になる
col-lg-4lg以上の画面幅で4カラム分になる
col-sm-12 col-md-6sm以上では12幅、md以上では6幅に切り替わる

col-6はブレークポイントがないため、スマートフォンでもパソコンでも6カラム分になります。つまり、狭い画面でも2列表示になりやすいです。

一方、col-md-6は、md以上の画面幅でのみ6カラム分になります。md未満では縦並びになるため、スマートフォンで読みやすくなります。

レスポンシブ対応を考えるときは、スマートフォンでは縦並び、パソコンでは横並びにしたい場合が多いため、col-md-数字やcol-lg-数字をよく使います。

パソコンでは横並び、スマートフォンでは縦並び

Bootstrapグリッドの便利なところは、ブレークポイントを使うだけでレスポンシブ対応ができる点です。

たとえば、次のように書きます。

<div class="row">
  <div class="col-md-4">左の内容</div>
  <div class="col-md-4">中央の内容</div>
  <div class="col-md-4">右の内容</div>
</div>

このコードでは、md以上の画面幅では3列になります。スマートフォンのようにmd未満の画面幅では、各列が縦に並びます。

画面幅表示
768px以上3列の横並び
767px以下1列ずつの縦並び

このように、同じHTMLでも画面幅によって見え方が変わります。Bootstrapのグリッドは、レスポンシブWebデザインを効率よく作るための強力な仕組みです。

図3：ブレークポイントで横並びと縦並びを切り替える

この図から分かること

Bootstrapでは、col-md-4のようにブレークポイント付きのclassを使うと、画面幅によってレイアウトが切り替わります。md以上では横並びになり、md未満では縦並びになります。これにより、スマートフォンでもパソコンでも見やすいレスポンシブレイアウトを作れます。

枠線や色を付けてグリッドを見やすくする

グリッドの学習では、カラムの境界が分かるように枠線を付けると理解しやすくなります。Bootstrapには、枠線や色を指定するclassも用意されています。

<div class="col-md-4 border border-dark text-center py-2">
  4
</div>
class役割
border枠線を表示する
border-dark暗いグレー系の枠線にする
border-primary青系の枠線にする
border-success緑系の枠線にする
border-danger赤系の枠線にする
border-warning黄色系の枠線にする
border-info水色系の枠線にする

borderだけでも枠線は表示されますが、border-darkやborder-primaryなどを組み合わせると、枠線の色を変えられます。学習用のサンプルでは、列の幅を確認しやすくするために枠線を付けると便利です。

文字揃えと余白のclass

サンプルでは、text-centerとpy-2も使っています。

<div class="col-md-2 border border-dark text-center py-2">
  2
</div>
class役割
text-center文字を中央揃えにする
py-2上下方向にpaddingを付ける
px-2左右方向にpaddingを付ける
p-3上下左右すべてにpaddingを付ける
my-3上下方向にmarginを付ける
mx-auto左右のmarginを自動にして中央寄せにする

pyのpはpadding、yは上下方向を表します。myのmはmargin、yは上下方向です。Bootstrapでは、このようなユーティリティclassを使って、余白や配置を簡単に調整できます。

グリッドの列にtext-centerやpy-2を付けると、数字や文字が見やすくなります。小さなclassの組み合わせで見た目を整えられるところも、Bootstrapの便利な点です。

グリッド関連classの一覧

Bootstrapグリッドでよく使うclassを整理しておきます。

タグ・class名説明・用途
div class=container固定幅の外枠を作る
div class=container-fluid画面幅いっぱいの外枠を作る
div class=rowグリッドの行を作る
div class=col自動幅の列を作る
div class=col-6全画面幅で6カラム分の列を作る
div class=col-md-4md以上で4カラム分の列を作る
div class=col-md-6md以上で6カラム分の列を作る
border枠線を付ける
border-dark暗いグレー系の枠線にする
text-centerテキストを中央揃えにする
py-2上下に余白を付ける
my-3上下に外側の余白を付ける

まずは、container、row、colの基本構造を理解しましょう。その後、col-md-数字で幅を指定し、borderやtext-centerで見た目を確認すると、グリッドの動きが分かりやすくなります。

Bootstrapグリッドでよくある失敗

Bootstrapグリッドを使うときは、いくつかの失敗が起こりやすいです。特に、container、row、colの順番を間違えると、意図した横並びにならないことがあります。

よくある失敗原因対策
横並びにならないrowの中にcolを入れていないcontainer → row → colの順番にする
幅が思った通りにならない合計カラム数を確認していない1行の合計が12になるか確認する
スマホでも横並びになるcol-数字を使っているcol-md-数字などを使う
CSSが効かないBootstrapのCSSを読み込んでいないlinkのパスを確認する
画像や列がはみ出す幅指定や余白が大きすぎるcontainerやcolの使い方を見直す

グリッドがうまく動かないときは、まずHTMLの構造を確認しましょう。containerの中にrowがあり、rowの中にcolがあるかを見るだけでも、多くの原因を見つけられます。

Bootstrapグリッドを使うときの考え方

Bootstrapグリッドを使うときは、最初に「何列に分けたいか」を考えます。次に、その列幅を12分割の中でどう配分するかを決めます。

たとえば、サイドバー付きのページなら、左を3、右を9にすると自然です。3つのカードを同じ幅で並べるなら、4、4、4にします。4つの小さなメニューを並べるなら、3、3、3、3にします。

作りたいレイアウト指定例
2列で半分ずつcol-md-6、col-md-6
左を狭く右を広くcol-md-4、col-md-8
3列を均等に並べるcol-md-4、col-md-4、col-md-4
4列を均等に並べるcol-md-3、col-md-3、col-md-3、col-md-3
小列3つと大列1つcol-md-2、col-md-2、col-md-2、col-md-6

このように、数字の合計を12にする考え方を身につけると、さまざまなレイアウトを作れるようになります。

Bootstrapグリッドを理解するとレイアウト制作が楽になる

Bootstrapグリッドは、レスポンシブレイアウトを効率よく作るための便利な仕組みです。ページ全体を12分割で考え、container、row、colを組み合わせることで、横並びのレイアウトを作れます。

col-md-2やcol-md-6のようなclassを使えば、画面幅がmd以上のときに指定した幅で表示できます。md未満では縦並びになるため、スマートフォンでも読みやすいレイアウトを作りやすくなります。

また、border、text-center、py-2、my-3などのユーティリティclassを組み合わせると、グリッドの見た目や余白も簡単に調整できます。学習段階では、枠線を付けてカラム幅を確認しながら練習すると理解しやすいです。

Bootstrapグリッドの基本は、外枠のcontainer、行のrow、列のcolです。この3つの役割と12分割の考え方を押さえることで、スマートフォン、タブレット、パソコンに対応したレイアウトを効率よく作れるようになります。