ここではBootstrap4を導入したあとで、知っておきたいグリッドレイアウトの基本的な仕組みについて見ていきます。Bootstrapってなんだか説明がややこしく意味が分からないと思っていませんか？ここでは、細かい説明はさておき、とりあえず使えるようになっていただけるよう、実践重視な内容で進めて参りたいと思います。

まだ、Bootstrap4の導入自体ができていない方は、はじめに下記の記事をご覧になってみてください。

2018.02.20

Bootstrap4の使い方（入門編）

ここでは、Bootstrapがどんなものであるのか概要をある程度、理解した方が実際にBootstrap4を導入する際の最初のステップについてお話していきます。Bootstrap4を使うには、ファイルを自分のサーバーにアップロードするかBootstrapのCDN...

グリッドレイアウトの導入

まずは、グリットレイアウトを導入するために必要な要素を組み立てていきます。

グリッドレイアウト全体を囲う.containerと.container-fluid

まず、グリッドレイアウトを組み立てるためには、最初に.containerもしくは、.container-fluidというclass名で全体がラップされている必要があります。

.containerは、max-widthが1140pxのボックスで、.container-fluidは常にwidthが100%になっているボックスです。ここら辺の違いは今は重要ではないので、とりあえずここでは.containerで親要素divを作ってみましょう。

HTML

<div class="container">
  <!-- この中にグリッドレイアウトを入れていきます。 -->
</div>

当たり前ですが、まだ、これだけでは何も変化はありません。

グリッドの「行」を構成する.row

次は、.containerの子要素として.rowというclass名のdivを入れます。”row”というのは、日本語で「行」という意味です。つまり、１つの「行」につき.rowというclass名の入った要素を１つ作っていきます。例えば、３行のグリッドレイアウトを作りたいときは、.rowというclass名の要素を３つ作ることになります。

HTML

<div class="container">
  <div class="row"><!-- １行目 --></div>
  <div class="row"><!-- ２行目 --></div>
  <div class="row"><!-- ３行目 --></div>
</div>

まだ、これだけでは見た目に変化はありません。

行の中に入る列要素.col-列数

はい、ここからがグリッドレイアウトらしい内容になってきます。まず、Bootstrapのグリッドレイアウトは、末尾に1～12の数字の付いたcol-列数というclass名の入った列要素を使います。列要素は複数入れることができるのですが、１つの行に収まる列数の合計は12までです。

実際に見ていただいた方が分かりやすいと思うので下記をご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen Bootstrap4_2col by kenichi (@ken81) on CodePen.

HTML

<div class="container">
  <div class="row">
    <div class="col-2">col-2</div><div class="col-10">col-10</div>
  </div>
  <div class="row">
    <div class="col-3">col-3</div><div class="col-9">col-9</div>
  </div>
  <div class="row">
    <div class="col-4">col-4</div><div class="col-8">col-8</div>
  </div>
  <div class="row">
    <div class="col-5">col-5</div><div class="col-7">col-7</div>
  </div>
  <div class="row">
    <div class="col-6">col-6</div><div class="col-6">col-6</div>
  </div>
</div>

上記は、分かりやすいように少しデザイン（背景色と線）を入れてあります。２カラムのレイアウトが６行ありますね。各ブロックの中には、その要素に入れたclass名が入っています。

注目していただきたいのは、１つの行の.col-列数の数字の合計が12になっている点です。これは、行全体を12等分したときの１つの列幅をcol-1としてcol-1～col-12までのそれぞれの幅の要素が全部で12になるように入っているのです。

合計が12になれば、２カラムでなくてももちろん大丈夫です。３カラム、４カラムでも見てみましょう、

See the Pen Bootstrap4_3col by kenichi (@ken81) on CodePen.

See the Pen Bootstrap4_4col by kenichi (@ken81) on CodePen.

１つの行の合計が12になっているのをご確認いただけましたでしょうか。

列要素をレスポンシブ化させる接頭辞「prefix」

今までの説明で、グリッドレイアウトの行と列の仕組みは分かっていただけたと思いますので、次にレスポンシブ対応の方法について見ていきます。先ほどのcol-1～col-12のclass名は、ブラウザの幅に関わらず、一定のカラム数を保持するものでしたが、colと列数の間にprefixを入れることで、prefixごとのブレイクポイントが設定できます。

ちょっと分かりにくいと思いますので、下記の表をご覧ください。

prefixというのは接頭辞という意味です。列要素のclass名に、それぞれprefixが入った.col-sm-列数、.col-md-列数、.col-lg-列数、.col-xl-列数があります。そして、これらのclass名の違いによってブレイクポイントが決められています。

ブレイクポイントよりもブラウザの幅が大きい場合は指定したカラム数が保持されますが、ブレイクポイントよりも幅が狭くなったときは、列要素がすべて１列になる仕組みです。これでレスポンシブ対応させることができるというわけです。１つだけ例を見てみましょう。

HTML

<h1>４カラム・レイアウト</h1>
<div class="container">
  <div class="row">
    <div class="col-sm-2">col-sm-2</div>
    <div class="col-sm-2">col-sm-2</div>
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

.col-sm-列数は、576pxがブレイクポイントになっています。ブラウザの幅が576px以上のときは、４カラムが保持されますが、575px以下になるとそれぞれの列が100%表示になり４行に変化します。

１つの要素に複数のcol-系class名を入れる

グリッドレイアウトはいろんな応用がありますので、そのひとつとして列要素の中に複数のcol-系class名を入れる方法を見てみましょう。この方法を使うと列数を多段的に変化させることができます。百聞は一見にしかずなので、下記のリンク先からデモページのブラウザサイズを変えて見てみてください。

グリッドレイアウト ６→３→１

ここで注目していただきたいのは、実は列数は12に収めないといけないわけではないという点です。下記のように１行に.col-sm-4が６つで24列分（つまり２行分）にすることもできます（というか、そもそも「こうしないといけない」みたいなルールはありません）。

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
    <div class="col-md-2 col-sm-4">.col-md-2 .col-sm-4</div>
  </div>
</div>

下記は、「４列→２列→１列」に変化するグリッドレイアウトです。

グリッドレイアウト ４→２→１

HTML

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
    <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
    <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
    <div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
  </div>
</div>

列数が12に満たない場合のレイアウト方法

デザインによっては、必ずしも列数を12で埋めるのではなく、例えば、１行に.col-4を１つだけ入れて中央寄せしたい場合など、12に満たない列数を入れたい場合もあると思います。そんなときは、無駄に空の列要素を入れる必要はありません。ちゃんと余白を指定するclass名が用意されています。

それが下記のclass名です。
offset-{prefix}-列数

prefixのところには、smやmdなどを入れて、列数のところには左に入れたい余白分の列数を数字で入れます。prefixの考え方は.col-のときと同じです。

See the Pen Bootstrap4_-offset by kenichi (@ken81) on CodePen.

HTML

<div class="container">
  <div class="row">
    <div class="col-2 offset-5">.col-2</div>
  </div>
  <div class="row">
    <div class="col-4 offset-4">.col-4 .offset-4</div>
  </div>
  <div class="row">
    <div class="col-6 offset-3">.col-6 .offset-3</div>
  </div>
  <div class="row">
    <div class="col-8 offset-2">.col-8 .offset-2</div>
  </div>
  <div class="row">
    <div class="col-10 offset-1">.col-10 .offset-1</div>
  </div>
</div>

カラム数を指定しない列要素.col-{prefix}

デザインによっては、列数を指定せずに、親要素いっぱいに広がるような要素を作りたい場合もあります。そんなときは、.col-{prefix}というclass名を入れます。

See the Pen col by kenichi (@ken81) on CodePen.

１つの行（.row）の中に.col-{prefix}が複数ある場合、それぞれが均等な幅で配置されます。このようにすると、12等分に限定されない幅の指定が可能になります。上記の場合、黄色い要素.colが4.5列分、3.5列分、2.5列分、2.4列分の幅で配置されています。

.col-smといった形でprefixも使えますのでブレイクポイントで１カラムに変更させることもできます。

コンテンツに合わせて幅が可変する列要素.col-{prefix}-auto

先ほどの.col-{prefix}は、列幅が親要素いっぱいに広がるような動きになりましたが、コンテンツの幅に応じて列要素の幅を自動で設定したいというときは、.col-{prefix}-autoというclass名を使います。

See the Pen col-auto by kenichi (@ken81) on CodePen.

このように.col-{prefix}-autoを指定するとテキストの幅に合わせて要素の幅が決まります。

col-系要素の順番の指定

col-系要素に追加で下記のclass名を入れることで、要素が表示される順番を指定することができます。これはソースコードが書かれた順番を無視して、指定された順番に要素を配置できます。これもprefixのところに、smやmdなどを入れてブレイクポイントを設けることができますので、ブレイクポイントを下回るとソースコードに記載された順番に戻ります。

番号のところには0～12までの数値を入れます。

最後に、グリッドレイアウトがカクカクと変化するのが嫌な方へ

.containerで全体をラップしたときのグリッドレイアウトって、ブラウザが.container要素に着きそうになると、カク、カクって変化しますよね。

私、これあまり好きじゃないんですよね。そういうときは、.container-fluidでラップしましょう。.container-fluidでグリッドレイアウトを組むと、100%表示になってしまいますが、適当にmax-widthを入れるといい感じになりますよ。

下記は、.containerではなく、.container-fluidを使ってmax-width:1140px;を指定した例です。

以上が、Bootstrap4のグリッドレイアウトのお話でした。みなさんのお役に立てますように。

2018.07.08

Bootstrap4で使える汎用クラス一覧

汎用クラスというのは、１つのclass名に１つのプロパティが定義されたようなclassのことです。例えば、よく使われる汎用クラスはこんな感じのものです。 [css] .text-center{ text-align: center; } [...