グリッドオプションの紹介 (col- col-sm- col-md- col-lg- の違い) - Bootstrap
Bootstrapのグリッドオプションについて紹介します。
Bootstrap5.x
クラス
グリッドの幅を指定するクラスには、col-(col-xs-) col-sm- col-md- col-lg- col-xl- col-xxl- の種類があります。横幅の種類と合わせて以下のクラスが用意されています。
| col- | col-sm- | col-md- | col-lg- | col-xl- | col-xxl- |
|---|
| 1 | col-1 | col-sm-1 | col-md-1 | col-lg-1 | col-xl-1 | col-xxl-1 |
| 2 | col-2 | col-sm-2 | col-md-2 | col-lg-2 | col-xl-2 | col-xxl-2 |
| 3 | col-3 | col-sm-3 | col-md-3 | col-lg-3 | col-xl-3 | col-xxl-3 |
| 4 | col-4 | col-sm-4 | col-md-4 | col-lg-4 | col-xl-4 | col-xxl-4 |
| 5 | col-5 | col-sm-5 | col-md-5 | col-lg-5 | col-xl-5 | col-xxl-5 |
| 6 | col-6 | col-sm-6 | col-md-6 | col-lg-6 | col-xl-6 | col-xxl-6 |
| 7 | col-7 | col-sm-7 | col-md-7 | col-lg-7 | col-xl-7 | col-xxl-7 |
| 8 | col-8 | col-sm-8 | col-md-8 | col-lg-8 | col-xl-8 | col-xxl-8 |
| 9 | col-9 | col-sm-9 | col-md-9 | col-lg-9 | col-xl-9 | col-xxl-9 |
| 10 | col-10 | col-sm-10 | col-md-10 | col-lg-10 | col-xl-10 | col-xxl-10 |
| 11 | col-11 | col-sm-11 | col-md-11 | col-lg-11 | col-xl-11 | col-xxl-11 |
| 12 | col-12 | col-sm-12 | col-md-12 | col-lg-12 | col-xl-12 | col-xxl-12 |
ブレークポイントは次の通り
| クラス | ブレークポイント | コンテナの幅 |
|---|
| col-nn | <576px | None(auto) |
| col-sm-nn | >=576px | 540px |
| col-md-nn | >=768px | 720px |
| col-lg-nn | >=992px | 960px |
| col-xl-nn | >=1200px | 1140px |
| col-xxl-nn | >=1400px | 1320px |
Bootstrap4.x
クラス
グリッドの幅を指定するクラスには、col- col-sm- col-md- col-lg- col-xl- の種類があります。横幅の種類と合わせて以下のクラスが用意されています。
| col- | col-sm- | col-md- | col-lg- | col-xl- |
|---|
| 1 | col-1 | col-sm-1 | col-md-1 | col-lg-1 | col-xl-1 |
| 2 | col-2 | col-sm-2 | col-md-2 | col-lg-2 | col-xl-2 |
| 3 | col-3 | col-sm-3 | col-md-3 | col-lg-3 | col-xl-3 |
| 4 | col-4 | col-sm-4 | col-md-4 | col-lg-4 | col-xl-4 |
| 5 | col-5 | col-sm-5 | col-md-5 | col-lg-5 | col-xl-5 |
| 6 | col-6 | col-sm-6 | col-md-6 | col-lg-6 | col-xl-6 |
| 7 | col-7 | col-sm-7 | col-md-7 | col-lg-7 | col-xl-7 |
| 8 | col-8 | col-sm-8 | col-md-8 | col-lg-8 | col-xl-8 |
| 9 | col-9 | col-sm-9 | col-md-9 | col-lg-9 | col-xl-9 |
| 10 | col-10 | col-sm-10 | col-md-10 | col-lg-10 | col-xl-10 |
| 11 | col-11 | col-sm-11 | col-md-11 | col-lg-11 | col-xl-11 |
| 12 | col-12 | col-sm-12 | col-md-12 | col-lg-12 | col-xl-12 |
ブレークポイント
グリッドオプション(xs, sm, md, lg)のブレークポイントは以下の通りです。
コンテナの最大値以下になるとグリッドの横方向の段組みが解除され、縦方向に整列します。
| クラス | ブレークポイント | コンテナの幅 |
|---|
| col-nn | <576px | None(auto) |
| col-sm-nn | >=576px | 540px |
| col-md-nn | >=768px | 720px |
| col-lg-nn | >=992px | 960px |
| col-xl-nn | >=1200px | 1140px |
プログラム例
コード
下記のコードを記述します。
#column1{
background-color: #ffa2a2;
}
#column2 {
background-color: #ffa663;
}
#column3 {
background-color: #ffe970;
}
#column4 {
background-color: #c8ef64;
}
#column5 {
background-color: #85f68b;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="SimpleGridOption.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" id="column1">項目1</div>
<div class="col-md-2" id="column2">項目2</div>
<div class="col-md-2" id="column3">項目3</div>
<div class="col-md-2" id="column4">項目4</div>
<div class="col-md-2" id="column5">項目5</div>
</div>
</div>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
"項目1"の幅が他の列の幅の2倍で表示されています。"項目2" "項目3" "項目4" "項目5" の幅は同じで、"項目1"の幅の半分の幅で表示されています。
Webブラウザのウィンドウ幅を縮めます。それぞれの列の幅の比率は保たれたまま幅が短くなります。
ウィンドウの幅が768ピクセルより狭くなると段組みが解除され、項目が縦に並んで表示されます。
Bootstrap3.x
クラス
グリッドの幅を指定するクラスには、col- col-xs- col-sm- col-md- col-lg- の種類があります。横幅の種類と合わせて以下のクラスが用意されています。
| col- | col-xs- | col-sm- | col-md- | col-lg- |
|---|
| 1 | col-1 | col-xs-1 | col-sm-1 | col-md-1 | col-lg-1 |
| 2 | col-2 | col-xs-2 | col-sm-2 | col-md-2 | col-lg-2 |
| 3 | col-3 | col-xs-3 | col-sm-3 | col-md-3 | col-lg-3 |
| 4 | col-4 | col-xs-4 | col-sm-4 | col-md-4 | col-lg-4 |
| 5 | col-5 | col-xs-5 | col-sm-5 | col-md-5 | col-lg-5 |
| 6 | col-6 | col-xs-6 | col-sm-6 | col-md-6 | col-lg-6 |
| 7 | col-7 | col-xs-7 | col-sm-7 | col-md-7 | col-lg-7 |
| 8 | col-8 | col-xs-8 | col-sm-8 | col-md-8 | col-lg-8 |
| 9 | col-9 | col-xs-9 | col-sm-9 | col-md-9 | col-lg-9 |
| 10 | col-10 | col-xs-10 | col-sm-10 | col-md-10 | col-lg-10 |
| 11 | col-11 | col-xs-11 | col-sm-11 | col-md-11 | col-lg-11 |
| 12 | col-12 | col-xs-12 | col-sm-12 | col-md-12 | col-lg-12 |
ブレークポイント
グリッドオプション(xs, sm, md, lg)のブレークポイントは以下の通りです。
コンテナの最大値以下になるとグリッドの横方向の段組みが解除され、縦方向に整列します。
| クラス | デバイスの幅 | コンテナの最大幅 |
|---|
| col-xs-* | <768px | None(auto) |
| col-sm-* | >=768px | 750px |
| col-md-* | >=992px | 970px |
| col-lg-* | >=1200px | 1170px |
プログラム例
コード
下記のコードを記述します。
#column1{
background-color: #ffa2a2;
}
#column2 {
background-color: #ffa663;
}
#column3 {
background-color: #ffe970;
}
#column4 {
background-color: #c8ef64;
}
#column5 {
background-color: #85f68b;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Content/bootstrap.css" />
<script src="Scripts/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="SimpleGridOption.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" id="column1">項目1</div>
<div class="col-md-2" id="column2">項目2</div>
<div class="col-md-2" id="column3">項目3</div>
<div class="col-md-2" id="column4">項目4</div>
<div class="col-md-2" id="column5">項目5</div>
</div>
</div>
</body>
</html>
表示結果 : col-* の場合
コンテナ部分のタグが下記の場合の表示結果です。
<div class="container-fluid">
<div class="row">
<div class="col-4" id="column1">項目1</div>
<div class="col-2" id="column2">項目2</div>
<div class="col-2" id="column3">項目3</div>
<div class="col-2" id="column4">項目4</div>
<div class="col-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
Webブラウザのウィンドウ幅を縮めます。それぞれの列の幅の比率は保たれたまま幅が短くなります。
幅が狭くなっても比率は維持された状態のままです。
表示結果 : col-sm-* の場合
コンテナ部分のタグが下記の場合の表示結果です。
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="column1">項目1</div>
<div class="col-sm-2" id="column2">項目2</div>
<div class="col-sm-2" id="column3">項目3</div>
<div class="col-sm-2" id="column4">項目4</div>
<div class="col-sm-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
ウィンドウの幅を縮めると、枠の幅の比率が維持されたまま横幅が短くなります。
さらに横幅を縮め、横幅が540ピクセル以下になると横方向の段組みが解除され枠が縦に整列します。
表示結果 : col-md-* の場合
コンテナ部分のタグが下記の場合の表示結果です。
<div class="container-fluid">
<div class="row">
<div class="col-md-4" id="column1">項目1</div>
<div class="col-md-2" id="column2">項目2</div>
<div class="col-md-2" id="column3">項目3</div>
<div class="col-md-2" id="column4">項目4</div>
<div class="col-md-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
ウィンドウの幅を縮めると、枠の幅の比率が維持されたまま横幅が短くなります。
ウィンドウの幅が720ピクセル以下になると、横方向の段組みが解除され、枠が縦方向に整列します。
表示結果 : col-lg-* の場合
コンテナ部分のタグが下記の場合の表示結果です。
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" id="column1">項目1</div>
<div class="col-lg-2" id="column2">項目2</div>
<div class="col-lg-2" id="column3">項目3</div>
<div class="col-lg-2" id="column4">項目4</div>
<div class="col-lg-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
ウィンドウの幅を縮めると、枠の幅の比率が維持されたまま横幅が短くなります。
ウィンドウの幅が960ピクセル以下になると、横方向の段組みが解除され、枠が縦方向に整列します。
表示結果 : col-xl-* の場合
コンテナ部分のタグが下記の場合の表示結果です。
<div class="container-fluid">
<div class="row">
<div class="col-xl-4" id="column1">項目1</div>
<div class="col-xl-2" id="column2">項目2</div>
<div class="col-xl-2" id="column3">項目3</div>
<div class="col-xl-2" id="column4">項目4</div>
<div class="col-xl-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
ウィンドウの幅を縮めると、枠の幅の比率が維持されたまま横幅が短くなります。
ウィンドウの幅が1140ピクセル以下になると、横方向の段組みが解除され、枠が縦方向に整列します。
複数のグリッドオプションを混ぜて記述した場合の動作
コンテナ部分のタグを下記にした場合の表示結果です。
smとmdの2種類のグリッドオプションが混ざった記述になっています。
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="column1">項目1</div>
<div class="col-md-2" id="column2">項目2</div>
<div class="col-md-2" id="column3">項目3</div>
<div class="col-md-2" id="column4">項目4</div>
<div class="col-md-2" id="column5">項目5</div>
</div>
</div>
Webブラウザでページを表示します。下図のページが表示されます。
ウィンドウの幅を縮めると、枠の幅の比率が維持されたまま横幅が短くなります。
mdのグリッドオプションの閾値 720ピクセル以下になると段組みが右側の4列の段組みが解除され、縦に並びます。一方でいちばん左の列はまだ段組みは解除されないため、ウィンドウ幅の3分の1の幅の枠としてページの左に表示された状態となります。
さらにウィンドウの幅を縮め、ページの幅が540ピクセル以下になると、一番左の列も段組みが解除されすべての枠が縦に整列した状態で表示されます。
グリッドオプションの違いによる動作の違いが確認できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
