Bootstrapグリッドシステム：col-md-4、col-xs-1、col-lg-2の意味を徹底解説

2024-04-02

Bootstrapのグリッドシステムと「col-md-4」「col-xs-1」「col-lg-2」の意味

**「col-md-4」「col-xs-1」「col-lg-2」**のようなクラスは、このグリッドシステムで使用されます。これらのクラス名の数字は、各画面サイズにおけるカラム幅を表します。

例:

col-md-4 は、中画面（768px以上）で4分の1の幅の列を作成します。

つまり、これらの数字は、各画面サイズにおける列の幅を12分割した時の割合を表しています。

以下に、各クラス名の詳細な説明と、Bootstrapのグリッドシステムに関する参考資料を紹介します。

各クラス名の詳細

クラス名	適用される画面サイズ	カラム幅
`col-xs-1`	小画面（576px以下）	12分の1
`col-sm-2`	中小画面（576px～767px）	12分の2
`col-md-4`	中画面（768px～991px）	12分の4
`col-lg-2`	大画面（992px～1199px）	12分の2
`col-xl-3`	超大画面（1200px以上）	12分の3

上記の情報に加え、以下の点にも注意が必要です。

カラム数の合計は常に12である必要があります。
各画面サイズで異なるカラム幅を設定することができます。
**「col-」**という接頭辞の前に、画面サイズを表すプレフィックスが付きます。
**「-」**の後に続く数字は、12分割した時の割合を表します。

これらの点を理解すれば、Bootstrapのグリッドシステムを使って、画面サイズに応じて柔軟にレイアウトを構築することができます。

補足

Bootstrap 4では、上記に加えてcol-autoというクラスが追加されました。これは、コンテンツに合わせて自動的に幅を調整するカラムを作成します。
Bootstrap 5では、グリッドシステムがさらに改良されています。詳細については、Bootstrap 5の公式ドキュメントを参照してください。

以上、"css", "twitter-bootstrap", "twitter-bootstrap-3" に関連する "Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap" のプログラミングについて分かりやすく日本語で解説しました。

Bootstrapグリッドシステムのサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrapグリッドシステムサンプル</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Bootstrapグリッドシステムサンプル</h1>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <p>これは1列目のコンテンツです</p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <p>これは2列目のコンテンツです</p>
      </div>
      <div class="col-xs-12 col-md-4">
        <p>これは3列目のコンテンツです</p>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41J7OAXaAuT4EDY5SF0jxo6R/Cw793zfklc5RC9b054/wY" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjDFCOjicwo1+z2t" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZ8YY5tN8uNHmJYW35bC8IkCF1rT6yQJk3k+J9n74p0LTfpBo/kL92v1S" crossorigin="anonymous"></script>
</body>
</html>

このコードを実行すると、以下のようなレイアウトが表示されます。

小画面（576px以下）

[1列目]
[2列目]
[3列目]

中画面（576px～767px）

[1列目]
[2列目]

[1列目]
[2列目]
[3列目]

大画面（992px～1199px）

[1列目]
[2列目]
[3列目]

超大画面（1200px以上）

[1列目]
[2列目]
[3列目]

このサンプルコードを参考に、Bootstrapグリッドシステムを使ってさまざまなレイアウトを作成してみてください。

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

offset クラスは、カラムを左右に移動するために使用されます。

<div class="row">
  <div class="col-md-4 offset-md-4">
    <p>これは中央に配置されたコンテンツです</p>
  </div>
</div>

上記のコードは、中画面で4分の1の幅の列を中央に配置する例です。

<div class="row">
  <div class="col-md-4 order-md-1">
    <p>これは2番目の列に配置されたコンテンツです</p>
  </div>
  <div class="col-md-4 order-md-2">
    <p>これは1番目の列に配置されたコンテンツです</p>
  </div>
</div>

メディアクエリを使用すると、画面サイズごとに異なるレイアウトを設定することができます。

@media (max-width: 767px) {
  .col-sm-6 {
    width: 100%;
  }
}

上記のコードは、小画面（576px以下）で6分の1の幅の列を100%幅にする例です。

Flexbox

Bootstrap 4以降では、Flexboxを使用してグリッドレイアウトを作成することもできます。

<div class="row d-flex flex-wrap">
  <div class="col-md-4">
    <p>これは1列目のコンテンツです</p>
  </div>
  <div class="col-md-4">
    <p>これは2列目のコンテンツです</p>
  </div>
  <div class="col-md-4">
    <p>これは3列目のコンテンツです</p>
  </div>
</div>