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

生徒

「Bootstrapで画像を並べたんですけど、隣同士がくっつきすぎて窮屈に見えます。もっと隙間を空ける方法はありますか？」

先生

「それには『ガター』という機能を使います。グリッドで作ったブロック同士の『溝（みぞ）』を調整するための設定ですよ。」

生徒

「溝、ですか！縦だけとか横だけとか、自由に隙間の大きさを変えることもできるんですか？」

先生

「もちろんです！g-0からg-5までの数字や、gx、gyという便利な書き方を覚えるだけで、プロのような余白が作れるようになります。詳しく見ていきましょう！」

1. ガター（Gutter）とは？デザインの「ゆとり」を作る溝

Bootstrap（ブートストラップ）のガター（Gutter）とは、グリッドシステムで配置された列（カラム）と列の間にある「隙間」のことです。プログラミング未経験でパソコンに慣れていない方には、「道路の側溝（そっこう）」や、原稿用紙の「マス目とマス目の間のわずかな空間」をイメージしてもらうと分かりやすいでしょう。

もし、このガター（溝）がまったくないと、文字と文字、あるいは画像と画像がピッタリと密着してしまい、とても読みづらく、窮屈な印象を与えてしまいます。逆に、適切な隙間があることで、情報は整理され、ユーザーにとって心地よいデザインになります。この隙間の広さを自由自在にコントロールするのが、今回学ぶガターのクラスです。

2. 基本のクラス名と0から5までの数字の意味

Bootstrapでは、g-から始まるクラスを使ってガターの幅を指定します。この後ろにつく数字（0〜5）によって、隙間の大きさが変わります。

g-0： 隙間を完全になくします。画像同士をタイル状にピッタリ並べたい時に使います。
g-1： 非常に小さな隙間。
g-2： 少し小さめの隙間。
g-3： 標準的な隙間（Bootstrapのデフォルト設定に近い広さです）。
g-4： 広めの隙間。ゆったりしたデザインに。
g-5： かなり広い隙間。要素を大きく目立たせたい時に。

このクラスは、必ず row（行）という枠組みに対して指定します。中に入っている col（列）が、その指定に従って自動的に間隔を開けてくれる仕組みです。

3. 横方向だけ隙間を空けたい！gxクラスの使い方

「横に並んでいるブロックの間だけ隙間を空けて、上下はそのままにしたい」という場面があります。そんな時は gx（ジー・エックス）を使います。「x」は数学などで横軸を指す言葉ですが、ここでは「横（左右）」の隙間だと覚えてください。

例えば、画面を左右に分けている時、真ん中の境界線だけにゆとりを持たせたい場合に便利です。横の余白をしっかり取ることで、情報の区切りがはっきりして、パソコンの画面でも非常に見やすくなります。


<div class="container overflow-hidden">
    <div class="row gx-5">
        <div class="col-6">
            <div class="p-3 border bg-light">左側のコンテンツ（横に広い溝）</div>
        </div>
        <div class="col-6">
            <div class="p-3 border bg-light">右側のコンテンツ（横に広い溝）</div>
        </div>
    </div>
</div>

ブラウザ表示

4. 縦方向の段差を調整！gyクラスの活用術

スマートフォンでサイトを見ている時、パソコンでは横に並んでいたものが縦に積み重なることがあります。この時、上のブロックと下のブロックがくっついてしまうのを防ぐのが gy（ジー・ワイ）です。「y」は縦軸、つまり「上下」の隙間を指します。

特に「カード形式」のデザインを並べる時、スマホ画面で上下が密着していると、どこからどこまでが一つのまとまりか分からなくなってしまいます。gy-3 や gy-4 を設定しておくことで、画面サイズが変わって縦に並んだときも、自動的に綺麗な間隔が保たれるようになります。


<div class="container">
    <div class="row gy-4">
        <div class="col-12 col-md-6">
            <div class="p-3 border bg-warning">上のブロック（または左）</div>
        </div>
        <div class="col-12 col-md-6">
            <div class="p-3 border bg-warning">下のブロック（または右）</div>
        </div>
    </div>
</div>

ブラウザ表示

5. 縦横一気に設定！gクラスと複合的な使い分け

縦も横も、同じ幅の隙間を空けたい時は g-3 のように、xやyをつけないシンプルなクラスを使います。これが最も基本的で、手軽にレイアウトを整える方法です。

実務では、「横は標準（gx-3）でいいけど、縦はもっと広げたい（gy-5）」といったように、gxとgyを組み合わせて使うこともあります。このように細かく指定することで、特定のデバイスやデザインに合わせた絶妙なバランスを実現できます。パソコン初心者のうちは、まずは g-3 を基本として使い、物足りない時にgxやgyに切り替えるというステップが良いでしょう。

6. 注意点！ガターを使うときはoverflow-hiddenを忘れずに

ガターを使う際に一つだけ気をつけたい「パソコンの仕組み」上のルールがあります。Bootstrapのガターは、実は「マイナスの余白（ネガティブマージン）」という少し特殊な方法で隙間を作っています。そのため、時々画面の右側にほんの少しだけ「不要な横スクロール」が出てしまうことがあります。

これを防ぐためには、row を囲んでいる container などの親要素に overflow-hidden（オーバーフロー・ヒドゥン）というクラスをつけるのが定石です。これは「はみ出した部分は隠してね」という指示です。もしサイトを作っていて、なぜか画面が左右にグラグラ揺れるときは、この設定を確認してみましょう。

7. 隙間なしのタイルデザイン！g-0の魅力

あえて隙間を全く作らない g-0 も非常に使い道があります。例えば、ファッションサイトや写真ギャラリーのように、複数の画像をタイル状に敷き詰めたい時です。隙間がないことで画像同士が一体化し、モダンで洗練された印象になります。

ただし、文字が含まれるブロックで g-0 を使うときは注意が必要です。文字が枠線のギリギリまで来てしまうため、文字自体の内側に余白（パディング）を追加して、読みやすさを確保しましょう。ガターをなくす時は、その分だけ中身の調整が必要になるということを覚えておきましょう。


<div class="container">
    <p>隙間なし(g-0)で画像を並べる例：</p>
    <div class="row g-0">
        <div class="col-6">
            <img src="/img/sample150-100.jpg" class="img-fluid w-100" alt="見本1">
        </div>
        <div class="col-6">
            <img src="/img/sample150-100.jpg" class="img-fluid w-100" alt="見本2">
        </div>
    </div>
</div>

ブラウザ表示

8. 実務でのガター選びの基準

最後に、実際のウェブサイト制作ではどの数字が選ばれやすいか紹介します。一般的に g-3 や g-4 は、ニュースサイトやブログなど「情報をしっかり読ませたい」ページでよく使われます。適度な余白が、読者の目にかかる負担を減らしてくれるからです。

一方で、管理画面やデータが並ぶ複雑なサイトでは、一度にたくさんの情報を見せるために g-1 や g-2 といった狭いガターが選ばれることもあります。大切なのは「誰が、どんな目的でそのサイトを見るか」です。自分が作ったデザインを少し離れて眺めてみて、「ちょっと窮屈かな？」と感じたら数字を一つ大きくしてみる。その繰り返しの感覚が、デザインの上達に繋がります。