【初心者向け】Bootstrapのグリッドシステムで思い通りのレイアウトを作るコツ

#はじめに
こんにちは！DMM WEBCAMP Advent Calendar 2021 22日目を担当させていただきます🎄🎅
DMMWEBCAMPメンターの@tone0623です！

皆さん、Bootstrapを正しく使えていますか？
BootstrapはCSSフレームワークで、簡単な記述でレスポンシブなWebデザインができる優れものです。

しかし、メンター業務を通して、

• お手本のページで検証ツール使えないんですけど、どうやってレイアウトを作ればいいですか？
• Bootstrapのドキュメントを読んだのですが、どこからデザインをすればいいかわかりません。
• クラス名の.container/.raw/.columnの使い方がいまいちわかりません。

など、Bootstrapの導入はしたものの、うまく使えない方が一定数いらっしゃる印象があります。

そこで、本記事ではBootstrapのグリッドシステムをうまく扱う方法や考え方をご紹介します。
本記事で基本の使い方をしっかり覚えて、自由自在にレイアウトやデザインを操れるようになりましょう✌️

#この記事を読んで欲しい人

• グリッドシステムの概要(.container/.raw/.column 等)は覚えたが、使い方がさっぱりな人
• とりあえず検証ツールを使ってコピペでCSS(Bootstrap)を書き上げている人

以上が当てはまる人はこの記事を読んでみましょう👍

#目次
　1.前提条件
　2.グリッドシステムの考え方
　3.実践
　4.おわりに

#1. 前提条件

• Bootstrapの導入
• CSSの基本的な理解
• グリッドシステムの基本的な理解(理解しているが使えない状態)

以上ができている前提でこの記事を書いています。

#2. グリッドシステムの考え方

Bootstrapは1番の特徴とも言える「グリッドシステム」があります。
(「グリッドシステムって何？」といった方は、検索すると解説が山ほど出てくるのでそちらを参照しましょう👀 )

Bootstrapの学習を進めていく中で、

• 画面を12分割する
• .container/.row/.columnの3クラスを使う

という大まかな概要は理解しているけど、実際にどのようにレイアウトを組めばいいのか分からん！！！
という方は多いかと思います。(学習はじめたての頃の私も同様でした。)

皆さんがグリッドシステムでレイアウトを作成するときに、最も意識して欲しいことは

「画面を切り分けて考える」ということです。

特にグリッドシステムでは「抽象 → 具体」に切り分けていきます。

具体的には

1. containerで全体を囲む
2. rowで行のまとまりを囲む
3. columnで列のまとまりを囲む
4. 2→3の繰り返し

と切り分けていきます。

例を挙げると、以下のレイアウトを作成したいと思った時は...

画面外側からcontainer → row →　column の順にこのように切り分けて考えます。
(便宜上、左上の灰色背景の文字は画面に反映しないものとして無視しています。)

　　

このレイアウトの枠をコードに落とし込むと...

 レイアウト

<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- ここにサイドバー -->
    </div>
    <div class="col-10">
      <!-- ここにメイン -->
    </div>
  <div>
</div>

のようになります。あとはそれぞれのdivタグの中に配置したいものを記述するだけです。
このように、画面外側から①container → ②row(横方向) → ③column(縦方向) → ② → ③ → ② → ... の順に
切り分けていくと、次第にどのようにコーディングすれば良いかが浮かびやすくなります👍

#3. 実践
前章では、**「レイアウトを切り分ける」**という考え方をご紹介しました。
切り分け方に関して、前章の1例だけだと物足りないと思うので、
「お手本レイアウトをどう切り分けてどうコーディングするか？」という問題を2つ用意しました。
実際に考えたり、コーディングしながら進めていきましょう！
※ 灰色背景の文字は画面に反映しないものとして無視して考えてOKです。(余力がある人は含めて考えてみましょう。)

1問目

解答

1. containerで全体を囲います。
2. 「日記」と「明日やること」と「食べたもの」をそれぞれrowで囲います。
3. 「明日やること」が3つに分かれているので、それぞれcolomnで囲います。

外側からcontainer → row →　columnの順に切り分けると以下のようになります。

この枠組みをコードにすると以下のようになります。

 レイアウト

<div class="container">
  <div class="row">
  　　<div class="col-12">
       <!-- ここに日記 -->
  　　</div>
  </div>
  <div class="row">
    <div class="col-4">
　　　　<!-- ここに明日やること1 -->
    </div>
    <div class="col-4">
      <!-- ここに明日やること2 -->
    </div>
    <div class="col-4">
      <!-- ここに明日やること3 -->
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <!-- ここに食べたもの -->
    </div>
  </div>
</div>

2問目

解答

1. container, row は特に区切る部分はないため、全体を囲います。
2. 「スケジュール」と「日記, 明日やること, 食べたもの」をそれぞれcolumnで分けます。
3. 「日記」と「明日やること」と「食べたもの」をそれぞれrowで囲います。
4. 「明日やること」が2つに分かれているので、それぞれcolomnで囲います。

外側からcontainer → row → column → row → column の順に切り分けた結果は以下のようになります。
(複雑になってきました...)

この枠組みをコードにすると以下のようになります。

 レイアウト

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- ここにスケジュール -->
    </div>
    <div class="col-8">
      <div class="row">
  　　   <div class="col-12">
           <!-- ここに日記 -->
  　　   </div>
      </div>
      <div class="row">
        <div class="col-4">
　　　　    <!-- ここに明日やること1 -->
        </div>
        <div class="col-4">
          <!-- ここに明日やること2 -->
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <!-- ここに食べたもの -->
  　    </div>
      </div>
    </div>
  </div>
</div>

#4. おわりに
いかがでしたでしょうか？
本記事ではBootstrapのグリッドシステムをうまく扱う方法や考え方をご紹介しました！
画面内をうまく切り分けて考える力を身につけると、グッとレイアウトを作る力が上がるかと思います👍

Bootstrapでのレイアウト作成に苦手意識を抱いていた方が、この記事を読んで少しでも理解が深まれば幸いです。