Bootstrap固定比率カラム完全ガイド！.col-6・.col-md-4の使い方とベストプラクティスを初心者向けに解説

固定比率のカラムを作る（.col-6・.col-md-4 など）具体例とベストプラクティス

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで.col-6って書くと、ちょうど半分になるのはなぜですか？」

先生

「Bootstrapは画面を12個に分けて考えていて、そのうちの6個を使っているからです。」

生徒

「じゃあ.col-md-4は、もっと細かい指定なんですか？」

先生

「画面サイズごとに割合を変えるための指定ですね。順番に見ていきましょう。」

1. 固定比率のカラムとは何か

固定比率のカラムとは、画面の横幅をあらかじめ決められた割合で分けるレイアウト方法です。

Bootstrapでは画面全体を12分割して考えるため、6なら半分、4なら3分の1というように直感的に指定できます。

ピザを12切れに分けて、何切れ取るかを決めるイメージに近いです。

2. .col-6の基本的な使い方

.col-6は、画面をちょうど左右半分に分けたいときによく使われます。

ログイン画面や、左右に情報を並べたいときに便利です。


<div class="container">
    <div class="row">
        <div class="col-6">左側</div>
        <div class="col-6">右側</div>
    </div>
</div>

ブラウザ表示

3. 数字の合計が12になる理由

Bootstrapのグリッドは、必ず12を基準に考えます。

col-4とcol-8を組み合わせると、4と8で合計12になり、横幅いっぱいに並びます。

もし合計が12を超えると、自動的に次の行に回り込みます。


<div class="container">
    <div class="row">
        <div class="col-4">小</div>
        <div class="col-8">大</div>
    </div>
</div>

ブラウザ表示

4. .col-md-4で画面サイズごとに切り替える

.col-md-4は、中くらいの画面以上で3分の1幅になる指定です。

スマートフォンでは縦並び、パソコンでは横並びにしたいときによく使われます。


<div class="container">
    <div class="row">
        <div class="col-12 col-md-4">メニュー</div>
        <div class="col-12 col-md-8">内容</div>
    </div>
</div>

ブラウザ表示

5. 固定比率と自動レイアウトの使い分け

固定比率は、見た目をしっかり決めたいときに向いています。

一方で、均等に並べたいだけの場合は自動レイアウトのほうが簡単です。

まず固定比率で形を作り、細かい部分だけ自動に任せると失敗しにくくなります。

6. 初心者がつまずきやすいポイント

よくある間違いは、rowを忘れてしまうことです。

rowがないと、colが正しく横並びになりません。

container、row、colの順番は必ず守るようにしましょう。

7. 管理画面でよく使われる固定比率例

管理画面では、左にメニュー、右にメイン画面という構成が多く使われます。

その場合、col-3とcol-9、またはcol-md-2とcol-md-10などが定番です。


<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">サイドメニュー</div>
        <div class="col-md-9">メイン画面</div>
    </div>
</div>

ブラウザ表示