【Bootstrap】レスポンシブWebデザインに対応する「グリッドシステム」の使い方

Bootstrapのグリッドシステム

• Bootstrap側がメディアクエリを用意

• HTMLタグにクラスをつけるだけでレスポンシブデザイン化

• 使うためには決まった書き方がある

今回は初歩の初歩ということで、下記のGIFのような構造を作りました。それを解説します。

環境

• macOS Catalina 10.15.6

• Bootstrap 4.3.1

• Rails 6.0.3.4

今回のコード

先に、今回実装したコードを示します。見慣れないと難しいですが、１つずつ解説していきますので安心してください。

index.html.erb

<%# 必要部分のみを抜粋 %>

<div class="container">
  <h2>< 576px で縦並び</h2>
  <h2>≧ 576px で幅半分</h2>
  <div class="row">
    <div class="col-sm-6">col-sm-6</div>
    <div class="col-sm-6">col-sm-6</div>
  </div>
  <h2>< 768px で縦並び</h2>
  <h2>≧ 768px で幅比1:3:2</h2>
  <div class="row">
    <div class="col-md-2">col-sm-2</div>
    <div class="col-md-6">col-sm-6</div>
    <div class="col-md-4">col-sm-4</div>
  </div>
</div>

書き方の基本

1. テーブルを意識した入れ子構造

グリッドシステムは「横幅の大きさに依存して変化するテーブル」の構造をとっています。

基本的にはHTMLを用いてこのように表現します。

index.html

<div class="container"> # テーブルの外枠
  <div class="row"> # テーブルの行
    <div class="col"> # テーブルの列
    </div>
  </div>
</div>

container > row > col の入れ子構造です。
もし行を増やしたい場合は…

index.html

<div class="container"> # テーブルの外枠
  <div class="row"> # テーブルの行 : 1
    <div class="col"> # テーブルの列 : 1-1
    </div>
  </div>
  <div class="row"> # テーブルの行 : 2
    <div class="col"> # テーブルの列 : 2-1
    </div>
  </div>
</div>

列を増やしたい場合は…

inde.html

<div class="container"> # テーブルの外枠
  <div class="row"> # テーブルの行 : 1
    <div class="col"> # テーブルの列 : 1-1
    </div>
    <div class="col"> # テーブルの列 : 1-2
    </div>
    <div class="col"> # テーブルの列 : 1-3
    </div>
  </div>
  <div class="row"> # テーブルの行 : 2
    <div class="col"> # テーブルの列 : 2-1
    </div>
    <div class="col"> # テーブルの列 : 2-2
    </div>
  </div>
</div>

このように書きます。

2. 列をレスポンシブ対応

さて、ここからレスポンシブ化していきます。といってもやることは簡単です。

今回は「ある横幅までは横並び。そこを越えて小さくなると縦並び」を表現します。

この場合の基本構文はこちらのとおりです。

col-[横幅の条件]-(12分のいくつ)

1つずつ見ていきましょう。

横幅の条件

これはブレークポイントに相当します。
Bootstrapの公式サイトには次のようにまとめられています。

• sm : 576px, smartphone
• md : 768px, medium
• lg : 992px, large
• xl : 1200px, Extra Large

よって、例えばcol-smを付与すると「576px未満で縦並び」という意味になります。

12分のいくつ

次に各要素の横幅の設定です。
これは以下のルールで決まります。

• rowの横幅を12とする
• 12に対する割合をcolに指定する

よって、例えばcol-sm-6を付与すると「576px未満で縦並び。576px以上では親要素の半分の幅」という意味になります。

以上がグリッドシステムの基本です。
これを踏まえて最初のコードを見てみましょう。

最初のコードを紐解く

今回はこのようなコードを書きました。

index.html.erb

<%# 必要部分のみを抜粋 %>

<div class="container">
  <h2>< 576px で縦並び</h2>
  <h2>≧ 576px で幅半分</h2>
  <div class="row">
    <div class="col-sm-6">col-sm-6</div>
    <div class="col-sm-6">col-sm-6</div>
  </div>
  <h2>< 768px で縦並び</h2>
  <h2>≧ 768px で幅比1:3:2</h2>
  <div class="row">
    <div class="col-md-2">col-sm-2</div>
    <div class="col-md-6">col-sm-6</div>
    <div class="col-md-4">col-sm-4</div>
  </div>
</div>

h2要素に各div要素の意味を記載しましたが、その意味がわかったことと思います。
このコーディングにより下記のようなデザインが完成しました。

まとめ

• Bootstrapが用意したメディアクエリを用いることでレスポンシブ対応が可能となる

• 列要素にsmを付与すると横幅576px前後でレイアウトが変化する

• row要素の幅を12としてブレークポイントまでの列要素の横幅を決定する

正直むずかしそうと敬遠していたグリッドシステムですが、基本はものすごくシンプルでした。

さっそくオリジナルアプリに組み込んでみます！

おまけ

本文ではコードの一部を省きました。こちらでは生のコードを添付します。ご参考まで(下で少し解説しています)。

index.html.erb

<div class="container" style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;">
  <h2>< 576px で縦並び</h2>
  <h2>≧ 576px で幅半分</h2>
  <div class="row pb-5">
    <div class="col-sm-6 btn btn-danger">col-sm-6</div>
    <div class="col-sm-6 btn btn-secondary">col-sm-6</div>
  </div>
  <h2>< 768px で縦並び</h2>
  <h2>≧ 768px で幅比1:3:2</h2>
  <div class="row pb-5">
    <div class="col-md-2 btn btn-danger">col-sm-2</div>
    <div class="col-md-6 btn btn-secondary">col-sm-6</div>
    <div class="col-md-4 btn btn-primary">col-sm-4</div>
  </div>
</div>

【padding】

• pb-○ : padding-bottom

【ボタン】

• btn : ボタン化
• btn-primary : 青ベースのボタン化
• btn-secondary : 灰色ベースのボタン化
• btn-danger : 赤ベースのボタン化