Bootstrap グリッドシステム 解説

Bootstrapのグリッドシステムにおけるcol-lg-*, col-md-*, col-sm-*の違い

Bootstrapのグリッドシステムは、レスポンシブデザインを実現するための重要な要素です。その中で、col-lg-*, col-md-*, col-sm-*というクラスは、デバイスの画面サイズに応じてカラムの幅を調整する役割を果たします。

各クラスの役割

• col-sm-*
  Smallデバイス（通常は768px以上）でのカラム幅を指定します。

使用方法

これらのクラスは、コンテナ（containerまたはcontainer-fluid）内の要素に適用されます。例えば、3つのカラムを均等に配置したい場合、以下のようにコードを書きます。

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">カラム1</div>
    <div class="col-lg-4 col-md-6 col-sm-12">カラム2</div>
    <div class="col-lg-4 col-md-12 col-sm-12">カラム3</div>
  </div>
</div>

この例では、Largeデバイスでは3つのカラムが均等に配置され、Mediumデバイスではカラム1と2が同じ幅で、カラム3が全幅になります。Smallデバイスでは、3つのカラムがそれぞれ全幅になります。

重要なポイント

• col-xs-*というクラスも存在しますが、Bootstrap 4以降は廃止されています。
• 複数のクラスを同時に適用することで、異なるデバイスでのレイアウトを制御できます。
• 各クラスの幅は、12単位のグリッドシステムに基づいています。例えば、col-lg-4はLargeデバイスでのカラム幅が全体の1/3になります。

基本的な例

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">カラム1</div>
    <div class="col-lg-4 col-md-6 col-sm-12">カラム2</div>
    <div class="col-lg-4 col-md-12 col-sm-12">カラム3</div>
  </div>
</div>

• Smallデバイス（768px以上）
  3つのカラムがそれぞれ全幅になります。
• Mediumデバイス（992px以上）
  カラム1と2が同じ幅で、カラム3が全幅になります。
• Largeデバイス（1200px以上）
  3つのカラムが均等に配置されます。

異なる幅の例

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-8 col-sm-12">カラム1</div>
    <div class="col-lg-6 col-md-4 col-sm-12">カラム2</div>
  </div>
</div>

• Mediumデバイス
  カラム1が幅広く、カラム2が狭くなります。
• Largeデバイス
  カラム1と2が均等に配置されます。

オフセットの例

<div class="container">
  <div class="row">
    <div class="col-lg-offset-3 col-md-offset-2 col-sm-offset-0 col-lg-6 col-md-8 col-sm-12">カラム</div>
  </div>
</div>

• Smallデバイス
  カラムは通常の位置に配置されます。
• Mediumデバイス
  カラムが2つのカラム分の幅をスキップして配置されます。

ネストされたグリッドの例

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6">カラム1</div>
        <div class="col-lg-6">カラム2</div>
      </div>
    </div>
    <div class="col-lg-6">カラム3</div>
  </div>
</div>

• Largeデバイス
  カラム1と2がネストされたグリッドで配置され、カラム3が並列に配置されます。

Bootstrapのグリッドシステムの代替方法

Bootstrapのグリッドシステムは、レスポンシブデザインを実現するための強力なツールですが、他の方法も存在します。以下に、いくつかの代替方法を紹介します。

CSS Flexbox

• デメリット
  理解が難しい場合があり、ブラウザの互換性によっては注意が必要です。
• メリット
  柔軟性が高く、複雑なレイアウトも実現できます。
• 使用方法
  

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .column {
    flex: 0 0 auto;
    width: 33.33%; /* 3カラムの場合 */
  }
  

• 特徴
  柔軟なレイアウトを可能にするCSSのモジュールです。

CSS Grid Layout

• デメリット
  ブラウザのサポート状況によっては注意が必要です。
• メリット
  複雑なレイアウトを簡単に実現できます。
• 使用方法
  

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラムの場合 */
  }
  
  .item {
    /* カラムのスタイル */
  }
  

• 特徴
  2次元グリッドをベースとしたレイアウトシステムです。

JavaScriptライブラリ

• デメリット
  JavaScriptの知識が必要であり、パフォーマンスに影響を与える可能性があります。
• 例
  Masonry、Packery、Isotope
• 特徴
  JavaScriptを使用してレイアウトを制御するライブラリです。

手動によるレイアウト

• デメリット
  レスポンシブデザインの実現が困難であり、メンテナンスが大変です。
• メリット
  シンプルで理解しやすい方法です。
• 特徴
  CSSのみを使用して、個々の要素の幅や位置を指定します。