Bootstrap4 グリッドシステム

この記事では、Bootstrap4 グリッドシステムの基本的な概念と使用方法を紹介します。これにより、開発者は Bootstrap4 を使用した Web ページレイアウトをすばやく習得できます。

1. グリッドシステムの概要

Bootstrap グリッドシステムは、12 列の流体グリッドレイアウトに基づいています。レスポンシブな Web デザインを容易にするために、さまざまな画面サイズに合わせて調整されます。

Bootstrap グリッドシステムには、4つの主要なクラスがあります。

コンテナは、グリッドシステムのコンテンツを囲むために使用されます。2種類のコンテナタイプがあります。

• .container：固定幅のコンテナ
• .container-fluid：画面幅いっぱいに広がるコンテナ

2. 最初のグリッドシステムを作成する

簡単な2列レイアウトを作成する方法の例を以下に示します。

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>左側の列</p>
    </div>
    <div class="col-sm-6">
      <p>右側の列</p>
    </div>
  </div>
</div>

.rowクラスは行を作成し、.col-*-*クラスは列を作成します。.col-sm-6は、小画面以上の画面で4列分の幅を占めることを意味します。

3. 列のネスト

既存の列の中に新しい行と列をネストして、より複雑なレイアウトを実現できます。

3列レイアウトを作成し、そのうちの1列に2つの列をネストする方法の例を以下に示します。

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <p>左側の列</p>
    </div>
    <div class="col-sm-8">
      <div class="row">
        <div class="col-sm-6">
          <p>右上の列</p>
        </div>
        <div class="col-sm-6">
          <p>右下の列</p>
        </div>
      </div>
    </div>
  </div>
</div>

4. 列のオフセット

.offset-*クラスを使用して列のオフセットを実現し、列の水平位置を調整できます。

列を右に4列分の幅だけオフセットする方法の例を以下に示します。

<div class="container">
  <div class="row">
    <div class="col-sm-4 offset-sm-4">
      <p>中央揃えの列</p>
    </div>
  </div>
</div>

5. 列の順序

.order-*クラスを使用して、列の表示順序を調整できます。

2番目の列を1番目の列の前に表示する方法の例を以下に示します。

<div class="container">
  <div class="row">
    <div class="col-sm-6 order-2">
      <p>2番目の列</p>
    </div>
    <div class="col-sm-6 order-1">
      <p>1番目の列</p>
    </div>
  </div>
</div>

6. 配置

.justify-content-*クラスを使用して、行の水平方向の配置を設定できます。

.align-items-*クラスを使用して、列の垂直方向の配置を設定できます。

さまざまな水平方向と垂直方向の配置効果を実現する方法の例を以下に示します。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-4">
      <p>中央揃えの列</p>
    </div>
  </div>

  <div class="row align-items-center" style="height: 100px;">
    <div class="col-sm-4">
      <p>垂直方向に中央揃えされた列</p>
    </div>
  </div>
</div>

まとめ

この記事では、Bootstrap4 グリッドシステムの基本的な概念と使用方法、グリッドシステムの概要、最初のグリッドシステムの作成、列のネスト、列のオフセット、列の順序、配置などを詳しく説明しました。この記事を読むことで、読者は Bootstrap4 グリッドシステムを使用した Web ページレイアウトの基本的なスキルを習得できます。

Bootstrap4 グリッドシステムに関するQ&A

Q1: Bootstrap4 グリッドシステムの最大列数は？

A1: Bootstrap4 グリッドシステムは12列システムです。

Q2: 異なる画面サイズに異なるレイアウトを設定するにはどうすればよいですか？

A2: .col-*-*クラスを使用して、異なる画面サイズに異なる列幅を指定できます。たとえば、.col-sm-6 .col-md-4は、小画面では6列分の幅を占め、中画面では4列分の幅を占めます。

Q3: Bootstrap4 グリッドシステムに関する追加情報はどこで入手できますか？

A3: Bootstrap 公式ドキュメントのグリッドシステムのセクションを参照してください。 https://getbootstrap.jp/docs/4.1/layout/grid/