🐥

【初学者】Bootstrapのレスポンシブ対応について

2023/11/23に公開

Bootstrap

初学者

DMM WEBCAMP

tech

初学者でBootstrapに抵抗を感じている方いると思います。（僕も同じです笑）よくわからないうえにレスポンシブ対応もしなければ、、、と悩む方もいると思いますが、Bootstrapのレスポンシブは慣れれば簡単です！ざっくり復習します！

Bootstrapとは

CSSのフレームワークになります。いくつかある特徴の中で今回は、グリッドシステムとレスポンシブ対応について書きます。

グリッドシステムとは

グリッドシステムとは、画面の横幅を12分割してレイアウトを組むシステムになります。
画面を12分割に定義することで、画面サイズが変わったとしてもブロック数で要素の幅を計算できるようになります。

3つのclass

グリッドシステムには3つのclassを使用してレイアウトを行います。

container
row
col

下図のようにcontainerの中にrowとcolがあり、rowはcontainerを水平に分割し、colは縦に分割し左から右へ並びます。

レスポンシブに対応させる方法

レスポンシブ対応においてBootstrapのGridは、画面サイズによって横並びにするかを設定できるところが便利なところになります。

書き方

まずは基本的なcolの書き方は下記になります

col-画面幅-グリッド数

ここの画面幅の部分を画面サイズによって指定することでレスポンシブを調整することができます。
画面幅の対応は以下の通りになります。

Extra small ／画面幅極小（544px未満）→ .col-
Small ／画面幅小（544px以上）→ .col-sm-
Medium ／画面幅中（768px以上）→ .col-md-
large ／画面幅大（992px以上）→ .col-lg-
Extra large ／画面幅特大（1200px以上）→ .col-xl-

使用例（横並びの場合）

下記の記述でカードを横並びにした場合

<div class="container">
  <div class="mt-5">
    <h1 class="logo text-white" style="font-family: Darumadrop One;">レビューいちらん</h1>
    <div class='row'>
    <% @reviews.each do |review| %>
    <div class="card col-md-5 m-3", style="background-color: #cee4ae;">
      <%= image_tag review.get_image %>
      <div class="card-body">
        <div class="list-group list-group-flush">
          <h5 class="list-group-item">タイトル：<%= review.title %></h5>
          <p class="list-group-item"><%= review.body.truncate(100) %></p>
          <h6 class="list-group-item">ユーザーネーム：　<%= review.user.name %></h6>
          <h6 class="list-group-item"><%= link_to "#{review.review_comments.count} コメント", review_path(review.id) %></h6>
          <h6 class="list-group-item mt-2"><%= link_to "詳細ページはこちら",review_path(review.id) %></h6>
        </div>
      </div>
    </div>  
    <% end %>
    </div>
    </div>
  </div>

上記の<div class="card col-md-5 m-3", style="background-color: #cee4ae;">の部分でcol-md-5を記述することで画面幅が768px以上の場合は下図のように並びます。

今回はcolにmdを指定しているためこのcolは768px以上の時しか適用されません。
768px以下のスマホサイズの画面幅になったときは横並びではなく縦に1枚ずつ表示されます。

まとめ

難しそうにみえるBootstrapですが、グリッドシステムの3つのclassの役割とcolの記述さえ理解してしまえばとても簡単にレイアウトを整えることができるようになります。
メンターさんの話ではBootstrapは実際の現場での使用率が少ない（似たようなレイアウトになりがちなため）とのことでしたので、個人的には部分的にBootstrapを使いつつ、CSSにも慣れていけるように学習していこうと思います。今回はさわり程度で！