Bootstrap自動レイアウト完全ガイド！.colで等幅カラムを素早く作る基本を初心者向けに解説
生徒
「Bootstrapの.colって書くだけで横に並ぶんですが、何が起きているんですか？」
先生
「それは自動レイアウトという仕組みで、幅を自動計算してくれているんです。」
生徒
「数字を指定していないのに、ちゃんと同じ幅になるのが不思議です。」
先生
「今日はその仕組みを、難しい計算なしで説明しますよ。」
1. 自動レイアウトとは何か
Bootstrapの自動レイアウトとは、列の数だけを書くだけで、横幅を自動的に均等に分けてくれる仕組みです。
本来であれば、横幅を計算して指定する必要がありますが、自動レイアウトではその作業が不要になります。
これは、ケーキを人数分に自動で切り分けてくれるようなイメージです。
2. .colだけで等幅になる理由
.colを使うと、Bootstrapが内部で12分割の仕組みを使い、列の数に応じて幅を割り当てます。
例えば、colが2つあれば6ずつ、3つあれば4ずつというように自動で計算されます。
<div class="container">
<div class="row">
<div class="col">左</div>
<div class="col">中央</div>
<div class="col">右</div>
</div>
</div>
3. 列の数を変えるだけでレイアウト変更
自動レイアウトの便利な点は、列を追加したり減らしたりするだけで、全体のバランスが自動調整されることです。
細かい数字を考えなくてよいので、初心者でも安心して使えます。
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
</div>
4. 数字付きcolとの違いを理解する
数字付きのcolは、幅を明確に指定したいときに使います。一方で、.colは自動調整に任せたいときに使います。
どちらが正しいということはなく、目的に応じて使い分けるのがポイントです。
<div class="container">
<div class="row">
<div class="col-8">広い</div>
<div class="col">残り</div>
</div>
</div>
5. 自動レイアウトとレスポンシブの関係
.colは、画面サイズが変わっても自動的に幅を再計算します。
そのため、スマートフォンでもパソコンでも、自然な横並びや縦並びが実現できます。
これにより、レスポンシブ対応がとても簡単になります。
6. ブレークポイントと組み合わせる考え方
.colは、ブレークポイントと組み合わせることもできます。
小さい画面では自動、大きい画面では幅指定、といった柔軟な設計が可能です。
<div class="container">
<div class="row">
<div class="col col-md-6">左</div>
<div class="col col-md-6">右</div>
</div>
</div>
7. 自動レイアウトが向いている場面
カード一覧やメニュー、簡単な情報ブロックなど、均等に並べたい場面では自動レイアウトが最適です。
管理画面や一覧ページなど、構造がシンプルな画面で特に力を発揮します。
8. 初心者が意識したい安全な使い方
最初は細かい指定をせず、.colだけで作ってみるのがおすすめです。
見た目に違和感が出た部分だけ、数字付きcolを追加して調整すると、失敗しにくくなります。
