BootStrapの使用方法②　グリッドシステムについて

Bootstrap

Posted at 2024-11-20

本記事ではBootStrapのグリッドシステムについてまとめていきます。

グリッドシステム
…レイアウトを格子状にして配置するデザイン方法。コンテナ・行・列を使用して要素を整列させます。
　画面サイズが異なるデバイスでも柔軟に表示が可能です。
　列数は１２を基準とし、列の幅の数字は一列で１２となるように設定する。

この最後の行の説明については、コーディングしながら確認していきましょう。

bodyタグ内に下記のソースコードを差し込みます。

<div class="container">
      <div class="row">
        <div class="col">test1</div>
        <div class="col">test2</div>
        <div class="col">test3</div>
      </div>
    </div>

ソースコード全体としては下記のようになります。

gridsystem.html

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GridSystemについて</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <style>
        .col {
          background-color: coral;
          border: black 1px solid;
        }
      </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col">test1</div>
        <div class="col">test2</div>
        <div class="col">test3</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"></script>
  </body>

</html>

画面はこのようになります。
コンテナ内が三等分されているのが分かります。
「col」をクラスに設定することで、親要素を３等分するようにdivを配置することができます。

最初、「列数は１２を基準とし、列の幅の数字は一列で１２となるように設定する。」と述べましたが
改めてこちらについて説明します。
bodyタグの中身をこちらに入れ替えて画面を確認します。

    <div class="container">
      <div class="row">
        <div class="col-1">1</div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
      </div>
      <div class="row">
        <div class="col-2">2</div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
      </div>
      <div class="row">
        <div class="col-3">3</div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
      </div>
      <div class="row">
        <div class="col-4">4</div>
        <div class="col-4"></div>
        <div class="col-4"></div>
      </div>
      <div class="row">
        <div class="col-6">6</div>
        <div class="col-6"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"></script>
  </body>

画面は下記のように表示されます。
このように、親要素のコンテナ（container）を均等に分けて配置することができます。

ゆえにクラス「col-」の数字部分が合計12になるように設定する必要があります。

グリッドオプション
…異なるデバイスや画面サイズに対応するための設定のこと。

ブレークポイント
Extra small (xs): <576px
Small (sm): ≥576px
Medium (md): ≥768px
Large (lg): ≥992px
Extra large (xl): ≥1200px
Extra extra large (xxl): ≥1400px

上記のブレークポイントを使用することで様々なデバイス（PC、スマホ、タブレット）に対して適切なレイアウトを提供できます。

今回の例では「Medium」「Large」の画面サイズでレイアウトを設定してみます。

gridsystem.html

    <div class="container">
      <div class="row">
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
      </div>
    </div>

画面サイズが992px以下（lg）である場合は、下記のように1つの要素が１行で配置されるようになり、

画面サイズが768px以下（md）である場合は、下記のように３行で配置されるようになります。

このように画面サイズによってレイアウトの変更ができるため、様々なデバイスでの画面表示が容易になります。

ネスト
…BootStrapのグリッドシステムにおいて、要素のレイアウトを設定する際に
ネスト（入れ子型）の構造にすることができます。

分かりづらいかもしれませんが、
まずcol-lg-8クラスの要素と、col-lg-4クラスの要素を作成し
col-lg-8クラスの要素内に row、col-lg-3、col-lg-9の要素を作成します。
（※この部分が入れ子構造になっています。）

    <div class="container">
      <div class="row">
        <div class="col-lg-8">test
          <div class="row">
            <div class="col-lg-3">test-sub</div>
            <div class="col-lg-9">test-sub</div>
          </div>
        </div>
        <div class="col-lg-4">test
        </div>
      </div>
    </div>

画面で確認するとこのようになります。
12分の8、12分の４でまず分けられており、
12分の8部分の要素がネストされているのでその要素が
12分の3と12分の9に分けられているといった構造になります。

このようにネストを用いることでイレギュラーなレイアウトにも対応することができます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

BootStrapの使用方法② グリッドシステムについて

BootStrapの使用方法②　グリッドシステムについて