Bootsrtap

Bootstrap4|グリッドレイアウト基本

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

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

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

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

グリッドレイアウト全体を囲う.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”というのは、日本語で「行」という意味です。つまり、1つの「行」につき.rowというclass名の入った要素を1つ作っていきます。例えば、3行のグリッドレイアウトを作りたいときは、.rowというclass名の要素を3つ作ることになります。

HTML

<div class="container">
  <div class="row"><!-- 1行目 --></div>
  <div class="row"><!-- 2行目 --></div>
  <div class="row"><!-- 3行目 --></div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

prefix なし sm md lg xl
ブレイクポイント なし 576px~ 768px~ 992px~ 1200px~
col-列数 col-sm-列数 col-md-列数 col-lg-列数 col-xl-列数
説明 変化なし ブレイクポイントの幅を下回ると1列になる

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

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

HTML

<h1>4カラム・レイアウト</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以上のときは、4カラムが保持されますが、575px以下になるとそれぞれの列が100%表示になり4行に変化します。

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

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

グリッドレイアウト 6→3→1

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

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>

 

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

グリッドレイアウト 4→2→1

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で埋めるのではなく、例えば、1行に.col-4を1つだけ入れて中央寄せしたい場合など、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.

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

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

コンテンツに合わせて幅が可変する列要素.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などを入れてブレイクポイントを設けることができますので、ブレイクポイントを下回るとソースコードに記載された順番に戻ります。

class名 説明
order-{prefix}-番号 指定された番号順に配置
order-{prefix}-first 一番最初に配置(番号よりも優先)
order-{prefix}-last 一番最後に配置(番号よりも優先)

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

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

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

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

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

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

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP