Bootstrapでレスポンシブなカラム作成　ブレイクポイントとカラム数の指定方法をマスター

初心者向けBootstrapのご案内、連載６回目の記事です。
前回はBootstrapをカスタマイズする際に知っておくべきCSSの優先ルールについて触れました。
http://tonari-it.com/css-customize
※（CSSの優先順位についてはさらに別記事で、もっと詳しく解説しています）

今回は、Bootstrapの機能でもっとも便利なカラム分け部分、グリッドシステムの使用法を説明します。

上記のように３つのブロックに分かれたレイアウトをカラム分けと呼びます。１カラム＝１列ですので、上画像は３カラムレイアウトですね。

そしてブラウザの画面が狭くなると、レイアウトは下図のように変化します。

このように「大きな画面では３カラム、小さな画面サイズでは１カラム縦積みに変化」というレイアウトを、Bootstrapでは簡単に組むことができます。

Bootstrapのカラム分けは、ルールさえ覚えてしまえばとても簡単です。
最低限のポイントのみに絞って解説しますので、ここでカラム分けの基本形をさくっとマスターしてください。

３カラムから１カラムに変化するレスポンシブデザインのサンプル
カラム部分のソースをチェック
1. さらにカラム部分だけを抜き出すと……
カラム分けのポイント「row(行)+col(列)]
カラム分割の指定のしかた
1. ②　ブレイクポイントの指定方法
2. ③ カラム分割数の指定方法
Bootstrapでカラム作成のまとめ
連載目次：初心者向け！Bootstrapで簡単レスポンシブサイト制作

３カラムから１カラムに変化するレスポンシブデザインのサンプル

それでは早速、上図サンプルと同じページを作成していきましょう。これまでの連載同様、index.htmlファイルを一つ作って、以下を丸々コピペしてください。

完成形のソースはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<!--CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!--JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--自作CSS -->
<style type="text/css"><!--
body {background-color: #fff; margin-top: 20px;}
    .o-3column h2 {text-align: center; font-size: 28px; margin-bottom: 10px;}
    .o-3column p { margin-top: 10px;}
    .o-3column .col-md-4 { padding: 0 20px;}
--></style>
</head>


<body>

<!--　▼ ３カラム　 -->
    <div class="container">
      <div class="row o-3column">
        <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          </p>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
         <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
        <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
<!--　▲ ３カラム　 -->

</body>
</html>

※ファイルを保存する際エンコードの種類は必ず「UTF-8」にしてください。

使用している画像は、コチラです。ダウンロードしてindex.htmlと同階層に置いてください。

以上でサンプルページが完成しました。

実際にブラウザで開き、横幅を狭めて３カラム部分がどのように変化するか確かめてみてください。

※index.htmlに、どのようにBootstrapを読み込んでいるのかに関しては以前の記事で説明しています

カラム部分のソースをチェック

では３カラム部分のソースはどのように書かれているか、確認してみましょう。

<!--　▼ ３カラム　 -->
    <div class="container">
      <div class="row o-3column">
        <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
         <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
        <div class="col-md-4">
          <h2>３カラム見出しテキスト</h2>
          
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
<!--　▲ ３カラム　 -->

図解するとこうなっています。

「container」「row」「col-md-4」がBootstrapで定義されているクラスですね。この内「container」については、以前の連載で詳しく解説しています。

さらにカラム部分だけを抜き出すと……

上記のソースからさらにカラム指定に関わらないh2やpタグ、自前のクラス指定などを削除してみましょう。

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

非常にシンプルになりました。それではこのソースの内容について説明していきます。

カラム分けのポイント「row(行)+col(列)]

カラム分けを行う場合、「row」「col-md-4」の２つをセットで使います。この２つのクラスは、それぞれ下記のような役割を持っています。

●「row」＝　行　
●「col-md-4」＝　Column　＝　列

覚え方のコツとしては、「row（行）」でココはこれからカラム分けをする行ですよーと宣言して、「col-md-4（列）」でカラムの分割数を指定する、というイメージで捉えて下さい。

カラム分割の指定のしかた

さて、「row（行）」はシンプルなのに、列を指定する「col-md-4」は何やら「-」で繋がっていてややこしそうですね。

このクラスは３つの意味に分解できます。

①　col　＝　columnの略
②　md　　＝　Bootstrapで定義している、ブレイクポイントの指定
③　4　＝　カラムをどう分割するか指定するための数字

大事なのは②と③です。それぞれの用法を説明します。

②　ブレイクポイントの指定方法

実際のサンプルページで確認していただいた通り、この３カラムは狭い画面になると１カラムへ変化します。

この変化するポイント（ブラウザ画面横サイズ）を指定しているのが「md」部分になります。

指定ポイントの定義は以下のようになっています。
　

Class名	.col-xs-*	.col-sm-*	.col-md-*	.col-lg-*
ブレイクポイント	切り替えなし	768px	992px	1200px
サイズ感	スマホ	タブレット	PC	PC大画面

サンプルの「col-md-4」の場合、大きな画面では３カラムで表示されますが、ブラウザの横幅が992pxになったとたん、１カラムの縦積みに変化します。

これを「col-sm-4」に変更すると、切り変わるポイントは768pxになります。

「col-xs-4」を指定すると切り替えは無くなり、どれだけブラウザサイズを狭めても、３カラムのまま表示され続けます。

★覚えておくポイント

◆「lg・md・sm・xs」というブレイクポイントの定義がある。
◆指定したブレイクポイント以下のサイズになると、とにかく１カラム縦積みになる。
◆「xs」だけ例外で、指定したカラム数のまま表示されつづける

③ カラム分割数の指定方法

次は「col-md-4」の数字部分についてです。

Bootstrapのカラムというのは、あらかじめ１行を１２列に分割してあります。
この分割済みの１２列を「幾つづつまとめる」と定義するのが、カラム数の指定方法です。

再度サンプルのソース（簡略版）を見てみましょう。

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

使用しているクラス「col-sm-4」は、「１２ある列のうち４列を１セットにして１カラムにするよ！」という意味になります。

サンプルでは、「４列で１カラム」なdivを３つ配置していますね。４列☓３個で１２列が綺麗に分割されています。

◆均等に２分割した例

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

◆不均等に２分割した例

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

このように「１２列を幾つづつまとめるか」を「col-md-数字」の部分で指定しますので、「row」の中に配置した「col」の数字の合計が１２を超えると、１行に収まりきれず、カラム落ちが発生します。

★覚えておくポイント

◆カラム分割は各カラムの数字が合計すると１２になるよう指定する。
◆合計１２を超えるとカラム落ちが発生する

Bootstrapでカラム作成のまとめ

以上がBootstrapでグリッドシステムを用い、カラムを作成する方法の一例となります。

ポイントをまとめますね。

◆「row（行）」と「col-●●-数字（列）」をセットで使う
◆「col-●●-数字」の「●●」部分はブレイクポイントの指定で「lg・md・sm・xs」のどれかが入る
◆「col-●●-数字」の「数字」は、カラム数の指定で、元々１２分割してある列をいくつごとにまとめて１カラムにするか、という考え方をする。

このような点を押さえておけば、レスポンシブなカラムを用いたページをさくさくと作ることができますね。

自前でこうしたCSSを一から書くと大変ですので、上手く活用できるようになると、ページ制作がとてもはかどりますよ。

Bootstrapのカラム分けは、指定を組み合わせるともっと複雑なことができるようになります。是非とっかかりの基礎編として、サンプルを作成してみてください。