Bootstrapの自動レイアウトと比率指定を完全解説！.colと.col-6の使い分けを初心者向けにやさしく説明
生徒
「Bootstrapでレイアウトを作るときに、.colと.col-6って出てくるんですが、何が違うんですか？」
先生
「どちらも横並びのレイアウトを作るための仕組みですが、考え方が少し違います。画面の幅を自動で分けたいか、割合を決めたいかで使い分けます。」
生徒
「パソコンを触ったことがなくても理解できますか？」
先生
「もちろんです。箱と机のたとえで、ゆっくり説明していきます。」
1. Bootstrapのレイアウトとは何か
Bootstrapは、Webページの見た目を整えるための道具箱のようなものです。 その中でもレイアウトは、文字や画像をどこに配置するかを決める大切な仕組みです。 レイアウトと聞くと難しく感じますが、机の上にノートや本を並べる感覚に近いです。 Bootstrapでは、画面を横に区切って、その中に内容を入れていきます。 この横の区切りを作るために使うのが、コンテナ、行、列という考え方です。
列を表すクラスとしてよく使われるのが、.colと.col-6です。 どちらも同じ列ですが、幅の決め方が違います。
2. 自動レイアウトで使う.colの考え方
.colは、自動レイアウトと呼ばれる仕組みです。 自動という言葉の通り、細かい計算をしなくても、Bootstrapがいい感じに幅を分けてくれます。 たとえば、横に箱を二つ並べたいとき、.colを二つ置くだけで、画面を半分ずつ使って表示されます。
これは、机の上に同じ大きさの箱を置いて、空いているスペースを均等に使うイメージです。 初心者の方や、まだ画面の設計に慣れていない場合は、まず.colを使うと失敗しにくいです。
<div class="container">
<div class="row">
<div class="col">左のエリア</div>
<div class="col">右のエリア</div>
</div>
</div>
この例では、左右が自動的に同じ幅になります。 数字を覚える必要がないため、プログラミング未経験の方でも安心です。
3. 比率を決めて使う.col-6の考え方
次に、.col-6です。 Bootstrapでは、画面の横幅を十二個に分けて考えます。 .col-6は、その十二個のうち六個分を使う、つまり半分を使うという意味です。
これは、ピザを十二等分して、そのうち六切れを取るイメージです。 左は広く、右は狭くしたい、といったように、見た目をはっきり決めたいときに便利です。
<div class="container">
<div class="row">
<div class="col-6">左の広いエリア</div>
<div class="col-6">右の広いエリア</div>
</div>
</div>
数字を指定することで、デザインを自分でコントロールできます。 ただし、数字の意味を理解していないと、思った通りにならないこともあります。
4. .colと.col-6をどう使い分けるか
では、どちらを使えばよいのでしょうか。 目安として、ざっくり並べたいときは.col、形をきちんと決めたいときは.col-6を使います。 初めてBootstrapを触る方は、まず.colで感覚をつかむのがおすすめです。
ブログ記事の一覧や、同じ大きさのカードを並べる場合は、自動レイアウトが向いています。 逆に、文章エリアと画像エリアで幅を変えたい場合は、比率指定が役立ちます。
Bootstrapのコンテナとレイアウトの基本を理解することで、Webページ作成がぐっと楽になります。 難しい計算をしなくても、画面に合わせて整えてくれるのがBootstrapの強みです。
まとめ
（振り返りのまとめ）
Bootstrapの自動レイアウトと比率指定を完全解説！.colと.col-6の使い分けを初心者向けにやさしく説明
生徒
「Bootstrapでレイアウトを作るときに、.colと.col-6って出てくるんですが、何が違うんですか？」
先生
「どちらも横並びのレイアウトを作るための仕組みですが、考え方が少し違います。画面の幅を自動で分けたいか、割合を決めたいかで使い分けます。」
生徒
「パソコンを触ったことがなくても理解できますか？」
先生
「もちろんです。箱と机のたとえで、ゆっくり説明していきます。」
1. Bootstrapのレイアウトとは何か
Bootstrapは、Webページの見た目を整えるための道具箱のようなものです。 その中でもレイアウトは、文字や画像をどこに配置するかを決める大切な仕組みです。 レイアウトと聞くと難しく感じますが、机の上にノートや本を並べる感覚に近いです。 Bootstrapでは、画面を横に区切って、その中に内容を入れていきます。 この横の区切りを作るために使うのが、コンテナ、行、列という考え方です。
列を表すクラスとしてよく使われるのが、.colと.col-6です。 どちらも同じ列ですが、幅の決め方が違います。
2. 自動レイアウトで使う.colの考え方
.colは、自動レイアウトと呼ばれる仕組みです。 自動という言葉の通り、細かい計算をしなくても、Bootstrapがいい感じに幅を分けてくれます。 たとえば、横に箱を二つ並べたいとき、.colを二つ置くだけで、画面を半分ずつ使って表示されます。
これは、机の上に同じ大きさの箱を置いて、空いているスペースを均等に使うイメージです。 初心者の方や、まだ画面の設計に慣れていない場合は、まず.colを使うと失敗しにくいです。
<div class="container">
<div class="row">
<div class="col">左のエリア</div>
<div class="col">右のエリア</div>
</div>
</div>
この例では、左右が自動的に同じ幅になります。 数字を覚える必要がないため、プログラミング未経験の方でも安心です。
3. 比率を決めて使う.col-6の考え方
次に、.col-6です。 Bootstrapでは、画面の横幅を十二個に分けて考えます。 .col-6は、その十二個のうち六個分を使う、つまり半分を使うという意味です。
これは、ピザを十二等分して、そのうち六切れを取るイメージです。 左は広く、右は狭くしたい、といったように、見た目をはっきり決めたいときに便利です。
<div class="container">
<div class="row">
<div class="col-6">左の広いエリア</div>
<div class="col-6">右の広いエリア</div>
</div>
</div>
数字を指定することで、デザインを自分でコントロールできます。 ただし、数字の意味を理解していないと、思った通りにならないこともあります。
4. .colと.col-6をどう使い分けるか
では、どちらを使えばよいのでしょうか。 目安として、ざっくり並べたいときは.col、形をきちんと決めたいときは.col-6を使います。 初めてBootstrapを触る方は、まず.colで感覚をつかむのがおすすめです。
ブログ記事の一覧や、同じ大きさのカードを並べる場合は、自動レイアウトが向いています。 逆に、文章エリアと画像エリアで幅を変えたい場合は、比率指定が役立ちます。
Bootstrapのコンテナとレイアウトの基本を理解することで、Webページ作成がぐっと楽になります。 難しい計算をしなくても、画面に合わせて整えてくれるのがBootstrapの強みです。
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Bootstrapの.colと.col-6の違いが初心者でもすぐ理解できる覚え方はありますか？
Bootstrapの.colは自動レイアウト、.col-6は横幅を数字で指定するレイアウトです。.colはBootstrapが自動で均等に幅を調整してくれるので、HTMLやCSSを学び始めた初心者におすすめです。.col-6は12分割グリッドシステムの6個分を使うため、Webデザインやレスポンシブデザインを細かく調整したいときに便利です。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
