Bootstrap5 グリッドシステム

Bootstrap5のグリッドシステム（Grid system）は、ウェブページのレイアウト作成をより簡単で効率的にするための強力なツールです。

この記事では、グリッドシステムの基本から応用まで、詳しく解説します。

Bootstrap5のグリッドシステムとは？

Bootstrapのグリッドシステムは、flexboxに基づいて構築されており、ウェブページのレイアウトを制御するためのCSSフレームワークの中核的な部分です。

ウェブページを行（Rows）と列（Columns）で構成することで、柔軟にレイアウトを設計することが可能になります。これにより、レスポンシブデザインが容易に実現できます。

このシステムは、レスポンシブレイアウトを簡単に作成できるさまざまなクラスを含んでいます。.col-, .col-sm-, .col-md-, .col-lg-, .col-xl-および.col-xxl-は、Bootstrap 5のクラスであり、異なる画面サイズでの列の幅を設定するために使用されます。

これらのクラスは次のように機能します。

• .col-: 非常に小さい画面（576px未満）用で、携帯電話など。
• .col-sm-: 小さい画面（≥576px）用。
• .col-md-: 中画面（≥768px）用で、タブレットなど。
• .col-lg-: 大きい画面（≥992px）用で、小型ノートパソコンなど。
• .col-xl-: 非常に大きい画面（≥1200px）用で、デスクトップモニターなど。
• .col-xxl-: 超大画面（≥1400px）用。

グリッドシステムの基本概念

Bootstrap5のグリッドシステムは、以下の3つの基本要素で構成されています。

• Containers: グリッドシステムの最も基本的なラッパーで、行と列を包み込む要素です。
• Rows: 水平な行を作るためのラッパーです。1つ以上の列（Columns）を含むことができます。
• Columns: 行内に配置される縦の列です。ブラウザビューポートの幅に応じて自動的にサイズ調整されます。

これらの要素は、HTMLマークアップにおいて特定のクラス名を持つdiv要素として表現されます。

行ごとに12のテンプレート列を使用できるため、任意の数の列にまたがる要素のさまざまな組み合わせを作成できます。 

実例: Bootstrap5のグリッドシステムを使ったレイアウト作成

では、Bootstrap5のグリッドシステムを使って実際にレイアウトを作成してみましょう。

同等幅の列を作成する（Bootstrap自動レイアウト）

Bootstrap5では、特定の数値を指定せずに.colクラスを使用すると、等幅の列が作成されます。これらの列は、自動的に行内の利用可能なスペースを等分に割ります。

以下の例では、2つの列を持つ基本的なレイアウトを作成します。

<div class="container">
  <div class="row">
    <div class="col">列1</div>
    <div class="col">列2</div>
  </div>
</div>

三つなら、33.3%です。

<div class="container">
  <div class="row">
    <div class="col">列1</div>
    <div class="col">列2</div>
    <div class="col">列3</div>
  </div>
</div>

等幅のレスポンシブ列

あるブレークポイントでのみ等幅を適用したい場合は、.col-{breakpoint}クラスを使用します。

<div class="container">
  <div class="row">
    <div class="col-sm">列1</div>
    <div class="col-sm">列2</div>
    <div class="col-sm">列3</div>
  </div>
</div>

不等幅のレスポンシブ列

列に異なる幅を適用するには、.col-{breakpoint}-{number}クラスを使用します。

<div class="container">
  <div class="row">
    <div class="col-md-3">列1</div>
    <div class="col-md-6">列2</div>
    <div class="col-md-3">列3</div>
  </div>
</div>

このコードでは、mdブレークポイント以上の画面幅では、列1と列3の幅は25%、列2の幅は50%となります。

特定の列の幅を設定

特定の列の幅を設定するには、.col-{breakpoint}-{number}クラスを使用します。

<div class="container">
  <div class="row">
    <div class="col-6">列1</div>
    <div class="col">列2</div>
    <div class="col">列3</div>
  </div>
</div>

このコードでは、列1の幅は50%となり、列2と列3は25%で、つまり等幅で行の残りのスペースを等分に割ります。

応用例

次の例、中画面とそれ以上のサイズで2列に表示し、小さい画面では1列に表示するレイアウトを作成したい場合、次のコードを使用できます。

<div class="container">
    <div class="row">
        <div class="col-md-6 col-12">コンテンツ 1</div>
        <div class="col-md-6 col-12">コンテンツ 2</div>
    </div>
</div>

この例では：

• 中画面（≥768px）およびそれ以上では、各divは6つのグリッド列を占めるため、1行に2つのdivを配置できます（合計12のグリッド列）。
• 中画面より小さい画面サイズでは、各divは12のグリッド列を占めるため、1行に1つのdivしか配置できません。

タグのclassに多くのクラスを同時に書く必要は必ずしもありません。通常、デザインの要件に基づいて適切なクラスを選択するだけです。ただし、異なる画面サイズに対して異なるレイアウトを設定する必要がある場合は、複数のクラスを同時に使用すると便利です。

ネスト

Bootstrapでは行（row）や列（col）をネスト（入れ子に）することができます。ネストは、複雑なレイアウトを作成するための強力な手段です。

以下にネストの一例を示します。

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6">ネストした列1</div>
        <div class="col-6">ネストした列2</div>
      </div>
    </div>
    <div class="col-6">列2</div>
  </div>
</div>

この例では、最初の列（col-6）内に新しい行（row）を作成し、その行内に2つの列（それぞれcol-6）をネストしています。これにより、ページの一部に更に細かいグリッドレイアウトを適用することが可能になります。