Bootstrapグリッドシステム完全解説！オフセット（offset）で左右に余白を作る方法【初心者向け】

オフセット（.offset-*）で左右にスペースを空ける配置テクニック

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

生徒

「Bootstrapのグリッドで、要素をちょっと右にずらしたいんですが、どうすればいいですか？」

先生

「そのときに使うのが、offsetという仕組みです。左右に見えない空白を作れますよ。」

生徒

「空白を作るだけの仕組みがあるんですか？」

先生

「はい。レイアウトを整えるために、とてもよく使われています。一緒に基礎から見ていきましょう。」

1. Bootstrapのグリッドシステムとオフセットとは？

Bootstrapのグリッドシステムとは、画面を横に12個のマスに分けて考えるレイアウトの仕組みです。この12分割の考え方を使うことで、画面サイズが変わっても整った配置を作れます。

オフセットとは、その12分割のうち、左側に「使わないマス」をあえて作ることで、要素を右にずらす方法です。見た目には何も表示されませんが、配置を調整するための大切な空白です。

2. オフセットは「見えない空席」と考えると分かりやすい

オフセットは、電車の指定席で「空いている席を確保して座る位置をずらす」イメージに近いです。自分は座らないけれど、場所は確保されている状態です。

Bootstrapでは、offset-数字という形で、左側に何マス分の空席を作るか指定します。例えば offset-3 は、左に3マス分の空白を作るという意味になります。

3. offsetの基本的な書き方を覚えよう

オフセットは、colクラスと一緒に使います。数字は12分割の中で考えます。


<div class="container">
    <div class="row">
        <div class="col-6 offset-3 bg-info">
            真ん中に配置されたコンテンツ
        </div>
    </div>
</div>

ブラウザ表示

この例では、幅6マスの要素を、左に3マス空けて配置しています。結果として、画面の中央に表示されます。

4. ブレークポイント付きoffsetで画面サイズに対応する

Bootstrapでは、画面の大きさに応じてレイアウトを変えられます。これをブレークポイントと呼びます。

offsetにも同じ考え方があり、画面サイズごとに空白の量を変えられます。


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 offset-md-3 bg-info">
            画面サイズで位置が変わる要素
        </div>
    </div>
</div>

ブラウザ表示

小さい画面では横いっぱいに表示され、大きい画面では中央に寄るようになります。スマートフォンとパソコンで見え方を変えたいときに便利です。

5. offsetを使った左右バランスの整え方

オフセットは、中央寄せだけでなく、左右のバランスを整えるためにも使えます。たとえば、片側に余白を作ってデザインを落ち着かせる場合です。


<div class="container">
    <div class="row">
        <div class="col-4 offset-2 bg-info">
            左に余白を持たせたボックス
        </div>
    </div>
</div>

ブラウザ表示

このように、offsetを使うと、デザインに余裕を持たせた配置が簡単に作れます。

6. 複数カラムとoffsetの組み合わせ例

複数の要素が並ぶ場合でも、offsetは使えます。ただし、合計が12を超えないように注意します。


<div class="container">
    <div class="row">
        <div class="col-3 offset-1 bg-info">メニュー</div>
        <div class="col-6 bg-primary">メインコンテンツ</div>
    </div>
</div>

ブラウザ表示

このように、左側に少し余白を作ることで、全体のレイアウトが読みやすくなります。