Bootstrap5 グリッドシステム
Bootstrap は、レスポンシブでモバイルファーストのフルードグリッドシステムを提供します。画面またはビューポート(viewport)のサイズが大きくなるにつれて、システムは自動的に最大 12 列に分割されます。
必要に応じて列数を定義することもできます:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 5 のグリッドシステムはレスポンシブで、列は画面サイズに応じて自動的に再配置されます。
各行の列の合計が 12 以下になるようにしてください。
グリッドクラス
Bootstrap 5 のグリッドシステムには次の 6 つのクラスがあります:
- .col- すべてのデバイス向け。
- .col-sm- タブレット - 画面幅が 576px 以上。
- .col-md- デスクトップディスプレイ - 画面幅が 768px 以上。
- .col-lg- 大型デスクトップディスプレイ - 画面幅が 992px 以上。
- .col-xl- 特大デスクトップディスプレイ - 画面幅が 1200px 以上。
- .col-xxl- 超大型デスクトップディスプレイ - 画面幅が 1400px 以上。
グリッドシステムのルール
Bootstrap5 グリッドシステムのルール:
- グリッドの各行は、次のクラスが設定された
.container(固定幅) または.container-fluid(全画面幅) クラスのコンテナ内に配置する必要があります。これにより、margin と padding が自動的に設定されます。 - 行を使用して水平方向の列グループを作成します。
- コンテンツは列内に配置する必要があり、行の直接の子要素にできるのは列のみです。
- 事前定義されたクラス(例:.rowと.col-sm-4)を使用すると、グリッドレイアウトをすばやく作成できます。
- 列はパディングによって列コンテンツ間のギャップを作成します。このギャップは、.rowsクラスの負のマージンによって、最初の行と最後の列のオフセットが設定されます。
- グリッド列は、指定された 12 個の列にまたがって作成されます。例えば、3 つの等しい列を設定するには、3 つの.col-sm-4を使用して設定します。
- Bootstrap 5 と Bootstrap 4 は、フロートではなく flexbox(フレックスボックス)を使用します。 Flexbox の大きな利点は、幅が指定されていないグリッド列が自動的に等幅で等しい高さの列になることです。Flexbox の詳細については、当サイトのCSS Flexbox チュートリアル 。
次の表は、Bootstrap グリッドシステムがさまざまなデバイスでどのように動作するかをまとめたものです:
| 超小型デバイス <576px |
タブレット ≥576px |
デスクトップディスプレイ ≥768px |
大型デスクトップディスプレイ ≥992px |
特大デスクトップディスプレイ ≥1200px |
超大型デスクトップディスプレイ ≥1400px |
|
|---|---|---|---|---|---|---|
| コンテナの最大幅 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| クラスのプレフィックス | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 列数と | 12 | |||||
| ギャップ幅 | 1.5rem (各列の両側それぞれ .75rem) | |||||
| ネスト可能 | Yes | |||||
| 列の並べ替え | Yes | |||||
上記のクラスを組み合わせて使用すると、より柔軟なページレイアウトを作成できます。
ヒント:各クラスの階層は比例して拡大されます。つまり、sm と md に同じ幅を設定する予定がある場合は、sm を指定するだけで済みます。
Bootstrap 5 グリッドの基本構造
次のコードは Bootstrap 5 グリッドの基本構造です:
Bootstrap5 グリッド基本構造
最初の例: 1 行(<div class="row">)を作成します。次に、必要な列を追加します(.col-*-*クラスで設定します)。最初のアスタリスク(*)はレスポンシブデバイス(sm、md、lg、xl)を表し、2 番目のアスタリスク(*)は数値を表します。同じ行の数値の合計は 12 になります。
2 番目の例: 各colに数値を追加せず、Bootstrap にレイアウトを自動処理させます。同じ行の各列の幅は等しくなります: 2 つの"col"の場合、それぞれの幅は 50% になります。3 つの"col"の場合、それぞれの幅は 33.33% になります。4 つの"col"の場合、それぞれの幅は 25% になります。同様に、.col-sm|md|lg|xlを使用して列のレスポンシブルールを設定できます。
次に、実際の例を見てみましょう。
等幅の列を作成、Bootstrap 自動レイアウト
例
試してみる »
等幅レスポンシブ列
次の例は、タブレットおよびそれ以上の画面で等幅のレスポンシブ列を作成する方法を示しています。モバイルデバイス(画面幅が 576px 未満)では、4 つの列が上下に積み重なって表示されます。:
例
試してみる »
不等幅レスポンシブ列
次の例は、タブレットおよびそれ以上の画面で不等幅のレスポンシブ列を作成する方法を示しています。モバイルデバイス(画面幅が 576px 未満)では、2 つの列が上下に積み重なって表示されます。:
例
試してみる »
特定の列の幅を設定
1 つの列の幅だけを設定すると、他の列が残りの幅を自動的に均等に分割します。次の例では、列の幅は 25%、50%、25% です:
例
試してみる »
タブレットとデスクトップ
次の例では、デスクトップデバイスのディスプレイでは 2 つの列の幅がそれぞれ 50% になり、タブレットでは左の列が 25%、右の列が 75% になり、携帯電話などの小型デバイスでは積み重ねて表示されます。
例
試してみる »
タブレット、デスクトップ、大型デスクトップディスプレイ、超大型デスクトップディスプレイ
次の例では、タブレット、デスクトップ、大型デスクトップディスプレイ、超大型デスクトップディスプレイでの幅の比率はそれぞれ 25%/75%、50%/50%、33.33%/66.67%、16.67/83.33% で、携帯電話などの小型デバイスでは積み重ねて表示されます。
例
試してみる »
ネストした列
次の例では、2 列レイアウトを作成し、そのうちの 1 列の中にさらに 2 列をネストしています:
例
試してみる »
オフセット列
オフセット列は、offset-*-*クラスを使用して設定します。最初のアスタリスク(*)はsm、md、lg、xlで、画面のデバイスタイプを表します。2 番目のアスタリスク(*)は1 到 11の数値です。
大画面ディスプレイでオフセットを使用するには、.offset-md-*クラスを使用します。これらのクラスは、列の左マージン(margin)を*列分増やします。ここで*の範囲は1 到 11。
例: .offset-md-4 は .col-md-4 を右に 4 列分移動します。
例
試してみる »