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

★気に入ったらシェアをお願いします!


カラム設定-アイキャッチ

初心者向けBootstrapのご案内、連載6回目の記事です。
前回はBootstrapをカスタマイズする際に知っておくべきCSSの優先ルールについて触れました。

Bootstrapをカスタマイズしよう!CSS調整のコツはスタイルの優先順位だ!
BootstrapのCSSをカスタマイズする方法をジャンボトロンを例に解説。変更の為には避けて通れない、CSSの優先順位についても説明しています。
※(CSSの優先順位についてはさらに別記事で、もっと詳しく解説しています)

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

3カラムサンプル

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

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

縦積み1列

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

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

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

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

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

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

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

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

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

ブラウザを狭めると、3カラムから1カラム縦積みへ

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

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

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

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

各クラス指定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

★覚えておくポイント


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

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

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

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

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

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

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

3カラムサンプル

◆均等に2分割した例

6+6分割

◆不均等に2分割した例

8+4分割

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

合計12以上になるとカラム落ち発生

★覚えておくポイント


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

Bootstrapでカラム作成のまとめ

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

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

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

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

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

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

連載目次:初心者向け!Bootstrapで簡単レスポンシブサイト制作

  1. CSS初心者の強い味方!Bootstrapで簡単レスポンシブサイト制作
  2. CDNを利用して最速お手軽にBootstrap導入しよう!サンプル付き実践編
  3. Bootstrapで横幅いっぱいに画像を表示しよう!ジャンボトロン(jumbotron)の設置方法
  4. Bootstrapでコンテンツを中央寄せするcontainerの役割を覚えよう!
  5. Bootstrapをカスタマイズしよう!CSS調整のコツはスタイルの優先順位だ!
  6. Bootstrapでレスポンシブなカラム作成 ブレイクポイントとカラム数の指定方法をマスター
  7. 複雑なBootstrapカラムのコードはジェネレーターを使えば即マスター
  8. Bootstrapカラム間のマージン(余白)の仕組みをマスターする
  9. Bootstrapカラムのマージン(余白・ガター)を好きなサイズに調整するCSSの具体例

The following two tabs change content below.

くろゆき

九州の端っこでウェブ制作をしています。わりとなんでも屋さんです。「慣れない人にもやさしいIT」を信条にお仕事をさせてもらっています。Wordpressやbootstrap、CSS関連の記事をわかりやすく丁寧に書いていきたいです。