Bootstrap5 グリッドシステム

この文書では、Bootstrap 5 の強力なグリッドシステムについて解説します。グリッドシステムは、ページレイアウトを構築し、さまざまな画面サイズに適応させるために使用されます。

1. グリッドコンテナ

グリッドコンテナは、グリッドシステムの基本であり、グリッド行を囲み、配置するために使用されます。

種類:

• .container: 固定幅コンテナ。ビューポートのサイズに応じて幅が調整されます。
• .container-fluid: 100%幅コンテナ。常にビューポート全体を占有します。

コード例:

<div class="container">
    <!-- グリッドの内容 -->
</div>

<div class="container-fluid">
    <!-- グリッドの内容 -->
</div>
        

2. グリッド行

グリッド行は、グリッド列を格納するために使用され、グリッドコンテナ内に配置する必要があります。

クラス名:

.row

作用:

• グリッド列を水平に配置します。
• グリッド列に水平方向の間隔を追加します。

コード例:

<div class="container">
    <div class="row">
        <!-- グリッド列の内容 -->
    </div>
</div>
        

3. グリッド列

グリッド列は、グリッドシステムの最小単位であり、コンテンツを配置するために使用されます。

クラス名:

.col-* (* は列幅を表し、1〜12 の範囲の値を取ります)

作用:

• 列幅を指定します。さまざまなクラス名を組み合わせて、さまざまなレイアウトを実現できます。
• ネストが可能です。1 つのグリッド列の中に、別のグリッド行と列をネストできます。

コード例:

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

4. レスポンシブグリッド

Bootstrap 5 グリッドシステムは、レスポンシブデザインをサポートしており、さまざまな画面サイズに応じてレイアウトを調整できます。

ブレークポイント:

クラス名:

.col-*-* (* はそれぞれブレークポイントと列幅を表します)

コード例:

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

5. 間隔と配置

Bootstrap 5 は、グリッド列間のスペースと配置方法を制御するためのクラス名を提供しています。

間隔クラス名:

• .g-* (すべての方向の間隔を制御します)
• .gx-* (水平方向の間隔を制御します)
• .gy-* (垂直方向の間隔を制御します)
• (* は間隔のサイズを表し、0〜5 の範囲の値を取ります)

配置クラス名:

• .justify-content-* (水平方向の配置)
• .align-items-* (垂直方向の配置)
• (* は配置方法を表し、start、center、end などがあります)

コード例:

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

関連情報

• Bootstrap 5 グリッドシステムの公式ドキュメント

よくある質問

Q1: グリッドシステムとは何ですか？

A1: グリッドシステムは、Webページのレイアウトを柔軟かつレスポンシブに作成するための構造です。Bootstrap のグリッドシステムは、行と列の概念を使用して、コンテンツを整理し、さまざまな画面サイズに合わせて調整します。

Q2: Bootstrap のグリッドシステムの利点は何ですか？

A2: Bootstrap のグリッドシステムを使用すると、以下のような利点があります。

• レスポンシブデザイン：さまざまな画面サイズに合わせたレイアウトを簡単に作成できます。
• 柔軟性：行と列を組み合わせて、多様なレイアウトを実現できます。
• 使いやすさ：シンプルなクラス名と構造により、簡単に習得して使用できます。

Q3: グリッドシステムをカスタマイズできますか？

A3: はい、Bootstrap のグリッドシステムは、Sass 変数やミックスインを使用してカスタマイズできます。列の数、gutter の幅、ブレークポイントなどを調整して、独自のニーズに合わせてグリッドシステムを変更できます。