【6日でできるHTML＆CSS入門】グリッドシステム

　現代のWeb開発において、レスポンシブで効率的なレイアウトを簡単に作成できる仕組みが求められています。Bootstrapの「グリッドシステム」は、そうしたニーズに応える強力な機能です。グリッドシステムを使えば、どんな画面サイズにも柔軟に対応したページ構成を、直感的かつ高速に設計できます。本記事では、Bootstrapグリッドシステムの基本と応用をサンプルを交えて解説します。

１．Bootstrapグリッドシステムの考え方

1.1. グリッドとは何か？

　グリッドシステムとは、ページ全体を12等分の格子（グリッド）に区切り、その幅の組み合わせで自在にレイアウトを組む考え方です。Bootstrapは、この仕組みをCSSクラスで簡単に扱えるようにしています。

用語意味
グリッドページを等分する「格子」構造
colグリッドの“列”を指定するクラス
row横方向に“行”を指定するクラス
containerグリッド全体の外枠となる「入れ物」
breakpoint画面サイズごとにレイアウトを切り替える区切り点

1.2. 12分割のルールと分割例

Bootstrapのグリッドは最大12カラム。
col-クラスで幅を指定し、合計が12になるように分割します。

分割例配置イメージ（横並び）
2 : 2 : 2 : 6□□ □□ □□ □□□□□□
4 : 8□□□□ □□□□□□□□
3 : 3 : 3 : 3□□□ □□□ □□□ □□□

※合計が12未満でもOK。その場合は残りの幅が余白になります。

２．グリッドシステムの基本使い方

2.1. 基本のHTML構造

サンプル：2:2:2:6 の分割

ファイル名： lesson53_1.html

<!DOCTYPE html>
<html>
<head>
  <title>グリッドシステム例</title>
  <meta charset="UTF-8">
  <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">ヘッダー</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>

表示例（パソコン幅）

|2|2|2|6|
→ 各カラムに数字が中央表示され、パソコンでは横並び、スマホでは縦並びになります。

表示例（スマホ幅）

2.2. 主なグリッド関連クラス解説

クラス名役割・説明
.container固定幅の外枠（ウィンドウサイズで中央に配置）
.container-fluid画面いっぱいに広がる外枠
.row横並び行の開始・グリッドの“行”を定義
.col-md-○md（768px～）で○列分を使うカラム
.col-○全幅で○列分を使うカラム（ブレークポイントなし）
.border枠線を表示する
.border-dark暗いグレーの枠線色

３．ブレークポイントとレスポンシブ分割

Bootstrapでは「画面幅」によって自動的にレイアウトが切り替わります。
この切り替わり点を「ブレークポイント」と呼びます。

prefix画面幅用途例
xs～575pxスマートフォン
sm576px～小型タブレット
md768px～パソコン小
lg992px～パソコン大
xl1200px～ワイドモニタ
xxl1400px～超ワイドモニタ

例：col-md-6 → md（768px以上）の時に6カラム幅
※それ未満だと自動的に縦並びになる

3.1. 色付き枠線の設定

グリッドに枠線や色を付ける場合は、Bootstrapの色クラスを利用します。

クラス名色・用途例
border-primary青
border-success緑
border-danger赤
border-warning黄
border-info水色
border-dark暗いグレー

3.2. グリッド関連タグ・クラス解説表

タグ・クラス名説明・用途
<div class="container">固定幅の外枠
<div class="container-fluid">画面全体に広がる外枠
<div class="row">行の開始
<div class="col-md-4">768px以上で4カラム幅
border border-dark暗いグレーの枠線
text-center py-2テキスト中央・上下余白

まとめ

  • Bootstrapのグリッドシステムは12分割の枠組みで、柔軟なレスポンシブレイアウトを実現
  • .containerや.row、.col-○クラスを組み合わせるだけでOK
  • ブレークポイントによりスマホ・タブレット・PCで見た目が自動で切り替わる。
  • 枠線や色もBootstrap標準クラスで簡単に指定できる。
  • サンプルのようなレイアウトがすぐ作れるので、実務でも大活躍！